style-dictionary 5.3.2 → 5.4.0

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

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

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

@@ -12,7 +12,7 @@
   },
   "devDependencies": {
     "eslint-config-react-app": "^7.0.1",
-    "style-dictionary": "^5.3.2"
+    "style-dictionary": "^5.4.0"
   },
   "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": "^5.3.2"
+    "style-dictionary": "^5.4.0"
   },
   "jest": {
     "preset": "react-native"

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

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

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

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

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

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

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

@@ -11,6 +11,6 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^5.3.2"
+    "style-dictionary": "^5.4.0"
   }
 }

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": "^5.3.2"
+    "style-dictionary": "^5.4.0"
   }
 }

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

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

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": "^5.3.2",
+    "style-dictionary": "^5.4.0",
     "tinycolor2": "^1.4.1"
   }
 }

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

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

package/examples/advanced/referencing_aliasing/package.json

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

package/examples/advanced/s3/package.json

@@ -16,6 +16,6 @@
   "devDependencies": {
     "aws-sdk": "^2.7.21",
     "fs-extra": "^1.0.0",
-    "style-dictionary": "^5.3.2"
+    "style-dictionary": "^5.4.0"
   }
 }

package/examples/advanced/tailwind-preset/package.json

@@ -10,7 +10,7 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^5.3.2",
+    "style-dictionary": "^5.4.0",
     "tailwindcss": "^3.4.15",
     "mocha": "^10.2.0",
     "chai": "^5.1.1"

package/examples/advanced/tokens-deprecation/package.json

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

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

@@ -12,6 +12,6 @@
   "license": "ISC",
   "devDependencies": {
     "colorjs.io": "^0.5.2",
-    "style-dictionary": "^5.3.2"
+    "style-dictionary": "^5.4.0"
   }
 }

package/examples/advanced/variables-in-outputs/package.json

@@ -11,6 +11,6 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "style-dictionary": "^5.3.2"
+    "style-dictionary": "^5.4.0"
   }
 }

package/examples/advanced/yaml-tokens/package.json

@@ -10,7 +10,7 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
-    "style-dictionary": "^5.3.2",
+    "style-dictionary": "^5.4.0",
     "yaml": "^1.10.0"
   }
 }

package/lib/StyleDictionary.js

@@ -67,7 +67,7 @@ export default class StyleDictionary extends Register {
   // Placeholder is transformed on prepublish -> see scripts/inject-version.js
   // Another option might be import pkg from './package.json' with { "type": "json" } which would work in both browser and node, but support is not there yet.
   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#browser_compatibility
-  static VERSION = '5.3.2';
+  static VERSION = '5.4.0';
 
   /** @returns {Config} */
   get options() {

package/lib/common/formatHelpers/getTypeScriptType.js

@@ -61,7 +61,9 @@ function getArrayType(arr) {
   if (arr.length > 0) {
     const firstValueType = getTypeScriptType(arr[0]);
     if (arr.every((v) => getTypeScriptType(v) === firstValueType)) {
-      return firstValueType + '[]';
+      // generate a strict tuple with the values of the same type
+      // for example: [number, number, number, number]
+      return `[${Array.from(arr, () => firstValueType).join(',')}]`;
     } else {
       return `(${Array.from(
         new Set(

package/lib/common/transformGroups.d.ts

@@ -131,7 +131,7 @@ declare const _default: {
      *
      * @memberof TransformGroups
      */
-    ios: ("attribute/cti" | "name/pascal" | "color/UIColor" | "size/remToPt" | "content/objC/literal" | "asset/objC/literal")[];
+    ios: ("attribute/cti" | "name/pascal" | "color/UIColor" | "size/remToFloat" | "content/objC/literal" | "asset/objC/literal")[];
     /**
      * Transforms:
      *

package/lib/common/transformGroups.js

@@ -19,7 +19,7 @@ const {
   sizeRemToDp,
   sizePx,
   sizeRem,
-  sizeRemToPt,
+  sizeRemToFloat,
   sizeComposeRemToSp,
   sizeComposeRemToDp,
   sizeComposeEm,
@@ -250,7 +250,7 @@ export default {
     colorUIColor,
     contentObjCLiteral,
     assetObjCLiteral,
-    sizeRemToPt,
+    sizeRemToFloat,
   ],
   /**
    * Transforms:

package/lib/common/transforms.d.ts

@@ -31,6 +31,23 @@ export function getColorJS(val: DTCGColorValue | string): ColorJS;
  * @returns {boolean}
  */
 export function isColor(token: Token, options: Config): boolean;
+/**
+ * Parse and normalize the value of a dimension Token
+ * as DTCG dimension value -> { value: 15, unit: 'em' }
+ *
+ * Note: the result could contain a unitless dimension
+ * Historically in Style Dictionary, number tokens were defined as unitless dimension tokens
+ * We can `deprecated` this and remove that in a breaking change, forcing users to change them to number tokens
+ * @param {Token['value']} val
+ *
+ * unit can be undefined for this utility method as well to support old dimension token values
+ * which can be defined as unitless dimension tokens or numbers
+ * @returns {{ value: number; unit: TokenTypeDimensionUnit | undefined }}
+ */
+export function getTokenDimensionValue(val: Token["value"]): {
+    value: number;
+    unit: TokenTypeDimensionUnit | undefined;
+};
 declare const _default: {
     /**
      * Adds: category, type, item, subitem, and state on the attributes object based on the location in the style dictionary.
@@ -459,7 +476,7 @@ declare const _default: {
      * ```js
      * // Matches: token.type === 'fontSize'
      * // Returns:
-     * "10.0sp"
+     * "10.00sp"
      * ```
      *
      * @memberof Transforms
@@ -475,7 +492,7 @@ declare const _default: {
      * ```js
      * // Matches: token.type === 'dimension'
      * // Returns:
-     * "10.0dp"
+     * "10.00dp"
      * ```
      *
      * @memberof Transforms
@@ -517,7 +534,7 @@ declare const _default: {
      * ```js
      * // Matches: token.type === 'fontSize'
      * // Returns:
-     * "16.0sp"
+     * "16.00sp"
      * ```
      *
      * @memberof Transforms
@@ -528,12 +545,13 @@ declare const _default: {
         transform: (token: import("../../types/DesignToken.d.ts").TransformedToken, config: import("../../types/Config.d.ts").PlatformConfig, options: import("../../types/Config.d.ts").Config) => string;
     };
     /**
-     * Transforms the value from a REM size on web into a density-independent pixel (dp) value for non font-sizes on Android. It WILL scale the number by a factor of 16 (or the value of 'basePxFontSize' on the platform in your config).
+     * Transforms the value from a REM size on web into a density-independent pixel (dp) value for non font-sizes on Android.
+     * It WILL scale the number by a factor of 16 (or the value of 'basePxFontSize' on the platform in your config).
      *
      * ```js
      * // Matches: token.type === 'dimension'
      * // Returns:
-     * "16.0dp"
+     * "16.00dp"
      * ```
      *
      * @memberof Transforms
@@ -573,15 +591,31 @@ declare const _default: {
     "size/rem": {
         type: "value";
         filter: (token: import("../../types/DesignToken.d.ts").TransformedToken, options: import("../../types/Config.d.ts").Config) => boolean;
-        transform: (token: import("../../types/DesignToken.d.ts").TransformedToken, _: import("../../types/Config.d.ts").PlatformConfig, options: import("../../types/Config.d.ts").Config) => any;
+        transform: (token: import("../../types/DesignToken.d.ts").TransformedToken, _: import("../../types/Config.d.ts").PlatformConfig, options: import("../../types/Config.d.ts").Config) => string | 0;
     };
     /**
-     * Scales the number by 16 (or the value of 'basePxFontSize' on the platform in your config) and adds 'pt' to the end.
+     * Scales the number by 16 (or the value of 'basePxFontSize' on the platform in your config) and adds 'f' to the end.
      *
      * ```js
      * // Matches: token.type === 'dimension'
      * // Returns:
-     * "16pt"
+     * "16.00f"
+     * ```
+     *
+     * @memberof Transforms
+     */
+    "size/remToFloat": {
+        type: "value";
+        filter: (token: import("../../types/DesignToken.d.ts").TransformedToken, options: import("../../types/Config.d.ts").Config) => boolean;
+        transform: (token: import("../../types/DesignToken.d.ts").TransformedToken, config: import("../../types/Config.d.ts").PlatformConfig, options: import("../../types/Config.d.ts").Config) => string;
+    };
+    /**
+     * Scales the number by 16 (or the value of 'basePxFontSize' on the platform in your config) and adds 'f' to the end.
+     *
+     * ```js
+     * // Matches: token.type === 'dimension'
+     * // Returns:
+     * "16.00pt"
      * ```
      *
      * @memberof Transforms
@@ -592,12 +626,13 @@ declare const _default: {
         transform: (token: import("../../types/DesignToken.d.ts").TransformedToken, config: import("../../types/Config.d.ts").PlatformConfig, options: import("../../types/Config.d.ts").Config) => string;
     };
     /**
-     * Transforms the value from a REM size on web into a scale-independent pixel (sp) value for font sizes in Compose. It WILL scale the number by a factor of 16 (or the value of 'basePxFontSize' on the platform in your config).
+     * Transforms the value from a REM size on web into a scale-independent pixel (sp) value for font sizes in Compose.
+     * It WILL scale the number by a factor of 16 (or the value of 'basePxFontSize' on the platform in your config).
      *
      * ```kotlin
      * // Matches: token.type === 'fontSize'
      * // Returns:
-     * "16.0.sp"
+     * "16.00.sp"
      * ```
      *
      * @memberof Transforms
@@ -613,7 +648,7 @@ declare const _default: {
      * ```kotlin
      * // Matches: token.type === 'dimension'
      * // Returns:
-     * "16.0.dp"
+     * "16.00.dp"
      * ```
      *
      * @memberof Transforms
@@ -629,7 +664,7 @@ declare const _default: {
      * ```kotlin
      * // Matches: token.type === 'fontSize'
      * // Returns:
-     * "16.0em"
+     * "16.em"
      * ```
      *
      * @memberof Transforms
@@ -645,7 +680,7 @@ declare const _default: {
      * ```kotlin
      * // Matches: token.type === 'fontSize'
      * // Returns:
-     * "16.0.sp"
+     * "16.00.sp"
      * ```
      *
      * @memberof Transforms
@@ -661,7 +696,7 @@ declare const _default: {
      * ```kotlin
      * // Matches: token.type === 'dimension'
      * // Returns:
-     * "16.0.dp"
+     * "16.00.dp"
      * ```
      *
      * @memberof Transforms
@@ -703,11 +738,13 @@ declare const _default: {
         transform: (token: import("../../types/DesignToken.d.ts").TransformedToken, config: import("../../types/Config.d.ts").PlatformConfig, options: import("../../types/Config.d.ts").Config) => string;
     };
     /**
-     * Scales non-zero numbers to rem, and adds 'rem' to the end. If you define a "basePxFontSize" on the platform in your config, it will be used to scale the value, otherwise 16 (default web font size) will be used.
+     * Scales non-zero numbers to rem, and adds 'rem' to the end. If you define a "basePxFontSize" on the platform in your config,
+     * it will be used to scale the value, otherwise 16 (default web font size) will be used.
      *
      * ```js
      * // Matches: token.type === 'dimension'
      * // Returns:
+     * 0
      * "0"
      * "1rem"
      * ```
@@ -715,6 +752,21 @@ declare const _default: {
      * @memberof Transforms
      */
     "size/pxToRem": {
+        type: "value";
+        filter: (token: import("../../types/DesignToken.d.ts").TransformedToken, options: import("../../types/Config.d.ts").Config) => boolean;
+        transform: (token: import("../../types/DesignToken.d.ts").TransformedToken, config: import("../../types/Config.d.ts").PlatformConfig, options: import("../../types/Config.d.ts").Config) => string | 0;
+    };
+    /**
+     * Scales the number by 16 (or the value of 'basePxFontSize' on the platform in your config) to get to points for Flutter
+     *
+     * ```dart
+     * // Matches: token.type === 'dimension'
+     * // Returns: 16.00
+     * ```
+     *
+     * @memberof Transforms
+     */
+    "size/flutter/remToDouble": {
         type: "value";
         filter: (token: import("../../types/DesignToken.d.ts").TransformedToken, options: import("../../types/Config.d.ts").Config) => boolean;
         transform: (token: import("../../types/DesignToken.d.ts").TransformedToken, config: import("../../types/Config.d.ts").PlatformConfig, options: import("../../types/Config.d.ts").Config) => string;
@@ -1055,21 +1107,6 @@ declare const _default: {
         filter: typeof isAsset;
         transform: (token: import("../../types/DesignToken.d.ts").TransformedToken, _: import("../../types/Config.d.ts").PlatformConfig, options: import("../../types/Config.d.ts").Config) => string;
     };
-    /**
-     * Scales the number by 16 (or the value of 'basePxFontSize' on the platform in your config) to get to points for Flutter
-     *
-     * ```dart
-     * // Matches: token.type === 'dimension'
-     * // Returns: 16.00
-     * ```
-     *
-     * @memberof Transforms
-     */
-    "size/flutter/remToDouble": {
-        type: "value";
-        filter: (token: import("../../types/DesignToken.d.ts").TransformedToken, options: import("../../types/Config.d.ts").Config) => boolean;
-        transform: (token: import("../../types/DesignToken.d.ts").TransformedToken, config: import("../../types/Config.d.ts").PlatformConfig, options: import("../../types/Config.d.ts").Config) => string;
-    };
 };
 export default _default;
 export type Transform = import("../../types/Transform.d.ts").Transform;
@@ -1078,6 +1115,8 @@ export type DTCGColorValue = import("../../types/DesignToken.d.ts").DTCGColorVal
 export type DTCGColorSpace = import("../../types/DesignToken.d.ts").DTCGColorSpace;
 export type PlatformConfig = import("../../types/Config.d.ts").PlatformConfig;
 export type Config = import("../../types/Config.d.ts").Config;
+export type TokenTypeDimension = import("../../types/TokenTypes.d.ts").TokenTypeDimension;
+export type TokenTypeDimensionUnit = import("../../types/TokenTypes.d.ts").TokenTypeDimensionUnit;
 import Color from 'tinycolor2';
 import ColorJS from 'colorjs.io';
 /**

package/lib/common/transforms.js

@@ -1,10 +1,10 @@
 import Color from 'tinycolor2';
 import ColorJS from 'colorjs.io';
+import { camelCase, kebabCase, snakeCase } from 'change-case';
 import { join } from 'path-unified/posix';
-import { snakeCase, kebabCase, camelCase } from 'change-case';
+import { transformTypes, transforms } from '../enums/index.js';
 import convertToBase64 from '../utils/convertToBase64.js';
 import GroupMessages from '../utils/groupMessages.js';
-import { transforms, transformTypes } from '../enums/index.js';
 
 /**
  * @typedef {import('../../types/Transform.d.ts').Transform} Transform
@@ -13,6 +13,9 @@ import { transforms, transformTypes } from '../enums/index.js';
  * @typedef {import('../../types/DesignToken.d.ts').DTCGColorSpace} DTCGColorSpace
  * @typedef {import('../../types/Config.d.ts').PlatformConfig} PlatformConfig
  * @typedef {import('../../types/Config.d.ts').Config} Config
+ * @typedef {import('../../types/TokenTypes.d.ts').TokenTypeDimension} TokenTypeDimension
+ * @typedef {import('../../types/TokenTypes.d.ts').TokenTypeDimensionUnit} TokenTypeDimensionUnit
+ *
  */
 
 const UNKNOWN_CSS_FONT_PROPS_WARNINGS = GroupMessages.GROUP.UnknownCSSFontProperties;
@@ -371,6 +374,52 @@ function transformCubicBezierCSS(token, options) {
   return transformEasing(val);
 }
 
+/**
+ * Parse and normalize the value of a dimension Token
+ * as DTCG dimension value -> { value: 15, unit: 'em' }
+ *
+ * Note: the result could contain a unitless dimension
+ * Historically in Style Dictionary, number tokens were defined as unitless dimension tokens
+ * We can `deprecated` this and remove that in a breaking change, forcing users to change them to number tokens
+ * @param {Token['value']} val
+ *
+ * unit can be undefined for this utility method as well to support old dimension token values
+ * which can be defined as unitless dimension tokens or numbers
+ * @returns {{ value: number; unit: TokenTypeDimensionUnit | undefined }}
+ */
+export function getTokenDimensionValue(val) {
+  /** @type {TokenTypeDimensionUnit | undefined} */
+  let unit;
+  const valueObj = typeof val === 'object' && !Array.isArray(val) && val !== null;
+
+  // old string dimension value
+  if (!valueObj) {
+    // if it contains a unit -> split it into unit and val
+    const unitMatch = `${val}`.match(/[^0-9.-]+$/);
+    if (unitMatch) {
+      unit = /** @type {TokenTypeDimensionUnit} */ (unitMatch[0]);
+      val = parseFloat(val.replace(/([^0-9]+$)/, ''));
+    }
+    val = parseFloat(val);
+  }
+
+  return valueObj
+    ? { value: val.value, unit: val.unit }
+    : { value: val, unit: unit ? unit : undefined };
+}
+
+/**
+ * @param {string | undefined} prop
+ * @returns
+ */
+function normalizeDimensionProp(prop) {
+  if (prop !== undefined) {
+    const { value, unit } = getTokenDimensionValue(prop);
+    return `${value}${unit ?? ''}`;
+  }
+  return prop;
+}
+
 /**
  * @namespace Transforms
  * @type {Record<string, Omit<Transform, 'name'>>}
@@ -975,7 +1024,7 @@ export default {
    * ```js
    * // Matches: token.type === 'fontSize'
    * // Returns:
-   * "10.0sp"
+   * "10.00sp"
    * ```
    *
    * @memberof Transforms
@@ -984,10 +1033,13 @@ export default {
     type: value,
     filter: isFontSize,
     transform: function (token, _, options) {
-      const nonParsedVal = options.usesDtcg ? token.$value : token.value;
-      const val = parseFloat(nonParsedVal);
-      if (isNaN(val)) throwSizeError(token.name, nonParsedVal, 'sp');
-      return val.toFixed(2) + 'sp';
+      const tokenVal = options.usesDtcg ? token.$value : token.value;
+      const nonParsed = getTokenDimensionValue(tokenVal);
+      const val = parseFloat(`${nonParsed.value}`);
+      if (isNaN(val))
+        throwSizeError(token.name, options.usesDtcg ? token.$value : token.value, 'sp');
+
+      return `${val.toFixed(2)}sp`;
     },
   },
 
@@ -997,7 +1049,7 @@ export default {
    * ```js
    * // Matches: token.type === 'dimension'
    * // Returns:
-   * "10.0dp"
+   * "10.00dp"
    * ```
    *
    * @memberof Transforms
@@ -1006,10 +1058,13 @@ export default {
     type: value,
     filter: isDimension,
     transform: function (token, _, options) {
-      const nonParsedVal = options.usesDtcg ? token.$value : token.value;
-      const val = parseFloat(nonParsedVal);
-      if (isNaN(val)) throwSizeError(token.name, nonParsedVal, 'dp');
-      return val.toFixed(2) + 'dp';
+      const tokenVal = options.usesDtcg ? token.$value : token.value;
+      const nonParsed = getTokenDimensionValue(tokenVal);
+      const val = parseFloat(`${nonParsed.value}`);
+      if (isNaN(val))
+        throwSizeError(token.name, options.usesDtcg ? token.$value : token.value, 'dp');
+
+      return `${val.toFixed(2)}dp`;
     },
   },
 
@@ -1033,12 +1088,14 @@ export default {
     type: value,
     filter: (token, options) => isDimension(token, options) || isFontSize(token, options),
     transform: function (token, config, options) {
-      const value = options.usesDtcg ? token.$value : token.value;
-      const parsedVal = parseFloat(value);
-      if (isNaN(parsedVal)) throwSizeError(token.name, value, 'object');
+      const tokenVal = options.usesDtcg ? token.$value : token.value;
+      const nonParsed = getTokenDimensionValue(tokenVal);
+      const parsedVal = parseFloat(`${nonParsed.value}`);
+      if (isNaN(parsedVal))
+        throwSizeError(token.name, options.usesDtcg ? token.$value : token.value, 'object');
 
       return {
-        original: value,
+        original: options.usesDtcg ? token.$value : token.value,
         number: parsedVal,
         decimal: parsedVal / 100,
         scale: parsedVal * getBasePxFontSize(config),
@@ -1052,7 +1109,7 @@ export default {
    * ```js
    * // Matches: token.type === 'fontSize'
    * // Returns:
-   * "16.0sp"
+   * "16.00sp"
    * ```
    *
    * @memberof Transforms
@@ -1061,21 +1118,25 @@ export default {
     type: value,
     filter: isFontSize,
     transform: function (token, config, options) {
-      const value = options.usesDtcg ? token.$value : token.value;
-      const parsedVal = parseFloat(value);
+      const tokenVal = options.usesDtcg ? token.$value : token.value;
+      const nonParsed = getTokenDimensionValue(tokenVal);
+      const parsedVal = parseFloat(`${nonParsed.value}`);
       const baseFont = getBasePxFontSize(config);
-      if (isNaN(parsedVal)) throwSizeError(token.name, value, 'sp');
-      return (parsedVal * baseFont).toFixed(2) + 'sp';
+      if (isNaN(parsedVal))
+        throwSizeError(token.name, options.usesDtcg ? token.$value : token.value, 'sp');
+
+      return `${(parsedVal * baseFont).toFixed(2)}sp`;
     },
   },
 
   /**
-   * Transforms the value from a REM size on web into a density-independent pixel (dp) value for non font-sizes on Android. It WILL scale the number by a factor of 16 (or the value of 'basePxFontSize' on the platform in your config).
+   * Transforms the value from a REM size on web into a density-independent pixel (dp) value for non font-sizes on Android.
+   * It WILL scale the number by a factor of 16 (or the value of 'basePxFontSize' on the platform in your config).
    *
    * ```js
    * // Matches: token.type === 'dimension'
    * // Returns:
-   * "16.0dp"
+   * "16.00dp"
    * ```
    *
    * @memberof Transforms
@@ -1084,11 +1145,14 @@ export default {
     type: value,
     filter: isDimension,
     transform: function (token, config, options) {
-      const value = options.usesDtcg ? token.$value : token.value;
-      const parsedVal = parseFloat(value);
+      const tokenVal = options.usesDtcg ? token.$value : token.value;
+      const nonParsed = getTokenDimensionValue(tokenVal);
+      const parsedVal = parseFloat(`${nonParsed.value}`);
       const baseFont = getBasePxFontSize(config);
-      if (isNaN(parsedVal)) throwSizeError(token.name, value, 'dp');
-      return (parsedVal * baseFont).toFixed(2) + 'dp';
+      if (isNaN(parsedVal))
+        throwSizeError(token.name, options.usesDtcg ? token.$value : token.value, 'dp');
+
+      return `${(parsedVal * baseFont).toFixed(2)}dp`;
     },
   },
 
@@ -1107,10 +1171,13 @@ export default {
     type: value,
     filter: (token, options) => isDimension(token, options) || isFontSize(token, options),
     transform: function (token, _, options) {
-      const value = options.usesDtcg ? token.$value : token.value;
-      const parsedVal = parseFloat(value);
-      if (isNaN(parsedVal)) throwSizeError(token.name, value, 'px');
-      return parsedVal + 'px';
+      const tokenVal = options.usesDtcg ? token.$value : token.value;
+      const nonParsed = getTokenDimensionValue(tokenVal);
+      const parsedVal = parseFloat(`${nonParsed.value}`);
+      if (isNaN(parsedVal))
+        throwSizeError(token.name, options.usesDtcg ? token.$value : token.value, 'px');
+
+      return `${parsedVal}px`;
     },
   },
 
@@ -1129,29 +1196,53 @@ export default {
     type: value,
     filter: (token, options) => isDimension(token, options) || isFontSize(token, options),
     transform: function (token, _, options) {
-      const nonParsed = options.usesDtcg ? token.$value : token.value;
-      const parsedVal = parseFloat(nonParsed);
-
-      if (isNaN(parsedVal)) throwSizeError(token.name, nonParsed, 'rem');
-
-      // if the dimension already has a unit (non-digit / . period character or any arbitrary character)
-      if (`${nonParsed}`.match(/[^0-9.-]+$/)) {
-        return nonParsed;
+      const tokenVal = options.usesDtcg ? token.$value : token.value;
+      const nonParsed = getTokenDimensionValue(tokenVal);
+      const parsedVal = parseFloat(`${nonParsed.value}`);
+      if (isNaN(parsedVal))
+        throwSizeError(token.name, options.usesDtcg ? token.$value : token.value, 'rem');
+      if (parsedVal === 0) return 0;
+      if (nonParsed.unit !== undefined) {
+        return `${nonParsed.value}${nonParsed.unit}`;
       }
 
-      if (parsedVal === 0) return Number.isInteger(nonParsed) ? 0 : '0';
+      return `${parsedVal}rem`;
+    },
+  },
 
-      return parsedVal + 'rem';
+  /**
+   * Scales the number by 16 (or the value of 'basePxFontSize' on the platform in your config) and adds 'f' to the end.
+   *
+   * ```js
+   * // Matches: token.type === 'dimension'
+   * // Returns:
+   * "16.00f"
+   * ```
+   *
+   * @memberof Transforms
+   */
+  [transforms.sizeRemToFloat]: {
+    type: value,
+    filter: (token, options) => isDimension(token, options) || isFontSize(token, options),
+    transform: function (token, config, options) {
+      const tokenVal = options.usesDtcg ? token.$value : token.value;
+      const nonParsed = getTokenDimensionValue(tokenVal);
+      const parsedVal = parseFloat(`${nonParsed.value}`);
+      const baseFont = getBasePxFontSize(config);
+
+      if (isNaN(parsedVal))
+        throwSizeError(token.name, options.usesDtcg ? token.$value : token.value, 'f');
+      return `${(parsedVal * baseFont).toFixed(2)}f`;
     },
   },
 
   /**
-   * Scales the number by 16 (or the value of 'basePxFontSize' on the platform in your config) and adds 'pt' to the end.
+   * Scales the number by 16 (or the value of 'basePxFontSize' on the platform in your config) and adds 'f' to the end.
    *
    * ```js
    * // Matches: token.type === 'dimension'
    * // Returns:
-   * "16pt"
+   * "16.00pt"
    * ```
    *
    * @memberof Transforms
@@ -1160,21 +1251,25 @@ export default {
     type: value,
     filter: (token, options) => isDimension(token, options) || isFontSize(token, options),
     transform: function (token, config, options) {
-      const value = options.usesDtcg ? token.$value : token.value;
-      const parsedVal = parseFloat(value);
+      const tokenVal = options.usesDtcg ? token.$value : token.value;
+      const nonParsed = getTokenDimensionValue(tokenVal);
+      const parsedVal = parseFloat(`${nonParsed.value}`);
       const baseFont = getBasePxFontSize(config);
-      if (isNaN(parsedVal)) throwSizeError(token.name, value, 'pt');
-      return (parsedVal * baseFont).toFixed(2) + 'f';
+
+      if (isNaN(parsedVal))
+        throwSizeError(token.name, options.usesDtcg ? token.$value : token.value, 'pt');
+      return `${(parsedVal * baseFont).toFixed(2)}pt`;
     },
   },
 
   /**
-   * Transforms the value from a REM size on web into a scale-independent pixel (sp) value for font sizes in Compose. It WILL scale the number by a factor of 16 (or the value of 'basePxFontSize' on the platform in your config).
+   * Transforms the value from a REM size on web into a scale-independent pixel (sp) value for font sizes in Compose.
+   * It WILL scale the number by a factor of 16 (or the value of 'basePxFontSize' on the platform in your config).
    *
    * ```kotlin
    * // Matches: token.type === 'fontSize'
    * // Returns:
-   * "16.0.sp"
+   * "16.00.sp"
    * ```
    *
    * @memberof Transforms
@@ -1183,11 +1278,14 @@ export default {
     type: value,
     filter: isFontSize,
     transform: function (token, config, options) {
-      const value = options.usesDtcg ? token.$value : token.value;
-      const parsedVal = parseFloat(value);
+      const tokenVal = options.usesDtcg ? token.$value : token.value;
+      const nonParsed = getTokenDimensionValue(tokenVal);
+      const parsedVal = parseFloat(`${nonParsed.value}`);
       const baseFont = getBasePxFontSize(config);
-      if (isNaN(parsedVal)) throwSizeError(token.name, value, 'sp');
-      return (parsedVal * baseFont).toFixed(2) + '.sp';
+      if (isNaN(parsedVal))
+        throwSizeError(token.name, options.usesDtcg ? token.$value : token.value, 'sp');
+
+      return `${(parsedVal * baseFont).toFixed(2)}.sp`;
     },
   },
 
@@ -1197,7 +1295,7 @@ export default {
    * ```kotlin
    * // Matches: token.type === 'dimension'
    * // Returns:
-   * "16.0.dp"
+   * "16.00.dp"
    * ```
    *
    * @memberof Transforms
@@ -1206,11 +1304,14 @@ export default {
     type: value,
     filter: isDimension,
     transform: function (token, config, options) {
-      const value = options.usesDtcg ? token.$value : token.value;
-      const parsedVal = parseFloat(value);
+      const tokenVal = options.usesDtcg ? token.$value : token.value;
+      const nonParsed = getTokenDimensionValue(tokenVal);
+      const parsedVal = parseFloat(`${nonParsed.value}`);
       const baseFont = getBasePxFontSize(config);
-      if (isNaN(parsedVal)) throwSizeError(token.name, value, 'dp');
-      return (parsedVal * baseFont).toFixed(2) + '.dp';
+      if (isNaN(parsedVal))
+        throwSizeError(token.name, options.usesDtcg ? token.$value : token.value, 'dp');
+
+      return `${(parsedVal * baseFont).toFixed(2)}.dp`;
     },
   },
 
@@ -1220,7 +1321,7 @@ export default {
    * ```kotlin
    * // Matches: token.type === 'fontSize'
    * // Returns:
-   * "16.0em"
+   * "16.em"
    * ```
    *
    * @memberof Transforms
@@ -1229,10 +1330,13 @@ export default {
     type: value,
     filter: isFontSize,
     transform: function (token, _, options) {
-      const value = options.usesDtcg ? token.$value : token.value;
-      const parsedVal = parseFloat(value);
-      if (isNaN(parsedVal)) throwSizeError(token.name, value, 'em');
-      return parsedVal + '.em';
+      const tokenVal = options.usesDtcg ? token.$value : token.value;
+      const nonParsed = getTokenDimensionValue(tokenVal);
+      const parsedVal = parseFloat(`${nonParsed.value}`);
+      if (isNaN(parsedVal))
+        throwSizeError(token.name, options.usesDtcg ? token.$value : token.value, 'em');
+
+      return `${parsedVal}.em`;
     },
   },
 
@@ -1242,7 +1346,7 @@ export default {
    * ```kotlin
    * // Matches: token.type === 'fontSize'
    * // Returns:
-   * "16.0.sp"
+   * "16.00.sp"
    * ```
    *
    * @memberof Transforms
@@ -1251,10 +1355,13 @@ export default {
     type: value,
     filter: isFontSize,
     transform: function (token, _, options) {
-      const nonParsedVal = options.usesDtcg ? token.$value : token.value;
-      const val = parseFloat(nonParsedVal);
-      if (isNaN(val)) throwSizeError(token.name, nonParsedVal, 'sp');
-      return val.toFixed(2) + '.sp';
+      const tokenVal = options.usesDtcg ? token.$value : token.value;
+      const nonParsed = getTokenDimensionValue(tokenVal);
+      const val = parseFloat(`${nonParsed.value}`);
+      if (isNaN(val))
+        throwSizeError(token.name, options.usesDtcg ? token.$value : token.value, 'sp');
+
+      return `${val.toFixed(2)}.sp`;
     },
   },
 
@@ -1264,7 +1371,7 @@ export default {
    * ```kotlin
    * // Matches: token.type === 'dimension'
    * // Returns:
-   * "16.0.dp"
+   * "16.00.dp"
    * ```
    *
    * @memberof Transforms
@@ -1273,10 +1380,13 @@ export default {
     type: value,
     filter: isDimension,
     transform: function (token, _, options) {
-      const nonParsedVal = options.usesDtcg ? token.$value : token.value;
-      const val = parseFloat(nonParsedVal);
-      if (isNaN(val)) throwSizeError(token.name, nonParsedVal, 'dp');
-      return val.toFixed(2) + '.dp';
+      const tokenVal = options.usesDtcg ? token.$value : token.value;
+      const nonParsed = getTokenDimensionValue(tokenVal);
+      const val = parseFloat(`${nonParsed.value}`);
+      if (isNaN(val))
+        throwSizeError(token.name, options.usesDtcg ? token.$value : token.value, 'dp');
+
+      return `${val.toFixed(2)}.dp`;
     },
   },
 
@@ -1294,10 +1404,13 @@ export default {
     type: value,
     filter: (token, options) => isDimension(token, options) || isFontSize(token, options),
     transform: function (token, config, options) {
-      const value = options.usesDtcg ? token.$value : token.value;
-      const parsedVal = parseFloat(value);
+      const tokenVal = options.usesDtcg ? token.$value : token.value;
+      const nonParsed = getTokenDimensionValue(tokenVal);
+      const parsedVal = parseFloat(`${nonParsed.value}`);
       const baseFont = getBasePxFontSize(config);
-      if (isNaN(parsedVal)) throwSizeError(token.name, value, 'CGFloat');
+      if (isNaN(parsedVal))
+        throwSizeError(token.name, options.usesDtcg ? token.$value : token.value, 'CGFloat');
+
       return `CGFloat(${(parsedVal * baseFont).toFixed(2)})`;
     },
   },
@@ -1317,20 +1430,25 @@ export default {
     type: value,
     filter: (token, options) => isDimension(token, options) || isFontSize(token, options),
     transform: function (token, config, options) {
-      const value = options.usesDtcg ? token.$value : token.value;
-      const parsedVal = parseFloat(value);
+      const tokenVal = options.usesDtcg ? token.$value : token.value;
+      const nonParsed = getTokenDimensionValue(tokenVal);
+      const parsedVal = parseFloat(`${nonParsed.value}`);
       const baseFont = getBasePxFontSize(config);
-      if (isNaN(parsedVal)) throwSizeError(token.name, value, 'px');
-      return (parsedVal * baseFont).toFixed(0) + 'px';
+      if (isNaN(parsedVal))
+        throwSizeError(token.name, options.usesDtcg ? token.$value : token.value, 'px');
+
+      return `${(parsedVal * baseFont).toFixed(0)}px`;
     },
   },
 
   /**
-   * Scales non-zero numbers to rem, and adds 'rem' to the end. If you define a "basePxFontSize" on the platform in your config, it will be used to scale the value, otherwise 16 (default web font size) will be used.
+   * Scales non-zero numbers to rem, and adds 'rem' to the end. If you define a "basePxFontSize" on the platform in your config,
+   * it will be used to scale the value, otherwise 16 (default web font size) will be used.
    *
    * ```js
    * // Matches: token.type === 'dimension'
    * // Returns:
+   * 0
    * "0"
    * "1rem"
    * ```
@@ -1341,19 +1459,40 @@ export default {
     type: value,
     filter: (token, options) => isDimension(token, options) || isFontSize(token, options),
     transform: (token, config, options) => {
-      const value = options.usesDtcg ? token.$value : token.value;
-      const parsedVal = parseFloat(value);
+      const tokenVal = options.usesDtcg ? token.$value : token.value;
+      const nonParsed = getTokenDimensionValue(tokenVal);
+      const parsedVal = parseFloat(`${nonParsed.value}`);
       const baseFont = getBasePxFontSize(config);
+      if (isNaN(parsedVal))
+        throwSizeError(token.name, options.usesDtcg ? token.$value : token.value, 'rem');
+      if (parsedVal === 0) return 0;
 
-      if (isNaN(parsedVal)) {
-        throwSizeError(token.name, value, 'rem');
-      }
+      return `${parsedVal / baseFont}rem`;
+    },
+  },
 
-      if (parsedVal === 0) {
-        return '0';
-      }
+  /**
+   * Scales the number by 16 (or the value of 'basePxFontSize' on the platform in your config) to get to points for Flutter
+   *
+   * ```dart
+   * // Matches: token.type === 'dimension'
+   * // Returns: 16.00
+   * ```
+   *
+   * @memberof Transforms
+   */
+  [transforms.sizeFlutterRemToDouble]: {
+    type: value,
+    filter: (token, options) => isDimension(token, options) || isFontSize(token, options),
+    transform: function (token, config, options) {
+      const tokenVal = options.usesDtcg ? token.$value : token.value;
+      const nonParsed = getTokenDimensionValue(tokenVal);
+      const baseFont = getBasePxFontSize(config);
+      const parsedVal = parseFloat(`${nonParsed.value}`);
+      if (isNaN(parsedVal))
+        throwSizeError(token.name, options.usesDtcg ? token.$value : token.value, 'Number');
 
-      return `${parsedVal / baseFont}rem`;
+      return (parsedVal * baseFont).toFixed(2);
     },
   },
 
@@ -1377,9 +1516,9 @@ export default {
       return (options.usesDtcg ? token.$value : token.value).replace(
         UNICODE_PATTERN,
         /**
-         * @param {string} match
+         * @param {string} _
          * @param {string} variable */
-        function (match, variable) {
+        function (_, variable) {
           return "'\\" + variable + "'";
         },
       );
@@ -1566,11 +1705,15 @@ export default {
         return val;
       }
       const colorStr = getColorStringFromTokenObjectValue(val);
-      const { width } = val;
+      let { width } = val;
+
+      // normalize for DTCG dimension object values
+      width = normalizeDimensionProp(width);
 
       // use fallback for style object value, since CSS does not allow
       // detailed control of the dash pattern or line caps on dashed borders
       // https://design-tokens.github.io/community-group/format/#example-fallback-for-object-stroke-style
+      // this means we also don't have to take care of dashArray containing dimension object values
       let { style } = val;
       if (typeof style === 'object') {
         style = 'dashed';
@@ -1608,7 +1751,12 @@ export default {
         return val;
       }
       let { fontFamily } = val;
-      const { fontWeight, fontVariant, fontWidth, fontSize, fontStyle, lineHeight } = val;
+      let { fontSize, lineHeight } = val;
+      const { fontWeight, fontVariant, fontWidth, fontStyle } = val;
+
+      // normalize for DTCG dimension object values
+      fontSize = normalizeDimensionProp(fontSize);
+      lineHeight = normalizeDimensionProp(lineHeight);
 
       const CSSShorthandProps = [
         'fontStyle',
@@ -1663,6 +1811,7 @@ export default {
         // already transformed to string
         return val;
       }
+      // TODO: add support for DTCG duration object value type
       const { duration, delay, timingFunction } = val;
 
       return `${duration} ${timingFunction} ${delay}`;
@@ -1699,7 +1848,15 @@ export default {
         if (typeof val !== 'object') {
           return val;
         }
-        const { inset, type, offsetX, offsetY, blur, spread } = val;
+        const { inset, type } = val;
+        let { offsetX, offsetY, blur, spread } = val;
+
+        // normalize for DTCG dimension object values
+        offsetX = normalizeDimensionProp(offsetX);
+        offsetY = normalizeDimensionProp(offsetY);
+        blur = normalizeDimensionProp(blur);
+        spread = normalizeDimensionProp(spread);
+
         const colorStr = getColorStringFromTokenObjectValue(val);
         // `type` property will be deprecated (Tokens Studio compat) in the future and removed in v6
         return `${inset || type === 'inset' ? 'inset ' : ''}${offsetX ?? 0} ${offsetY ?? 0} ${blur ?? 0} ${
@@ -1855,23 +2012,4 @@ export default {
     filter: isAsset,
     transform: (token, _, options) => wrapValueWithDoubleQuote(token, options),
   },
-
-  /**
-   * Scales the number by 16 (or the value of 'basePxFontSize' on the platform in your config) to get to points for Flutter
-   *
-   * ```dart
-   * // Matches: token.type === 'dimension'
-   * // Returns: 16.00
-   * ```
-   *
-   * @memberof Transforms
-   */
-  [transforms.sizeFlutterRemToDouble]: {
-    type: value,
-    filter: (token, options) => isDimension(token, options) || isFontSize(token, options),
-    transform: function (token, config, options) {
-      const baseFont = getBasePxFontSize(config);
-      return (parseFloat(options.usesDtcg ? token.$value : token.value) * baseFont).toFixed(2);
-    },
-  },
 };

package/lib/enums/index.d.ts

@@ -8,6 +8,7 @@ export { logVerbosityLevels } from "./logVerbosityLevels.js";
 export { logWarningLevels } from "./logWarningLevels.js";
 export { propertyFormatNames } from "./propertyFormatNames.js";
 export { builtInSorts } from "./sorts.js";
+export { dimensionUnit } from "./tokenTypes.js";
 export { transformGroups } from "./transformGroups.js";
 export { transforms } from "./transforms.js";
 export { transformTypes } from "./transformTypes.js";

package/lib/enums/index.js

@@ -8,6 +8,7 @@ export { logVerbosityLevels } from './logVerbosityLevels.js';
 export { logWarningLevels } from './logWarningLevels.js';
 export { propertyFormatNames } from './propertyFormatNames.js';
 export { builtInSorts } from './sorts.js';
+export { dimensionUnit } from './tokenTypes.js';
 export { transformGroups } from './transformGroups.js';
 export { transforms } from './transforms.js';
 export { transformTypes } from './transformTypes.js';

package/lib/enums/tokenTypes.d.ts

@@ -0,0 +1,4 @@
+export namespace dimensionUnit {
+    let px: "px";
+    let rem: "rem";
+}

package/lib/enums/tokenTypes.js

@@ -0,0 +1,9 @@
+// TODO: add enum for token types
+// TODO: add enums for token type -> values
+
+// So far DTCG spec supports these units,
+// although in Style Dictionary we allow more than these two.
+export const dimensionUnit = {
+  px: /** @type {'px'} */ ('px'),
+  rem: /** @type {'rem'} */ ('rem'),
+};

package/lib/enums/transforms.d.ts

@@ -25,6 +25,7 @@ export namespace transforms {
     let sizeRemToDp: "size/remToDp";
     let sizePx: "size/px";
     let sizeRem: "size/rem";
+    let sizeRemToFloat: "size/remToFloat";
     let sizeRemToPt: "size/remToPt";
     let sizeComposeRemToSp: "size/compose/remToSp";
     let sizeComposeRemToDp: "size/compose/remToDp";

package/lib/enums/transforms.js

@@ -25,6 +25,7 @@ export const transforms = {
   sizeRemToDp: /** @type {'size/remToDp'} */ ('size/remToDp'),
   sizePx: /** @type {'size/px'} */ ('size/px'),
   sizeRem: /** @type {'size/rem'} */ ('size/rem'),
+  sizeRemToFloat: /** @type {'size/remToFloat'} */ ('size/remToFloat'),
   sizeRemToPt: /** @type {'size/remToPt'} */ ('size/remToPt'),
   sizeComposeRemToSp: /** @type {'size/compose/remToSp'} */ ('size/compose/remToSp'),
   sizeComposeRemToDp: /** @type {'size/compose/remToDp'} */ ('size/compose/remToDp'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "style-dictionary",
-  "version": "5.3.2",
+  "version": "5.4.0",
   "description": "Style once, use everywhere. A build system for creating cross-platform styles.",
   "keywords": [
     "style dictionary",
@@ -58,8 +58,8 @@
     "test:watch": "web-test-runner --watch",
     "test:coverage": "cd coverage/lcov-report && npx http-server -o -c-1",
     "test:update-snapshots": "web-test-runner --update-snapshots",
-    "test:node": "mocha -r mocha-hooks.mjs './__integration__/**/*.test.js' './__tests__/**/*.test.js' './__node_tests__/**/*.test.js'",
-    "test:perf": "mocha -r mocha-hooks.mjs './__perf_tests__/**/*.test.js'",
+    "test:node": "mocha -r mocha-hooks.mjs \"./__integration__/**/*.test.js\" \"./__tests__/**/*.test.js\" \"./__node_tests__/**/*.test.js\"",
+    "test:perf": "mocha -r mocha-hooks.mjs \"./__perf_tests__/**/*.test.js\"",
     "test:perf:debug": "web-test-runner --config wtr-perf.config.mjs --watch",
     "test:strip-types": "node --experimental-strip-types __tests__/strip-types-test.js",
     "install-cli": "npm install -g $(npm pack)",
@@ -117,7 +117,7 @@
   },
   "dependencies": {
     "@bundled-es-modules/deepmerge": "^4.3.1",
-    "@bundled-es-modules/glob": "^13.0.3",
+    "@bundled-es-modules/glob": "^13.0.6",
     "@bundled-es-modules/memfs": "^4.17.0",
     "@zip.js/zip.js": "^2.7.44",
     "chalk": "^5.3.0",
@@ -150,7 +150,7 @@
     "@web/test-runner-playwright": "^0.11.0",
     "acorn": "^8.11.3",
     "astro": "^5.13.2",
-    "chai": "^5.0.0-alpha.2",
+    "chai": "^6.2.2",
     "eslint": "^9.19.0",
     "eslint-plugin-mocha": "^10.5.0",
     "eslint-plugin-react": "^7.37.4",
@@ -158,23 +158,19 @@
     "fs-extra": "^10.0.0",
     "hanbi": "^1.0.1",
     "husky": "^8.0.3",
-    "jsdoc-escape-at": "^1.0.1",
-    "jsdoc-to-markdown": "^8.0.0",
-    "jsdoc-tsimport-plugin": "^1.0.5",
     "less": "^4.1.2",
     "lint-staged": "^12.3.1",
     "lit": "^3.1.2",
     "mdast": "^3.0.0",
-    "mermaid": "^10.9.5",
-    "mocha": "^10.2.0",
+    "mermaid": "^11.12.3",
+    "mocha": "^12.0.0-beta-10",
     "monaco-editor": "^0.47.0",
     "npm-run-all": "^4.1.5",
-    "patch-package": "^8.0.0",
+    "patch-package": "^8.0.1",
     "sass": "^1.69.5",
     "semver": "^7.6.3",
     "sharp": "^0.32.5",
     "starlight-links-validator": "^0.16.0",
-    "stylus": "^0.56.0",
     "typescript": "^5.7.2",
     "unist-util-visit": "^5.0.0",
     "uuid": "^9.0.1",

package/types/TokenTypes.d.ts

@@ -0,0 +1,6 @@
+import { dimensionUnit } from '../lib/enums/index.js';
+export type TokenTypeDimensionUnit = (typeof dimensionUnit)[keyof typeof dimensionUnit];
+export interface TokenTypeDimension {
+    value: number;
+    unit: TokenTypeDimensionUnit;
+}

package/types/index.d.ts

@@ -7,5 +7,6 @@ export type { Format, FormatFnArguments, FormatFn, OutputReferences } from './Fo
 export type { SortOption, SortFn, BuiltInSorts } from './Sort.js';
 export type { Parser, ParserOptions } from './Parser.js';
 export type { Preprocessor } from './Preprocessor.js';
+export type { TokenTypeDimension, TokenTypeDimensionUnit } from './TokenTypes.js';
 export type { Transform, NameTransform, AttributeTransform, ValueTransform } from './Transform.js';
 export type { Volume } from './Volume.js';