Fix DOMPurify usage. To include this dependency in skillmap, I created a new pxtrcdeps (pxt react common dependencies) min.js file which includes (for now) just the DOMPurify code. Then I added a reference to it in skillmap.

Author: thsparks

cli/cli.ts

@@ -2170,6 +2170,7 @@ function buildReactAppAsync(app: string, parsed: commandParser.ParsedCommand, op
 
             nodeutil.cp("targetconfig.json", `${appRoot}/public/blb`);
             nodeutil.cp("node_modules/pxt-core/built/pxtlib.js", `${appRoot}/public/blb`);
+            nodeutil.cp("node_modules/pxt-core/built/web/pxtrcdeps.js", `${appRoot}/public/blb`);
             if (opts.includePxtSim) {
                 nodeutil.cp("node_modules/pxt-core/built/pxtsim.js", `${appRoot}/public/blb`);
                 nodeutil.cp("node_modules/pxt-core/built/web/worker.js", `${appRoot}/public/blb`);

gulpfile.js

@@ -102,6 +102,13 @@ const buildpxtjs = () => gulp.src([
     `))
     .pipe(gulp.dest("built"));
 
+const pxtrcdeps = () => gulp.src([
+    "node_modules/dompurify/dist/purify.min.js",
+])
+    .pipe(concat("pxtrcdeps.js"))
+    .pipe(gulp.dest("built/web"));
+
+
 const copySubappsConfig = () => gulp.src("cli/webapps-config.json")
     .pipe(gulp.dest("built"));
 
@@ -122,7 +129,7 @@ function initWatch() {
         gulp.parallel(pxtblocks, pxteditor, pxtservices),
         gulp.parallel(pxtrunner, cli, pxtcommon),
         gulp.parallel(updatestrings, browserifyEmbed),
-        gulp.parallel(pxtjs, pxtdts, pxtapp, pxtworker, pxtembed),
+        gulp.parallel(pxtjs, pxtdts, pxtapp, pxtworker, pxtembed, pxtrcdeps),
         targetjs,
         reactCommon,
         webapp,
@@ -547,7 +554,7 @@ function createWebappTasks(root, outname) {
                         .pipe(concat(`${outname}.html`))
                         .pipe(gulp.dest("webapp/public")));
 
-    const result = gulp.series(cleanWebapp, buildWebapp, gulp.series(copyWebappCss, copyWebappJs, copyWebappHtml));
+    const result = gulp.series(cleanWebapp, pxtrcdeps, buildWebapp, gulp.series(copyWebappCss, copyWebappJs, copyWebappHtml));
 
     exports[outname] = result;
 
@@ -748,7 +755,7 @@ const buildAll = gulp.series(
     gulp.parallel(pxteditor, pxtblocks, pxtservices),
     gulp.parallel(pxtrunner, cli, pxtcommon),
     browserifyEmbed,
-    gulp.parallel(pxtjs, pxtdts, pxtapp, pxtworker, pxtembed),
+    gulp.parallel(pxtjs, pxtdts, pxtapp, pxtworker, pxtembed, pxtrcdeps),
     targetjs,
     reactCommon,
     gulp.parallel(buildcss, buildSVGIcons),

react-common/components/theming/themeManager.ts

@@ -108,8 +108,7 @@ export function getFullColorThemeCss(theme: pxt.ColorThemeInfo) {
     }
 
     // Sanitize the CSS
-    // TODO thsparks - get this working in skillmap somehow...
-    // css = DOMPurify.sanitize(css);
+    css = DOMPurify.sanitize(css);
 
     return css;
 }

skillmap/public/index.html

@@ -17,6 +17,7 @@
     <!-- target.js is generated by the CLI -->
     <script type="text/javascript" src="/blb/target.js"></script>
     <script type="text/javascript" src="/blb/pxtlib.js"></script>
+    <script type="text/javascript" src="/blb/pxtrcdeps.js"></script>
 
     <div id="root"></div>