Skip to content

Commit ef2ebb2

Browse files
RobinMalfaitRobinMalfait
authored
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
1 parent ea3d9cd commit ef2ebb2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+1367
-556
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
2828
- Add `svh`, `lvh`, and `dvh` values to default `height`/`min-height`/`max-height` theme ([#11317](https://github.com/tailwindlabs/tailwindcss/pull/11317))
2929
- Add `has-*` variants for `:has(...)` pseudo-class ([#11318](https://github.com/tailwindlabs/tailwindcss/pull/11318))
3030
- Add `text-wrap` utilities including `text-balance` ([#11320](https://github.com/tailwindlabs/tailwindcss/pull/11320))
31+
- Explicitly configure Lightning CSS features, and prefer user browserslist over default browserslist ([#11402](https://github.com/tailwindlabs/tailwindcss/pull/11402))
3132

3233
### Changed
3334

‎integrations/postcss-cli/tests/integration.test.js

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ describe('watcher', () => {
137137
.font-bold {
138138
font-weight: 700;
139139
}
140-
@media (width >= 768px) {
140+
@media (min-width: 768px) {
141141
.md\:font-medium {
142142
font-weight: 500;
143143
}
@@ -148,23 +148,23 @@ describe('watcher', () => {
148148
await writeInputFile(
149149
'../tailwind.config.js',
150150
javascript`
151-
module.exports = {
152-
content: ['./src/index.html'],
153-
theme: {
154-
extend: {
155-
screens: {
156-
md: '800px'
157-
},
158-
fontWeight: {
159-
bold: 'bold'
160-
}
151+
module.exports = {
152+
content: ['./src/index.html'],
153+
theme: {
154+
extend: {
155+
screens: {
156+
md: '800px'
161157
},
158+
fontWeight: {
159+
bold: 'bold'
160+
}
162161
},
163-
corePlugins: {
164-
preflight: false,
165-
},
166-
plugins: [],
167-
}
162+
},
163+
corePlugins: {
164+
preflight: false,
165+
},
166+
plugins: [],
167+
}
168168
`
169169
)
170170
await runningProcess.onStderr(ready)
@@ -174,7 +174,7 @@ describe('watcher', () => {
174174
.font-bold {
175175
font-weight: bold;
176176
}
177-
@media (width >= 800px) {
177+
@media (min-width: 800px) {
178178
.md\:font-medium {
179179
font-weight: 500;
180180
}

‎integrations/rollup-sass/tests/integration.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ describe('watcher', () => {
136136
.font-bold {
137137
font-weight: 700;
138138
}
139-
@media (width >= 768px) {
139+
@media (min-width: 768px) {
140140
.md\:font-medium {
141141
font-weight: 500;
142142
}
@@ -173,7 +173,7 @@ describe('watcher', () => {
173173
.font-bold {
174174
font-weight: bold;
175175
}
176-
@media (width >= 800px) {
176+
@media (min-width: 800px) {
177177
.md\:font-medium {
178178
font-weight: 500;
179179
}

‎integrations/rollup/tests/integration.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@ describe('watcher', () => {
224224
.font-bold {
225225
font-weight: 700;
226226
}
227-
@media (width >= 768px) {
227+
@media (min-width: 768px) {
228228
.md\:font-medium {
229229
font-weight: 500;
230230
}
@@ -261,7 +261,7 @@ describe('watcher', () => {
261261
.font-bold {
262262
font-weight: bold;
263263
}
264-
@media (width >= 800px) {
264+
@media (min-width: 800px) {
265265
.md\:font-medium {
266266
font-weight: 500;
267267
}

‎integrations/vite/tests/integration.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -255,7 +255,7 @@ describe('watcher', () => {
255255
.font-bold {
256256
font-weight: 700;
257257
}
258-
@media (width >= 768px) {
258+
@media (min-width: 768px) {
259259
.md\:font-medium {
260260
font-weight: 500;
261261
}
@@ -292,7 +292,7 @@ describe('watcher', () => {
292292
.font-bold {
293293
font-weight: bold;
294294
}
295-
@media (width >= 800px) {
295+
@media (min-width: 800px) {
296296
.md\:font-medium {
297297
font-weight: 500;
298298
}

‎integrations/webpack-4/tests/integration.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,7 @@ describe('watcher', () => {
225225
.font-bold {
226226
font-weight: 700;
227227
}
228-
@media (width >= 768px) {
228+
@media (min-width: 768px) {
229229
.md\:font-medium {
230230
font-weight: 500;
231231
}
@@ -263,7 +263,7 @@ describe('watcher', () => {
263263
.font-bold {
264264
font-weight: bold;
265265
}
266-
@media (width >= 800px) {
266+
@media (min-width: 800px) {
267267
.md\:font-medium {
268268
font-weight: 500;
269269
}

‎integrations/webpack-5/tests/integration.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,7 @@ describe('watcher', () => {
225225
.font-bold {
226226
font-weight: 700;
227227
}
228-
@media (width >= 768px) {
228+
@media (min-width: 768px) {
229229
.md\:font-medium {
230230
font-weight: 500;
231231
}
@@ -263,7 +263,7 @@ describe('watcher', () => {
263263
.font-bold {
264264
font-weight: bold;
265265
}
266-
@media (width >= 800px) {
266+
@media (min-width: 800px) {
267267
.md\:font-medium {
268268
font-weight: 500;
269269
}

‎package.json

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -87,10 +87,9 @@
8787
"sucrase": "^3.32.0"
8888
},
8989
"browserslist": [
90-
"> 1%",
91-
"not edge <= 18",
92-
"not ie 11",
93-
"not op_mini all"
90+
"chrome >= 103",
91+
"firefox >= 102",
92+
"safari >= 14"
9493
],
9594
"jest": {
9695
"testTimeout": 30000,

‎src/cli/build/plugin.js

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import fs from 'fs'
66
import postcss from 'postcss'
77
import postcssrc from 'postcss-load-config'
88
import browserslist from 'browserslist'
9-
import lightning from 'lightningcss'
9+
import lightning, { Features } from 'lightningcss'
1010
import { lilconfig } from 'lilconfig'
1111
import loadPlugins from 'postcss-load-config/src/plugins' // Little bit scary, looking at private/internal API
1212
import loadOptions from 'postcss-load-config/src/options' // Little bit scary, looking at private/internal API
@@ -28,16 +28,35 @@ import { flagEnabled } from '../../featureFlags'
2828

2929
async function lightningcss(result, { map = true, minify = true } = {}) {
3030
try {
31+
let includeFeatures = Features.Nesting
32+
let excludeFeatures = 0
33+
34+
let resolvedBrowsersListConfig = browserslist.findConfig(
35+
result.opts.from ?? process.cwd()
36+
)?.defaults
37+
let defaultBrowsersListConfig = pkg.browserslist
38+
let browsersListConfig = resolvedBrowsersListConfig ?? defaultBrowsersListConfig
39+
40+
if (browsersListConfig.join(',') === defaultBrowsersListConfig.join(',')) {
41+
includeFeatures |=
42+
Features.ColorFunction | Features.OklabColors | Features.LabColors | Features.P3Colors
43+
44+
excludeFeatures |=
45+
Features.HexAlphaColors | Features.LogicalProperties | Features.SpaceSeparatedColorNotation
46+
}
47+
3148
let transformed = lightning.transform({
3249
filename: result.opts.from || 'input.css',
3350
code: Buffer.from(result.css, 'utf-8'),
3451
minify,
3552
sourceMap: result.map === undefined ? map : !!result.map,
3653
inputSourceMap: result.map ? result.map.toString() : undefined,
37-
targets: lightning.browserslistToTargets(browserslist(pkg.browserslist)),
54+
targets: lightning.browserslistToTargets(browserslist(browsersListConfig)),
3855
drafts: {
3956
nesting: true,
4057
},
58+
include: includeFeatures,
59+
exclude: excludeFeatures,
4160
})
4261

4362
return Object.assign(result, {

‎src/plugin.js

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import postcss from 'postcss'
2-
import lightningcss from 'lightningcss'
2+
import lightningcss, { Features } from 'lightningcss'
33
import browserslist from 'browserslist'
44
import setupTrackingContext from './lib/setupTrackingContext'
55
import processTailwindFeatures from './processTailwindFeatures'
@@ -45,27 +45,44 @@ module.exports = function tailwindcss(configOrPath) {
4545
let intermediateResult = result.root.toResult({
4646
map: map ? { inline: true } : false,
4747
})
48+
4849
let intermediateMap = intermediateResult.map?.toJSON?.() ?? map
4950

5051
try {
52+
let includeFeatures = Features.Nesting
53+
let excludeFeatures = 0
54+
55+
let resolvedBrowsersListConfig = browserslist.findConfig(
56+
result.opts.from ?? process.cwd()
57+
)?.defaults
58+
let defaultBrowsersListConfig = require('../package.json').browserslist
59+
let browsersListConfig = resolvedBrowsersListConfig ?? defaultBrowsersListConfig
60+
61+
if (browsersListConfig.join(',') === defaultBrowsersListConfig.join(',')) {
62+
includeFeatures |=
63+
Features.ColorFunction | Features.OklabColors | Features.LabColors | Features.P3Colors
64+
65+
excludeFeatures |=
66+
Features.HexAlphaColors |
67+
Features.LogicalProperties |
68+
Features.SpaceSeparatedColorNotation
69+
}
70+
5171
let transformed = lightningcss.transform({
5272
filename: result.opts.from,
5373
code: Buffer.from(intermediateResult.css),
5474
minify: false,
5575
sourceMap: !!intermediateMap,
56-
targets:
57-
typeof process !== 'undefined' && process.env.JEST_WORKER_ID
58-
? { chrome: 111 << 16 }
59-
: lightningcss.browserslistToTargets(
60-
browserslist(require('../package.json').browserslist)
61-
),
76+
targets: lightningcss.browserslistToTargets(browserslist(browsersListConfig)),
6277
drafts: {
6378
nesting: true,
6479
customMedia: true,
6580
},
6681
nonStandard: {
6782
deepSelectorCombinator: true,
6883
},
84+
include: includeFeatures,
85+
exclude: excludeFeatures,
6986
})
7087

7188
let code = transformed.code.toString()

0 commit comments

Comments
 (0)