fix: code review feedback

Fix :root selector, move @spectrum-css/commons dependency to styles, and DRY file
writing logic

package.json

@@ -92,7 +92,6 @@
         "@open-wc/polyfills-loader": "^0.3.2",
         "@open-wc/testing": "^2.3.3",
         "@open-wc/testing-karma": "^3.1.24",
-        "@spectrum-css/commons": "^2.0.0",
         "@spectrum-css/link": "^2.0.2",
         "@spectrum-css/rule": "^2.0.2",
         "@spectrum-css/table": "^2.0.2",

packages/styles/fonts.css

@@ -24,7 +24,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-:root {
+:root,
+:host {
     --spectrum-font-fallbacks-sans: -apple-system, BlinkMacSystemFont,
         'Segoe UI', Roboto, sans-serif;
 

packages/styles/package.json

@@ -35,6 +35,7 @@
         "lit-html": "^1.0.0"
     },
     "devDependencies": {
+        "@spectrum-css/commons": "^2.0.0",
         "@spectrum-css/typography": "^2.0.2",
         "@spectrum-css/vars": "^2.0.2"
     }

scripts/spectrum-vars.js

@@ -28,7 +28,8 @@ const processCSSData = (data, identifier) => {
     let result = data.replace(/\\/g, '\\\\');
 
     // possible selectors to replace
-    const selector1 = `.spectrum--${identifier}`;
+    const selector1 =
+        identifier == ':root ' ? identifier : `.spectrum--${identifier}`;
     const selector2 = '.spectrum';
 
     // new selector values
@@ -55,16 +56,19 @@ const processCSSData = (data, identifier) => {
     return result;
 };
 
+const writeProcessedCSSToFile = (dstPath, contents) => {
+    result = `${license}\n/* stylelint-disable */\n${contents}\n/* stylelint-enable */`;
+    fs.writeFile(dstPath, result, 'utf8');
+};
+
 const processCSS = (srcPath, dstPath, identifier) => {
     fs.readFile(srcPath, 'utf8', function(error, data) {
         if (error) {
             return console.log(error);
         }
 
         let result = processCSSData(data, identifier);
-        result = `${license}\n/* stylelint-disable */\n${result}\n/* stylelint-enable */`;
-
-        fs.writeFile(dstPath, result, 'utf8');
+        writeProcessedCSSToFile(dstPath, result);
     });
 };
 
@@ -77,8 +81,7 @@ const processMultiSourceCSS = (srcPaths, dstPath, identifier) => {
         result = `${result}\n${processCSSData(data, identifier)}`;
     }
 
-    result = `${license}\n/* stylelint-disable */\n${result}\n/* stylelint-enable */`;
-    fs.writeFile(dstPath, result, 'utf8');
+    writeProcessedCSSToFile(dstPath, result);
 };
 
 // where is spectrum-css?
@@ -182,7 +185,7 @@ cores.forEach(async (core) => {
         );
         console.log(`processing fonts from commons & typography`);
         processes.push(
-            processMultiSourceCSS([srcPath1, srcPath2], dstPath, 'typography')
+            processMultiSourceCSS([srcPath1, srcPath2], dstPath, ':root ')
         );
     }
 }