fix: parse ::directives correctly (#41186)

tools/challenge-parser/parser/index.js

@@ -3,6 +3,7 @@ const remark = require('remark-parse');
 const directive = require('remark-directive');
 const frontmatter = require('remark-frontmatter');
 const addTests = require('./plugins/add-tests');
+const restoreDirectives = require('./plugins/restore-directives');
 const replaceImports = require('./plugins/replace-imports');
 const addFrontmatter = require('./plugins/add-frontmatter');
 const addText = require('./plugins/add-text');
@@ -33,14 +34,18 @@ const processor = unified()
   // ::use{component="Script"}
   // appears.
   .use(replaceImports)
-  // the final five plugins insert content into file.data
-  .use(addText, ['description', 'instructions'])
+  // the final five 'add' plugins insert content into file.data
   // TODO: rename test->hint everywhere? It should make things easier to reason
   // about.
-  .use(addTests)
-  .use(addVideoQuestion)
   .use(addSeed)
-  .use(addSolution);
+  .use(addSolution)
+  // the directives will have been parsed and used by this point, any remaining
+  // 'directives' will be from text like the css selector :root. These should be
+  // converted back to text before they're added to the challenge object.
+  .use(restoreDirectives)
+  .use(addVideoQuestion)
+  .use(addTests)
+  .use(addText, ['description', 'instructions']);
 
 exports.parseMD = function parseMD(filename) {
   return new Promise((resolve, reject) => {