fix: output custom properties inside :root selector

.travis.yml

@@ -11,7 +11,8 @@ notifactions:
   email: false
 
 before_script:
-  - npm run newbuild
+  - npm run primarybuild
+  - npm run secondarybuild
   - npm run sassRender
   - npm run png@2x
   - npm run png@3x

package.json

@@ -32,7 +32,8 @@
   "scripts": {
     "jsonlint": "jsonlint src/data/orion-icons.json -q -V .jsonlintschema",
     "svglint": "svglint src/icons/* --ci",
-    "newbuild": "node scripts/build.js",
+    "primarybuild": "node scripts/primarybuild.js",
+    "secondarybuild": "node scripts/secondarybuild.js",
     "sassRender": "sass-render dist/tokens/*.css",
     "copySass": "copyfiles -f ./src/*.scss ./dist",
     "test": "npm run jsonlint || npm run svglint",

scripts/build.js → scripts/primarybuild.js

@@ -55,7 +55,7 @@ data.icons.forEach(icon => {
   // console.log(`${filename}.js / ${filename}.svg written to ./dist dir`)
 });
 
-// export 16px PNGs versions of Icons; default colors
+// export 20px PNGs versions of Icons; default colors
 // =======================================================================
 const pngIcons = {};
 const SizeMedIcons = data.icons.filter(function(sizeData) {
@@ -85,7 +85,7 @@ SizeMedIcons.forEach(icon => {
   // console.log(`${filename}.js / ${filename}.png written to ./dist dir`)
 });
 
-// export 16px PNGs versions of Icons; alt colors
+// export 20px PNGs versions of Icons; alt colors
 // =======================================================================
 const pngIconsAlt = {};
 const altColorSet = data.icons.filter(function(altData) {
@@ -115,7 +115,6 @@ altColorSet.forEach(icon => {
   // console.log(`${filename}.js / ${filename}.png written to ./dist dir`)
 });
 
-
 // Standard Style Dictionary build function
 LocalTokens.buildPlatform('SassVariables');
 LocalTokens.buildPlatform('CSSCustomProperties_SassFiletype');
@@ -124,7 +123,6 @@ DesignTokens.buildPlatform('colorTokens');
 
 // Custom Style Dictionary build function
 const CustomStyleDictionary = require('style-dictionary');
-// const fs = require('fs');
 const _ = require('lodash');
 
 function variablesWithPrefix(prefix, properties) {
@@ -161,7 +159,7 @@ CustomStyleDictionary.registerFormat({
   }
 });
 
-// FINALLY, BUILD ALL THE PLATFORMS
+// Build custom platform(s)
 const componentConfig = CustomStyleDictionary.extend('./scripts/CSSCustomProperty.json');
 componentConfig.buildAllPlatforms();
 

scripts/secondarybuild.js

@@ -0,0 +1,14 @@
+// This build is required to output a standard :root{} element, versus the :host{}
+// custome version output in the primary build script
+
+const LocalTokens = require('style-dictionary').extend('./scripts/tokensConfig.json');
+LocalTokens.buildPlatform('CSSCustomProperties');
+
+console.log('')
+console.log('         .         . ')
+console.log('               *       *')
+console.log('')
+console.log('                 * * *')
+console.log('                    !')
+console.log('               *       * ')
+console.log('')

scripts/tokensConfig.json

@@ -20,6 +20,16 @@
           "format": "css/variables"
         }
       ]
+    },
+    "CSSCustomProperties": {
+      "transformGroup": "css",
+      "buildPath": "./dist/tokens/",
+      "files": [
+        {
+          "destination": "CSSTokenProperties.css",
+          "format": "css/variables"
+        }
+      ]
     }
   }
 }