@swc/plugin-styled-jsx 1.5.81 → 1.5.82

package/package.json

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

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.47.0"
+version = "0.48.0"
 
 [features]
 custom_transform = ["swc_common/concurrent"]

package/transform/src/transform_css_lightningcss.rs

@@ -4,21 +4,25 @@ use std::{
     fmt::Debug,
     mem::transmute,
     panic::{catch_unwind, AssertUnwindSafe},
-    sync::Arc,
+    sync::{Arc, RwLock},
 };
 
 use easy_error::{bail, Error, ResultExt};
 use lightningcss::{
+    error::ParserError,
     properties::custom::{TokenList, TokenOrValue},
     selector::{Combinator, Component, PseudoClass, Selector},
-    stylesheet::{MinifyOptions, ParserOptions, PrinterOptions, StyleSheet},
+    stylesheet::{MinifyOptions, ParserFlags, ParserOptions, PrinterOptions, StyleSheet},
     traits::{ParseWithOptions, ToCss},
     values::ident::Ident,
     visit_types,
     visitor::{Visit, VisitTypes, Visitor},
 };
 use parcel_selectors::{parser::SelectorIter, SelectorImpl};
-use swc_common::{errors::HANDLER, SourceMap, DUMMY_SP};
+use swc_common::{
+    errors::{DiagnosticBuilder, Level, HANDLER},
+    BytePos, Loc, SourceMap, Span, DUMMY_SP,
+};
 use swc_ecma_ast::*;
 use tracing::{debug, error, trace};
 
@@ -28,37 +32,82 @@ use crate::{
     utils::{hash_string, string_literal_expr},
 };
 
+fn report(
+    cm: &SourceMap,
+    css_span: Span,
+    file_lines_cache: &mut Option<Loc>,
+    err: &lightningcss::error::Error<ParserError>,
+    level: Level,
+) {
+    // We need :global(selector) to be parsed as a selector.
+    if let ParserError::SelectorError(
+        lightningcss::error::SelectorError::UnsupportedPseudoClassOrElement(..),
+    ) = &err.kind
+    {
+        return;
+    }
+
+    let file = file_lines_cache.get_or_insert_with(|| cm.lookup_char_pos(css_span.lo));
+
+    let lo = if let Some(loc) = &err.loc {
+        Some(file.file.lines[(loc.line + 1) as usize] + BytePos(loc.column))
+    } else {
+        None
+    };
+
+    HANDLER.with(|handler| {
+        //
+
+        let mut db = DiagnosticBuilder::new(handler, level, &err.kind.to_string());
+        if let Some(lo) = lo {
+            db.set_span(Span::new(lo, lo, Default::default()));
+        }
+
+        db.emit();
+    });
+}
+
 #[cfg_attr(
     debug_assertions,
-    tracing::instrument(skip(_cm, style_info, class_name))
+    tracing::instrument(skip(cm, style_info, class_name))
 )]
 pub fn transform_css(
-    _cm: Arc<SourceMap>,
+    cm: Arc<SourceMap>,
     style_info: &LocalStyle,
     is_global: bool,
     class_name: &Option<String>,
 ) -> Result<Expr, Error> {
+    let mut file_lines_cache = None;
+
     debug!("CSS: \n{}", style_info.css);
     let css_str = strip_comments(&style_info.css);
 
+    let warnings: Arc<RwLock<Vec<lightningcss::error::Error<ParserError>>>> = Arc::default();
+
     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,
+            error_recovery: true,
+            warnings: Some(warnings.clone()),
+            flags: ParserFlags::all(),
             ..Default::default()
         },
     );
+
     let mut ss = match result {
         Ok(ss) => ss,
-        Err(_err) => {
+        Err(err) => {
             HANDLER.with(|handler| {
-                // Print css parsing errors
-                // TODO:
-                // err.to_diagnostics(handler).emit();
-
-                // TODO(kdy1): We may print css so the user can see the error, and report it.
+                report(
+                    &cm,
+                    style_info.css_span,
+                    &mut file_lines_cache,
+                    &err,
+                    Level::Error,
+                );
 
                 handler
                     .struct_span_err(
@@ -72,6 +121,18 @@ pub fn transform_css(
         }
     };
 
+    if let Ok(warnings) = warnings.read() {
+        for warning in warnings.iter() {
+            report(
+                &cm,
+                style_info.css_span,
+                &mut file_lines_cache,
+                warning,
+                Level::Warning,
+            );
+        }
+    }
+
     ss.visit(&mut CssNamespace {
         class_name: match class_name {
             Some(s) => s.clone(),
@@ -83,7 +144,6 @@ pub fn transform_css(
     .expect("failed to transform css");
 
     // Apply auto prefixer
-    // TODO:
     ss.minify(MinifyOptions {
         ..Default::default()
     })

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

@@ -0,0 +1,58 @@
+import _JSXStyle from "styled-jsx/style";
+const Component = ()=><>
+
+    <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/nested-style-tags/output-swc.js

@@ -0,0 +1,58 @@
+import _JSXStyle from "styled-jsx/style";
+const Component = ()=><>
+
+    <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/nested-style-tags/output-swc.stderr

@@ -0,0 +1,27 @@
+
+  x Detected nested styled-jsx tag.
+  | Read more: https://nextjs.org/docs/messages/nested-styled-jsx-tags
+    ,-[input.js:12:1]
+ 12 |         Welcome!
+ 13 |         <style jsx>{``}</style>
+    :         ^^^^^^^^^^^^^^^^^^^^^^^
+ 14 |       </h1>
+    `----
+
+  x Detected nested styled-jsx tag.
+  | Read more: https://nextjs.org/docs/messages/nested-styled-jsx-tags
+    ,-[input.js:20:1]
+ 20 |         Hello world!
+ 21 |         <style jsx global>{``}</style>
+    :         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 22 |       </h1>
+    `----
+
+  x Detected nested styled-jsx tag.
+  | Read more: https://nextjs.org/docs/messages/nested-styled-jsx-tags
+    ,-[input.js:25:1]
+ 25 |       <>
+ 26 |         <style jsx>{styles}</style>
+    :         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 27 |       </>
+    `----

package/transform/tests/errors/no-child/output-lightningcss.js

@@ -0,0 +1,8 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div>
+
+    <style jsx>
+
+    </style>
+
+  </div>);

package/transform/tests/errors/no-child/output-swc.js

@@ -0,0 +1,8 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div>
+
+    <style jsx>
+
+    </style>
+
+  </div>);

package/transform/tests/errors/no-child/output-swc.stderr

@@ -0,0 +1,9 @@
+
+  x Expected one child under JSX style tag, but got 0.
+  | Read more: https://nextjs.org/docs/messages/invalid-styled-jsx-children
+   ,-[input.js:2:1]
+ 2 |       <div>
+ 3 | ,->     <style jsx>
+ 4 | `->     </style>
+ 5 |       </div>
+   `----

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

@@ -0,0 +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>,
+    className: "jsx-71f03d42ea0ec6"
+};

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

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

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

@@ -0,0 +1,2 @@
+
+  x /some-project/src/some-file.ts uses `css.resolve`, but ends with `.ts`. The file extension needs to be `.tsx` so that the jsx injected by `css.resolve` will be transformed.

package/transform/tests/errors/two-children/output-lightningcss.js

@@ -0,0 +1,12 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div>
+
+    <style jsx>
+
+      {`.p {}`}
+
+      {`.p {}`}
+
+    </style>
+
+  </div>);

package/transform/tests/errors/two-children/output-swc.js

@@ -0,0 +1,12 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div>
+
+    <style jsx>
+
+      {`.p {}`}
+
+      {`.p {}`}
+
+    </style>
+
+  </div>);

package/transform/tests/errors/two-children/output-swc.stderr

@@ -0,0 +1,11 @@
+
+  x Expected one child under JSX style tag, but got 2.
+  | Read more: https://nextjs.org/docs/messages/invalid-styled-jsx-children
+   ,-[input.js:2:1]
+ 2 |       <div>
+ 3 | ,->     <style jsx>
+ 4 | |         {`.p {}`}
+ 5 | |         {`.p {}`}
+ 6 | `->     </style>
+ 7 |       </div>
+   `----

package/transform/tests/errors/wrong-child-type/output-lightningcss.js

@@ -0,0 +1,10 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div>
+
+    <style jsx>
+
+      10
+
+    </style>
+
+  </div>);

package/transform/tests/errors/wrong-child-type/output-swc.js

@@ -0,0 +1,10 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div>
+
+    <style jsx>
+
+      10
+
+    </style>
+
+  </div>);

package/transform/tests/errors/wrong-child-type/output-swc.stderr

@@ -0,0 +1,10 @@
+
+  x Expected a single child of type JSXExpressionContainer under JSX Style tag.
+  | Read more: https://nextjs.org/docs/messages/invalid-styled-jsx-children
+   ,-[input.js:2:1]
+ 2 |       <div>
+ 3 | ,->     <style jsx>
+ 4 | |         10
+ 5 | `->     </style>
+ 6 |       </div>
+   `----

package/transform/tests/errors/wrong-jsx-expression-type/output-lightningcss.js

@@ -0,0 +1,10 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div>
+
+    <style jsx>
+
+      {[]}
+
+    </style>
+
+  </div>);

package/transform/tests/errors/wrong-jsx-expression-type/output-swc.js

@@ -0,0 +1,10 @@
+import _JSXStyle from "styled-jsx/style";
+export default (()=><div>
+
+    <style jsx>
+
+      {[]}
+
+    </style>
+
+  </div>);

package/transform/tests/errors/wrong-jsx-expression-type/output-swc.stderr

@@ -0,0 +1,10 @@
+
+  x Expected a template literal, string or identifier inside the JSXExpressionContainer.
+  | Read more: https://nextjs.org/docs/messages/invalid-styled-jsx-children
+   ,-[input.js:2:1]
+ 2 |       <div>
+ 3 | ,->     <style jsx>
+ 4 | |         {[]}
+ 5 | `->     </style>
+ 6 |       </div>
+   `----

package/transform/tests/fixture.rs

@@ -77,28 +77,53 @@ impl swc_ecma_visit::VisitMut for DropSpan {
 
 #[fixture("tests/errors/**/input.js")]
 fn styled_jsx_errors(input: PathBuf) {
-    let output = input.parent().unwrap().join("output.js");
     let file_name = match input.to_str().unwrap().contains("ts-with-css-resolve") {
         true => FileName::Real(PathBuf::from("/some-project/src/some-file.ts")),
         false => FileName::Real(PathBuf::from("/some-project/src/some-file.js")),
     };
+    {
+        let output = input.parent().unwrap().join("output-swc.js");
 
-    test_fixture(
-        syntax(),
-        &|t| {
-            styled_jsx(
-                t.cm.clone(),
-                file_name.clone(),
-                styled_jsx::visitor::Config {
-                    use_lightningcss: false,
-                },
-            )
-        },
-        &input,
-        &output,
-        FixtureTestConfig {
-            allow_error: true,
-            ..Default::default()
-        },
-    );
+        test_fixture(
+            syntax(),
+            &|t| {
+                styled_jsx(
+                    t.cm.clone(),
+                    file_name.clone(),
+                    styled_jsx::visitor::Config {
+                        use_lightningcss: false,
+                    },
+                )
+            },
+            &input,
+            &output,
+            FixtureTestConfig {
+                allow_error: true,
+                ..Default::default()
+            },
+        );
+    }
+
+    {
+        let output = input.parent().unwrap().join("output-lightningcss.js");
+
+        test_fixture(
+            syntax(),
+            &|t| {
+                styled_jsx(
+                    t.cm.clone(),
+                    file_name.clone(),
+                    styled_jsx::visitor::Config {
+                        use_lightningcss: true,
+                    },
+                )
+            },
+            &input,
+            &output,
+            FixtureTestConfig {
+                allow_error: true,
+                ..Default::default()
+            },
+        );
+    }
 }