w3c shadow token

README.md

@@ -31,7 +31,7 @@ const myStyleDictionary = new StyleDictionary()
 const extendedSd = await myStyleDictionary.extend({
   platforms: {
     ts: {
-      transforms: ['color/hexAlpha', 'shadow/css'],
+      transforms: ['color/hexAlpha', 'deprecated-shadow/css'],
       files: [
         {
           filter: 'isSource',
@@ -83,7 +83,7 @@ StyleDictionary.registerTransform({
   - [color/hex](#colorhex)
   - [color/rgba](#colorrgba)
   - [color/rgbaFloat](#colorrgbafloat)
-  - [shadow/css](#shadowcss)
+  - [deprecated-shadow/css](#deprecated-shadowcss)
   - [font/css](#fontcss)
   - [fontFamily/css](#fontfamilycss)
   - [fontWeight/number](#fontweightnumber)
@@ -274,7 +274,7 @@ myStyleDictionary.registerTransformGroup({
 #### `css/extended` transform group
 
 This packages ships a predefined transform group, called `css/extended`.
-It includes all transforms from the original [`css` transform group](https://amzn.github.io/style-dictionary/#/transform_groups?id=css) as well as the following transforms: `color/rgbAlpha`, `shadow/css`, `font/css`, `fontFamily/css`, `fontWeight/number`, `name/pathToDotNotation`, `cubicBezier/css`, `border/css`.
+It includes all transforms from the original [`css` transform group](https://amzn.github.io/style-dictionary/#/transform_groups?id=css) as well as the following transforms: `color/rgbAlpha`, `deprecated-shadow/css`, `font/css`, `fontFamily/css`, `fontWeight/number`, `name/pathToDotNotation`, `cubicBezier/css`, `border/css`.
 
 You can use it like any other transform Group:
 
@@ -688,15 +688,15 @@ myStyleDictionary.extend({
 }
 ```
 
-### shadow/css
+### deprecated-shadow/css
 
 This `value` transformer replaces the value of a w3c shadow token with a `$type` or `type` of `shadow` with a `css` shadow string.
 
 ```js
 myStyleDictionary.extend({
   platforms: {
     ts: {
-      transforms: ['shadow/css'],
+      transforms: ['deprecated-shadow/css'],
       files: [
         {
           // ...

src/index.ts

@@ -1,4 +1,22 @@
-import OrigialStyleDictionary from 'style-dictionary'
+import {borderCss} from './transformer/border-css.js'
+import {clampCss} from './transformer/clamp-css.js'
+import {colorAlphaToHex} from './transformer/color-alpha-to-hex.js'
+import {colorAlphaToRgba} from './transformer/color-alpha-to-rgba.js'
+import {colorToHex} from './transformer/color-to-hex.js'
+import {colorToRgba} from './transformer/color-to-rgba.js'
+import {colorToRgbaFloat} from './transformer/color-to-rgba-float.js'
+import {commentDeprecated} from './transformer/comment-deprecated.js'
+import {cssAdvanced} from './format/css-advanced.js'
+import {cssExtended} from './transformGroups/cssExtended.js'
+import {cubicBezierCss} from './transformer/cubic-bezier-css.js'
+import {dimensionPixelToRem} from './transformer/dimension-pixel-to-rem.js'
+import {dimensionRemToPixel} from './transformer/dimension-rem-to-pixel.js'
+import {dimensionToPixelUnitless} from './transformer/dimension-to-pixelUnitless.js'
+import {durationToCss} from './transformer/durationToCss.js'
+import {fontCss} from './transformer/font-css.js'
+import {fontFamilyCss} from './transformer/font-family-css.js'
+import {fontWeightToNumber} from './transformer/font-weight-to-number.js'
+import {gradientCss} from './transformer/gradient-css.js'
 import {isBorder} from './filter/isBorder.js'
 import {isClamp} from './filter/isClamp.js'
 import {isColor} from './filter/isColor.js'
@@ -10,42 +28,24 @@ import {isDuration} from './filter/isDuration.js'
 import {isFontFamily} from './filter/isFontFamily.js'
 import {isFontWeight} from './filter/isFontWeight.js'
 import {isGradient} from './filter/isGradient.js'
+import {isNumber} from './filter/isNumber.js'
 import {isShadow} from './filter/isShadow.js'
 import {isSource} from './filter/isSource.js'
 import {isStrokeStyle} from './filter/isStrokeStyle.js'
 import {isTransition} from './filter/isTransition.js'
 import {isTypographic} from './filter/isTypographic.js'
 import {isTypography} from './filter/isTypography.js'
-import {cssAdvanced} from './format/css-advanced.js'
 import {javascriptCommonJs} from './format/javascript-commonJs.js'
 import {javascriptEsm} from './format/javascript-esm.js'
-import {typescriptEsmDeclarations} from './format/typescript-esm-declarations.js'
-import {cssExtended} from './transformGroups/cssExtended.js'
-import {borderCss} from './transformer/border-css.js'
-import {clampCss} from './transformer/clamp-css.js'
-import {colorAlphaToHex} from './transformer/color-alpha-to-hex.js'
-import {colorAlphaToRgba} from './transformer/color-alpha-to-rgba.js'
-import {colorToHex} from './transformer/color-to-hex.js'
-import {colorToRgba} from './transformer/color-to-rgba.js'
-import {colorToRgbaFloat} from './transformer/color-to-rgba-float.js'
-import {commentDeprecated} from './transformer/comment-deprecated.js'
-import {cubicBezierCss} from './transformer/cubic-bezier-css.js'
-import {dimensionPixelToRem} from './transformer/dimension-pixel-to-rem.js'
-import {dimensionRemToPixel} from './transformer/dimension-rem-to-pixel.js'
-import {dimensionToPixelUnitless} from './transformer/dimension-to-pixelUnitless.js'
-import {durationToCss} from './transformer/durationToCss.js'
-import {fontCss} from './transformer/font-css.js'
-import {fontFamilyCss} from './transformer/font-family-css.js'
-import {fontWeightToNumber} from './transformer/font-weight-to-number.js'
-import {gradientCss} from './transformer/gradient-css.js'
-import {namePathToDotNotation} from './transformer/name-path-to-dot-notation.js'
 import {namePathToCamelCase} from './transformer/name-path-to-camel-case.js'
-import {shadowCss} from './transformer/shadow-css.js'
-import {isNumber} from './filter/isNumber.js'
+import {namePathToDotNotation} from './transformer/name-path-to-dot-notation.js'
 import {number} from './transformer/number.js'
 import {colorToCss} from './transformer/color-to-css.js'
 import {transitionCss} from './transformer/transition-to-css.js'
+import {shadowCss} from './transformer/shadow-css.js'
 import {strokeStyleCss} from './transformer/strokeStyle-to-css.js'
+import {typescriptEsmDeclarations} from './format/typescript-esm-declarations.js'
+import OrigialStyleDictionary from 'style-dictionary'
 
 /**
  * Formats

src/transformer/number.test.ts

@@ -43,10 +43,12 @@ describe('transform: number', () => {
   ] as TransformedToken[]
 
   it('transforms `number` tokens', () => {
+    // @ts-expect-error: because of testing with invalid data
     expect(items.filter(number.filter).map(item => number.transform(item, {}, {}))).toEqual([0, 20, 20.5])
   })
 
   it('throws on invalid `number` tokens', () => {
+    // @ts-expect-error: because of testing with invalid data
     const filtered = invalidItems.filter(number.filter)
 
     filtered.map(item => {