Explicitly configure Lightning CSS features, and prefer user browserslist 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

Author: RobinMalfait

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
 

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;
           }

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;
           }

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;
           }

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;
           }

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;
           }

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;
           }

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,

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, {

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()