feat(Selectors): Generate PrismJS compatible code selectors

stencila · Feb 27, 2020 · 5f34f55 · 5f34f55
1 parent 9b03044
commit 5f34f55
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/src/scripts/selectors.ts b/src/scripts/selectors.ts
@@ -58,13 +58,23 @@ const generateSelectors = async (): Promise<void> => {
   const rootSelectorCss = `@custom-selector :--root [${attr}='${value}'];`
   const rootSelectorJs = `case ":--root": return "[${attr}='${value}']"`
 
+  // Add an additional `[class*=language-]` qualified selector to Code nodes, to math PrismJS’s CSS specificity and
+  // allow styling tokenized elements.
+  const prismCompatSelector = (itemtype: string, schemaURL: string): string => {
+    const selector = `[itemtype~='${schemaURL}']`
+
+    return itemtype.toLowerCase().includes('code')
+      ? `@custom-selector :--${itemtype} ${selector}, ${selector}[class*=language-];`
+      : `@custom-selector :--${itemtype} ${selector};`
+  }
+
   const types = await jsonSchemaTypes()
   const [typeSelectorsCss, typeSelectorsJs] = types
     .map(type => {
       const itemtype = microdataItemtype(type as keyof Types)
       return itemtype !== undefined
         ? [
-            `@custom-selector :--${type} [itemtype~='${itemtype}'];`,
+            prismCompatSelector(type, itemtype),
             `case ":--${type}": return "[itemtype~='${itemtype}']"`
           ]
         : undefined
@@ -82,6 +92,7 @@ const generateSelectors = async (): Promise<void> => {
     )
 
   const props = await jsonSchemaProperties()
+
   const propSelectors = Object.entries(props)
     .map(
       ([name, prop]): Record<string, string> => {
@@ -111,9 +122,11 @@ const generateSelectors = async (): Promise<void> => {
       }
       return prev
     }, {})
+
   const propSelectorsCss = Object.entries(propSelectors).map(
     ([name, selectors]) => `@custom-selector :--${name} ${selectors};`
   )
+
   const propSelectorsJs = Object.entries(propSelectors).map(
     ([name, selectors]) => `case ":--${name}": return "${selectors}"`
   )

diff --git a/src/selectors.css b/src/selectors.css
@@ -17,12 +17,12 @@
 @custom-selector :--Brand [itemtype~='http://schema.org/Brand'];
 @custom-selector :--Cite [itemtype~='http://schema.stenci.la/Cite'];
 @custom-selector :--CiteGroup [itemtype~='http://schema.stenci.la/CiteGroup'];
-@custom-selector :--Code [itemtype~='http://schema.stenci.la/Code'];
-@custom-selector :--CodeBlock [itemtype~='http://schema.stenci.la/CodeBlock'];
-@custom-selector :--CodeChunk [itemtype~='http://schema.stenci.la/CodeChunk'];
-@custom-selector :--CodeError [itemtype~='http://schema.stenci.la/CodeError'];
-@custom-selector :--CodeExpression [itemtype~='http://schema.stenci.la/CodeExpression'];
-@custom-selector :--CodeFragment [itemtype~='http://schema.stenci.la/CodeFragment'];
+@custom-selector :--Code [itemtype~='http://schema.stenci.la/Code'], [itemtype~='http://schema.stenci.la/Code'][class*=language-];
+@custom-selector :--CodeBlock [itemtype~='http://schema.stenci.la/CodeBlock'], [itemtype~='http://schema.stenci.la/CodeBlock'][class*=language-];
+@custom-selector :--CodeChunk [itemtype~='http://schema.stenci.la/CodeChunk'], [itemtype~='http://schema.stenci.la/CodeChunk'][class*=language-];
+@custom-selector :--CodeError [itemtype~='http://schema.stenci.la/CodeError'], [itemtype~='http://schema.stenci.la/CodeError'][class*=language-];
+@custom-selector :--CodeExpression [itemtype~='http://schema.stenci.la/CodeExpression'], [itemtype~='http://schema.stenci.la/CodeExpression'][class*=language-];
+@custom-selector :--CodeFragment [itemtype~='http://schema.stenci.la/CodeFragment'], [itemtype~='http://schema.stenci.la/CodeFragment'][class*=language-];
 @custom-selector :--Collection [itemtype~='http://schema.org/Collection'];
 @custom-selector :--ConstantValidator [itemtype~='http://schema.stenci.la/ConstantValidator'];
 @custom-selector :--ContactPoint [itemtype~='http://schema.org/ContactPoint'];
@@ -68,7 +68,7 @@
 @custom-selector :--SoftwareApplication [itemtype~='http://schema.org/SoftwareApplication'];
 @custom-selector :--SoftwareEnvironment [itemtype~='http://schema.stenci.la/SoftwareEnvironment'];
 @custom-selector :--SoftwareSession [itemtype~='http://schema.stenci.la/SoftwareSession'];
-@custom-selector :--SoftwareSourceCode [itemtype~='http://schema.org/SoftwareSourceCode'];
+@custom-selector :--SoftwareSourceCode [itemtype~='http://schema.org/SoftwareSourceCode'], [itemtype~='http://schema.org/SoftwareSourceCode'][class*=language-];
 @custom-selector :--StringValidator [itemtype~='http://schema.stenci.la/StringValidator'];
 @custom-selector :--Strong [itemtype~='http://schema.stenci.la/Strong'];
 @custom-selector :--Subscript [itemtype~='http://schema.stenci.la/Subscript'];