adding deprecated filter and transformer to index

Author: lukasoppermann

src/build.test.js

@@ -13,6 +13,7 @@ describe('index.js', () => {
     expect(StyleDictionary.hooks.transforms["color/rgbAlpha"]).toBeDefined();
     expect(StyleDictionary.hooks.transforms["color/rgbaFloat"]).toBeDefined();
     expect(StyleDictionary.hooks.transforms["color/hexAlpha"]).toBeDefined();
+    expect(StyleDictionary.hooks.transforms["comment/deprecated"]).toBeDefined();
     expect(StyleDictionary.hooks.transforms["clamp/css"]).toBeDefined();
     expect(StyleDictionary.hooks.transforms["name/pathToDotNotation"]).toBeDefined();
     expect(StyleDictionary.hooks.transforms["name/pathToCamelCase"]).toBeDefined();
@@ -37,6 +38,7 @@ describe('index.js', () => {
     expect(StyleDictionary.hooks.filters["isColorOrGradient"]).toBeDefined();
     expect(StyleDictionary.hooks.filters["isCubicBezier"]).toBeDefined();
     expect(StyleDictionary.hooks.filters["isClamp"]).toBeDefined();
+    expect(StyleDictionary.hooks.filters['isDeprecated']).toBeDefined()
     expect(StyleDictionary.hooks.filters["isDimension"]).toBeDefined();
     expect(StyleDictionary.hooks.filters["isDuration"]).toBeDefined();
     expect(StyleDictionary.hooks.filters["isFontFamily"]).toBeDefined();

src/filter/isDeprecated.test.ts

@@ -0,0 +1,25 @@
+import { TransformedToken } from 'style-dictionary/types';
+import { isDeprecated } from './isDeprecated';
+
+describe('Filter: isDeprecated', () => {
+  const items = [{
+    value: 'true boolean',
+    deprecated: true,
+  }, {
+    value: 'true string',
+    deprecated: "a valid string e.g. to inform about a replacement",
+  }, {
+    value: 'false boolean',
+    deprecated: false,
+  }, {
+    value: 'false string',
+    deprecated: "false",
+  }, {
+    value: 'nothing',
+  }] as TransformedToken[];
+
+  it('filters deprecated tokens', () => {
+    expect(items.filter(isDeprecated)).toStrictEqual([items[0], items[1]]);
+  });
+
+});

src/filter/isDeprecated.ts

@@ -0,0 +1,7 @@
+import { TransformedToken } from 'style-dictionary/types';
+/**
+ * @name isDeprecated
+ * @type filter
+ * @description only returns tokens with deprecated = true
+ */
+export const isDeprecated = (token: TransformedToken): boolean => typeof token.deprecated === 'string' && token.deprecated !== 'false' || token.deprecated === true;

src/index.test.ts

@@ -23,6 +23,7 @@ describe('index.ts', () => {
     expect(StyleDictionary.hooks.transforms['color/rgbAlpha']).toBeDefined()
     expect(StyleDictionary.hooks.transforms['color/rgbaFloat']).toBeDefined()
     expect(StyleDictionary.hooks.transforms['color/hexAlpha']).toBeDefined()
+    expect(StyleDictionary.hooks.transforms['comment/deprecated']).toBeDefined()
     expect(StyleDictionary.hooks.transforms["clamp/css"]).toBeDefined();
     expect(StyleDictionary.hooks.transforms['name/pathToDotNotation']).toBeDefined()
     expect(StyleDictionary.hooks.transforms['name/pathToCamelCase']).toBeDefined()
@@ -47,6 +48,7 @@ describe('index.ts', () => {
     expect(StyleDictionary.hooks.filters['isColorOrGradient']).toBeDefined()
     expect(StyleDictionary.hooks.filters['isCubicBezier']).toBeDefined()
     expect(StyleDictionary.hooks.filters["isClamp"]).toBeDefined();
+    expect(StyleDictionary.hooks.filters['isDeprecated']).toBeDefined()
     expect(StyleDictionary.hooks.filters['isDimension']).toBeDefined()
     expect(StyleDictionary.hooks.filters['isDuration']).toBeDefined()
     expect(StyleDictionary.hooks.filters['isFontFamily']).toBeDefined()

src/index.ts

@@ -4,6 +4,7 @@ import { isClamp } from './filter/isClamp'
 import { isColor } from './filter/isColor'
 import { isColorOrGradient } from './filter/isColorOrGradient'
 import { isCubicBezier } from './filter/isCubicBezier'
+import { isDeprecated } from './filter/isDeprecated'
 import { isDimension } from './filter/isDimension'
 import { isDuration } from './filter/isDuration'
 import { isFontFamily } from './filter/isFontFamily'
@@ -28,6 +29,7 @@ import { colorAlphaToRgba } from './transformer/color-alpha-to-rgba'
 import { colorToHex } from './transformer/color-to-hex'
 import { colorToRgba } from './transformer/color-to-rgba'
 import { colorToRgbaFloat } from './transformer/color-to-rgba-float'
+import { commentDeprecated } from './transformer/comment-deprecated'
 import { cubicBezierCss } from './transformer/cubic-bezier-css'
 import { dimensionPixelToRem } from './transformer/dimension-pixel-to-rem'
 import { dimensionRemToPixel } from './transformer/dimension-rem-to-pixel'
@@ -95,6 +97,10 @@ OrigialStyleDictionary.registerTransform({
   ...colorToRgbaFloat
 })
 
+OrigialStyleDictionary.registerTransform({
+  ...commentDeprecated
+})
+
 OrigialStyleDictionary.registerTransform({
   ...namePathToDotNotation
 })
@@ -220,6 +226,11 @@ OrigialStyleDictionary.registerFilter({
   filter: isDuration
 })
 
+OrigialStyleDictionary.registerFilter({
+  name: 'isDeprecated',
+  filter: isDeprecated
+})
+
 OrigialStyleDictionary.registerFilter({
   name: 'isDimension',
   filter: isDimension

src/transformer/comment-deprecated.test.ts

@@ -0,0 +1,53 @@
+import { TransformedToken } from "style-dictionary/types";
+import { commentDeprecated } from "./comment-deprecated";
+
+describe("transform: commentDeprecated", () => {
+  const items = [
+    {
+      value: "true boolean",
+      deprecated: true,
+    },
+    {
+      value: "true string",
+      deprecated: "a valid string e.g. to inform about a replacement",
+    },
+    {
+      value: "false boolean",
+      deprecated: false,
+    },
+    {
+      value: "false string",
+      deprecated: "false",
+    },
+    {
+      value: "nothing",
+    },
+  ] as TransformedToken[];
+
+  it("matches tokens with valid `deprecated` property", () => {
+    expect(items.filter(commentDeprecated.filter)).toStrictEqual([
+      items[0],
+      items[1],
+    ]);
+  });
+
+  it("adds deprecated comment to tokens", () => {
+    expect(
+      items
+        .filter(commentDeprecated.filter)
+        .map((item) => commentDeprecated.transform(item, {}, {}))
+    ).toStrictEqual([
+      {
+        $description: "DEPRECATED",
+        deprecated: true,
+        value: "true boolean",
+      },
+      {
+        $description:
+          "DEPRECATED: a valid string e.g. to inform about a replacement",
+        deprecated: "a valid string e.g. to inform about a replacement",
+        value: "true string",
+      },
+    ]);
+  });
+});

src/transformer/comment-deprecated.ts

@@ -0,0 +1,17 @@
+import { Transform, TransformedToken } from 'style-dictionary/types';
+import { isDeprecated } from '../filter/isDeprecated';
+
+/**
+ * commentDeprecated
+ * @description replaces the comment of a token with the deprecated comment 
+ */
+export const commentDeprecated: Transform = {
+  name: 'comment/deprecated',
+  type: `attribute`,
+  transitive: true,
+  filter: isDeprecated,
+  transform: (token: TransformedToken) => {
+    token.$description = `DEPRECATED${typeof token.deprecated === 'string' && token.deprecated !== 'true' ? `: ${token.deprecated}` : ''}`;
+    return token;
+  }
+}