feat(Selectors): Generate utility selectors for selecting element groups

stencila · Feb 27, 2020 · 49f3d38 · 49f3d38
1 parent 1317b7c
commit 49f3d38
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 0 deletions.
diff --git a/src/scripts/selectors.ts b/src/scripts/selectors.ts
@@ -131,6 +131,36 @@ const generateSelectors = async (): Promise<void> => {
     ([name, selectors]) => `case ":--${name}": return "${selectors}"`
   )
 
+  // Generate some utility selector groups for more ergonomic theme authoring
+  const listTypes = [
+    ':--Article:--root > :--affiliations',
+    ':--Collection',
+    ':--List',
+    ':--references > ol'
+  ]
+
+  const codeBlockTypes = [':--CodeBlock', ':--CodeChunk']
+
+  const codeTypes = [
+    ...codeBlockTypes,
+    ':--Code',
+    ':--CodeError',
+    ':--CodeExpression',
+    ':--CodeFragment',
+    ':--SoftwareSourceCode'
+  ]
+
+  const mediaTypes = [
+    ':--CodeBlock',
+    ':--CodeChunk',
+    ':--Datatable',
+    ':--Figure',
+    ':--ImageObject',
+    ':--MediaObject',
+    ':--Table',
+    ':--VideoObject'
+  ]
+
   const header = `/* Generated by ${path.basename(__filename)}. Do not edit. */`
 
   const css = `${header}
@@ -140,6 +170,7 @@ const generateSelectors = async (): Promise<void> => {
  */
 ${rootSelectorCss}
 
+
 /**
  * Type selectors
  */
@@ -149,6 +180,16 @@ ${typeSelectorsCss.join('\n')}
  * Property selectors
  */
 ${propSelectorsCss.join('\n')}
+
+
+/**
+ * Group element selectors
+ */
+@custom-selector :--ListTypes ${listTypes.join(',')};
+@custom-selector :--CodeBlockTypes ${codeBlockTypes.join(',')};
+@custom-selector :--CodeTypes ${codeTypes.join(',')};
+@custom-selector :--MediaTypes ${mediaTypes.join(',')};
+
 `
   fs.writeFile(cssPath, css, () => css)
 

diff --git a/src/selectors.css b/src/selectors.css
@@ -5,6 +5,7 @@
  */
 @custom-selector :--root [data-itemscope='root'];
 
+
 /**
  * Type selectors
  */
@@ -285,3 +286,13 @@
 @custom-selector :--volumeMounts [data-itemprop~='volumeMounts'];
 @custom-selector :--volumeMount [data-itemprop~='volumeMount'];
 @custom-selector :--volumeNumber [itemprop~='volumeNumber'];
+
+
+/**
+ * Group element selectors
+ */
+@custom-selector :--ListTypes :--Article:--root > :--affiliations,:--Collection,:--List,:--references > ol;
+@custom-selector :--CodeBlockTypes :--CodeBlock,:--CodeChunk;
+@custom-selector :--CodeTypes :--CodeBlock,:--CodeChunk,:--Code,:--CodeError,:--CodeExpression,:--CodeFragment,:--SoftwareSourceCode;
+@custom-selector :--MediaTypes :--CodeBlock,:--CodeChunk,:--Datatable,:--Figure,:--ImageObject,:--MediaObject,:--Table,:--VideoObject;
+