Explicitly configure Lightning CSS features, and prefer user browsers…

…list over default browserslist (#11402) * exclude `Features.LogicalProperties` lightningcss feature We don't want this to automatically apply since we have dedicated logical property based utilities already. We also have a feature flag to toggle some utilities to make use of logical property based ones. This feature should be opt-in to prevent backwards compatibility (e.g.: RTL sites that _did_ use a mr-4 explicitly). * update default browserslist * explicitly include/exclude Lightning CSS features * update tests based on new browserslist and include/exclude features from Lightning CSS * update integration tests * prefer user browserslist, fallback to built-in browserslist * always include Nesting If a custom browserslist config is used, then we don't explicitly set the include/exclude features from Lightning CSS (except for nesting, we always want to process nesting) * ensure to fallback to the current working directory * update changelog
tailwindlabs · Jun 9, 2023 · ef2ebb2 · ef2ebb2
1 parent ea3d9cd
commit ef2ebb2
Show file tree

Hide file tree

Showing 49 changed files with 1,367 additions and 556 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `svh`, `lvh`, and `dvh` values to default `height`/`min-height`/`max-height` theme ([#11317](https://github.com/tailwindlabs/tailwindcss/pull/11317))
 - Add `has-*` variants for `:has(...)` pseudo-class ([#11318](https://github.com/tailwindlabs/tailwindcss/pull/11318))
 - Add `text-wrap` utilities including `text-balance` ([#11320](https://github.com/tailwindlabs/tailwindcss/pull/11320))
+- Explicitly configure Lightning CSS features, and prefer user browserslist over default browserslist ([#11402](https://github.com/tailwindlabs/tailwindcss/pull/11402))
 
 ### Changed
 

diff --git a/integrations/postcss-cli/tests/integration.test.js b/integrations/postcss-cli/tests/integration.test.js
@@ -137,7 +137,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: 700;
         }
-        @media (width >= 768px) {
+        @media (min-width: 768px) {
           .md\:font-medium {
             font-weight: 500;
           }
@@ -148,23 +148,23 @@ describe('watcher', () => {
     await writeInputFile(
       '../tailwind.config.js',
       javascript`
-          module.exports = {
-            content: ['./src/index.html'],
-            theme: {
-              extend: {
-                screens: {
-                  md: '800px'
-                },
-                fontWeight: {
-                  bold: 'bold'
-                }
+        module.exports = {
+          content: ['./src/index.html'],
+          theme: {
+            extend: {
+              screens: {
+                md: '800px'
               },
+              fontWeight: {
+                bold: 'bold'
+              }
             },
-            corePlugins: {
-              preflight: false,
-            },
-            plugins: [],
-          }
+          },
+          corePlugins: {
+            preflight: false,
+          },
+          plugins: [],
+        }
       `
     )
     await runningProcess.onStderr(ready)
@@ -174,7 +174,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: bold;
         }
-        @media (width >= 800px) {
+        @media (min-width: 800px) {
           .md\:font-medium {
             font-weight: 500;
           }

diff --git a/integrations/rollup-sass/tests/integration.test.js b/integrations/rollup-sass/tests/integration.test.js
@@ -136,7 +136,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: 700;
         }
-        @media (width >= 768px) {
+        @media (min-width: 768px) {
           .md\:font-medium {
             font-weight: 500;
           }
@@ -173,7 +173,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: bold;
         }
-        @media (width >= 800px) {
+        @media (min-width: 800px) {
           .md\:font-medium {
             font-weight: 500;
           }

diff --git a/integrations/rollup/tests/integration.test.js b/integrations/rollup/tests/integration.test.js
@@ -224,7 +224,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: 700;
         }
-        @media (width >= 768px) {
+        @media (min-width: 768px) {
           .md\:font-medium {
             font-weight: 500;
           }
@@ -261,7 +261,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: bold;
         }
-        @media (width >= 800px) {
+        @media (min-width: 800px) {
           .md\:font-medium {
             font-weight: 500;
           }

diff --git a/integrations/vite/tests/integration.test.js b/integrations/vite/tests/integration.test.js
@@ -255,7 +255,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: 700;
         }
-        @media (width >= 768px) {
+        @media (min-width: 768px) {
           .md\:font-medium {
             font-weight: 500;
           }
@@ -292,7 +292,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: bold;
         }
-        @media (width >= 800px) {
+        @media (min-width: 800px) {
           .md\:font-medium {
             font-weight: 500;
           }

diff --git a/integrations/webpack-4/tests/integration.test.js b/integrations/webpack-4/tests/integration.test.js
@@ -225,7 +225,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: 700;
         }
-        @media (width >= 768px) {
+        @media (min-width: 768px) {
           .md\:font-medium {
             font-weight: 500;
           }
@@ -263,7 +263,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: bold;
         }
-        @media (width >= 800px) {
+        @media (min-width: 800px) {
           .md\:font-medium {
             font-weight: 500;
           }

diff --git a/integrations/webpack-5/tests/integration.test.js b/integrations/webpack-5/tests/integration.test.js
@@ -225,7 +225,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: 700;
         }
-        @media (width >= 768px) {
+        @media (min-width: 768px) {
           .md\:font-medium {
             font-weight: 500;
           }
@@ -263,7 +263,7 @@ describe('watcher', () => {
         .font-bold {
           font-weight: bold;
         }
-        @media (width >= 800px) {
+        @media (min-width: 800px) {
           .md\:font-medium {
             font-weight: 500;
           }

diff --git a/package.json b/package.json
@@ -87,10 +87,9 @@
     "sucrase": "^3.32.0"
   },
   "browserslist": [
-    "> 1%",
-    "not edge <= 18",
-    "not ie 11",
-    "not op_mini all"
+    "chrome >= 103",
+    "firefox >= 102",
+    "safari >= 14"
   ],
   "jest": {
     "testTimeout": 30000,

diff --git a/src/cli/build/plugin.js b/src/cli/build/plugin.js
@@ -6,7 +6,7 @@ import fs from 'fs'
 import postcss from 'postcss'
 import postcssrc from 'postcss-load-config'
 import browserslist from 'browserslist'
-import lightning from 'lightningcss'
+import lightning, { Features } from 'lightningcss'
 import { lilconfig } from 'lilconfig'
 import loadPlugins from 'postcss-load-config/src/plugins' // Little bit scary, looking at private/internal API
 import loadOptions from 'postcss-load-config/src/options' // Little bit scary, looking at private/internal API
@@ -28,16 +28,35 @@ import { flagEnabled } from '../../featureFlags'
 
 async function lightningcss(result, { map = true, minify = true } = {}) {
   try {
+    let includeFeatures = Features.Nesting
+    let excludeFeatures = 0
+
+    let resolvedBrowsersListConfig = browserslist.findConfig(
+      result.opts.from ?? process.cwd()
+    )?.defaults
+    let defaultBrowsersListConfig = pkg.browserslist
+    let browsersListConfig = resolvedBrowsersListConfig ?? defaultBrowsersListConfig
+
+    if (browsersListConfig.join(',') === defaultBrowsersListConfig.join(',')) {
+      includeFeatures |=
+        Features.ColorFunction | Features.OklabColors | Features.LabColors | Features.P3Colors
+
+      excludeFeatures |=
+        Features.HexAlphaColors | Features.LogicalProperties | Features.SpaceSeparatedColorNotation
+    }
+
     let transformed = lightning.transform({
       filename: result.opts.from || 'input.css',
       code: Buffer.from(result.css, 'utf-8'),
       minify,
       sourceMap: result.map === undefined ? map : !!result.map,
       inputSourceMap: result.map ? result.map.toString() : undefined,
-      targets: lightning.browserslistToTargets(browserslist(pkg.browserslist)),
+      targets: lightning.browserslistToTargets(browserslist(browsersListConfig)),
       drafts: {
         nesting: true,
       },
+      include: includeFeatures,
+      exclude: excludeFeatures,
     })
 
     return Object.assign(result, {

diff --git a/src/plugin.js b/src/plugin.js
@@ -1,5 +1,5 @@
 import postcss from 'postcss'
-import lightningcss from 'lightningcss'
+import lightningcss, { Features } from 'lightningcss'
 import browserslist from 'browserslist'
 import setupTrackingContext from './lib/setupTrackingContext'
 import processTailwindFeatures from './processTailwindFeatures'
@@ -45,27 +45,44 @@ module.exports = function tailwindcss(configOrPath) {
         let intermediateResult = result.root.toResult({
           map: map ? { inline: true } : false,
         })
+
         let intermediateMap = intermediateResult.map?.toJSON?.() ?? map
 
         try {
+          let includeFeatures = Features.Nesting
+          let excludeFeatures = 0
+
+          let resolvedBrowsersListConfig = browserslist.findConfig(
+            result.opts.from ?? process.cwd()
+          )?.defaults
+          let defaultBrowsersListConfig = require('../package.json').browserslist
+          let browsersListConfig = resolvedBrowsersListConfig ?? defaultBrowsersListConfig
+
+          if (browsersListConfig.join(',') === defaultBrowsersListConfig.join(',')) {
+            includeFeatures |=
+              Features.ColorFunction | Features.OklabColors | Features.LabColors | Features.P3Colors
+
+            excludeFeatures |=
+              Features.HexAlphaColors |
+              Features.LogicalProperties |
+              Features.SpaceSeparatedColorNotation
+          }
+
           let transformed = lightningcss.transform({
             filename: result.opts.from,
             code: Buffer.from(intermediateResult.css),
             minify: false,
             sourceMap: !!intermediateMap,
-            targets:
-              typeof process !== 'undefined' && process.env.JEST_WORKER_ID
-                ? { chrome: 111 << 16 }
-                : lightningcss.browserslistToTargets(
-                    browserslist(require('../package.json').browserslist)
-                  ),
+            targets: lightningcss.browserslistToTargets(browserslist(browsersListConfig)),
             drafts: {
               nesting: true,
               customMedia: true,
             },
             nonStandard: {
               deepSelectorCombinator: true,
             },
+            include: includeFeatures,
+            exclude: excludeFeatures,
           })
 
           let code = transformed.code.toString()

diff --git a/tests/any-type.test.js b/tests/any-type.test.js
@@ -577,6 +577,7 @@ test('any types are set on correct plugins', () => {
         --tw-text-opacity: var(--any-value);
       }
       .decoration-\[var\(--any-value\)\] {
+        -webkit-text-decoration-color: var(--any-value);
         text-decoration-color: var(--any-value);
       }
       .underline-offset-\[var\(--any-value\)\] {
@@ -672,62 +673,98 @@ test('any types are set on correct plugins', () => {
       }
       .backdrop-blur-\[var\(--any-value\)\] {
         --tw-backdrop-blur: blur(var(--any-value));
+        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+          var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
+          var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+          var(--tw-backdrop-sepia);
         backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
           var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
           var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
           var(--tw-backdrop-sepia);
       }
       .backdrop-brightness-\[var\(--any-value\)\] {
         --tw-backdrop-brightness: brightness(var(--any-value));
+        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+          var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
+          var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+          var(--tw-backdrop-sepia);
         backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
           var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
           var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
           var(--tw-backdrop-sepia);
       }
       .backdrop-contrast-\[var\(--any-value\)\] {
         --tw-backdrop-contrast: contrast(var(--any-value));
+        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+          var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
+          var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+          var(--tw-backdrop-sepia);
         backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
           var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
           var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
           var(--tw-backdrop-sepia);
       }
       .backdrop-grayscale-\[var\(--any-value\)\] {
         --tw-backdrop-grayscale: grayscale(var(--any-value));
+        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+          var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
+          var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+          var(--tw-backdrop-sepia);
         backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
           var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
           var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
           var(--tw-backdrop-sepia);
       }
       .backdrop-hue-rotate-\[var\(--any-value\)\] {
         --tw-backdrop-hue-rotate: hue-rotate(var(--any-value));
+        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+          var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
+          var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+          var(--tw-backdrop-sepia);
         backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
           var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
           var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
           var(--tw-backdrop-sepia);
       }
       .backdrop-invert-\[var\(--any-value\)\] {
         --tw-backdrop-invert: invert(var(--any-value));
+        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+          var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
+          var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+          var(--tw-backdrop-sepia);
         backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
           var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
           var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
           var(--tw-backdrop-sepia);
       }
       .backdrop-opacity-\[var\(--any-value\)\] {
         --tw-backdrop-opacity: opacity(var(--any-value));
+        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+          var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
+          var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+          var(--tw-backdrop-sepia);
         backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
           var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
           var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
           var(--tw-backdrop-sepia);
       }
       .backdrop-saturate-\[var\(--any-value\)\] {
         --tw-backdrop-saturate: saturate(var(--any-value));
+        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+          var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
+          var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+          var(--tw-backdrop-sepia);
         backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
           var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
           var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
           var(--tw-backdrop-sepia);
       }
       .backdrop-sepia-\[var\(--any-value\)\] {
         --tw-backdrop-sepia: sepia(var(--any-value));
+        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
+          var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
+          var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
+          var(--tw-backdrop-sepia);
         backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
           var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
           var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)