feat: css another round of fixes (#66)

* add astro to the icon-color-plugin

* fix getconfig

* add changeset

Author: elevatebart

.changeset/twelve-pens-jog.md

@@ -0,0 +1,6 @@
+---
+'@cypress-design/css': patch
+---
+
+- Add astro compatibility
+- Fix config merge (lodash is messing up with arrays)

css/package.json

@@ -7,7 +7,7 @@
     "src"
   ],
   "scripts": {
-    "build": "tsc"
+    "build": "tsc -p ./tsconfig.build.json"
   },
   "dependencies": {
     "@windicss/plugin-interaction-variants": "^1.0.0",

css/src/get-config.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, test, vi } from 'vitest'
+import { getConfig } from './get-config'
+import createPlugin from 'windicss/plugin'
+
+describe('getConfig', () => {
+  test('should return the correct config', () => {
+    const { config } = getConfig({})
+    const defaultPluginsLength = config.plugins?.length || 0
+    expect(
+      getConfig({
+        config: {
+          plugins: [createPlugin(vi.fn(), { name: 'test' })],
+        },
+      }).config.plugins
+    ).toHaveLength(defaultPluginsLength + 1)
+  })
+})

css/src/get-config.ts

@@ -0,0 +1,42 @@
+import * as path from 'path'
+import { mergeWith } from 'lodash'
+import { UserOptions } from 'vite-plugin-windicss'
+import windiConfig from './windi.config'
+
+function customizer(objValue: any, srcValue: any) {
+  if (Array.isArray(objValue) && Array.isArray(srcValue)) {
+    return objValue.concat(srcValue)
+  }
+  return undefined
+}
+
+export function getConfig(options: UserOptions) {
+  const scan = typeof options.scan === 'boolean' ? {} : options.scan ?? {}
+  const include = Array.isArray(scan?.include)
+    ? scan.include
+    : scan.include
+    ? [scan.include]
+    : []
+
+  const currentPackagePath = path.dirname(
+    require.resolve('@cypress-design/css/package.json')
+  )
+
+  const config = mergeWith({}, windiConfig, options.config, customizer)
+
+  return {
+    ...options,
+    config,
+    scan: {
+      ...(scan || {}),
+      include: [
+        ...include,
+        path.resolve(
+          currentPackagePath,
+          '..', // remove css/ from path
+          '*/dist/*.@(js|css)' // look for all component files
+        ),
+      ],
+    },
+  }
+}

css/src/icon-color-plugins.ts

@@ -205,7 +205,8 @@ export const IconDuotoneColorsPlugin = createPlugin(
         return `.${className}:hover, .${className}:focus`
       })
     })
-  }
+  },
+  { name: 'cypress-icon-duotone-colors' }
 )
 
 const prefixes = ['', 'hover', 'focus', 'hocus'] as const
@@ -277,7 +278,7 @@ function isValidWindiColor(value: string) {
  * to be kept in the windicss css file after purgecss
  */
 export const IconExtractor: Extractor = {
-  extensions: ['vue', 'js', 'ts', 'tsx'],
+  extensions: ['vue', 'js', 'ts', 'tsx', 'astro'],
   extractor: (code, id) => {
     const { tags, classes = [], attributes } = DefaultExtractor(code, id)
 

css/src/index.ts

@@ -1,38 +1,7 @@
-import * as path from 'path'
 import type { UserOptions } from 'vite-plugin-windicss'
 import VitePlugin from 'vite-plugin-windicss'
 import WebpackPlugin from 'windicss-webpack-plugin'
-import windiConfig from './windi.config'
-import { merge } from 'lodash'
-
-function getConfig(options: UserOptions) {
-  const scan = typeof options.scan === 'boolean' ? {} : options.scan ?? {}
-  const include = Array.isArray(scan?.include)
-    ? scan.include
-    : scan.include
-    ? [scan.include]
-    : []
-
-  const currentPackagePath = path.dirname(
-    require.resolve('@cypress-design/css/package.json')
-  )
-
-  return {
-    ...options,
-    config: merge(windiConfig, options.config),
-    scan: {
-      ...(scan || {}),
-      include: [
-        ...include,
-        path.resolve(
-          currentPackagePath,
-          '..', // remove css/ from path
-          '*/dist/*.@(js|css)' // look for all component files
-        ),
-      ],
-    },
-  }
-}
+import { getConfig } from './get-config'
 
 export const CyCSSVitePlugin = (options: UserOptions = {}) =>
   VitePlugin(getConfig(options))

css/src/windi.config.ts

@@ -1,10 +1,15 @@
 import { defineConfig } from 'windicss/helpers'
 // @ts-ignore
-import InteractionVariants from '@windicss/plugin-interaction-variants'
+import PluginInteractionVariants from '@windicss/plugin-interaction-variants'
+import PluginFilters from 'windicss/plugin/filters'
 import { IconDuotoneColorsPlugin, IconExtractor } from './icon-color-plugins'
 import { colors } from './colors'
 import { shortcuts } from './shortcuts'
 
+// give the plugins a name for debugging purposes
+PluginInteractionVariants.config = { name: 'windi-interaction-variants' }
+PluginFilters.config = { name: 'windi-filters' }
+
 export default defineConfig({
   // This adds !important to all utility classes.
   // https://csswizardry.com/2016/05/the-importance-of-important/
@@ -44,11 +49,7 @@ export default defineConfig({
       'no-hover',
     ],
   },
-  plugins: [
-    IconDuotoneColorsPlugin,
-    InteractionVariants,
-    require('windicss/plugin/filters'),
-  ],
+  plugins: [IconDuotoneColorsPlugin, PluginInteractionVariants, PluginFilters],
   shortcuts,
   extract: {
     extractors: [IconExtractor],

css/tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["**/*.test.ts"]
+}