Skip to content

Commit

Permalink
Update swc & fix styled-jsx (#31407)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kdy1
kdy1 committed Nov 15, 2021
1 parent aaec9a9 commit 6fd4438
Show file tree
Hide file tree
Showing 9 changed files with 206 additions and 85 deletions.
167 changes: 102 additions & 65 deletions packages/next/build/swc/Cargo.lock
View file

Large diffs are not rendered by default.

18 changes: 9 additions & 9 deletions packages/next/build/swc/Cargo.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,24 +23,24 @@ retain_mut = "0.1.3"
rustc-hash = "1.1.0"
serde = "1"
serde_json = "1"
styled_components = "0.1.0"
swc = "0.83.1"
styled_components = "0.2.0"
swc = "0.85.0"
swc_atoms = "0.2.7"
swc_bundler = { version = "0.80.0", features = ["concurrent"] }
swc_bundler = { version = "0.82.0", features = ["concurrent"] }
swc_common = {version = "0.14.2", features = ["concurrent", "sourcemap"]}
swc_css = "0.20.0"
swc_ecma_loader = { version = "0.24.0", features = ["node", "lru"] }
swc_ecma_preset_env = "0.64.0"
swc_ecmascript = { version = "0.85.0", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
swc_css = "0.31.0"
swc_ecma_loader = { version = "0.24.2", features = ["node", "lru"] }
swc_ecma_preset_env = "0.66.0"
swc_ecmascript = { version = "0.87.0", features = ["codegen", "minifier", "optimization", "parser", "react", "transforms", "typescript", "utils", "visit"] }
swc_node_base = "0.5.1"
swc_stylis = "0.17.0"
swc_stylis = "0.28.0"
tracing = {version = "0.1.28", features = ["release_max_level_off"]}

[build-dependencies]
napi-build = "1"

[dev-dependencies]
swc_ecma_transforms_testing = "0.44.0"
swc_ecma_transforms_testing = "0.45.0"
testing = "0.15.1"
walkdir = "2.3.2"

Expand Down
2 changes: 1 addition & 1 deletion packages/next/build/swc/src/bundle/mod.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ use swc_common::{
};
use swc_ecma_loader::{
resolvers::{lru::CachingResolver, node::NodeModulesResolver},
NODE_BUILTINS,
TargetEnv, NODE_BUILTINS,
};
use swc_ecmascript::{
ast::*,
Expand Down
51 changes: 42 additions & 9 deletions packages/next/build/swc/src/styled_jsx/transform_css.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,8 @@ pub fn transform_css(
}
};
// ? Do we need to support optionally prefixing?
ss.visit_mut_with(&mut prefixer());
ss.visit_mut_with(&mut FixedPrefixer);
ss.visit_mut_with(&mut CssFixer);
ss.visit_mut_with(&mut Namespacer {
class_name: match class_name {
Some(s) => s.clone(),
Expand Down Expand Up @@ -121,6 +122,38 @@ fn read_number(s: &str) -> (usize, usize) {
unreachable!("read_number(`{}`) is invalid because it is empty", s)
}

/// Applies `prefixer`, but this avoids bug of `swc_stylis::prefixer()`.
///
/// TODO(kdy1): Remove this when we upgrade crates related to css. (The crate
/// update is blocked by `ComplexSelectorChildren` issue)
struct FixedPrefixer;

impl VisitMut for FixedPrefixer {
fn visit_mut_style_rule(&mut self, n: &mut StyleRule) {
n.visit_mut_with(&mut prefixer());
}
}

/// This fixes invalid css.
struct CssFixer;

impl VisitMut for CssFixer {
fn visit_mut_media_query(&mut self, q: &mut MediaQuery) {
q.visit_mut_children_with(self);

match q {
MediaQuery::Text(q) => {
if q.raw.starts_with("__styled-jsx-placeholder-") {
// TODO(kdy1): Remove this once we have CST for media query.
// We need good error recovery for media queries to handle this.
q.raw = format!("({})", &q.value).into();
}
}
_ => {}
}
}
}

struct Namespacer {
class_name: String,
is_global: bool,
Expand Down Expand Up @@ -167,7 +200,7 @@ impl Namespacer {
front_tokens.extend(block_tokens);
args.tokens = front_tokens;
let complex_selectors = panic::catch_unwind(|| {
let x: Vec<ComplexSelector> = parse_tokens(
let x: ComplexSelector = parse_tokens(
&args,
ParserConfig {
parse_values: false,
Expand All @@ -182,7 +215,7 @@ impl Namespacer {

return match complex_selectors {
Ok(complex_selectors) => {
let mut v = complex_selectors[0].selectors[1..]
let mut v = complex_selectors.selectors[1..]
.iter()
.cloned()
.collect::<Vec<_>>();
Expand Down Expand Up @@ -260,7 +293,7 @@ fn get_front_selector_tokens(selector_tokens: &Tokens) -> Vec<TokenAndSpan> {
hi: BytePos(start_pos + 2),
ctxt: SyntaxContext::empty(),
},
token: Token::WhiteSpace,
token: Token::WhiteSpace { value: " ".into() },
},
]
}
Expand All @@ -274,7 +307,7 @@ fn get_block_tokens(selector_tokens: &Tokens) -> Vec<TokenAndSpan> {
hi: BytePos(start_pos + 1),
ctxt: SyntaxContext::empty(),
},
token: Token::WhiteSpace,
token: Token::WhiteSpace { value: " ".into() },
},
TokenAndSpan {
span: Span {
Expand All @@ -290,7 +323,7 @@ fn get_block_tokens(selector_tokens: &Tokens) -> Vec<TokenAndSpan> {
hi: BytePos(start_pos + 3),
ctxt: SyntaxContext::empty(),
},
token: Token::WhiteSpace,
token: Token::WhiteSpace { value: " ".into() },
},
TokenAndSpan {
span: Span {
Expand All @@ -317,7 +350,7 @@ fn get_block_tokens(selector_tokens: &Tokens) -> Vec<TokenAndSpan> {
hi: BytePos(start_pos + 10),
ctxt: SyntaxContext::empty(),
},
token: Token::WhiteSpace,
token: Token::WhiteSpace { value: " ".into() },
},
TokenAndSpan {
span: Span {
Expand All @@ -344,7 +377,7 @@ fn get_block_tokens(selector_tokens: &Tokens) -> Vec<TokenAndSpan> {
hi: BytePos(start_pos + 15),
ctxt: SyntaxContext::empty(),
},
token: Token::WhiteSpace,
token: Token::WhiteSpace { value: " ".into() },
},
TokenAndSpan {
span: Span {
Expand All @@ -360,7 +393,7 @@ fn get_block_tokens(selector_tokens: &Tokens) -> Vec<TokenAndSpan> {
hi: BytePos(start_pos + 17),
ctxt: SyntaxContext::empty(),
},
token: Token::WhiteSpace,
token: Token::WhiteSpace { value: " ".into() },
},
]
}
7 changes: 7 additions & 0 deletions packages/next/build/swc/tests/fixture/styled-jsx/issue-30480/input.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@


export default ({ breakPoint }) => (
<div>
<style jsx>{`@media (${breakPoint}) {}`}</style>
</div>
)
16 changes: 16 additions & 0 deletions packages/next/build/swc/tests/fixture/styled-jsx/issue-30480/output.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import _JSXStyle from "styled-jsx/style";
export default (({ breakPoint })=><div className={_JSXStyle.dynamic([
[
"6b843a9852a4be26",
[
breakPoint
]
]
])}>

<_JSXStyle id={"6b843a9852a4be26"} dynamic={[
breakPoint
]}>{`@media (${breakPoint}) {}`}</_JSXStyle>

</div>
);
15 changes: 15 additions & 0 deletions packages/next/build/swc/tests/fixture/styled-jsx/issue-30570/input.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export default function IndexPage() {
return (
<div>
<h1>Hello World.</h1>

<style jsx global>{`
@supports (display: flex) {
h1 {
color: hotpink;
}
}
`}</style>
</div>
);
}
12 changes: 12 additions & 0 deletions packages/next/build/swc/tests/fixture/styled-jsx/issue-30570/output.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import _JSXStyle from "styled-jsx/style";
export default function IndexPage() {
return <div className={"jsx-bbdada4ef17d18ef"}>

<h1 className={"jsx-bbdada4ef17d18ef"}>Hello World.</h1>



<_JSXStyle id={"bbdada4ef17d18ef"}>{"@supports (display:flex) {h1 {color:hotpink}}"}</_JSXStyle>

</div>;
};
3 changes: 2 additions & 1 deletion packages/next/build/swc/tests/fixture/styled-jsx/tpl-placeholder-1-as-property/output.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ export default class {

<_JSXStyle id={"8c1103276226be14"} dynamic={[
inputSize ? "height: calc(2 * var(--a)) !important;" : ""
]}>{`@media only screen {a.__jsx-style-dynamic-selector {${inputSize ? "height: calc(2 * var(--a)) !important;" : ""} }}`}</_JSXStyle>
]}>{`@media only screen {a.__jsx-style-dynamic-selector {${inputSize ? "height: calc(2 * var(--a)) !important;" : ""}
}}`}</_JSXStyle>

</div>;
}
Expand Down

0 comments on commit 6fd4438

Please sign in to comment.