refactor: remove css safelist and add IconExtractor

.changeset/many-bottles-hope.md

@@ -0,0 +1,6 @@
+---
+"@cypress-design/css": patch
+---
+
+To avoid having every color in the universe in the **safelist**, add the IconExtractor.
+Also, remove the entire safelist from the css plugins windi config.

css/src/icon-color-plugins.ts

@@ -8,6 +8,8 @@
 import createPlugin from 'windicss/plugin';
 import { reduce, kebabCase, isObject } from 'lodash';
 import { colors } from './colors';
+import { DefaultExtractor } from 'vite-plugin-windicss';
+import { Extractor } from 'windicss/types/interfaces';
 
 interface RuleConfig {
   name: string;
@@ -157,3 +159,49 @@ export const IconDuotoneColorsPlugin = createPlugin(
     addUtilities(addIconUtilityClasses(theme));
   }
 );
+
+const ICON_ATTRIBUTE_NAMES_TO_CLASS_GENERATOR = {
+  fillColor: (attrValue: string) => `icon-light-${attrValue}`,
+  strokeColor: (attrValue: string) => `icon-dark-${attrValue}`,
+  secondaryFillColor: (attrValue: string) =>
+    `icon-light-secondary-${attrValue}`,
+  secondaryStrokeColor: (attrValue: string) =>
+    `icon-dark-secondary-${attrValue}`,
+} as const;
+
+function isIconAttribute(
+  attrName: string
+): attrName is keyof typeof ICON_ATTRIBUTE_NAMES_TO_CLASS_GENERATOR {
+  return ICON_ATTRIBUTE_NAMES_TO_CLASS_GENERATOR.hasOwnProperty(attrName);
+}
+
+/**
+ * transforms the attributes of icons into classes
+ * to be kept in the windicss css file after purgecss
+ */
+export const IconExtractor: Extractor = {
+  extensions: ['vue', 'js', 'ts', 'tsx'],
+  extractor: (code, id) => {
+    const { tags, classes = [], attributes } = DefaultExtractor(code, id);
+
+    const additionalColorClasses =
+      attributes?.names.reduce((set, attrName, index) => {
+        if (isIconAttribute(attrName)) {
+          set.add(
+            ICON_ATTRIBUTE_NAMES_TO_CLASS_GENERATOR[attrName](
+              attributes.values[index]
+            )
+          );
+        }
+        return set;
+      }, new Set<string>()) ?? new Set<string>();
+
+    return {
+      tags,
+      get classes() {
+        return [...classes, ...Array.from(additionalColorClasses)];
+      },
+      attributes,
+    };
+  },
+};

css/src/windi.config.ts

@@ -1,8 +1,7 @@
 import { defineConfig } from 'windicss/helpers';
 // @ts-ignore
 import InteractionVariants from '@windicss/plugin-interaction-variants';
-import { IconDuotoneColorsPlugin } from './icon-color-plugins';
-import { safelist } from './safelist';
+import { IconDuotoneColorsPlugin, IconExtractor } from './icon-color-plugins';
 import { colors } from './colors';
 import { shortcuts } from './shortcuts';
 
@@ -28,7 +27,6 @@ export default defineConfig({
       },
     },
   },
-  safelist,
   variants: {
     // What's hocus?
     // Hocus is a portmanteau of hover + focus. This is useful because
@@ -53,5 +51,6 @@ export default defineConfig({
   shortcuts,
   extract: {
     exclude: ['node_modules/**/*', '.git/**/*'],
+    extractors: [IconExtractor],
   },
 });

package.json

@@ -45,7 +45,7 @@
     "@vue/tsconfig": "^0.1.3",
     "axe-core": "^4.4.2",
     "concurrently": "^7.1.0",
-    "cypress": "https://cdn.cypress.io/beta/npm/10.0.0/darwin-x64/10.0-release-fec27a0be952c91b96f3b9b5efd5fe7488312fc4/cypress.tgz",
+    "cypress": "https://cdn.cypress.io/beta/npm/10.0.0/darwin-x64/10.0-release-d335f5cd8a0d244ada59892c41af51c66c44463f/cypress.tgz",
     "cypress-axe": "^0.14.0",
     "execa": "^6.1.0",
     "hygen": "^6.2.0",
@@ -55,4 +55,4 @@
     "vite": "^2.9.1",
     "vue-tsc": "^0.33.9"
   }
-}
+}

storybook/intro/.storybook/main.js

@@ -1,4 +1,5 @@
-const { CyCSSWebpackPlugin } = require('@cypress-design/css');
+const { CyCSSWebpackPlugin, colors } = require('@cypress-design/css');
+const { map, reduce, kebabCase } = require('lodash');
 const path = require('path');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
@@ -8,7 +9,6 @@ module.exports = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     'storybook-addon-designs',
-    // "@storybook/addon-interactions",
   ],
   framework: '@storybook/react',
   refs: (config, { configType }) => {
@@ -78,6 +78,27 @@ module.exports = {
             path.resolve(__dirname, '../stories/src/*.tsx'),
           ],
         },
+        safelist: reduce(
+          { ...colors, transparent: { ONLY: true }, current: { ONLY: true } },
+          (acc, variants, colorName) => {
+            const name = kebabCase(colorName);
+
+            return `${acc}
+            ${map(variants, (_, k) => {
+              if (k === 'DEFAULT') return ``;
+              const variantName = k === 'ONLY' ? name : `${name}-${k}`;
+              return `
+                bg-${variantName}
+                text-${variantName}
+                before:bg-${variantName}
+                before:text-${variantName}
+                icon-light-${variantName}
+                icon-dark-${variantName}
+                icon-light-secondary-${variantName}
+                icon-dark-secondary-${variantName}`;
+            }).join(' ')}`;
+          }
+        ),
       })
     );
     return config;

storybook/intro/package.json

@@ -12,10 +12,10 @@
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
-    "@storybook/addon-actions": "^6.4.22",
-    "@storybook/addon-essentials": "^6.4.22",
-    "@storybook/addon-links": "^6.4.22",
-    "@storybook/react": "^6.4.22",
+    "@storybook/addon-actions": "^6.5.0",
+    "@storybook/addon-essentials": "^6.5.0",
+    "@storybook/addon-links": "^6.5.0",
+    "@storybook/react": "^6.5.0",
     "chroma-js": "^2.4.2",
     "copy-webpack-plugin": "^6.3.2",
     "flat": "^5.0.2",
@@ -27,4 +27,4 @@
     "windicss": "^3.5.1",
     "windicss-webpack-plugin": "^1.6.10"
   }
-}
+}

storybook/react/package.json

@@ -14,11 +14,11 @@
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
-    "@storybook/addon-actions": "^6.4.22",
-    "@storybook/addon-essentials": "^6.4.22",
-    "@storybook/addon-links": "^6.4.22",
+    "@storybook/addon-actions": "^6.5.0",
+    "@storybook/addon-essentials": "^6.5.0",
+    "@storybook/addon-links": "^6.5.0",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.4.22",
+    "@storybook/react": "^6.5.0",
     "chroma-js": "^2.4.2",
     "copyfiles": "^2.4.1",
     "css-loader": "5",
@@ -34,4 +34,4 @@
   },
   "author": "",
   "license": "ISC"
-}
+}

storybook/vue/package.json

@@ -12,16 +12,16 @@
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
-    "@storybook/addon-actions": "^6.4.22",
-    "@storybook/addon-essentials": "^6.4.22",
-    "@storybook/addon-links": "^6.4.22",
+    "@storybook/addon-actions": "^6.5.0",
+    "@storybook/addon-essentials": "^6.5.0",
+    "@storybook/addon-links": "^6.5.0",
     "@storybook/builder-vite": "^0.1.29",
-    "@storybook/vue3": "^6.4.22",
+    "@storybook/vue3": "^6.5.0",
     "@types/node": "^16.11.26",
     "babel-loader": "^8.2.4",
     "copyfiles": "^2.4.1",
     "storybook-addon-designs": "^6.2.1",
     "vite-plugin-windicss": "^1.8.4",
     "windicss": "^3.5.1"
   }
-}
+}