style-dictionary 4.2.0 → 4.3.1

package/README.md

@@ -22,7 +22,7 @@ For detailed usage head to https://amzn.github.io/style-dictionary
 
 ## Watch the Demo on YouTube
 
-[![Watch the video](/docs/assets/fake_player.png)](http://youtu.be/1HREvonfqhY)
+[![Watch the video](/docs/src/assets/fake_player.png)](http://youtu.be/1HREvonfqhY)
 
 ## Experiment in the playground
 
@@ -91,16 +91,18 @@ StyleDictionary.buildAllPlatforms();
 The `.extend()` method is an overloaded method that can also take an object with the configuration in the same format as a config.json file.
 
 ```javascript
+import { formats, transformGroups } from 'style-dictionary/enums';
+
 const StyleDictionary = require('style-dictionary').extend({
   source: ['tokens/**/*.json'],
   platforms: {
     scss: {
-      transformGroup: 'scss',
+      transformGroup: transformGroups.scss,
       buildPath: 'build/',
       files: [
         {
           destination: 'variables.scss',
-          format: 'scss/variables',
+          format: formats.scssVariables,
         },
       ],
     },
@@ -294,10 +296,11 @@ The style dictionary build system is made to be extended. We don't know exactly
 
 ```javascript
 const StyleDictionary = require('style-dictionary').extend('config.json');
+import { transforms, transformTypes } from 'style-dictionary/enums';
 
 StyleDictionary.registerTransform({
-  name: 'time/seconds',
-  type: 'value',
+  name: transforms.timeSeconds,
+  type: transformTypes.value,
   filter: function (token) {
     return token.type === 'time';
   },

package/bin/style-dictionary.d.ts

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+export type BuildOptions = {
+    config?: string;
+    platform?: string[];
+    verbose?: boolean;
+    warn?: boolean;
+    silent?: boolean;
+};

package/bin/style-dictionary.js

@@ -6,20 +6,39 @@ import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import node_fs from 'node:fs';
 import JSON5 from 'json5';
-import program from 'commander';
+import { Command } from 'commander';
 // usually also node:fs in this context, but can be customized by user
 import { fs } from 'style-dictionary/fs';
 import StyleDictionary from 'style-dictionary';
-
+import { logWarningLevels, logVerbosityLevels } from '../lib/enums/index.js';
+
+/**
+ * @typedef {{
+ *   config?: string;
+ *   platform?: string[];
+ *   verbose?: boolean;
+ *   warn?: boolean;
+ *   silent?: boolean;
+ * }} BuildOptions
+ */
+
+const program = new Command();
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
+const { silent, verbose } = logVerbosityLevels;
 const pkg = JSON5.parse(node_fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf8'));
 
+/**
+ * @param {string} val
+ * @param {string[]} arr
+ */
 function collect(val, arr) {
   arr.push(val);
   return arr;
 }
 
+/**
+ * @param {BuildOptions} options
+ */
 function getConfigPath(options) {
   let configPath = options.config;
 
@@ -95,7 +114,6 @@ program
     console.log(
       'Running `style-dictionary build` for the first time to generate build artifacts.\n',
     );
-    /* eslint-disable no-console */
     styleDictionaryBuild();
   });
 
@@ -108,39 +126,49 @@ program.on('command:*', function () {
   process.exit(1);
 });
 
+/**
+ * @param {string} configPath
+ * @param {BuildOptions} options
+ */
 function getSD(configPath, options) {
   let verbosity;
   let warnings;
   if (options.verbose || options.silent) {
-    verbosity = options.verbose ? 'verbose' : 'silent';
+    verbosity = options.verbose ? verbose : silent;
   }
   if (options.warn === false) {
-    warnings = 'disabled';
+    warnings = logWarningLevels.disabled;
   }
   return new StyleDictionary(configPath, { verbosity, warnings });
 }
 
+/**
+ * @param {BuildOptions} [options]
+ */
 async function styleDictionaryBuild(options) {
   options = options || {};
   const configPath = getConfigPath(options);
   const sd = getSD(configPath, options);
 
   if (options.platform && options.platform.length > 0) {
-    return Promise.all(options.platforms.map((platform) => sd.buildPlatform(platform)));
+    await Promise.all(options.platform.map((platform) => sd.buildPlatform(platform)));
   } else {
-    return sd.buildAllPlatforms();
+    await sd.buildAllPlatforms();
   }
 }
 
+/**
+ * @param {BuildOptions} [options]
+ */
 async function styleDictionaryClean(options) {
   options = options || {};
   const configPath = getConfigPath(options);
   const sd = getSD(configPath, options);
 
   if (options.platform && options.platform.length > 0) {
-    return Promise.all(options.platforms.map((platform) => sd.cleanPlatform(platform)));
+    await Promise.all(options.platform.map((platform) => sd.cleanPlatform(platform)));
   } else {
-    return sd.cleanAllPlatforms();
+    await sd.cleanAllPlatforms();
   }
 }
 

package/examples/advanced/assets-base64-embed/package.json

@@ -12,6 +12,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^4.2.0"
+    "style-dictionary": "^4.3.1"
   }
 }

package/examples/advanced/create-react-app/package.json

@@ -12,7 +12,7 @@
   },
   "devDependencies": {
     "eslint-config-react-app": "^7.0.1",
-    "style-dictionary": "^4.2.0"
+    "style-dictionary": "^4.3.1"
   },
   "resolutions": {
     "immer": "8.0.1",

package/examples/advanced/create-react-native-app/package.json

@@ -29,7 +29,7 @@
     "eslint-config-react-app": "^7.0.1",
     "jest": "~25.2.6",
     "react-test-renderer": "~16.13.1",
-    "style-dictionary": "^4.2.0"
+    "style-dictionary": "^4.3.1"
   },
   "jest": {
     "preset": "react-native"

package/examples/advanced/create-react-native-app/src/App.js

@@ -8,7 +8,6 @@ export default function App() {
     <View style={styles.container}>
       <Text style={styles.title}>Testing! Testing!</Text>
       <Text style={styles.p}>All done!</Text>
-      {/* eslint-disable-next-line react/style-prop-object */}
       <StatusBar style="auto" />
     </View>
   );

package/examples/advanced/custom-parser/package.json

@@ -10,6 +10,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^4.2.0"
+    "style-dictionary": "^4.3.1"
   }
 }

package/examples/advanced/custom-parser/sd.config.js

@@ -1,4 +1,5 @@
 import StyleDictionary from 'style-dictionary';
+import { formats, transformGroups } from 'style-dictionary/enums';
 
 // You can use the .registerParser() method like this
 StyleDictionary.registerParser({
@@ -50,12 +51,12 @@ export default {
   source: [`tokens/**/*.json`],
   platforms: {
     css: {
-      transformGroup: 'css',
+      transformGroup: transformGroups.css,
       buildPath: 'build/',
       files: [
         {
           destination: 'variables.css',
-          format: 'css/variables',
+          format: formats.cssVariables,
         },
       ],
     },

package/examples/advanced/custom-transforms/README.md

@@ -24,7 +24,7 @@ To declare a custom **transform**, you have to call the `registerTransform` meth
 ```js
 StyleDictionary.registerTransform({
   name: 'ratio/%',
-  type: 'value',
+  type: transformTypes.value,
   filter: function (token) {
     return token.group === 'ratio';
   },

package/examples/advanced/custom-transforms/build.js

@@ -1,8 +1,11 @@
 import StyleDictionary from 'style-dictionary';
 import { dirname } from 'path';
 import { fileURLToPath } from 'url';
+import { transforms, transformGroups, transformTypes } from 'style-dictionary/enums';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
+const { attributeCti, nameConstant, sizePx, colorCss, timeSeconds } = transforms;
+const { value: transformTypeValue, name } = transformTypes;
 
 console.log('Build started...');
 console.log('\n==============================================');
@@ -10,8 +13,8 @@ console.log('\n==============================================');
 // REGISTER THE CUSTOM TRANSFORMS
 
 StyleDictionary.registerTransform({
-  name: 'size/px', // notice: the name is an override of an existing predefined method (yes, you can do it)
-  type: 'value',
+  name: sizePx, // notice: the name is an override of an existing predefined method (yes, you can do it)
+  type: transformTypeValue,
   filter: function (token) {
     // this is an example of a possible filter (based on the "cti" values) to show how a "filter" works
     return token.type === 'fontSize' || token.type === 'dimension';
@@ -23,7 +26,7 @@ StyleDictionary.registerTransform({
 
 StyleDictionary.registerTransform({
   name: 'ratio/%',
-  type: 'value',
+  type: transformTypeValue,
   filter: function (token) {
     // here we are using a custom attribute, declared in the token, to match the values where apply the transform
     return token.type === 'ratio';
@@ -35,7 +38,7 @@ StyleDictionary.registerTransform({
 
 StyleDictionary.registerTransform({
   name: 'hexRGB/hexARGB',
-  type: 'value',
+  type: transformTypeValue,
   filter: function (token) {
     return token.type === 'color';
   },
@@ -47,7 +50,7 @@ StyleDictionary.registerTransform({
 
 StyleDictionary.registerTransform({
   name: 'unitless/sp',
-  type: 'value',
+  type: transformTypeValue,
   filter: function (token) {
     return token.type === 'fontSize';
   },
@@ -60,7 +63,7 @@ StyleDictionary.registerTransform({
 StyleDictionary.registerTransform({
   // this is a silly example, to show how you can apply transform to names
   name: 'name/squiggle',
-  type: 'name',
+  type: name,
   // notice: if you don't specify a filter, the transformation will be applied to all the tokens
   transform: function (token) {
     return token.path.join('~');
@@ -75,14 +78,14 @@ StyleDictionary.registerTransform({
 StyleDictionary.registerTransformGroup({
   name: 'custom/web',
   // notice: here the "size/px" transform is not the pre-defined one, but the custom one we have declared above
-  transforms: ['attribute/cti', 'name/constant', 'size/px', 'color/css', 'time/seconds', 'ratio/%'],
+  transforms: [attributeCti, nameConstant, sizePx, colorCss, timeSeconds, 'ratio/%'],
 });
 
 StyleDictionary.registerTransformGroup({
   name: 'custom/scss',
   // this is to show one possibility for adding a few transforms to a pre-defined group
   // (however, we suggest to use the previous approach, which is more explicit and clear)
-  transforms: StyleDictionary.transformGroup['scss'].concat(['size/px', 'ratio/%']),
+  transforms: StyleDictionary.transformGroup[transformGroups.scss].concat([sizePx, 'ratio/%']),
 });
 
 StyleDictionary.registerTransformGroup({

package/examples/advanced/custom-transforms/package.json

@@ -16,6 +16,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^4.2.0"
+    "style-dictionary": "^4.3.1"
   }
 }

package/examples/advanced/font-face-rules/package.json

@@ -9,6 +9,6 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^4.2.0"
+    "style-dictionary": "^4.3.1"
   }
 }

package/examples/advanced/font-face-rules/sd.config.js

@@ -1,10 +1,11 @@
 import StyleDictionary from 'style-dictionary';
+import { transformTypes } from 'style-dictionary/enums';
 
 // Register an "attribute" transform to codify the font's details
 // as named attributes.
 StyleDictionary.registerTransform({
   name: 'attribute/font',
-  type: 'attribute',
+  type: transformTypes.attribute,
   transform: (prop) => ({
     category: prop.path[0],
     type: prop.path[1],

package/examples/advanced/format-helpers/package.json

@@ -10,6 +10,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^4.2.0"
+    "style-dictionary": "^4.3.1"
   }
 }

package/examples/advanced/format-helpers/sd.config.js

@@ -4,6 +4,7 @@ import {
   formattedVariables,
   sortByReference,
 } from 'style-dictionary/utils';
+import { commentStyles, transformGroups } from 'style-dictionary/enums';
 
 export default {
   hooks: {
@@ -29,7 +30,7 @@ export default {
         // proper style. If the file has a custom file header defined, or
         // showFileHeader option, it will honor those.
         return (
-          (await fileHeader({ file, commentStyle: 'short' })) +
+          (await fileHeader({ file, commentStyle: commentStyles.short })) +
           dictionary.allTokens
             // sortByReference returns a function that can be used as to sort
             // an array. This will sort the array so that references always
@@ -76,7 +77,7 @@ export default {
   source: ['tokens/**/*'],
   platforms: {
     scss: {
-      transformGroup: 'scss',
+      transformGroup: transformGroups.scss,
       buildPath: 'build/',
       files: [
         {

package/examples/advanced/matching-build-files/config.js

@@ -1,15 +1,20 @@
 import StyleDictionary from 'style-dictionary';
+import { formats, transforms, transformGroups } from 'style-dictionary/enums';
 import tokens from './tokens/index.js';
 
+const { javascriptEs6, scssVariables } = formats;
+const { attributeCti, nameCamel, sizePx, colorHex } = transforms;
+const { scss } = transformGroups;
+
 export default {
   source: ['tokens/**/*.json'],
   platforms: {
     'esm/category': {
       buildPath: 'build/js/esm/',
-      transforms: ['attribute/cti', 'name/camel', 'size/px', 'color/hex'],
+      transforms: [attributeCti, nameCamel, sizePx, colorHex],
       files: tokens.map((tokenSet) => ({
         destination: `${tokenSet}.js`,
-        format: 'javascript/es6',
+        format: javascriptEs6,
         filter: {
           attributes: {
             category: tokenSet,
@@ -19,17 +24,17 @@ export default {
     },
     'esm/index': {
       buildPath: 'build/js/esm/',
-      transforms: ['attribute/cti', 'name/camel', 'size/px', 'color/hex'],
+      transforms: [attributeCti, nameCamel, sizePx, colorHex],
       files: [
         {
           destination: `index.js`,
-          format: 'javascript/es6',
+          format: javascriptEs6,
         },
       ],
     },
     'cjs/category': {
       buildPath: 'build/js/cjs/',
-      transforms: ['attribute/cti', 'name/camel', 'size/px', 'color/hex'],
+      transforms: [attributeCti, nameCamel, sizePx, colorHex],
       files: tokens.map((tokenSet) => ({
         destination: `${tokenSet}.js`,
         format: 'custom/cjsmodule',
@@ -42,7 +47,7 @@ export default {
     },
     'cjs/index': {
       buildPath: 'build/js/cjs/',
-      transforms: ['attribute/cti', 'name/camel', 'size/px', 'color/hex'],
+      transforms: [attributeCti, nameCamel, sizePx, colorHex],
       files: [
         {
           destination: `index.js`,
@@ -53,22 +58,22 @@ export default {
 
     // Web output in scss format
     scss: {
-      transformGroup: 'scss',
+      transformGroup: scss,
       buildPath: `build/scss/`,
       files: [
         {
           destination: `tokens.scss`,
-          format: 'scss/variables',
+          format: scssVariables,
         },
       ],
     },
     // Web output in scss partialformat
     'scss/category': {
-      transformGroup: 'scss',
+      transformGroup: scss,
       buildPath: `build/scss/`,
       files: tokens.map((tokenSet) => ({
         destination: `_${tokenSet}.scss`,
-        format: 'scss/variables',
+        format: scssVariables,
         filter: {
           attributes: {
             category: tokenSet,

package/examples/advanced/matching-build-files/package.json

@@ -17,6 +17,6 @@
   "author": "Kelly Harrop <kn.harrop@gmail.com>",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^4.2.0"
+    "style-dictionary": "^4.3.1"
   }
 }

package/examples/advanced/multi-brand-multi-platform/build.js

@@ -1,7 +1,10 @@
 import StyleDictionary from 'style-dictionary';
+import { formats, transformGroups } from 'style-dictionary/enums';
 
-// HAVE THE STYLE DICTIONARY CONFIG DYNAMICALLY GENERATED
+const { androidColors, androidDimens, androidFontDimens, iosMacros, scssVariables } = formats;
+const { web } = transformGroups;
 
+// HAVE THE STYLE DICTIONARY CONFIG DYNAMICALLY GENERATED
 function getStyleDictionaryConfig(brand, platform) {
   return {
     source: [
@@ -11,12 +14,12 @@ function getStyleDictionaryConfig(brand, platform) {
     ],
     platforms: {
       web: {
-        transformGroup: 'web',
+        transformGroup: web,
         buildPath: `build/web/${brand}/`,
         files: [
           {
             destination: 'tokens.scss',
-            format: 'scss/variables',
+            format: scssVariables,
           },
         ],
       },
@@ -26,15 +29,15 @@ function getStyleDictionaryConfig(brand, platform) {
         files: [
           {
             destination: 'tokens.colors.xml',
-            format: 'android/colors',
+            format: androidColors,
           },
           {
             destination: 'tokens.dimens.xml',
-            format: 'android/dimens',
+            format: androidDimens,
           },
           {
             destination: 'tokens.font_dimens.xml',
-            format: 'android/fontDimens',
+            format: androidFontDimens,
           },
         ],
       },
@@ -44,7 +47,7 @@ function getStyleDictionaryConfig(brand, platform) {
         files: [
           {
             destination: 'tokens.h',
-            format: 'ios/macros',
+            format: iosMacros,
           },
         ],
       },

package/examples/advanced/multi-brand-multi-platform/package.json

@@ -16,6 +16,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^4.2.0"
+    "style-dictionary": "^4.3.1"
   }
 }

package/examples/advanced/node-modules-as-config-and-properties/config.js

@@ -1,17 +1,22 @@
 import StyleDictionary from 'style-dictionary';
+import { formats, transforms, transformGroups, transformTypes } from 'style-dictionary/enums';
+import tokens from './tokens.js';
 // Rather than have Style Dictionary handle the merging of token files,
 // you could use node module export/require to do it yourself. This will
 // allow you to not have to copy object namespaces like you normally would.
 // Take a look at any of the .js files in components/ or tokens/
-import tokens from './tokens.js';
 
+const { cssVariables, scssVariables, javascriptEs6, json } = formats;
+const { css, js } = transformGroups;
+const { attributeCti, colorHex, colorRgb } = transforms;
+const { value: transformTypeValue, name } = transformTypes;
 const buildPath = 'build/';
 
 // You can still add custom transforms and formats like you
 // normally would and reference them in the config below.
 StyleDictionary.registerTransform({
   name: 'myRegisteredTransform',
-  type: 'value',
+  type: transformTypeValue,
   filter: (token) => token.attributes.category === 'size',
   transform: (token) => `${parseInt(token.value) * 16}px`,
 });
@@ -39,7 +44,7 @@ export default {
     transforms: {
       // Now we can use the transform 'myTransform' below
       myTransform: {
-        type: 'name',
+        type: name,
         transform: (token) => token.path.join('_').toUpperCase(),
       },
     },
@@ -58,7 +63,7 @@ export default {
   platforms: {
     custom: {
       // Using the custom transforms we defined above
-      transforms: ['attribute/cti', 'myTransform', 'myRegisteredTransform', 'color/hex'],
+      transforms: [attributeCti, 'myTransform', 'myRegisteredTransform', colorHex],
       buildPath: buildPath,
       files: [
         {
@@ -70,30 +75,30 @@ export default {
     },
 
     css: {
-      transformGroup: 'css',
+      transformGroup: css,
       buildPath: buildPath,
       files: [
         {
           destination: 'variables.css',
-          format: 'css/variables',
+          format: cssVariables,
         },
       ],
     },
 
     scss: {
       // This works, we can create new transform arrays on the fly and edit built-ins
-      transforms: StyleDictionary.hooks.transformGroups.scss.concat('color/rgb'),
+      transforms: StyleDictionary.hooks.scss.concat(colorRgb),
       buildPath: buildPath,
       files: [
         {
           destination: 'variables.scss',
-          format: 'scss/variables',
+          format: scssVariables,
         },
       ],
     },
 
     js: {
-      transforms: StyleDictionary.hooks.transformGroups.js.concat('myRegisteredTransform'),
+      transforms: StyleDictionary.hooks.js.concat('myRegisteredTransform'),
       buildPath: buildPath,
       // If you want to get super fancy, you can use node modules
       // to create a tokens object first, and then you can
@@ -101,7 +106,7 @@ export default {
       // output 1 file per color namespace.
       files: Object.keys(tokens.color).map((colorType) => ({
         destination: `${colorType}.js`,
-        format: 'javascript/es6',
+        format: javascriptEs6,
         // Filters can be functions that return a boolean
         filter: (token) => token.attributes.type === colorType,
       })),
@@ -109,12 +114,12 @@ export default {
 
     // You can still use built-in transformGroups and formats like before
     json: {
-      transformGroup: 'js',
+      transformGroup: js,
       buildPath: buildPath,
       files: [
         {
           destination: 'tokens.json',
-          format: 'json',
+          format: json,
         },
       ],
     },

package/examples/advanced/node-modules-as-config-and-properties/package.json

@@ -20,7 +20,7 @@
   },
   "homepage": "https://github.com/dbanksdesign/style-dictionary-node#readme",
   "devDependencies": {
-    "style-dictionary": "^4.2.0",
+    "style-dictionary": "^4.3.1",
     "tinycolor2": "^1.4.1"
   }
 }

package/examples/advanced/npm-module/package.json

@@ -17,6 +17,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^4.2.0"
+    "style-dictionary": "^4.3.1"
   }
 }

package/examples/advanced/referencing_aliasing/package.json

@@ -16,6 +16,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^4.2.0"
+    "style-dictionary": "^4.3.1"
   }
 }