Skip to content

Commit a9d62b0

Browse files
kdy1kdy1
authored
fix(turbopack): Pass correct browserslist to styled-jsx (#83334)
### What? Pass the correct browserslist query to `lightningcss` in `styled-jsx`. ### Why? To fix an issue with `styled-jsx`. #### Testing instruction: 1. `git clone https://github.com/kdy1/repro-next-styled-jsx-526 ~/projects/repro-next-styled-jsx-526` 2. `pnpm pack-next -p ~/projects/repro-next-styled-jsx-526 && (cd repro-next-styled-jsx-526 && pnpm i && pnpm build && pnpm start` ### How? Closes swc-project/plugins#526
1 parent f49402c commit a9d62b0

File tree

18 files changed

+221
-127
lines changed

18 files changed

+221
-127
lines changed

‎crates/next-api/src/project.rs

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -997,6 +997,7 @@ impl Project {
997997
format!("/ROOT/{}", self.project_path().await?.path).into(),
998998
this.define_env.nodejs(),
999999
self.current_node_js_version(),
1000+
this.browserslist_query.clone(),
10001001
))
10011002
}
10021003

@@ -1007,6 +1008,7 @@ impl Project {
10071008
self.project_path().owned().await?,
10081009
this.define_env.edge(),
10091010
self.current_node_js_version(),
1011+
this.browserslist_query.clone(),
10101012
))
10111013
}
10121014

‎crates/next-core/src/next_client/context.rs

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -98,18 +98,18 @@ pub async fn get_client_compile_time_info(
9898
browserslist_query: RcStr,
9999
define_env: Vc<OptionEnvMap>,
100100
) -> Result<Vc<CompileTimeInfo>> {
101+
let environment = BrowserEnvironment {
102+
dom: true,
103+
web_worker: false,
104+
service_worker: false,
105+
browserslist_query: browserslist_query.to_owned(),
106+
}
107+
.resolved_cell();
108+
101109
CompileTimeInfo::builder(
102-
Environment::new(ExecutionEnvironment::Browser(
103-
BrowserEnvironment {
104-
dom: true,
105-
web_worker: false,
106-
service_worker: false,
107-
browserslist_query: browserslist_query.to_owned(),
108-
}
109-
.resolved_cell(),
110-
))
111-
.to_resolved()
112-
.await?,
110+
Environment::new(ExecutionEnvironment::Browser(environment), *environment)
111+
.to_resolved()
112+
.await?,
113113
)
114114
.defines(next_client_defines(define_env).to_resolved().await?)
115115
.free_var_references(next_client_free_vars(define_env).to_resolved().await?)
@@ -260,7 +260,7 @@ pub async fn get_client_module_options_context(
260260
let tree_shaking_mode_for_foreign_code = *next_config
261261
.tree_shaking_mode_for_foreign_code(next_mode.is_development())
262262
.await?;
263-
let target_browsers = env.runtime_versions();
263+
let css_target_browsers = env.css_runtime_versions();
264264

265265
let mut next_client_rules =
266266
get_next_client_transforms_rules(next_config, ty.clone(), mode, false, encryption_key)
@@ -273,7 +273,7 @@ pub async fn get_client_module_options_context(
273273
get_relay_transform_rule(next_config, project_path.clone()).await?,
274274
get_emotion_transform_rule(next_config).await?,
275275
get_styled_components_transform_rule(next_config).await?,
276-
get_styled_jsx_transform_rule(next_config, target_browsers).await?,
276+
get_styled_jsx_transform_rule(next_config, css_target_browsers).await?,
277277
get_react_remove_properties_transform_rule(next_config).await?,
278278
get_remove_console_transform_rule(next_config).await?,
279279
]

‎crates/next-core/src/next_edge/context.rs

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ use turbopack_core::{
1111
module_id_strategies::ModuleIdStrategy,
1212
},
1313
compile_time_info::{CompileTimeDefines, CompileTimeInfo, FreeVarReference, FreeVarReferences},
14-
environment::{EdgeWorkerEnvironment, Environment, ExecutionEnvironment, NodeJsVersion},
14+
environment::{
15+
BrowserEnvironment, EdgeWorkerEnvironment, Environment, ExecutionEnvironment, NodeJsVersion,
16+
},
1517
free_var_references,
1618
module_graph::export_usage::OptionExportUsageInfo,
1719
};
@@ -60,11 +62,23 @@ pub async fn get_edge_compile_time_info(
6062
project_path: FileSystemPath,
6163
define_env: Vc<OptionEnvMap>,
6264
node_version: ResolvedVc<NodeJsVersion>,
65+
css_browserslist_query: RcStr,
6366
) -> Result<Vc<CompileTimeInfo>> {
67+
let css_environment = BrowserEnvironment {
68+
dom: false,
69+
web_worker: false,
70+
service_worker: false,
71+
browserslist_query: css_browserslist_query,
72+
}
73+
.resolved_cell();
74+
6475
CompileTimeInfo::builder(
65-
Environment::new(ExecutionEnvironment::EdgeWorker(
66-
EdgeWorkerEnvironment { node_version }.resolved_cell(),
67-
))
76+
Environment::new(
77+
ExecutionEnvironment::EdgeWorker(
78+
EdgeWorkerEnvironment { node_version }.resolved_cell(),
79+
),
80+
*css_environment,
81+
)
6882
.to_resolved()
6983
.await?,
7084
)

‎crates/next-core/src/next_server/context.rs

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ use turbopack_core::{
2222
compile_time_defines,
2323
compile_time_info::{CompileTimeDefines, CompileTimeInfo, FreeVarReferences},
2424
environment::{
25-
Environment, ExecutionEnvironment, NodeJsEnvironment, NodeJsVersion, RuntimeVersions,
25+
BrowserEnvironment, Environment, ExecutionEnvironment, NodeJsEnvironment, NodeJsVersion,
2626
},
2727
free_var_references,
2828
module_graph::export_usage::OptionExportUsageInfo,
@@ -364,16 +364,28 @@ pub async fn get_server_compile_time_info(
364364
cwd: RcStr,
365365
define_env: Vc<OptionEnvMap>,
366366
node_version: ResolvedVc<NodeJsVersion>,
367+
css_browserslist_query: RcStr,
367368
) -> Result<Vc<CompileTimeInfo>> {
369+
let css_environment = BrowserEnvironment {
370+
dom: false,
371+
web_worker: false,
372+
service_worker: false,
373+
browserslist_query: css_browserslist_query,
374+
}
375+
.resolved_cell();
376+
368377
CompileTimeInfo::builder(
369-
Environment::new(ExecutionEnvironment::NodeJsLambda(
370-
NodeJsEnvironment {
371-
compile_target: CompileTarget::current().to_resolved().await?,
372-
node_version,
373-
cwd: ResolvedVc::cell(Some(cwd)),
374-
}
375-
.resolved_cell(),
376-
))
378+
Environment::new(
379+
ExecutionEnvironment::NodeJsLambda(
380+
NodeJsEnvironment {
381+
compile_target: CompileTarget::current().to_resolved().await?,
382+
node_version,
383+
cwd: ResolvedVc::cell(Some(cwd)),
384+
}
385+
.resolved_cell(),
386+
),
387+
*css_environment,
388+
)
377389
.to_resolved()
378390
.await?,
379391
)
@@ -386,9 +398,10 @@ pub async fn get_server_compile_time_info(
386398
#[turbo_tasks::function]
387399
pub async fn get_tracing_compile_time_info() -> Result<Vc<CompileTimeInfo>> {
388400
CompileTimeInfo::builder(
389-
Environment::new(ExecutionEnvironment::NodeJsLambda(
390-
NodeJsEnvironment::default().resolved_cell(),
391-
))
401+
Environment::new(
402+
ExecutionEnvironment::NodeJsLambda(NodeJsEnvironment::default().resolved_cell()),
403+
BrowserEnvironment::default().cell(),
404+
)
392405
.to_resolved()
393406
.await?,
394407
)
@@ -505,7 +518,7 @@ pub async fn get_server_module_options_context(
505518
let tree_shaking_mode_for_foreign_code = *next_config
506519
.tree_shaking_mode_for_foreign_code(next_mode.is_development())
507520
.await?;
508-
let versions = RuntimeVersions(Default::default()).cell();
521+
let css_versions = environment.css_runtime_versions();
509522

510523
// ModuleOptionsContext related options
511524
let tsconfig = get_typescript_transform_options(project_path.clone())
@@ -546,7 +559,8 @@ pub async fn get_server_module_options_context(
546559
// context type.
547560
let styled_components_transform_rule =
548561
get_styled_components_transform_rule(next_config).await?;
549-
let styled_jsx_transform_rule = get_styled_jsx_transform_rule(next_config, versions).await?;
562+
let styled_jsx_transform_rule =
563+
get_styled_jsx_transform_rule(next_config, css_versions).await?;
550564

551565
let source_maps = if *next_config.server_source_maps().await? {
552566
SourceMapsType::Full

‎turbopack/crates/turbopack-cli/src/build/mod.rs

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -237,9 +237,12 @@ async fn build_internal(
237237
build_output_root.clone(),
238238
build_output_root.clone(),
239239
build_output_root.clone(),
240-
Environment::new(ExecutionEnvironment::NodeJsLambda(
241-
NodeJsEnvironment::default().resolved_cell(),
242-
))
240+
Environment::new(
241+
ExecutionEnvironment::NodeJsLambda(
242+
NodeJsEnvironment::default().resolved_cell(),
243+
),
244+
compile_time_info.css_environment(),
245+
)
243246
.to_resolved()
244247
.await?,
245248
runtime_type,
@@ -321,22 +324,25 @@ async fn build_internal(
321324

322325
let chunking_context: Vc<Box<dyn ChunkingContext>> = match target {
323326
Target::Browser => {
327+
let browser_environment = BrowserEnvironment {
328+
dom: true,
329+
web_worker: false,
330+
service_worker: false,
331+
browserslist_query: browserslist_query.clone(),
332+
}
333+
.resolved_cell();
334+
324335
let mut builder = BrowserChunkingContext::builder(
325336
project_path,
326337
build_output_root.clone(),
327338
build_output_root_to_root_path,
328339
build_output_root.clone(),
329340
build_output_root.clone(),
330341
build_output_root.clone(),
331-
Environment::new(ExecutionEnvironment::Browser(
332-
BrowserEnvironment {
333-
dom: true,
334-
web_worker: false,
335-
service_worker: false,
336-
browserslist_query: browserslist_query.clone(),
337-
}
338-
.resolved_cell(),
339-
))
342+
Environment::new(
343+
ExecutionEnvironment::Browser(browser_environment),
344+
*browser_environment,
345+
)
340346
.to_resolved()
341347
.await?,
342348
runtime_type,
@@ -382,9 +388,12 @@ async fn build_internal(
382388
build_output_root.clone(),
383389
build_output_root.clone(),
384390
build_output_root.clone(),
385-
Environment::new(ExecutionEnvironment::NodeJsLambda(
386-
NodeJsEnvironment::default().resolved_cell(),
387-
))
391+
Environment::new(
392+
ExecutionEnvironment::NodeJsLambda(
393+
NodeJsEnvironment::default().resolved_cell(),
394+
),
395+
BrowserEnvironment::default().cell(),
396+
)
388397
.to_resolved()
389398
.await?,
390399
runtime_type,

‎turbopack/crates/turbopack-cli/src/contexts.rs

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -199,18 +199,19 @@ pub async fn get_client_compile_time_info(
199199
node_env: Vc<NodeEnv>,
200200
) -> Result<Vc<CompileTimeInfo>> {
201201
let node_env = node_env.await?;
202+
203+
let environment = BrowserEnvironment {
204+
dom: true,
205+
web_worker: false,
206+
service_worker: false,
207+
browserslist_query,
208+
}
209+
.resolved_cell();
210+
202211
CompileTimeInfo::builder(
203-
Environment::new(ExecutionEnvironment::Browser(
204-
BrowserEnvironment {
205-
dom: true,
206-
web_worker: false,
207-
service_worker: false,
208-
browserslist_query,
209-
}
210-
.resolved_cell(),
211-
))
212-
.to_resolved()
213-
.await?,
212+
Environment::new(ExecutionEnvironment::Browser(environment), *environment)
213+
.to_resolved()
214+
.await?,
214215
)
215216
.defines(client_defines(&node_env).resolved_cell())
216217
.free_var_references(

‎turbopack/crates/turbopack-core/src/compile_time_info.rs

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ use turbo_rcstr::RcStr;
44
use turbo_tasks::{FxIndexMap, NonLocalValue, ResolvedVc, Vc, trace::TraceRawVcs};
55
use turbo_tasks_fs::FileSystemPath;
66

7-
use crate::environment::Environment;
7+
use crate::environment::{BrowserEnvironment, Environment};
88

99
#[macro_export]
1010
macro_rules! definable_name_map_pattern_internal {
@@ -349,6 +349,11 @@ impl CompileTimeInfo {
349349
pub fn environment(&self) -> Vc<Environment> {
350350
*self.environment
351351
}
352+
353+
#[turbo_tasks::function]
354+
pub async fn css_environment(&self) -> Result<Vc<BrowserEnvironment>> {
355+
Ok(self.environment.css_environment())
356+
}
352357
}
353358

354359
pub struct CompileTimeInfoBuilder {

‎turbopack/crates/turbopack-core/src/environment.rs

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,13 +42,20 @@ pub enum ChunkLoading {
4242
pub struct Environment {
4343
// members must be private to avoid leaking non-custom types
4444
execution: ExecutionEnvironment,
45+
css_environment: ResolvedVc<BrowserEnvironment>,
4546
}
4647

4748
#[turbo_tasks::value_impl]
4849
impl Environment {
4950
#[turbo_tasks::function]
50-
pub fn new(execution: ExecutionEnvironment) -> Vc<Self> {
51-
Self::cell(Environment { execution })
51+
pub async fn new(
52+
execution: ExecutionEnvironment,
53+
css_environment: ResolvedVc<BrowserEnvironment>,
54+
) -> Vc<Self> {
55+
Self::cell(Environment {
56+
execution,
57+
css_environment,
58+
})
5259
}
5360
}
5461

@@ -100,6 +107,17 @@ impl Environment {
100107
})
101108
}
102109

110+
#[turbo_tasks::function]
111+
pub fn css_environment(&self) -> Vc<BrowserEnvironment> {
112+
*self.css_environment
113+
}
114+
115+
#[turbo_tasks::function]
116+
pub async fn css_runtime_versions(&self) -> Result<Vc<RuntimeVersions>> {
117+
let distribs = resolve_browserslist(self.css_environment).await?;
118+
Ok(Vc::cell(Versions::parse_versions(distribs)?))
119+
}
120+
103121
#[turbo_tasks::function]
104122
pub async fn browserslist_query(&self) -> Result<Vc<RcStr>> {
105123
Ok(match self.execution {
@@ -317,6 +335,7 @@ impl Default for NodeJsVersion {
317335
}
318336

319337
#[turbo_tasks::value(shared)]
338+
#[derive(Default)]
320339
pub struct BrowserEnvironment {
321340
pub dom: bool,
322341
pub web_worker: bool,

‎turbopack/crates/turbopack-ecmascript/benches/analyzer.rs

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ use turbo_tasks::ResolvedVc;
1414
use turbo_tasks_testing::VcStorage;
1515
use turbopack_core::{
1616
compile_time_info::CompileTimeInfo,
17-
environment::{Environment, ExecutionEnvironment, NodeJsEnvironment, NodeJsVersion},
17+
environment::{
18+
BrowserEnvironment, Environment, ExecutionEnvironment, NodeJsEnvironment, NodeJsVersion,
19+
},
1820
target::CompileTarget,
1921
};
2022
use turbopack_ecmascript::analyzer::{
@@ -102,15 +104,20 @@ fn bench_link(b: &mut Bencher, input: &BenchInput) {
102104
let var_cache = Default::default();
103105
for val in input.var_graph.values.values() {
104106
VcStorage::with(async {
107+
let css_environment = BrowserEnvironment::default().cell();
108+
105109
let compile_time_info = CompileTimeInfo::builder(
106-
Environment::new(ExecutionEnvironment::NodeJsLambda(
107-
NodeJsEnvironment {
108-
compile_target: CompileTarget::unknown().to_resolved().await?,
109-
node_version: NodeJsVersion::default().resolved_cell(),
110-
cwd: ResolvedVc::cell(None),
111-
}
112-
.resolved_cell(),
113-
))
110+
Environment::new(
111+
ExecutionEnvironment::NodeJsLambda(
112+
NodeJsEnvironment {
113+
compile_target: CompileTarget::unknown().to_resolved().await?,
114+
node_version: NodeJsVersion::default().resolved_cell(),
115+
cwd: ResolvedVc::cell(None),
116+
}
117+
.resolved_cell(),
118+
),
119+
css_environment,
120+
)
114121
.to_resolved()
115122
.await?,
116123
)

0 commit comments

Comments
 (0)