Skip to content

Commit fea5577

Browse files
timneutkenstimneutkens
committed
Pass targets to css minify too
1 parent 00d4366 commit fea5577

File tree

3 files changed

+54
-24
lines changed

3 files changed

+54
-24
lines changed

‎test/integration/css-features/test/browserslist.test.js‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,15 @@ describe('Browserslist: Old', () => {
5454
.replace(/\/\*.*?\*\/\n?/g, '')
5555
.trim()
5656

57-
expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(
58-
`"a{-webkit-animation:none 0s ease 0s 1 normal none running;animation:none 0s ease 0s 1 normal none running;-webkit-backface-visibility:visible;backface-visibility:visible;background:transparent none repeat 0 0/auto auto padding-box border-box scroll;border:none;border-collapse:separate;-webkit-border-image:none;border-image:none;-webkit-border-radius:0;border-radius:0;border-spacing:0;bottom:auto;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:content-box;box-sizing:content-box;caption-side:top;clear:none;clip:auto;color:#000;-webkit-columns:auto;-webkit-column-count:auto;-webkit-column-fill:balance;column-fill:balance;-webkit-column-gap:normal;column-gap:normal;-webkit-column-rule:medium none currentColor;column-rule:medium none currentColor;-webkit-column-span:1;column-span:1;-webkit-column-width:auto;columns:auto;content:normal;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:inline;empty-cells:show;float:none;font-family:serif;font-size:medium;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;line-height:normal;height:auto;-ms-hyphens:none;hyphens:none;left:auto;letter-spacing:normal;list-style:disc none outside;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;opacity:1;orphans:2;outline:medium none invert;overflow:visible;overflow-x:visible;overflow-y:visible;padding:0;page-break-after:auto;page-break-before:auto;page-break-inside:auto;-webkit-perspective:none;perspective:none;-webkit-perspective-origin:50% 50%;perspective-origin:50% 50%;position:static;right:auto;tab-size:8;table-layout:auto;text-align:left;text-align-last:auto;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;top:auto;-webkit-transform:none;transform:none;-webkit-transform-origin:50% 50% 0;transform-origin:50% 50% 0;-webkit-transform-style:flat;transform-style:flat;-webkit-transition:none 0s ease 0s;transition:none 0s ease 0s;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;widows:2;width:auto;word-spacing:normal;z-index:auto;all:initial}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"`
59-
)
57+
if (process.env.IS_TURBOPACK_TEST) {
58+
expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(
59+
`"a{all:initial}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"`
60+
)
61+
} else {
62+
expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(
63+
`"a{-webkit-animation:none 0s ease 0s 1 normal none running;animation:none 0s ease 0s 1 normal none running;-webkit-backface-visibility:visible;backface-visibility:visible;background:transparent none repeat 0 0/auto auto padding-box border-box scroll;border:none;border-collapse:separate;-webkit-border-image:none;border-image:none;-webkit-border-radius:0;border-radius:0;border-spacing:0;bottom:auto;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:content-box;box-sizing:content-box;caption-side:top;clear:none;clip:auto;color:#000;-webkit-columns:auto;-webkit-column-count:auto;-webkit-column-fill:balance;column-fill:balance;-webkit-column-gap:normal;column-gap:normal;-webkit-column-rule:medium none currentColor;column-rule:medium none currentColor;-webkit-column-span:1;column-span:1;-webkit-column-width:auto;columns:auto;content:normal;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:inline;empty-cells:show;float:none;font-family:serif;font-size:medium;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;line-height:normal;height:auto;-ms-hyphens:none;hyphens:none;left:auto;letter-spacing:normal;list-style:disc none outside;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;opacity:1;orphans:2;outline:medium none invert;overflow:visible;overflow-x:visible;overflow-y:visible;padding:0;page-break-after:auto;page-break-before:auto;page-break-inside:auto;-webkit-perspective:none;perspective:none;-webkit-perspective-origin:50% 50%;perspective-origin:50% 50%;position:static;right:auto;tab-size:8;table-layout:auto;text-align:left;text-align-last:auto;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;top:auto;-webkit-transform:none;transform:none;-webkit-transform-origin:50% 50% 0;transform-origin:50% 50% 0;-webkit-transform-style:flat;transform-style:flat;-webkit-transition:none 0s ease 0s;transition:none 0s ease 0s;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;widows:2;width:auto;word-spacing:normal;z-index:auto;all:initial}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"`
64+
)
65+
}
6066
})
6167
}
6268
)
@@ -102,9 +108,15 @@ describe('Browserslist: New', () => {
102108
.replace(/\/\*.*?\*\/\n?/g, '')
103109
.trim()
104110

105-
expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(
106-
`"a{all:initial}@media (min-resolution:2dppx){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"`
107-
)
111+
if (process.env.IS_TURBOPACK_TEST) {
112+
expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(
113+
`"a{all:initial}@media (resolution>=2x){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"`
114+
)
115+
} else {
116+
expect(cssContentWithoutSourceMap).toMatchInlineSnapshot(
117+
`"a{all:initial}@media (min-resolution:2dppx){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"`
118+
)
119+
}
108120
})
109121
}
110122
)

‎turbopack/crates/turbopack-css/src/asset.rs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ impl ParseCss for CssModuleAsset {
8181
Vc::upcast(self),
8282
this.import_context.map(|v| *v),
8383
this.ty,
84+
this.browserslist_query.clone(),
8485
))
8586
}
8687
}

‎turbopack/crates/turbopack-css/src/process.rs‎

Lines changed: 35 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ use std::sync::{Arc, RwLock};
33
use anyhow::{Context, Result, bail};
44
use lightningcss::{
55
css_modules::{CssModuleExport, CssModuleExports, Pattern, Segment},
6-
stylesheet::{ParserOptions, PrinterOptions, StyleSheet, ToCssResult},
6+
stylesheet::{MinifyOptions, ParserOptions, PrinterOptions, StyleSheet, ToCssResult},
77
targets::{Features, Targets},
88
traits::ToCss,
99
values::url::Url,
@@ -53,6 +53,29 @@ impl PartialEq for StyleSheetLike<'_, '_> {
5353

5454
pub type CssOutput = (ToCssResult, Option<Rope>);
5555

56+
/// Returns the LightningCSS targets for the given browserslist query.
57+
fn get_lightningcss_browser_targets(
58+
browserslist_query: RcStr,
59+
handle_nesting: bool,
60+
) -> Result<Targets> {
61+
println!("browserslist_query: {:?}", browserslist_query);
62+
let browserslist_browsers =
63+
lightningcss::targets::Browsers::from_browserslist(browserslist_query.split(','))?;
64+
65+
Ok(if handle_nesting {
66+
Targets {
67+
browsers: browserslist_browsers,
68+
include: Features::Nesting,
69+
..Default::default()
70+
}
71+
} else {
72+
Targets {
73+
browsers: browserslist_browsers,
74+
..Default::default()
75+
}
76+
})
77+
}
78+
5679
impl StyleSheetLike<'_, '_> {
5780
pub fn to_static(
5881
&self,
@@ -77,21 +100,7 @@ impl StyleSheetLike<'_, '_> {
77100
None
78101
};
79102

80-
let browserslist_browsers =
81-
lightningcss::targets::Browsers::from_browserslist(browserslist_query.split(','))?;
82-
83-
let targets = if handle_nesting {
84-
Targets {
85-
browsers: browserslist_browsers,
86-
include: Features::Nesting,
87-
..Default::default()
88-
}
89-
} else {
90-
Targets {
91-
browsers: browserslist_browsers,
92-
..Default::default()
93-
}
94-
};
103+
let targets = get_lightningcss_browser_targets(browserslist_query, handle_nesting)?;
95104

96105
let result = ss.to_css(PrinterOptions {
97106
minify: matches!(minify_type, MinifyType::Minify { .. }),
@@ -336,6 +345,7 @@ pub async fn parse_css(
336345
origin: ResolvedVc<Box<dyn ResolveOrigin>>,
337346
import_context: Option<ResolvedVc<ImportContext>>,
338347
ty: CssModuleAssetType,
348+
browserslist_query: RcStr,
339349
) -> Result<Vc<ParseCssResult>> {
340350
let span = {
341351
let name = source.ident().to_string().await?.to_string();
@@ -361,6 +371,7 @@ pub async fn parse_css(
361371
origin,
362372
import_context,
363373
ty,
374+
browserslist_query,
364375
)
365376
.await?
366377
}
@@ -381,6 +392,7 @@ async fn process_content(
381392
origin: ResolvedVc<Box<dyn ResolveOrigin>>,
382393
import_context: Option<ResolvedVc<ImportContext>>,
383394
ty: CssModuleAssetType,
395+
browserslist_query: RcStr,
384396
) -> Result<Vc<ParseCssResult>> {
385397
#[allow(clippy::needless_lifetimes)]
386398
fn without_warnings<'o, 'i>(config: ParserOptions<'o, 'i>) -> ParserOptions<'o, 'static> {
@@ -475,13 +487,18 @@ async fn process_content(
475487
}
476488
}
477489

490+
let targets = get_lightningcss_browser_targets(browserslist_query, true)?;
491+
478492
// minify() is actually transform, and it performs operations like CSS modules
479493
// handling.
480494
//
481495
//
482496
// See: https://github.com/parcel-bundler/lightningcss/issues/935#issuecomment-2739325537
483-
ss.minify(Default::default())
484-
.context("failed to transform css")?;
497+
ss.minify(MinifyOptions {
498+
targets,
499+
..Default::default()
500+
})
501+
.context("failed to transform css")?;
485502

486503
stylesheet_into_static(&ss, without_warnings(config.clone()))
487504
}

0 commit comments

Comments
 (0)