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

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,20 +45,35 @@ 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,
@@ -66,6 +81,8 @@ module.exports = function tailwindcss(configOrPath) {
             nonStandard: {
               deepSelectorCombinator: true,
             },
+            include: includeFeatures,
+            exclude: excludeFeatures,
           })
 
           let code = transformed.code.toString()