@tokens-studio/sd-transforms - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

dist/checkAndEvaluateMath.d.ts

 import { DesignToken } from 'style-dictionary/types';
-export declare function checkAndEvaluateMath(token: DesignToken): DesignToken['value'];
+export declare function checkAndEvaluateMath(token: DesignToken, fractionDigits?: number): DesignToken['value'];

dist/checkAndEvaluateMath.js

 import { Parser } from 'expr-eval-fork';
 import { parse, reduceExpression } from '@bundled-es-modules/postcss-calc-ast-parser';
+const defaultFractionDigits = 4;
 const mathChars = ['+', '-', '*', '/'];
@@ -70,3 +71,3 @@ const parser = new Parser();
 }
-function parseAndReduce(expr) {
+function parseAndReduce(expr, fractionDigits = defaultFractionDigits) {
     let result = expr;
@@ -117,7 +118,7 @@ let evaluated;
     // the outer Number() gets rid of insignificant trailing zeros of decimal numbers
-    const reducedTo3Fixed = Number(Number.parseFloat(`${result}`).toFixed(3));
-    result = resultUnit ? `${reducedTo3Fixed}${resultUnit}` : reducedTo3Fixed;
+    const reducedToFixed = Number(Number.parseFloat(`${result}`).toFixed(fractionDigits));
+    result = resultUnit ? `${reducedToFixed}${resultUnit}` : reducedToFixed;
     return result;
 }
-export function checkAndEvaluateMath(token) {
+export function checkAndEvaluateMath(token, fractionDigits) {
     const expr = token.$value ?? token.value;
@@ -133,3 +134,3 @@ const type = token.$type ?? token.type;
         const exprs = splitMultiIntoSingleValues(expr);
-        const reducedExprs = exprs.map(_expr => parseAndReduce(_expr));
+        const reducedExprs = exprs.map(_expr => parseAndReduce(_expr, fractionDigits));
         if (reducedExprs.length === 1) {
@@ -136,0 +137,0 @@ return reducedExprs[0];

dist/preprocessors/add-font-styles.js

 import { usesReferences, resolveReferences } from 'style-dictionary/utils';
 import { fontWeightReg, fontStyles } from '../transformFontWeight.js';
-function resolveFontWeight(fontWeight, copy) {
+function resolveFontWeight(fontWeight, copy, usesDtcg) {
     let resolved = fontWeight;
     if (usesReferences(fontWeight)) {
         try {
-            resolved = `${resolveReferences(fontWeight, copy)}`;
+            resolved = `${resolveReferences(fontWeight, copy, { usesDtcg })}`;
         }
@@ -43,6 +43,6 @@ catch (e) {
             const token = potentiallyToken;
-            const usesDTCG = Object.hasOwn(token, '$value');
+            const usesDtcg = Object.hasOwn(token, '$value');
             const { value, $value, type, $type } = token;
-            const tokenType = (usesDTCG ? $type : type);
-            const tokenValue = (usesDTCG ? $value : value);
+            const tokenType = (usesDtcg ? $type : type);
+            const tokenValue = (usesDtcg ? $value : value);
             if (tokenType === 'typography') {
@@ -52,3 +52,3 @@ const tokenTypographyValue = tokenValue;
                     return;
-                const fontWeight = resolveFontWeight(`${tokenTypographyValue.fontWeight}`, refCopy);
+                const fontWeight = resolveFontWeight(`${tokenTypographyValue.fontWeight}`, refCopy, usesDtcg);
                 const { weight, style } = splitWeightStyle(fontWeight, alwaysAddFontStyle);
@@ -62,11 +62,11 @@ tokenTypographyValue.fontWeight = weight;
                 const tokenFontWeightsValue = tokenValue;
-                const fontWeight = resolveFontWeight(`${tokenFontWeightsValue}`, refCopy);
+                const fontWeight = resolveFontWeight(`${tokenFontWeightsValue}`, refCopy, usesDtcg);
                 const { weight, style } = splitWeightStyle(fontWeight, alwaysAddFontStyle);
                 // since tokenFontWeightsValue is a primitive (string), we have to permutate the change directly
-                token[`${usesDTCG ? '$' : ''}value`] = weight;
+                token[`${usesDtcg ? '$' : ''}value`] = weight;
                 if (style) {
                     slice[`fontStyle`] = {
                         ...token,
-                        [`${usesDTCG ? '$' : ''}type`]: 'fontStyle',
-                        [`${usesDTCG ? '$' : ''}value`]: style,
+                        [`${usesDtcg ? '$' : ''}type`]: 'fontStyle',
+                        [`${usesDtcg ? '$' : ''}value`]: style,
                     };
@@ -73,0 +73,0 @@ }

dist/preprocessors/align-types.js

@@ -10,2 +10,6 @@ const typesMap = {
     borderRadius: 'dimension',
+    borderWidth: 'dimension',
+    letterSpacing: 'dimension',
+    paragraphSpacing: 'dimension',
+    paragraphIndent: 'dimension',
     text: 'content',
@@ -29,3 +33,15 @@ };
         const newT = (typesMap[t] ?? t);
-        slice[tProp] = newT;
+        const k = 'studio.tokens';
+        if (newT !== t) {
+            // replace the type with new type
+            slice[tProp] = newT;
+            // store the original type as metadata
+            slice.$extensions = {
+                ...slice.$extensions,
+                [k]: {
+                    ...(slice.$extensions?.[k] ?? {}),
+                    originalType: t,
+                },
+            };
+        }
         // now also check propsMap if we need to map some props
@@ -32,0 +48,0 @@ if (typeof v === 'object') {

dist/register.js

@@ -66,3 +66,3 @@ import { transformDimension } from './transformDimension.js';
         filter: token => ['string', 'object'].includes(typeof (token.$value ?? token.value)),
-        transform: token => checkAndEvaluateMath(token),
+        transform: (token, platformCfg) => checkAndEvaluateMath(token, platformCfg.mathFractionDigits),
     });
@@ -93,3 +93,5 @@ sd.registerTransform({
             const type = token.$type ?? token.type;
-            return typeof type === 'string' && ['letterSpacing', 'typography'].includes(type);
+            const originalType = token.$extensions?.['studio.tokens']?.originalType;
+            return (typeof type === 'string' &&
+                (['letterSpacing', 'typography'].includes(type) || originalType === 'letterSpacing'));
         },
@@ -96,0 +98,0 @@ transform: token => transformLetterSpacingForCSS(token),

package.json

 {
   "name": "@tokens-studio/sd-transforms",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Custom transforms for Style-Dictionary, to work with Design Tokens that are exported from Tokens Studio",
@@ -38,3 +38,3 @@ "license": "MIT",
     "@bundled-es-modules/postcss-calc-ast-parser": "^0.1.6",
-    "@tokens-studio/types": "^0.4.0",
+    "@tokens-studio/types": "^0.5.1",
     "colorjs.io": "^0.4.3",
@@ -41,0 +41,0 @@ "expr-eval-fork": "^2.0.2",

README.md

@@ -11,3 +11,5 @@ # Style Dictionary Transforms for Tokens Studio
 - [Compatibility](#compatibility)
-- [Getting Started](#usage)
+- [Usage](#usage)
+  - [Using the preprocessor](#using-the-preprocessor)
+  - [Using expand](#using-expand)
   - [Using the transforms](#using-the-transforms)
@@ -129,2 +131,7 @@ - [Custom Transform Group](#custom-transform-group)
 
+> [!TIP]
+> The align types part of the preprocessor aligns Tokens Studio token types to DTCG token types.
+> The original Tokens Studio type in this scenario will be stored at `$extensions['studio.tokens'].originalType` if this happens.
+> This allows you to use the original type e.g. for token filtering/matching for your custom transforms.
+
 ### Using "Expand"
@@ -492,2 +499,22 @@
 
+You can adjust to how many decimals the result should be rounded using `PlatformConfig.mathFractionDigits`:
+
+```json
+{
+  "source": ["tokens.json"],
+  "platforms": {
+    "css": {
+      "mathFractionDigits": 3,
+      "transformGroup": "tokens-studio",
+      "files": [
+        {
+          "format": "css/variables",
+          "destination": "output.css"
+        }
+      ]
+    }
+  }
+}
+```
+
 #### before
@@ -527,3 +554,3 @@
 
-**matches**: `token.type` is one of `['sizing', 'spacing', 'borderRadius', 'borderWidth', 'fontSizes', 'dimension']`
+**matches**: `token.type` is one of `['fontSize', 'dimension', 'border', 'typography', 'shadow']`
 
@@ -584,3 +611,3 @@ #### before
 
-**matches**: `token.type` is `'lineHeights'`
+**matches**: `token.type` is `'lineHeight'` or `token.type` is `'typography'`
 
@@ -613,3 +640,3 @@ #### before
 
-**matches**: `token.type` is `'fontWeights'`
+**matches**: `token.type` is `'fontWeight'` or `token.type` is `'typography'`
 
@@ -704,3 +731,3 @@ #### before
 
-**matches**: `token.type` is `'letterSpacing'`
+**matches**: `token.$extensions['studio.tokens'].originalType` is `'letterSpacing'` or `token.type` is `'typography'`
 
@@ -707,0 +734,0 @@ #### before

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

77921

increased by2.39%

Lines of code

1303

increased by1.48%

Number of lines in readme file

827

increased by3.38%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@tokens-studio/types@0.5.1(transitive)

• + Addedcross-spawn@7.0.5(transitive)

• - [e-mail]/base64@1.1.2(transitive)

• - Removed@tokens-studio/types@0.4.0(transitive)

• - Removedcross-spawn@7.0.3(transitive)

• - Removeddefine-properties@1.2.1(transitive)

• - Removedes-define-property@1.0.0(transitive)

• - Removedes-errors@1.3.0(transitive)

• - Removedfunction-bind@1.1.2(transitive)

• - Removedhas-symbols@1.0.3(transitive)

• - Removedhyperdyperid@1.2.0(transitive)

• - Removedset-function-length@1.2.2(transitive)

• - Removedthingies@1.21.0(transitive)

• Updated@tokens-studio/types@^0.5.1