feat: registers sd-transforms; includes refs in output; build-tokens:…

…watch NPM script

lib/build-tokens.js

@@ -2,6 +2,7 @@ const path = require('path');
 const minimist = require('minimist');
 const {
   initializeStyleDictionary,
+  getTokensStudioTransforms,
   colorTransform,
 } = require('../tokens/style-dictionary');
 const { createIndexCssFile } = require('../tokens/utils');
@@ -56,9 +57,14 @@ async function buildTokensCommand(commandArgs) {
     source: tokensSource
       ? [`${tokensSource}/core/**/*.json`, `${tokensSource}/core/**/*.toml`]
       : [],
+    preprocessors: ['annotate-tokens-with-references', 'tokens-studio'],
+    expand: {
+      typesMap: (await getTokensStudioTransforms()).expandTypesMap,
+    },
     platforms: {
       css: {
         prefix: 'pgn',
+        transformGroup: 'paragon-css',
         // NOTE: buildPath must end with a slash
         buildPath: buildDir.slice(-1) === '/' ? buildDir : `${buildDir}/`,
         options: {
@@ -82,7 +88,6 @@ async function buildTokensCommand(commandArgs) {
             },
           },
         ],
-        transforms: StyleDictionary.hooks.transformGroups.css.filter(item => item !== 'size/rem').concat('color/sass-color-functions', 'str-replace'),
       },
     },
     log: {

package.json

@@ -51,12 +51,14 @@
     "playroom:build": "npm run playroom:build --workspace=www",
     "prepare": "husky || true",
     "build-tokens": "./bin/paragon-scripts.js build-tokens --build-dir ./styles/css",
+    "build-tokens:watch": "npx nodemon --ignore styles/css -x \"npm run build-tokens\"",
     "replace-variables-usage-with-css": "./bin/paragon-scripts.js replace-variables -p src -t usage",
     "replace-variables-definition-with-css": "./bin/paragon-scripts.js replace-variables -p src -t definition",
     "cli:help": "./bin/paragon-scripts.js help"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.4",
+    "@tokens-studio/sd-transforms": "^1.2.4",
     "axios": "^0.27.2",
     "bootstrap": "^4.6.2",
     "chalk": "^4.1.2",

styles/css/core/custom-media-breakpoints.css

@@ -3,7 +3,7 @@
  * See <root>/tokens/README.md for more details.
  */
 
-@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0);
+@custom-media --pgn-size-breakpoint-min-width-xs (min-width: 0px);
 @custom-media --pgn-size-breakpoint-max-width-xs (max-width: 576px);
 @custom-media --pgn-size-breakpoint-min-width-sm (min-width: 576px);
 @custom-media --pgn-size-breakpoint-max-width-sm (max-width: 768px);