Simplify browserslist setup by relying on defaults (#11412)

* use `defaults` for `browserslist`

+ some features that we require for Tailwind to work.

* simplify Lightning CSS features

Always transpile `Nesting`, never transpile `LogicalProperties`.

* bump caniuse-lite (`npx browserslist@latest --update-db`)

* reflect changes in the tests

* update changelog

Author: RobinMalfait

CHANGELOG.md

@@ -28,7 +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))
+- Explicitly configure Lightning CSS features, and prefer user browserslist over default browserslist ([#11402](https://github.com/tailwindlabs/tailwindcss/pull/11402), [#11412](https://github.com/tailwindlabs/tailwindcss/pull/11412))
 
 ### Changed
 

package-lock.json

@@ -87,8 +87,7 @@
     "sucrase": "^3.32.0"
   },
   "browserslist": [
-    "chrome >= 103",
-    "firefox >= 102",
+    "defaults and supports css-variables and supports css-matches-pseudo",
     "safari >= 14"
   ],
   "jest": {

package.json

@@ -28,23 +28,12 @@ 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'),
@@ -55,8 +44,8 @@ async function lightningcss(result, { map = true, minify = true } = {}) {
       drafts: {
         nesting: true,
       },
-      include: includeFeatures,
-      exclude: excludeFeatures,
+      include: Features.Nesting,
+      exclude: Features.LogicalProperties,
     })
 
     return Object.assign(result, {

src/cli/build/plugin.js

@@ -49,25 +49,12 @@ module.exports = function tailwindcss(configOrPath) {
         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),
@@ -81,8 +68,8 @@ module.exports = function tailwindcss(configOrPath) {
             nonStandard: {
               deepSelectorCombinator: true,
             },
-            include: includeFeatures,
-            exclude: excludeFeatures,
+            include: Features.Nesting,
+            exclude: Features.LogicalProperties,
           })
 
           let code = transformed.code.toString()

src/plugin.js

@@ -157,7 +157,9 @@
 .marker\:flex::marker {
   display: flex;
 }
-.selection\:flex ::selection,
+.selection\:flex ::selection {
+  display: flex;
+}
 .selection\:flex::selection {
   display: flex;
 }