Merge pull request #1680 from tailwindcss/disable-color-opacity-optimization

Don't generate color opacity code in color plugins if not necessary

.eslintrc.json

@@ -9,7 +9,8 @@
   "extends": ["eslint-config-postcss", "prettier"],
   "plugins": ["prettier"],
   "rules": {
-    "no-unused-vars": [2, {"args": "all", "argsIgnorePattern": "^_"}],
+    "no-unused-vars": [2, { "args": "all", "argsIgnorePattern": "^_" }],
+    "no-warning-comments": 0,
     "prettier/prettier": [
       "error",
       {

__tests__/sanity.test.js

@@ -52,6 +52,34 @@ it('generates the right CSS when using @import instead of @tailwind', () => {
     })
 })
 
+// TODO: Move to per plugin unit tests for this sort of thing
+it('generates the right CSS when color opacity plugins are disabled', () => {
+  const inputPath = path.resolve(`${__dirname}/fixtures/tailwind-input.css`)
+  const input = fs.readFileSync(inputPath, 'utf8')
+
+  return postcss([
+    tailwind({
+      ...config,
+      corePlugins: {
+        textOpacity: false,
+        backgroundOpacity: false,
+        borderOpacity: false,
+        placeholderOpacity: false,
+        divideOpacity: false,
+      },
+    }),
+  ])
+    .process(input, { from: inputPath })
+    .then(result => {
+      const expected = fs.readFileSync(
+        path.resolve(`${__dirname}/fixtures/tailwind-output-no-color-opacity.css`),
+        'utf8'
+      )
+
+      expect(result.css).toBe(expected)
+    })
+})
+
 it('does not add any CSS if no Tailwind features are used', () => {
   return postcss([tailwind()])
     .process('.foo { color: blue; }', { from: undefined })

scripts/rebuildFixtures.js

@@ -44,6 +44,19 @@ Promise.all([
     to: '__tests__/fixtures/tailwind-output-ie11.css',
     config: { target: 'ie11' },
   }),
+  build({
+    from: '__tests__/fixtures/tailwind-input.css',
+    to: '__tests__/fixtures/tailwind-output-no-color-opacity.css',
+    config: {
+      corePlugins: {
+        textOpacity: false,
+        backgroundOpacity: false,
+        borderOpacity: false,
+        placeholderOpacity: false,
+        divideOpacity: false,
+      },
+    },
+  }),
 ]).then(() => {
   console.log('\nFinished rebuilding fixtures.')
   console.log(

src/plugins/backgroundColor.js

@@ -3,7 +3,7 @@ import flattenColorPalette from '../util/flattenColorPalette'
 import withAlphaVariable from '../util/withAlphaVariable'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants, target }) {
+  return function({ addUtilities, e, theme, variants, target, corePlugins }) {
     if (target('backgroundColor') === 'ie11') {
       const utilities = _.fromPairs(
         _.map(flattenColorPalette(theme('backgroundColor')), (value, modifier) => {
@@ -20,11 +20,13 @@ export default function() {
       _.map(flattenColorPalette(theme('backgroundColor')), (value, modifier) => {
         return [
           `.${e(`bg-${modifier}`)}`,
-          withAlphaVariable({
-            color: value,
-            property: 'background-color',
-            variable: '--bg-opacity',
-          }),
+          corePlugins('backgroundOpacity')
+            ? withAlphaVariable({
+                color: value,
+                property: 'background-color',
+                variable: '--bg-opacity',
+              })
+            : { 'background-color': value },
         ]
       })
     )

src/plugins/borderColor.js

@@ -3,7 +3,7 @@ import flattenColorPalette from '../util/flattenColorPalette'
 import withAlphaVariable from '../util/withAlphaVariable'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants, target }) {
+  return function({ addUtilities, e, theme, variants, target, corePlugins }) {
     if (target('borderColor') === 'ie11') {
       const colors = flattenColorPalette(theme('borderColor'))
 
@@ -24,11 +24,13 @@ export default function() {
       _.map(_.omit(colors, 'default'), (value, modifier) => {
         return [
           `.${e(`border-${modifier}`)}`,
-          withAlphaVariable({
-            color: value,
-            property: 'border-color',
-            variable: '--border-opacity',
-          }),
+          corePlugins('borderOpacity')
+            ? withAlphaVariable({
+                color: value,
+                property: 'border-color',
+                variable: '--border-opacity',
+              })
+            : { 'border-color': value },
         ]
       })
     )

src/plugins/divideColor.js

@@ -3,7 +3,7 @@ import flattenColorPalette from '../util/flattenColorPalette'
 import withAlphaVariable from '../util/withAlphaVariable'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants, target }) {
+  return function({ addUtilities, e, theme, variants, target, corePlugins }) {
     const colors = flattenColorPalette(theme('divideColor'))
 
     if (target('divideColor') === 'ie11') {
@@ -25,11 +25,13 @@ export default function() {
       _.map(_.omit(colors, 'default'), (value, modifier) => {
         return [
           `.${e(`divide-${modifier}`)} > :not(template) ~ :not(template)`,
-          withAlphaVariable({
-            color: value,
-            property: 'border-color',
-            variable: '--divide-opacity',
-          }),
+          corePlugins('divideOpacity')
+            ? withAlphaVariable({
+                color: value,
+                property: 'border-color',
+                variable: '--divide-opacity',
+              })
+            : { 'border-color': value },
         ]
       })
     )

src/plugins/placeholderColor.js

@@ -3,7 +3,7 @@ import flattenColorPalette from '../util/flattenColorPalette'
 import withAlphaVariable from '../util/withAlphaVariable'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants, target }) {
+  return function({ addUtilities, e, theme, variants, target, corePlugins }) {
     if (target('placeholderColor') === 'ie11') {
       const utilities = _.fromPairs(
         _.map(flattenColorPalette(theme('placeholderColor')), (value, modifier) => {
@@ -20,7 +20,13 @@ export default function() {
       _.map(flattenColorPalette(theme('placeholderColor')), (value, modifier) => {
         return [
           `.${e(`placeholder-${modifier}`)}::placeholder`,
-          withAlphaVariable({ color: value, property: 'color', variable: '--placeholder-opacity' }),
+          corePlugins('placeholderOpacity')
+            ? withAlphaVariable({
+                color: value,
+                property: 'color',
+                variable: '--placeholder-opacity',
+              })
+            : { color: value },
         ]
       })
     )

src/plugins/textColor.js

@@ -3,7 +3,7 @@ import flattenColorPalette from '../util/flattenColorPalette'
 import withAlphaVariable from '../util/withAlphaVariable'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants, target }) {
+  return function({ addUtilities, e, theme, variants, target, corePlugins }) {
     if (target('textColor') === 'ie11') {
       const utilities = _.fromPairs(
         _.map(flattenColorPalette(theme('textColor')), (value, modifier) => {
@@ -20,7 +20,9 @@ export default function() {
       _.map(flattenColorPalette(theme('textColor')), (value, modifier) => {
         return [
           `.${e(`text-${modifier}`)}`,
-          withAlphaVariable({ color: value, property: 'color', variable: '--text-opacity' }),
+          corePlugins('textOpacity')
+            ? withAlphaVariable({ color: value, property: 'color', variable: '--text-opacity' })
+            : { color: value },
         ]
       })
     )