From 54aa5be7cee6c77e5ddd98f67aeb25edd0614ee7 Mon Sep 17 00:00:00 2001 From: Ayrton De Craene Date: Fri, 30 Apr 2021 15:45:50 +0200 Subject: [PATCH] Return rgb values if the opacity core plugins are disabled (#3984) --- jit/corePlugins/backgroundColor.js | 18 ++++++++------ jit/corePlugins/borderColor.js | 18 +++++++++----- jit/corePlugins/divideColor.js | 20 ++++++++++----- jit/corePlugins/placeholderColor.js | 18 +++++++++----- jit/corePlugins/textColor.js | 16 ++++++++---- jit/tests/opacity.test.css | 24 ++++++++++++++++++ jit/tests/opacity.test.html | 17 +++++++++++++ jit/tests/opacity.test.js | 38 +++++++++++++++++++++++++++++ 8 files changed, 139 insertions(+), 30 deletions(-) create mode 100644 jit/tests/opacity.test.css create mode 100644 jit/tests/opacity.test.html create mode 100644 jit/tests/opacity.test.js diff --git a/jit/corePlugins/backgroundColor.js b/jit/corePlugins/backgroundColor.js index 2bde03d70bc5..a69b06caa4c0 100644 --- a/jit/corePlugins/backgroundColor.js +++ b/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 } } }, }) } diff --git a/jit/corePlugins/borderColor.js b/jit/corePlugins/borderColor.js index 5c7902550d72..dd79c54a5cd6 100644 --- a/jit/corePlugins/borderColor.js +++ b/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 }, } }, }) diff --git a/jit/corePlugins/divideColor.js b/jit/corePlugins/divideColor.js index c17d83be3d13..a3f1e6678079 100644 --- a/jit/corePlugins/divideColor.js +++ b/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, + }, } }, }) diff --git a/jit/corePlugins/placeholderColor.js b/jit/corePlugins/placeholderColor.js index 0e55f2ae37ec..d1d19a1789e8 100644 --- a/jit/corePlugins/placeholderColor.js +++ b/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 }, } }, }) diff --git a/jit/corePlugins/textColor.js b/jit/corePlugins/textColor.js index fb8e46306f8e..ccd139b4dbff 100644 --- a/jit/corePlugins/textColor.js +++ b/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 }, } }, }) diff --git a/jit/tests/opacity.test.css b/jit/tests/opacity.test.css new file mode 100644 index 000000000000..4c280ce48756 --- /dev/null +++ b/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; +} diff --git a/jit/tests/opacity.test.html b/jit/tests/opacity.test.html new file mode 100644 index 000000000000..6942d7713149 --- /dev/null +++ b/jit/tests/opacity.test.html @@ -0,0 +1,17 @@ + + + + + + + Title + + + +
+
+
+
+
+ + diff --git a/jit/tests/opacity.test.js b/jit/tests/opacity.test.js new file mode 100644 index 000000000000..c685307a0c6a --- /dev/null +++ b/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) + }) +})