wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Explicitly configure Lightning CSS features, and prefer user browserslist over default browserslist (#11402)

Browse source 
* 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
This commit is contained in:
Robin Malfait 2023-06-09 20:37:36 +02:00 • committed by GitHub
parent ea3d9cd57a
commit ef2ebb28d5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
49 changed files with 1367 additions and 556 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/cli/build/plugin.js
View file

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