Alpha-less colors

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)
+ })
+})