feat: registers sd-transforms; includes refs in source-tokens-only ou…

…tput; resolves refs warnings (#3219)

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: ['pgn-annotate-token-extensions-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);