fix(styled-jsx): Allow specifying multiple selectors in :global (#476)

Author: kdy1

Cargo.lock

@@ -1,5 +1,11 @@
 # @swc/plugin-styled-jsx
 
+## 8.0.3
+
+### Patch Changes
+
+- ae8b938: Allow specifying multiple selectors in :global
+
 ## 8.0.2
 
 ### Patch Changes

packages/styled-jsx/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # @swc/plugin-styled-jsx
 
+## 8.0.3
+
+### Patch Changes
+
+- ae8b938: Allow specifying multiple selectors in :global
+
 ## 8.0.2
 
 ### Patch Changes

packages/styled-jsx/README.md

@@ -1016,6 +1016,30 @@ const Test = ()=>/*#__PURE__*/ React.createElement("div", {
 "
 `;
 
+exports[`Should load swc-confidential wasm plugin correctly > Should transform global-multiple correctly 1`] = `
+"import _JSXStyle from "styled-jsx/style";
+const Test = ()=>/*#__PURE__*/ React.createElement("div", {
+        className: "jsx-3d9ecfaa448ef714"
+    }, /*#__PURE__*/ React.createElement("span", {
+        className: "jsx-3d9ecfaa448ef714"
+    }, "test"), /*#__PURE__*/ React.createElement(_JSXStyle, {
+        id: "3d9ecfaa448ef714"
+    }, ".c1{background:orange!important}"));
+"
+`;
+
+exports[`Should load swc-confidential wasm plugin correctly > Should transform global-nested correctly 1`] = `
+"import _JSXStyle from "styled-jsx/style";
+const Test = ()=>/*#__PURE__*/ React.createElement("div", {
+        className: "jsx-258c8cca0b71d485"
+    }, /*#__PURE__*/ React.createElement("span", {
+        className: "jsx-258c8cca0b71d485"
+    }, "test"), /*#__PURE__*/ React.createElement(_JSXStyle, {
+        id: "258c8cca0b71d485"
+    }, ".p1.jsx-258c8cca0b71d485{background:purple!important}.p1.jsx-258c8cca0b71d485 .c1,.p1.jsx-258c8cca0b71d485 .c2.jsx-258c8cca0b71d485{background:orange!important}"));
+"
+`;
+
 exports[`Should load swc-confidential wasm plugin correctly > Should transform global-redundant correctly 1`] = `
 "import _JSXStyle from "styled-jsx/style";
 export default function IndexPage() {

packages/styled-jsx/__tests__/__snapshots__/wasm.test.ts.snap

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

packages/styled-jsx/package.json

@@ -10,7 +10,7 @@ license      = { workspace = true }
 name         = "styled_jsx"
 repository   = { workspace = true }
 rust-version = { workspace = true }
-version      = "0.91.2"
+version      = "0.91.3"
 
 
 [features]

packages/styled-jsx/transform/Cargo.toml

@@ -10,7 +10,7 @@ use anyhow::{bail, Context, Error};
 use lightningcss::{
     error::ParserError,
     properties::custom::{TokenList, TokenOrValue},
-    selector::{Combinator, Component, PseudoClass, Selector},
+    selector::{Combinator, Component, PseudoClass, Selector, SelectorList},
     stylesheet::{MinifyOptions, ParserFlags, ParserOptions, PrinterOptions, StyleSheet},
     targets::{Browsers, Features, Targets},
     traits::{IntoOwned, ParseWithOptions, ToCss},
@@ -126,7 +126,7 @@ pub fn transform_css(
 
     let targets = Targets {
         browsers: Some(convert_browsers(browsers)),
-        include: Features::Nesting,
+        include: Features::Nesting | Features::IsSelector,
         ..Default::default()
     };
 
@@ -574,7 +574,7 @@ impl CssNamespace {
 /// 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>) -> Vec<Component<'i>> {
-    let mut buf = "a ".to_string();
+    let mut buf = "".to_string();
 
     for t in tokens.0.iter() {
         match t {
@@ -624,6 +624,14 @@ fn parse_token_list<'i>(tokens: &TokenList<'i>) -> Vec<Component<'i>> {
         debug!("Parsing: {:?}", buf)
     }
 
+    if let Ok(s) = SelectorList::parse_string_with_options(&buf, Default::default()) {
+        if s.0.len() != 1 {
+            return vec![Component::Is(s.0.into_owned().into_boxed_slice())];
+        }
+    }
+
+    buf = format!("a {buf}");
+
     let mut result: Vec<Component<'i>> = vec![];
 
     let selector = Selector::parse_string_with_options(&buf, Default::default())

packages/styled-jsx/transform/src/transform_css_lightningcss.rs

@@ -0,0 +1,10 @@
+const Test = () => (
+  <div>
+    <span>test</span>
+    <style jsx>{`
+        :global(.c1, .c2) {
+          background: orange !important;
+        }
+      `}</style>
+  </div>
+);

packages/styled-jsx/transform/tests/fixture/global-multiple/input.js

@@ -0,0 +1,5 @@
+import _JSXStyle from "styled-jsx/style";
+const Test = ()=><div className={"jsx-3d9ecfaa448ef714"}>
+    <span className={"jsx-3d9ecfaa448ef714"}>test</span>
+    <_JSXStyle id={"3d9ecfaa448ef714"}>{":is(.c1,.c2){background:orange!important}"}</_JSXStyle>
+  </div>;

packages/styled-jsx/transform/tests/fixture/global-multiple/output.lightningcss.js

@@ -0,0 +1,5 @@
+import _JSXStyle from "styled-jsx/style";
+const Test = ()=><div className={"jsx-3d9ecfaa448ef714"}>
+    <span className={"jsx-3d9ecfaa448ef714"}>test</span>
+    <_JSXStyle id={"3d9ecfaa448ef714"}>{".c1{background:orange!important}"}</_JSXStyle>
+  </div>;