@swc/plugin-styled-jsx 1.5.76 → 1.5.77

package/Cargo.toml

@@ -26,6 +26,7 @@ swc_core = { version = "0.83.0", features = [
   "ecma_visit",
 ] }
 tracing = { version = "0.1.37", features = ["release_max_level_off"] }
+serde_json = "1"
 
 [dev-dependencies]
 swc_core = { features = ["testing_transform"], version = "0.83.0" }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swc/plugin-styled-jsx",
-  "version": "1.5.76",
+  "version": "1.5.77",
   "description": "SWC plugin for styled-jsx",
   "main": "swc_plugin_styled_jsx.wasm",
   "scripts": {

package/src/lib.rs

@@ -1,7 +1,7 @@
 #![allow(clippy::not_unsafe_ptr_arg_deref)]
 #![feature(box_patterns)]
 
-use styled_jsx::visitor;
+use styled_jsx::{visitor, visitor::Config};
 use swc_core::{
     common::{sync::Lrc, FileName, SourceMap},
     ecma::{ast::Program, visit::FoldWith},
@@ -9,9 +9,16 @@ use swc_core::{
 };
 
 #[plugin_transform]
-fn styled_jsx_plugin(program: Program, _: TransformPluginProgramMetadata) -> Program {
+fn styled_jsx_plugin(program: Program, data: TransformPluginProgramMetadata) -> Program {
+    let config = serde_json::from_str::<Config>(
+        &data
+            .get_transform_plugin_config()
+            .expect("failed to get plugin config for styled-jsx"),
+    )
+    .expect("invalid config for styled-jsx");
+
     // TODO(kdy1): This is wrong, but it does not use cm
     let cm = Lrc::new(SourceMap::default());
 
-    program.fold_with(&mut visitor::styled_jsx(cm, FileName::Anon))
+    program.fold_with(&mut visitor::styled_jsx(cm, FileName::Anon, config))
 }

package/transform/Cargo.toml

@@ -4,7 +4,7 @@ description = "AST transforms visitor for styled-jsx"
 edition = "2021"
 license = "Apache-2.0"
 name = "styled_jsx"
-version = "0.43.0"
+version = "0.44.0"
 
 [features]
 custom_transform = ["swc_core/common_concurrent"]
@@ -17,9 +17,16 @@ lightningcss = { version = "1.0.0-alpha.44", features = [
   "into_owned",
 ] }
 parcel_selectors = "0.26.0"
+serde = { version = "1", features = ["derive"] }
 
 swc_core = { version = "0.83.0", features = [
   "common",
+  "css_ast",
+  "css_codegen",
+  "css_parser",
+  "css_prefixer",
+  "css_minifier",
+  "css_visit",
   "ecma_ast",
   "ecma_parser",
   "ecma_minifier",

package/transform/src/lib.rs

@@ -1,6 +1,7 @@
 #![feature(box_patterns)]
 mod lifetime;
 pub mod style;
-mod transform_css;
+mod transform_css_lightningcss;
+mod transform_css_swc;
 mod utils;
 pub mod visitor;

package/transform/src/transform_css_swc.rs

@@ -0,0 +1,394 @@
+use std::{panic, sync::Arc};
+
+use easy_error::{bail, Error};
+use swc_core::{
+    common::{
+        errors::HANDLER, source_map::Pos, util::take::Take, BytePos, SourceMap, Span, Spanned,
+        SyntaxContext, DUMMY_SP,
+    },
+    css::{
+        ast::*,
+        codegen::{
+            writer::basic::{BasicCssWriter, BasicCssWriterConfig},
+            CodeGenerator, CodegenConfig, Emit,
+        },
+        parser::{
+            lexer::Lexer,
+            parse_input,
+            parser::{
+                input::{InputType, Tokens},
+                Parser, ParserConfig,
+            },
+        },
+        prefixer::prefixer,
+        visit::{VisitMut, VisitMutWith},
+    },
+    ecma::{
+        ast::{Expr, Tpl, TplElement},
+        parser::StringInput,
+    },
+};
+use tracing::{debug, trace};
+
+use crate::{
+    style::LocalStyle,
+    utils::{hash_string, string_literal_expr},
+};
+
+pub fn transform_css(
+    _cm: Arc<SourceMap>,
+    style_info: &LocalStyle,
+    is_global: bool,
+    class_name: &Option<String>,
+) -> Result<Expr, Error> {
+    debug!("CSS: \n{}", style_info.css);
+
+    // TODO use `parse_string_input` in future
+    let config = ParserConfig {
+        allow_wrong_line_comments: true,
+        css_modules: false,
+        ..Default::default()
+    };
+    let lexer = Lexer::new(
+        StringInput::new(
+            &style_info.css,
+            style_info.css_span.lo,
+            style_info.css_span.hi,
+        ),
+        config,
+    );
+    let mut parser = Parser::new(lexer, config);
+
+    let result: Result<Stylesheet, _> = parser.parse_all();
+    let mut ss = match result {
+        Ok(ss) => ss,
+        Err(err) => {
+            HANDLER.with(|handler| {
+                // Print css parsing errors
+                err.to_diagnostics(handler).emit();
+
+                // TODO(kdy1): We may print css so the user can see the error, and report it.
+
+                handler
+                    .struct_span_err(
+                        style_info.css_span,
+                        "Failed to parse css in styled jsx component",
+                    )
+                    .note(&format!("Input to the css parser is {}", style_info.css))
+                    .emit()
+            });
+            bail!("Failed to parse css");
+        }
+    };
+    // ? Do we need to support optionally prefixing?
+    ss.visit_mut_with(&mut prefixer(Default::default()));
+    ss.visit_mut_with(&mut Namespacer {
+        class_name: match class_name {
+            Some(s) => s.clone(),
+            None => format!("jsx-{}", &hash_string(&style_info.hash)),
+        },
+        is_global,
+        is_dynamic: style_info.is_dynamic,
+    });
+
+    let mut s = String::new();
+    {
+        let mut wr = BasicCssWriter::new(&mut s, None, BasicCssWriterConfig::default());
+        let mut gen = CodeGenerator::new(&mut wr, CodegenConfig { minify: true });
+
+        gen.emit(&ss).unwrap();
+    }
+
+    if style_info.expressions.is_empty() {
+        return Ok(string_literal_expr(&s));
+    }
+
+    let mut parts: Vec<&str> = s.split("__styled-jsx-placeholder-").collect();
+    let mut final_expressions = vec![];
+    for i in parts.iter_mut().skip(1) {
+        let (num_len, expression_index) = read_number(i);
+        final_expressions.push(style_info.expressions[expression_index].clone());
+        let substr = &i[(num_len + 2)..];
+        *i = substr;
+    }
+
+    Ok(Expr::Tpl(Tpl {
+        quasis: parts
+            .iter()
+            .map(|quasi| {
+                TplElement {
+                    cooked: None, // ? Do we need cooked as well
+                    raw: quasi.replace('`', "\\`").into(),
+                    span: DUMMY_SP,
+                    tail: false,
+                }
+            })
+            .collect(),
+        exprs: final_expressions,
+        span: DUMMY_SP,
+    }))
+}
+
+/// Returns `(length, value)`
+fn read_number(s: &str) -> (usize, usize) {
+    for (idx, c) in s.char_indices() {
+        if c.is_ascii_digit() {
+            continue;
+        }
+
+        // For 10, we reach here after `0`.
+        let value = s[0..idx].parse().expect("failed to parse");
+
+        return (idx, value);
+    }
+
+    unreachable!("read_number(`{}`) is invalid because it is empty", s)
+}
+
+struct Namespacer {
+    class_name: String,
+    is_global: bool,
+    is_dynamic: bool,
+}
+
+impl VisitMut for Namespacer {
+    fn visit_mut_complex_selector(&mut self, node: &mut ComplexSelector) {
+        #[cfg(debug_assertions)]
+        let _tracing = {
+            // This will add information to the log messages, only for debug build.
+            // Note that we use cargo feature to remove all logging on production builds.
+
+            let mut code = String::new();
+            {
+                let mut wr = BasicCssWriter::new(&mut code, None, BasicCssWriterConfig::default());
+                let mut gen = CodeGenerator::new(&mut wr, CodegenConfig { minify: true });
+
+                gen.emit(&*node).unwrap();
+            }
+
+            tracing::span!(
+                tracing::Level::TRACE,
+                "Namespacer::visit_mut_complex_selector",
+                class_name = &*self.class_name,
+                is_global = self.is_global,
+                is_dynamic = self.is_dynamic,
+                input = &*code
+            )
+            .entered()
+        };
+
+        let mut new_selectors = vec![];
+        let mut combinator = None;
+
+        for sel in node.children.take() {
+            match &sel {
+                ComplexSelectorChildren::CompoundSelector(selector) => {
+                    match self.get_transformed_selectors(combinator, selector.clone()) {
+                        Ok(transformed_selectors) => new_selectors.extend(transformed_selectors),
+                        Err(_) => {
+                            HANDLER.with(|handler| {
+                                handler
+                                    .struct_span_err(
+                                        selector.span,
+                                        "Failed to transform one off global selector",
+                                    )
+                                    .emit()
+                            });
+                            new_selectors.push(sel);
+                        }
+                    }
+
+                    combinator = None;
+                }
+                ComplexSelectorChildren::Combinator(v) => {
+                    combinator = Some(v.clone());
+                }
+            };
+        }
+
+        node.children = new_selectors;
+    }
+}
+
+impl Namespacer {
+    fn get_transformed_selectors(
+        &mut self,
+        combinator: Option<Combinator>,
+        mut node: CompoundSelector,
+    ) -> Result<Vec<ComplexSelectorChildren>, Error> {
+        let mut pseudo_index = None;
+
+        for (i, selector) in node.subclass_selectors.iter().enumerate() {
+            let (name, children) = match &selector {
+                SubclassSelector::PseudoClass(PseudoClassSelector {
+                    name,
+                    children: Some(children),
+                    ..
+                }) if &name.value == "global" => (name, children),
+                SubclassSelector::PseudoClass(_) | SubclassSelector::PseudoElement(_) => {
+                    if pseudo_index.is_none() {
+                        pseudo_index = Some(i);
+                    }
+
+                    continue;
+                }
+                _ => continue,
+            };
+
+            // One off global selector
+            if &name.value == "global" {
+                // TODO(alexander-akait): in future we should use list of component values
+                let tokens = children
+                    .iter()
+                    .map(|v| match v {
+                        PseudoClassSelectorChildren::PreservedToken(v) => v.clone(),
+                        _ => {
+                            unreachable!();
+                        }
+                    })
+                    .collect::<Vec<TokenAndSpan>>();
+                let mut tokens = {
+                    let lo = tokens.first().map(|v| v.span_lo()).unwrap_or(BytePos(0));
+                    let hi = tokens.last().map(|v| v.span_hi()).unwrap_or(BytePos(0));
+
+                    Tokens {
+                        span: Span::new(lo, hi, Default::default()),
+                        tokens,
+                    }
+                };
+
+                // Because it is allowed to write `.bar :global(> .foo) {}` or .bar
+                // :global(.foo) {}`, so selector can be complex or relative (it violates the
+                // specification), but it is popular usage, so we just add `a >` at top and then
+                // remove it
+                let mut front_tokens = get_front_selector_tokens(&tokens);
+
+                front_tokens.extend(tokens.tokens);
+
+                tokens.tokens = front_tokens;
+
+                let complex_selectors = panic::catch_unwind(|| {
+                    let x: ComplexSelector = parse_input(
+                        InputType::Tokens(&tokens),
+                        ParserConfig {
+                            allow_wrong_line_comments: true,
+                            css_modules: true,
+                            ..Default::default()
+                        },
+                        // TODO(kdy1): We might be able to report syntax errors.
+                        &mut vec![],
+                    )
+                    .unwrap();
+                    x
+                });
+
+                return match complex_selectors {
+                    Ok(complex_selectors) => {
+                        let mut v = complex_selectors.children[1..].to_vec();
+
+                        if let ComplexSelectorChildren::Combinator(Combinator {
+                            value: CombinatorValue::Descendant,
+                            ..
+                        }) = v[0]
+                        {
+                            v.remove(0);
+                        }
+
+                        if v.is_empty() {
+                            bail!("Failed to transform one off global selector");
+                        }
+
+                        trace!("Combinator: {:?}", combinator);
+                        trace!("v[0]: {:?}", v[0]);
+
+                        let mut result = vec![];
+
+                        if let Some(combinator) = combinator {
+                            match v.get(0) {
+                                // `Descendant` combinator can't be the first because we removed it
+                                // above
+                                Some(ComplexSelectorChildren::Combinator(..))
+                                    if combinator.value == CombinatorValue::Descendant => {}
+                                _ => {
+                                    result.push(ComplexSelectorChildren::Combinator(combinator));
+                                }
+                            }
+                        }
+
+                        v.iter_mut().for_each(|sel| {
+                            if i < node.subclass_selectors.len() {
+                                if let ComplexSelectorChildren::CompoundSelector(sel) = sel {
+                                    sel.subclass_selectors
+                                        .extend(node.subclass_selectors[i + 1..].iter().cloned());
+                                }
+                            }
+                        });
+
+                        result.extend(v);
+
+                        Ok(result)
+                    }
+                    Err(_) => bail!("Failed to transform one off global selector"),
+                };
+            }
+        }
+
+        let subclass_selector = match self.is_dynamic {
+            true => "__jsx-style-dynamic-selector",
+            false => &self.class_name,
+        };
+        let insert_index = match pseudo_index {
+            None => node.subclass_selectors.len(),
+            Some(i) => i,
+        };
+
+        if !self.is_global {
+            node.subclass_selectors.insert(
+                insert_index,
+                SubclassSelector::Class(ClassSelector {
+                    span: DUMMY_SP,
+                    text: Ident {
+                        raw: Some(subclass_selector.into()),
+                        value: subclass_selector.into(),
+                        span: DUMMY_SP,
+                    },
+                }),
+            );
+        }
+
+        let mut result = vec![];
+
+        if let Some(combinator) = combinator {
+            result.push(ComplexSelectorChildren::Combinator(combinator));
+        }
+
+        result.push(ComplexSelectorChildren::CompoundSelector(node));
+
+        Ok(result)
+    }
+}
+
+fn get_front_selector_tokens(selector_tokens: &Tokens) -> Vec<TokenAndSpan> {
+    let start_pos = selector_tokens.span.lo.to_u32() - 2;
+    vec![
+        TokenAndSpan {
+            span: Span {
+                lo: BytePos(start_pos),
+                hi: BytePos(start_pos + 1),
+                ctxt: SyntaxContext::empty(),
+            },
+            token: Token::Ident {
+                raw: "a".into(),
+                value: "a".into(),
+            },
+        },
+        TokenAndSpan {
+            span: Span {
+                lo: BytePos(start_pos + 1),
+                hi: BytePos(start_pos + 2),
+                ctxt: SyntaxContext::empty(),
+            },
+            token: Token::WhiteSpace { value: " ".into() },
+        },
+    ]
+}

package/transform/src/visitor.rs

@@ -6,6 +6,7 @@ use std::{
 };
 
 use easy_error::{bail, Error};
+use serde::Deserialize;
 use swc_core::{
     common::{collections::AHashSet, errors::HANDLER, FileName, SourceMap, Span, DUMMY_SP},
     ecma::{
@@ -21,16 +22,21 @@ use swc_core::{
 
 use crate::{
     style::{ExternalStyle, JSXStyle, LocalStyle},
-    transform_css::transform_css,
     utils::{
         add, and, compute_class_names, get_usable_import_specifier, hash_string, ident,
         is_capitalized, make_external_styled_jsx_el, make_local_styled_jsx_el, not_eq, or,
         string_literal_expr, styled_jsx_import_decl,
     },
 };
-//use external::external_styles;
 
-pub fn styled_jsx(cm: Arc<SourceMap>, file_name: FileName) -> impl Fold {
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct Config {
+    #[serde(default)]
+    pub use_lightningcss: bool,
+}
+
+pub fn styled_jsx(cm: Arc<SourceMap>, file_name: FileName, config: Config) -> impl Fold {
     let file_name = match file_name {
         FileName::Real(real_file_name) => real_file_name
             .to_str()
@@ -40,6 +46,7 @@ pub fn styled_jsx(cm: Arc<SourceMap>, file_name: FileName) -> impl Fold {
 
     StyledJSXTransformer {
         cm,
+        config,
         file_name,
         styles: Default::default(),
         static_class_name: Default::default(),
@@ -63,6 +70,8 @@ pub fn styled_jsx(cm: Arc<SourceMap>, file_name: FileName) -> impl Fold {
 
 struct StyledJSXTransformer {
     cm: Arc<SourceMap>,
+    config: Config,
+
     file_name: Option<String>,
     styles: Vec<JSXStyle>,
     static_class_name: Option<String>,
@@ -564,12 +573,22 @@ impl StyledJSXTransformer {
 
         match &style_info {
             JSXStyle::Local(style_info) => {
-                let css = transform_css(
-                    self.cm.clone(),
-                    style_info,
-                    is_global,
-                    &self.static_class_name,
-                )?;
+                let css = if self.config.use_lightningcss {
+                    crate::transform_css_lightningcss::transform_css(
+                        self.cm.clone(),
+                        style_info,
+                        is_global,
+                        &self.static_class_name,
+                    )?
+                } else {
+                    crate::transform_css_swc::transform_css(
+                        self.cm.clone(),
+                        style_info,
+                        is_global,
+                        &self.static_class_name,
+                    )?
+                };
+
                 Ok(make_local_styled_jsx_el(
                     style_info,
                     css,
@@ -618,7 +637,21 @@ impl StyledJSXTransformer {
         } else {
             bail!("This shouldn't happen, we already know that this is a template literal");
         };
-        let css = transform_css(self.cm.clone(), style, tag == "global", &static_class_name)?;
+        let css = if self.config.use_lightningcss {
+            crate::transform_css_lightningcss::transform_css(
+                self.cm.clone(),
+                style,
+                tag == "global",
+                &static_class_name,
+            )?
+        } else {
+            crate::transform_css_swc::transform_css(
+                self.cm.clone(),
+                style,
+                tag == "global",
+                &static_class_name,
+            )?
+        };
         if tag == "resolve" {
             self.file_has_css_resolve = true;
             return Ok(Expr::Object(ObjectLit {

package/transform/tests/errors/nested-style-tags/output.js

@@ -1,31 +1,58 @@
 import _JSXStyle from "styled-jsx/style";
 const Component = ()=><>
-    <header >
-      <Comp >
+
+    <header>
+
+      <Comp>
+
         <_JSXStyle id={styles.__hash}>{styles}</_JSXStyle>
+
         <_JSXStyle id={"b3e1b6a7c9b96113"}>{""}</_JSXStyle>
+
       </Comp>
+
       <p className={"jsx-b3e1b6a7c9b96113"}><_JSXStyle id={"b3e1b6a7c9b96113"}>{""}</_JSXStyle></p>
+
     </header>
+
     <div className={"jsx-b3e1b6a7c9b96113"}>
+
       <h1 className={"jsx-b3e1b6a7c9b96113"}>
+
         Welcome!
+
         <style jsx>{``}</style>
+
       </h1>
+
       <_JSXStyle id={"b3e1b6a7c9b96113"}>{""}</_JSXStyle>
+
     </div>
+
     <div className={"jsx-b3e1b6a7c9b96113"}>
+
       <_JSXStyle id={"b3e1b6a7c9b96113"}>{""}</_JSXStyle>
+
       <h1 className={"jsx-b3e1b6a7c9b96113"}>
+
         Hello world!
+
         <style jsx global>{``}</style>
+
       </h1>
+
     </div>
+
     <div className={"jsx-b3e1b6a7c9b96113"}>
+
       <>
+
         <style jsx>{styles}</style>
+
       </>
+
       <_JSXStyle id={"b3e1b6a7c9b96113"}>{""}</_JSXStyle>
+
     </div>
-  </>
-;
+
+  </>;

package/transform/tests/errors/ts-with-css-resolve/output.js

@@ -1,5 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
 export default {
-    styles: <_JSXStyle id={"71f03d42ea0ec6"}>{".container.jsx-71f03d42ea0ec6{color:#fff;background:#000;height:100px;font-weight:700}"}</_JSXStyle>,
+    styles: <_JSXStyle id={"71f03d42ea0ec6"}>{".container.jsx-71f03d42ea0ec6{background:#000;color:white;font-weight:700;height:100px}"}</_JSXStyle>,
     className: "jsx-71f03d42ea0ec6"
 };

package/transform/tests/fixture/absent/output.swc.js

@@ -0,0 +1,7 @@
+const a = ()=><div>
+
+    <p>hi</p>
+
+    <style>{'woot'}</style>
+
+  </div>;