Merge pull request #47 from crswll/color-mix

CONTRIBUTING.md

@@ -1,4 +1,4 @@
-# tailwindcss-tokens
+# tailwindcss-theme-swapper
 
 ## Test `npm run test`
 This runs the **tests** once.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-theme-swapper",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "main": "src/index.js",
   "license": "MIT",
   "devDependencies": {
@@ -12,7 +12,6 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "color": "^4.2.3",
     "postcss": "^8.4.21",
     "tailwindcss": "^3.3.1"
   }

src/utils.js

@@ -1,5 +1,5 @@
-const Color = require('color')
 const colorConfigKeys = [
+  'accentColor',
   'backgroundColor',
   'borderColor',
   'caretColor',
@@ -21,18 +21,6 @@ function kebabCase (string) {
   .toLowerCase()
 }
 
-function tailwindVariableHelper (name) {
-  return function ({ opacityVariable, opacityValue } = {}) {
-    if (opacityValue !== undefined) {
-      return `rgb(var(--${name}) / ${opacityValue})`
-    }
-    if (opacityVariable !== undefined) {
-      return `rgb(var(--${name}) / var(${opacityVariable}, 1))`
-    }
-    return `rgb(var(--${name}))`
-  }
-}
-
 function flatten (
   obj,
   transformKeyCallback = key => key.join('.'),
@@ -57,24 +45,7 @@ function flatten (
 const getTailwindKeyName = keys =>
   keys.filter(key => key.toLowerCase() !== 'default').map(kebabCase).join('-')
 
-function toRgba (color) {
-  try {
-    const [ r, g, b ] = Color(color).rgb().array()
-    return [ r, g, b ]
-  } catch {
-    return null
-  }
-}
-
 function defaultCustomPropValueTransformer (keys, value) {
-  if (colorConfigKeys.includes(keys[0])) {
-    const color = toRgba(value)
-    if (color) {
-      const [ r, g, b ] = color
-      return `${r} ${g} ${b}`
-    }
-  }
-
   if (keys[0] === 'fontSize' && typeof value !== 'string') {
     return value[0]
   }
@@ -87,24 +58,21 @@ function defaultCustomPropValueTransformer (keys, value) {
 }
 
 function defaultConfigValueTransformer (keys, value) {
-  if (colorConfigKeys.includes(keys[0])) {
-    if (toRgba(value)) {
-      return tailwindVariableHelper(getTailwindKeyName(keys))
-    }
+  if (
+    keys[0] === 'fontSize' &&
+    typeof value !== 'string' &&
+    process.env.NODE_ENV !== 'test'
+  ) {
+    console.warn(`tailwindcss-theme-swapper: Only using the font size defined at ${keys.join('.')}. Support for this may come if enough people complain about it.`)
   }
 
-  if (keys[0] === 'fontSize' && typeof value === 'object') {
-    if (process.env.NODE_ENV !== 'test') {
-      console.warn(`tailwindcss-theme-swapper: Only using the font size defined at ${keys.join('.')}. Support for this may come if enough people complain about it.`)
-    }
-
-    return `var(--${getTailwindKeyName(keys)}, ${value[0]})`
+  if (colorConfigKeys.includes(keys[0])) {
+    return `color-mix(in srgb, var(--${getTailwindKeyName(keys)}), transparent calc(100% - 100% * <alpha-value>))`
   }
 
-  return `var(--${getTailwindKeyName(keys)}, ${value})`
+  return `var(--${getTailwindKeyName(keys)})`
 }
 
-
 function getThemeAsCustomProps (
   tokenValues,
   transformer = defaultCustomPropValueTransformer
@@ -141,5 +109,4 @@ module.exports.flatten = flatten
 module.exports.getTailwindKeyName = getTailwindKeyName
 module.exports.getThemeAsCustomProps = getThemeAsCustomProps
 module.exports.resolveThemeConfig = resolveThemeConfig
-module.exports.tailwindVariableHelper = tailwindVariableHelper
-module.exports.toRgba = toRgba
+module.exports.colorConfigKeys = colorConfigKeys

test/index.test.js

@@ -11,7 +11,7 @@ expect.extend({
 const defaultTheme = {
   colors: {
     hotpink: 'hotpink',
-    'with-opacity-ignored': 'rgba(255, 0, 0, 0.5)',
+    'with-opacity': 'rgba(255, 0, 0, 0.5)',
     primary: {
       default: '#f00',
       darker: '#400',
@@ -76,12 +76,19 @@ postcss(tailwindcss({
       expect(resolvedConfig).toMatchObject({
         "theme": {
           "colors": {
-            "with-opacity-ignored": expect.any(Function),
-            "hotpink": expect.any(Function),
+            "with-opacity": "color-mix(in srgb, var(--colors-with-opacity), transparent calc(100% - 100% * <alpha-value>))",
+            "hotpink": "color-mix(in srgb, var(--colors-hotpink), transparent calc(100% - 100% * <alpha-value>))",
+            "primary": {
+              "default": "color-mix(in srgb, var(--colors-primary), transparent calc(100% - 100% * <alpha-value>))",
+              "darker": "color-mix(in srgb, var(--colors-primary-darker), transparent calc(100% - 100% * <alpha-value>))",
+            }
           },
           "spacing": {
-            "fart": "var(--spacing-fart, 69px)",
+            "fart": "var(--spacing-fart)",
           },
+          "fontSize": {
+            "sm": "var(--font-size-sm)",
+          }
         },
       })
     })
@@ -92,10 +99,10 @@ postcss(tailwindcss({
       const sampleConfig = { plugins: [tokenPlugin(themeSwapperOptions)] }
       const sampleConfigOutput = `
       :root, .light {
-        --colors-hotpink: 255 105 180;
-        --colors-with-opacity-ignored: 255 0 0;
-        --colors-primary: 255 0 0;
-        --colors-primary-darker: 68 0 0;
+        --colors-hotpink: hotpink;
+        --colors-with-opacity: rgba(255, 0, 0, 0.5);
+        --colors-primary: #f00;
+        --colors-primary-darker: #400;
         --spacing-fart: 69px;
         --border-radius: 5px;
         --font-family-sans: Font A, Font B, Font C;
@@ -105,8 +112,8 @@ postcss(tailwindcss({
 
       @media (prefers-color-scheme: dark) {
         :root {
-          --colors-primary: 255 255 255;
-          --colors-primary-darker: 170 170 170
+          --colors-primary: #fff;
+          --colors-primary-darker: #aaa;
         }
       }
       `