@swc/plugin-styled-jsx 1.5.70 → 1.5.72

package/transform/src/transform_css.rs

@@ -1,40 +1,39 @@
-use std::{panic, sync::Arc};
+use std::{
+    borrow::Cow,
+    convert::Infallible,
+    fmt::Debug,
+    mem::transmute,
+    panic::{catch_unwind, AssertUnwindSafe},
+    sync::Arc,
+};
 
-use easy_error::{bail, Error};
+use easy_error::{bail, Error, ResultExt};
+use lightningcss::{
+    properties::custom::{TokenList, TokenOrValue},
+    selector::{Combinator, Component, PseudoClass, Selector},
+    stylesheet::{MinifyOptions, ParserOptions, PrinterOptions, StyleSheet},
+    traits::{ParseWithOptions, ToCss},
+    values::ident::Ident,
+    visit_types,
+    visitor::{Visit, VisitTypes, Visitor},
+};
+use parcel_selectors::{parser::SelectorIter, SelectorImpl};
 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,
-    },
+    common::{errors::HANDLER, SourceMap, DUMMY_SP},
+    ecma::ast::{Expr, Tpl, TplElement},
 };
-use tracing::{debug, trace};
+use tracing::{debug, error, trace};
 
 use crate::{
+    lifetime::owned_selector,
     style::LocalStyle,
     utils::{hash_string, string_literal_expr},
 };
 
+#[cfg_attr(
+    debug_assertions,
+    tracing::instrument(skip(_cm, style_info, class_name))
+)]
 pub fn transform_css(
     _cm: Arc<SourceMap>,
     style_info: &LocalStyle,
@@ -42,30 +41,24 @@ pub fn transform_css(
     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 css_str = strip_comments(&style_info.css);
+
+    let result: Result<StyleSheet, _> = StyleSheet::parse(
+        &css_str,
+        ParserOptions {
+            // We cannot use css_modules for `:global` because lightningcss does not support
+            // parsing-only mode.
+            css_modules: None,
+            ..Default::default()
+        },
     );
-    let mut parser = Parser::new(lexer, config);
-
-    let result: Result<Stylesheet, _> = parser.parse_all();
     let mut ss = match result {
         Ok(ss) => ss,
-        Err(err) => {
+        Err(_err) => {
             HANDLER.with(|handler| {
                 // Print css parsing errors
-                err.to_diagnostics(handler).emit();
+                // TODO:
+                // err.to_diagnostics(handler).emit();
 
                 // TODO(kdy1): We may print css so the user can see the error, and report it.
 
@@ -80,36 +73,45 @@ pub fn transform_css(
             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 {
+
+    // Apply auto prefixer
+    // TODO:
+    ss.minify(MinifyOptions {
+        ..Default::default()
+    })
+    .expect("failed to minify/auto-prefix css");
+    ss.visit(&mut CssNamespace {
         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,
-    });
+    })
+    .expect("failed to transform css");
 
-    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 });
+    let res = ss
+        .to_css(PrinterOptions {
+            minify: true,
+            // TODO
+            // targets: (),
+            ..Default::default()
+        })
+        .context("failed to print css")?;
 
-        gen.emit(&ss).unwrap();
-    }
+    debug!("Transformed CSS: \n{}", res.code);
 
     if style_info.expressions.is_empty() {
-        return Ok(string_literal_expr(&s));
+        return Ok(string_literal_expr(&res.code));
     }
 
-    let mut parts: Vec<&str> = s.split("__styled-jsx-placeholder-").collect();
+    let mut parts: Vec<&str> = res.code.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);
+        let (num_len, expression_index) = read_number(i, &style_info.is_expr_property);
         final_expressions.push(style_info.expressions[expression_index].clone());
-        let substr = &i[(num_len + 2)..];
-        *i = substr;
+        let substring = &i[(num_len + 2)..];
+        *i = substring;
     }
 
     Ok(Expr::Tpl(Tpl {
@@ -129,266 +131,394 @@ pub fn transform_css(
     }))
 }
 
-/// Returns `(length, value)`
-fn read_number(s: &str) -> (usize, usize) {
+fn strip_comments(s: &str) -> Cow<str> {
+    if !s.contains("//") {
+        return Cow::Borrowed(s);
+    }
+
+    let mut buf = String::with_capacity(s.len());
+
+    for line in s.lines() {
+        let line = line.trim();
+
+        if let Some(index) = line.find("//") {
+            buf.push_str(&line[..index]);
+        } else {
+            buf.push_str(line);
+        }
+        buf.push('\n');
+    }
+
+    Cow::Owned(buf)
+}
+
+/// Returns `(length, expression_index)`
+fn read_number(s: &str, is_expr_property: &[bool]) -> (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");
+        let expression_index = s[0..idx].parse().expect("failed to parse");
+
+        if is_expr_property[expression_index] {
+            return (idx + 3, expression_index);
+        }
 
-        return (idx, value);
+        return (idx, expression_index);
     }
 
     unreachable!("read_number(`{}`) is invalid because it is empty", s)
 }
 
-struct Namespacer {
+struct CssNamespace {
     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.
+impl<'i> Visitor<'i> for CssNamespace {
+    type Error = Infallible;
 
-            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 });
+    const TYPES: VisitTypes = visit_types!(SELECTORS);
 
-                gen.emit(&*node).unwrap();
-            }
+    fn visit_selector(&mut self, selector: &mut Selector<'i>) -> Result<(), Self::Error> {
+        let mut new_selectors = vec![];
+        let mut combinator = None;
 
-            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
+        #[cfg(debug_assertions)]
+        let _tracing = tracing::span!(
+            tracing::Level::ERROR,
+            "visit_selector",
+            len = selector.len()
+        )
+        .entered();
+
+        let mut iter = selector.iter();
+        loop {
+            #[cfg(debug_assertions)]
+            let _tracing = tracing::span!(
+                tracing::Level::ERROR,
+                "visit_selector/loop",
+                len = iter.selector_length()
             )
-            .entered()
-        };
+            .entered();
 
-        let mut new_selectors = vec![];
-        let mut combinator = None;
+            if combinator.is_none() {
+                combinator = iter.next_sequence();
+            }
 
-        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);
-                        }
+            match self.get_transformed_selectors(combinator, &mut iter) {
+                Ok(transformed_selectors) => {
+                    if transformed_selectors.is_empty() {
+                        break;
+                    }
+
+                    if cfg!(debug_assertions) {
+                        debug!("Transformed as: {:?}", SafeDebug(&transformed_selectors))
                     }
 
-                    combinator = None;
+                    new_selectors.push(transformed_selectors);
                 }
-                ComplexSelectorChildren::Combinator(v) => {
-                    combinator = Some(v.clone());
+                Err(_) => {
+                    error!("Failed to transform one off global selector");
+                    // TODO:
+
+                    // HANDLER.with(|handler| {
+                    //     handler
+                    //         .struct_span_err(
+                    //             selector.span,
+                    //             "Failed to transform one off global selector",
+                    //         )
+                    //         .emit()
+                    // });
+
+                    new_selectors.push(iter.clone().cloned().collect());
                 }
-            };
+            }
+
+            trace!(
+                "Selector length after transform: {}",
+                iter.selector_length()
+            );
+
+            if combinator.is_none() {
+                combinator = iter.next_sequence();
+                if combinator.is_none() {
+                    break;
+                }
+            } else {
+                combinator = None;
+            }
+        }
+
+        let new: Vec<_> = RemoveWhitespace {
+            iter: new_selectors.into_iter().rev().flatten(),
+            prev: None,
         }
+        .collect();
+        debug!("Selector vector: {:?}", SafeDebug(&new));
+
+        *selector = Selector::from(new);
+
+        Ok(())
+    }
+}
+
+struct RemoveWhitespace<'i, I> {
+    iter: I,
+    prev: Option<Component<'i>>,
+}
+
+impl<'i, I> Iterator for RemoveWhitespace<'i, I>
+where
+    I: Iterator<Item = Component<'i>>,
+{
+    type Item = Component<'i>;
 
-        node.children = new_selectors;
+    fn next(&mut self) -> Option<Self::Item> {
+        match self.prev.take() {
+            Some(Component::Combinator(Combinator::Descendant)) => {
+                self.prev = self.iter.next();
+
+                match self.prev {
+                    Some(Component::Combinator(..)) => self.next(),
+                    _ => Some(Component::Combinator(Combinator::Descendant)),
+                }
+            }
+            Some(v) => Some(v),
+            _ => {
+                self.prev = self.iter.next();
+
+                if self.prev.is_some() {
+                    self.next()
+                } else {
+                    None
+                }
+            }
+        }
     }
 }
 
-impl Namespacer {
-    fn get_transformed_selectors(
+impl CssNamespace {
+    #[cfg_attr(debug_assertions, tracing::instrument(skip(self, node)))]
+    fn get_transformed_selectors<'a, 'i, Impl>(
         &mut self,
         combinator: Option<Combinator>,
-        mut node: CompoundSelector,
-    ) -> Result<Vec<ComplexSelectorChildren>, Error> {
+        node: &mut SelectorIter<'a, 'i, Impl>,
+    ) -> Result<Vec<Component<'i>>, Error>
+    where
+        Impl: SelectorImpl<'i>,
+        SelectorIter<'a, 'i, Impl>: Iterator<Item = &'a Component<'i>>,
+    {
+        let mut result: Vec<Component<'i>> = vec![];
+
         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(_) => {
+        let node: Vec<Component<'i>> = node.fuse().cloned().collect::<Vec<_>>();
+
+        if node.is_empty() {
+            return Ok(result);
+        }
+
+        #[cfg(debug_assertions)]
+        {
+            let prev_sel = Selector::from(node.clone());
+            debug!("Input selector: {:?}", SafeDebug(&prev_sel))
+        }
+
+        for (i, component) in node.iter().enumerate() {
+            trace!("Selector at {}", i);
+
+            #[cfg(debug_assertions)]
+            {
+                debug!("Component: {:?}", SafeDebug(&component))
+            }
+
+            // Look for :global
+            let children: Selector<'i> = match &component {
+                Component::NonTSPseudoClass(PseudoClass::CustomFunction { name, arguments }) => {
+                    if &**name != "global" {
+                        if pseudo_index.is_none() {
+                            pseudo_index = Some(i);
+                        }
+
+                        continue;
+                    }
+
+                    parse_token_list(arguments)
+                }
+                Component::PseudoElement(_)
+                | Component::NonTSPseudoClass(..)
+                | Component::Negation(..)
+                | Component::Root
+                | Component::Empty
+                | Component::Scope
+                | Component::Nth(..)
+                | Component::NthOf(..)
+                | Component::Slotted(..)
+                | Component::Part(..)
+                | Component::Host(..)
+                | Component::Where(..)
+                | Component::Is(..)
+                | Component::Any(..)
+                | Component::Has(..) => {
                     if pseudo_index.is_none() {
                         pseudo_index = Some(i);
                     }
 
                     continue;
                 }
-                _ => 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);
-                        }
+            let mut complex_selectors =
+                children.iter_raw_match_order().cloned().collect::<Vec<_>>();
+            // Remove `a`
+            complex_selectors.pop();
+            if let Some(Component::Combinator(Combinator::Descendant)) = complex_selectors.last() {
+                complex_selectors.pop();
+            } else if let Some(Component::Combinator(c)) = complex_selectors.last() {
+                let c = *c;
+                complex_selectors.pop();
+
+                complex_selectors.insert(0, Component::Combinator(c))
+            }
 
-                        if v.is_empty() {
-                            bail!("Failed to transform one off global selector");
-                        }
+            if let Component::Combinator(Combinator::Descendant) = complex_selectors[0] {
+                complex_selectors.remove(0);
+            }
 
-                        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));
-                                }
-                            }
-                        }
+            if complex_selectors.is_empty() {
+                bail!("Failed to transform one off global selector");
+            }
 
-                        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());
-                                }
-                            }
-                        });
+            trace!("Combinator: {:?}", combinator);
+            // trace!("node: {:?}", node);
+            // trace!("complex_selectors: {:?}", complex_selectors);
 
-                        result.extend(v);
+            // result.push(Component::Combinator(Combinator::Descendant));
 
-                        Ok(result)
-                    }
-                    Err(_) => bail!("Failed to transform one off global selector"),
-                };
+            result.extend(complex_selectors);
+            result.extend(node.into_iter().skip(i + 1));
+
+            if let Some(combinator) = combinator {
+                result.push(Component::Combinator(combinator));
             }
+
+            return Ok(result);
+        }
+
+        // Pseudo element
+        if result.is_empty() && node.len() == 1 && pseudo_index.is_some() {
+            return Ok(node);
         }
 
+        let mut node: Vec<Component<'i>> = node.clone();
+
         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,
+            true => Cow::Borrowed("__jsx-style-dynamic-selector"),
+            false => Cow::Owned(self.class_name.clone()),
         };
+        match pseudo_index {
+            None => {
+                if !self.is_global {
+                    node.push(Component::Class(Ident::from(subclass_selector)));
+                }
 
-        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,
-                    },
-                }),
-            );
-        }
+                result.extend(node);
+            }
 
-        let mut result = vec![];
+            Some(insert_index) => {
+                result.extend(node);
 
-        if let Some(combinator) = combinator {
-            result.push(ComplexSelectorChildren::Combinator(combinator));
+                if !self.is_global {
+                    result.insert(
+                        insert_index,
+                        Component::Class(Ident::from(subclass_selector)),
+                    );
+                }
+            }
         }
 
-        result.push(ComplexSelectorChildren::CompoundSelector(node));
+        if let Some(combinator) = combinator {
+            result.push(Component::Combinator(combinator));
+        }
 
         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() },
-        },
-    ]
+/// 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
+fn parse_token_list<'i>(tokens: &TokenList<'i>) -> Selector<'i> {
+    let mut buf = "a ".to_string();
+
+    for t in tokens.0.iter() {
+        match t {
+            TokenOrValue::Token(t) => {
+                buf.push_str(&t.to_css_string(Default::default()).unwrap());
+            }
+            TokenOrValue::Color(t) => {
+                buf.push_str(&t.to_css_string(Default::default()).unwrap());
+            }
+            TokenOrValue::Url(t) => {
+                buf.push_str(&t.to_css_string(Default::default()).unwrap());
+            }
+            TokenOrValue::Var(..) => {
+                unimplemented!("parse_token_list: var")
+            }
+            TokenOrValue::Env(..) => {
+                unimplemented!("parse_token_list: env var")
+            }
+            TokenOrValue::Function(..) => {
+                unimplemented!("parse_token_list: function")
+            }
+            TokenOrValue::Length(t) => {
+                buf.push_str(&t.to_css_string(Default::default()).unwrap());
+            }
+            TokenOrValue::Angle(t) => {
+                buf.push_str(&t.to_css_string(Default::default()).unwrap());
+            }
+            TokenOrValue::Time(t) => {
+                buf.push_str(&t.to_css_string(Default::default()).unwrap());
+            }
+            TokenOrValue::Resolution(t) => {
+                buf.push_str(&t.to_css_string(Default::default()).unwrap());
+            }
+            TokenOrValue::DashedIdent(t) => {
+                buf.push_str(&t.to_css_string(Default::default()).unwrap());
+            }
+            TokenOrValue::UnresolvedColor(..) => {
+                unimplemented!("parse_token_list: unresolved color")
+            }
+        }
+    }
+    let selector = Selector::parse_string_with_options(&buf, Default::default())
+        .expect("failed to parse selector list");
+
+    unsafe {
+        // Safety: Selector is variant over 'i
+        transmute::<Selector, Selector>(owned_selector(&selector))
+    }
+}
+
+struct SafeDebug<'a>(&'a dyn Debug);
+
+impl Debug for SafeDebug<'_> {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        let s = catch_unwind(AssertUnwindSafe(|| format!("{:?}", self.0)));
+
+        match s {
+            Ok(s) => {
+                write!(f, "{}", s)
+            }
+            Err(_) => write!(f, "<panicked>"),
+        }
+    }
 }