Title

From 9ba2e4e28f5cf2827074731e90e4729507074ace Mon Sep 17 00:00:00 2001 From: Ayrton De Craene Date: Thu, 1 Apr 2021 10:30:21 +0200 Subject: [PATCH 1/2] Don't output rgba values if opacity core plugins are disabled --- src/corePlugins/backgroundColor.js | 18 +++++++++++------- src/corePlugins/borderColor.js | 18 ++++++++++++------ src/corePlugins/divideColor.js | 22 ++++++++++++++++------ src/corePlugins/placeholderColor.js | 18 ++++++++++++------ src/corePlugins/textColor.js | 18 ++++++++++++------ 5 files changed, 63 insertions(+), 31 deletions(-) diff --git a/src/corePlugins/backgroundColor.js b/src/corePlugins/backgroundColor.js index 78dd52f..e8a062e 100644 --- a/src/corePlugins/backgroundColor.js +++ b/src/corePlugins/backgroundColor.js @@ -4,7 +4,7 @@ const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').defa const toColorValue = require('tailwindcss/lib/util/toColorValue').default const { asColor, nameClass } = require('../pluginUtils') -module.exports = function ({ matchUtilities, jit: { theme } }) { +module.exports = function ({ corePlugins, matchUtilities, jit: { theme } }) { let colorPalette = flattenColorPalette(theme.backgroundColor) matchUtilities({ @@ -15,13 +15,17 @@ module.exports = function ({ matchUtilities, jit: { 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/src/corePlugins/borderColor.js b/src/corePlugins/borderColor.js index ce50a56..fdbb99c 100644 --- a/src/corePlugins/borderColor.js +++ b/src/corePlugins/borderColor.js @@ -3,7 +3,7 @@ const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').defa const toColorValue = require('tailwindcss/lib/util/toColorValue').default const { asColor, nameClass } = require('../pluginUtils') -module.exports = function ({ matchUtilities, jit: { theme } }) { +module.exports = function ({ corePlugins, matchUtilities, jit: { theme } }) { let colorPalette = flattenColorPalette(theme.borderColor) matchUtilities({ @@ -18,12 +18,18 @@ module.exports = function ({ matchUtilities, jit: { 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/src/corePlugins/divideColor.js b/src/corePlugins/divideColor.js index 15f605a..99827de 100644 --- a/src/corePlugins/divideColor.js +++ b/src/corePlugins/divideColor.js @@ -3,7 +3,7 @@ const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').defa const toColorValue = require('tailwindcss/lib/util/toColorValue').default const { asColor, nameClass } = require('../pluginUtils') -module.exports = function ({ matchUtilities, jit: { theme } }) { +module.exports = function ({ corePlugins, matchUtilities, jit: { theme } }) { let colorPalette = flattenColorPalette(theme.divideColor) // TODO: Make sure there is no issue with DEFAULT here @@ -15,12 +15,22 @@ module.exports = function ({ matchUtilities, jit: { 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/src/corePlugins/placeholderColor.js b/src/corePlugins/placeholderColor.js index 17d4038..937fb5f 100644 --- a/src/corePlugins/placeholderColor.js +++ b/src/corePlugins/placeholderColor.js @@ -3,7 +3,7 @@ const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').defa const toColorValue = require('tailwindcss/lib/util/toColorValue').default const { asColor, nameClass } = require('../pluginUtils') -module.exports = function ({ matchUtilities, jit: { theme } }) { +module.exports = function ({ corePlugins, matchUtilities, jit: { theme } }) { let colorPalette = flattenColorPalette(theme.placeholderColor) matchUtilities({ @@ -14,12 +14,18 @@ module.exports = function ({ matchUtilities, jit: { 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/src/corePlugins/textColor.js b/src/corePlugins/textColor.js index 8cbe8cd..570e320 100644 --- a/src/corePlugins/textColor.js +++ b/src/corePlugins/textColor.js @@ -3,7 +3,7 @@ const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable').defa const toColorValue = require('tailwindcss/lib/util/toColorValue').default const { asColor, nameClass } = require('../pluginUtils') -module.exports = function ({ matchUtilities, jit: { theme } }) { +module.exports = function ({ corePlugins, matchUtilities, jit: { theme } }) { let colorPalette = flattenColorPalette(theme.textColor) matchUtilities({ @@ -14,12 +14,18 @@ module.exports = function ({ matchUtilities, jit: { 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 }, } }, }) From 08e7e44491076ebaf100199b448312ccf895dda5 Mon Sep 17 00:00:00 2001 From: Ayrton De Craene Date: Thu, 1 Apr 2021 13:10:00 +0200 Subject: [PATCH 2/2] Add tests --- tests/opacity.test.css | 24 ++++++++++++++++++++++++ tests/opacity.test.html | 17 +++++++++++++++++ tests/opacity.test.js | 38 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 79 insertions(+) create mode 100644 tests/opacity.test.css create mode 100644 tests/opacity.test.html create mode 100644 tests/opacity.test.js diff --git a/tests/opacity.test.css b/tests/opacity.test.css new file mode 100644 index 0000000..4c280ce --- /dev/null +++ b/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/tests/opacity.test.html b/tests/opacity.test.html new file mode 100644 index 0000000..6942d77 --- /dev/null +++ b/tests/opacity.test.html @@ -0,0 +1,17 @@ + + + + + + + Title + + + +

+ + diff --git a/tests/opacity.test.js b/tests/opacity.test.js new file mode 100644 index 0000000..e6fa418 --- /dev/null +++ b/tests/opacity.test.js @@ -0,0 +1,38 @@ +const postcss = require('postcss') +const tailwind = require('../src/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) + }) +})