Return rgb values if the opacity core plugins are disabled (#3984)

Author: ayrton

jit/corePlugins/backgroundColor.js

@@ -2,7 +2,7 @@ const flattenColorPalette = require('../../lib/util/flattenColorPalette').defaul
 const withAlphaVariable = require('../../lib/util/withAlphaVariable').default
 const { asColor, nameClass } = require('../pluginUtils')
 
-module.exports = function ({ matchUtilities, theme }) {
+module.exports = function ({ corePlugins, matchUtilities, theme }) {
   let colorPalette = flattenColorPalette(theme('backgroundColor'))
 
   matchUtilities({
@@ -13,13 +13,17 @@ module.exports = function ({ matchUtilities, theme }) {
         return []
       }
 
-      return {
-        [nameClass('bg', modifier)]: withAlphaVariable({
-          color: value,
-          property: 'background-color',
-          variable: '--tw-bg-opacity',
-        }),
+      if (corePlugins('backgroundOpacity')) {
+        return {
+          [nameClass('bg', modifier)]: withAlphaVariable({
+            color: value,
+            property: 'background-color',
+            variable: '--tw-bg-opacity',
+          }),
+        }
       }
+
+      return { [nameClass('bg', modifier)]: { 'background-color': value } }
     },
   })
 }

jit/corePlugins/borderColor.js

@@ -2,7 +2,7 @@ const flattenColorPalette = require('../../lib/util/flattenColorPalette').defaul
 const withAlphaVariable = require('../../lib/util/withAlphaVariable').default
 const { asColor, nameClass } = require('../pluginUtils')
 
-module.exports = function ({ matchUtilities, theme }) {
+module.exports = function ({ corePlugins, matchUtilities, theme }) {
   let colorPalette = flattenColorPalette(theme('borderColor'))
 
   matchUtilities({
@@ -17,12 +17,18 @@ module.exports = function ({ matchUtilities, theme }) {
         return []
       }
 
+      if (corePlugins('borderOpacity')) {
+        return {
+          [nameClass('border', modifier)]: withAlphaVariable({
+            color: value,
+            property: 'border-color',
+            variable: '--tw-border-opacity',
+          }),
+        }
+      }
+
       return {
-        [nameClass('border', modifier)]: withAlphaVariable({
-          color: value,
-          property: 'border-color',
-          variable: '--tw-border-opacity',
-        }),
+        [nameClass('border', modifier)]: { 'border-color': value },
       }
     },
   })

jit/corePlugins/divideColor.js

@@ -2,7 +2,7 @@ const flattenColorPalette = require('../../lib/util/flattenColorPalette').defaul
 const withAlphaVariable = require('../../lib/util/withAlphaVariable').default
 const { asColor, nameClass } = require('../pluginUtils')
 
-module.exports = function ({ matchUtilities, theme }) {
+module.exports = function ({ corePlugins, matchUtilities, theme }) {
   let colorPalette = flattenColorPalette(theme('divideColor'))
 
   // TODO: Make sure there is no issue with DEFAULT here
@@ -14,12 +14,20 @@ module.exports = function ({ matchUtilities, theme }) {
         return []
       }
 
+      if (corePlugins('divideOpacity')) {
+        return {
+          [`${nameClass('divide', modifier)} > :not([hidden]) ~ :not([hidden])`]: withAlphaVariable({
+            color: colorPalette[modifier],
+            property: 'border-color',
+            variable: '--tw-divide-opacity',
+          }),
+        }
+      }
+
       return {
-        [`${nameClass('divide', modifier)} > :not([hidden]) ~ :not([hidden])`]: withAlphaVariable({
-          color: colorPalette[modifier],
-          property: 'border-color',
-          variable: '--tw-divide-opacity',
-        }),
+        [`${nameClass('divide', modifier)} > :not([hidden]) ~ :not([hidden])`]: {
+          'border-color': value,
+        },
       }
     },
   })

jit/corePlugins/placeholderColor.js

@@ -2,7 +2,7 @@ const flattenColorPalette = require('../../lib/util/flattenColorPalette').defaul
 const withAlphaVariable = require('../../lib/util/withAlphaVariable').default
 const { asColor, nameClass } = require('../pluginUtils')
 
-module.exports = function ({ matchUtilities, theme }) {
+module.exports = function ({ corePlugins, matchUtilities, theme }) {
   let colorPalette = flattenColorPalette(theme('placeholderColor'))
 
   matchUtilities({
@@ -13,12 +13,18 @@ module.exports = function ({ matchUtilities, theme }) {
         return []
       }
 
+      if (corePlugins('placeholderOpacity')) {
+        return {
+          [`${nameClass('placeholder', modifier)}::placeholder`]: withAlphaVariable({
+            color: value,
+            property: 'color',
+            variable: '--tw-placeholder-opacity',
+          }),
+        }
+      }
+
       return {
-        [`${nameClass('placeholder', modifier)}::placeholder`]: withAlphaVariable({
-          color: value,
-          property: 'color',
-          variable: '--tw-placeholder-opacity',
-        }),
+        [`${nameClass('placeholder', modifier)}::placeholder`]: { color: value },
       }
     },
   })

jit/corePlugins/textColor.js

@@ -13,12 +13,18 @@ module.exports = function ({ matchUtilities, theme }) {
         return []
       }
 
+      if (corePlugins('textOpacity')) {
+        return {
+          [nameClass('text', modifier)]: withAlphaVariable({
+            color: value,
+            property: 'color',
+            variable: '--tw-text-opacity',
+          }),
+        }
+      }
+
       return {
-        [nameClass('text', modifier)]: withAlphaVariable({
-          color: value,
-          property: 'color',
-          variable: '--tw-text-opacity',
-        }),
+        [nameClass('text', modifier)]: { color: value },
       }
     },
   })

jit/tests/opacity.test.css

@@ -0,0 +1,24 @@
+* {
+  --tw-shadow: 0 0 #0000;
+  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgba(59, 130, 246, 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+}
+.divide-black > :not([hidden]) ~ :not([hidden]) {
+  border-color: #000;
+}
+.border-black {
+  border-color: #000;
+}
+.bg-black {
+  background-color: #000;
+}
+.text-black {
+  color: #000;
+}
+.placeholder-black::placeholder {
+  color: #000;
+}

jit/tests/opacity.test.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Title</title>
+    <link rel="stylesheet" href="./tailwind.css" />
+  </head>
+  <body>
+    <div class="divide-black"></div>
+    <div class="border-black"></div>
+    <div class="bg-black"></div>
+    <div class="text-black"></div>
+    <div class="placeholder-black"></div>
+  </body>
+</html>

jit/tests/opacity.test.js

@@ -0,0 +1,38 @@
+const postcss = require('postcss')
+const tailwind = require('../index.js')
+const fs = require('fs')
+const path = require('path')
+
+function run(input, config = {}) {
+  return postcss(tailwind(config)).process(input, { from: path.resolve(__filename) })
+}
+
+test('opacity', () => {
+  let config = {
+    darkMode: 'class',
+    purge: [path.resolve(__dirname, './opacity.test.html')],
+    corePlugins: {
+      backgroundOpacity: false,
+      borderOpacity: false,
+      divideOpacity: false,
+      placeholderOpacity: false,
+      preflight: false,
+      textOpacity: false,
+    },
+    theme: {},
+    plugins: [],
+  }
+
+  let css = `
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    let expectedPath = path.resolve(__dirname, './opacity.test.css')
+    let expected = fs.readFileSync(expectedPath, 'utf8')
+
+    expect(result.css).toMatchCss(expected)
+  })
+})