add fallback support for variables

Author: mertasan

__tests__/fallback.test.css

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .component .header {
+    @apply text-red-400;
+  }
+}

__tests__/fallback.test.html

@@ -0,0 +1,9 @@
+<div class="bg-red-400">tailwindcss-variables</div>
+<div class="bg-red-500">tailwindcss-variables</div>
+<div class="bg-red-600">tailwindcss-variables</div>
+<div class="bg-red-700">tailwindcss-variables</div>
+<div class="text-red-800">tailwindcss-variables</div>
+<div class="bg-gray bg-opacity-50">tailwindcss-variables</div>
+<div class="component">
+  <div class="header">tailwindcss-variables</div>
+</div>

__tests__/fallback.test.js

@@ -0,0 +1,89 @@
+const tailwindcssVariables = require('../src/index')
+const utils = require('./util/_utils')(__filename)
+const colorVariable = require('../colorVariable')
+
+test('fallback', async () => {
+  expect(
+    await utils.diffOnly({
+      corePlugins: ['textColor', 'textOpacity', 'backgroundColor', 'backgroundOpacity'],
+      content: [utils.content()],
+      darkMode: false,
+      theme: {
+        screens: false,
+        colors: {
+          red: {
+            400: 'var(--colors-red-400 red)',
+            500: 'var(--colors-red red)',
+            600: colorVariable('var(--header-color, black)'),
+            700: colorVariable('var(--header-color, black)', true),
+            800: colorVariable('var(--header-color, black)', false),
+          },
+
+          gray: 'var(--header-color, blue)',
+        },
+
+        variables: {
+          DEFAULT: {
+            header: {
+              color: '#ffffff',
+            },
+
+            colors: {
+              red: {
+                DEFAULT: '#ff0000',
+                400: '#ff3f3f',
+              },
+            },
+          },
+        },
+      },
+
+      plugins: [
+        tailwindcssVariables({
+          colorVariables: true,
+        }),
+      ],
+    })
+  ).toMatchInlineSnapshot(`
+    "
+
+      -
+      + :root {
+      +   --header-color: #ffffff;
+      +   --header-color-rgb: 255,255,255;
+      +   --colors-red-400: #ff3f3f;
+      +   --colors-red: #ff0000;
+      +   --colors-red-400-rgb: 255,63,63;
+      +   --colors-red-rgb: 255,0,0
+      + }
+      + .bg-red-400 {
+      +   background-color: var(--colors-red-400 red)
+      + }
+      + .bg-red-500 {
+      +   background-color: var(--colors-red red)
+      + }
+      + .bg-red-600 {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--header-color-rgb, black), var(--tw-bg-opacity))
+      + }
+      + .bg-red-700 {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(var(--header-color, black), var(--tw-bg-opacity))
+      + }
+      + .bg-gray {
+      +   background-color: var(--header-color, blue)
+      + }
+      + .bg-opacity-50 {
+      +   --tw-bg-opacity: 0.5
+      + }
+      + .text-red-800 {
+      +   --tw-text-opacity: 1;
+      +   color: rgba(var(--header-color-rgb, black), var(--tw-text-opacity))
+      + }
+      + .text-gray {
+      +   color: var(--header-color, blue)
+      + }
+
+    "
+  `)
+})

src/helpers.js

@@ -1,12 +1,23 @@
 const startsWith = require('lodash/startsWith')
 const mapValues = require('lodash/mapValues')
 const isPlainObject = require('lodash/isPlainObject')
+const includes = require('lodash/includes')
+const split = require('lodash/split')
+const trim = require('lodash/trim')
 
+const withFallback = (variable, startsWithVar = false) => {
+  if (includes(variable, ',')) {
+    variable = variable.replace(',', '-rgb,')
+    return startsWithVar ? variable : variable + ')'
+  } else {
+    return startsWithVar ? variable.replace(')', '-rgb)') : variable + '-rgb'
+  }
+}
 const withRgb = (variable, forceRGB) => {
   if (forceRGB) {
     return startsWith(variable, 'var') ? variable : 'var(' + variable + ')'
   }
-  return startsWith(variable, 'var') ? variable.replace(')', '-rgb)') : 'var(' + variable + '-rgb)'
+  return startsWith(variable, 'var') ? withFallback(variable, true) : 'var(' + withFallback(variable) + ')'
 }
 
 const colorVariable = (variable, forceRGB = false) => {