diff --git a/Cargo.lock b/Cargo.lock index eb72358e2..8f213d648 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -536,7 +536,7 @@ dependencies = [ "cssparser-macros", "dtoa-short", "itoa", - "phf 0.10.1", + "phf 0.11.2", "smallvec", ] @@ -1172,7 +1172,7 @@ dependencies = [ [[package]] name = "modularize_imports" -version = "0.58.0" +version = "0.59.0" dependencies = [ "convert_case", "handlebars", @@ -1716,7 +1716,7 @@ dependencies = [ [[package]] name = "react_remove_properties" -version = "0.14.0" +version = "0.15.0" dependencies = [ "serde", "swc_atoms", @@ -1791,7 +1791,7 @@ checksum = "c707298afce11da2efef2f600116fa93ffa7a032b5d7b628aa17711ec81383ca" [[package]] name = "remove_console" -version = "0.15.0" +version = "0.16.0" dependencies = [ "serde", "swc_atoms", @@ -2167,7 +2167,7 @@ checksum = "73473c0e59e6d5812c5dfe2a064a6444949f089e20eec9a2e5506596494e4623" [[package]] name = "styled_components" -version = "0.86.0" +version = "0.87.0" dependencies = [ "Inflector", "once_cell", @@ -2188,7 +2188,7 @@ dependencies = [ [[package]] name = "styled_jsx" -version = "0.63.0" +version = "0.64.0" dependencies = [ "easy-error", "lightningcss", @@ -2272,9 +2272,9 @@ dependencies = [ [[package]] name = "swc_common" -version = "0.33.8" +version = "0.33.9" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "49fba1ce1d44f142b9e8212a6360fc7818e2c99c7f5ebe8b4fa4061c5764e48e" +checksum = "5ccb656cd57c93614e4e8b33a60e75ca095383565c1a8d2bbe6a1103942831e0" dependencies = [ "anyhow", "ast_node", @@ -2293,7 +2293,6 @@ dependencies = [ "serde", "siphasher", "sourcemap", - "string_cache", "swc_atoms", "swc_eq_ignore_macros", "swc_visit", @@ -2330,7 +2329,7 @@ dependencies = [ [[package]] name = "swc_constify" -version = "0.26.0" +version = "0.27.0" dependencies = [ "once_cell", "rustc-hash", @@ -2483,9 +2482,9 @@ dependencies = [ [[package]] name = "swc_ecma_ast" -version = "0.110.9" +version = "0.110.10" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "4cefcc1c71bf00e48da7b65801d1fccf7eed2b7fa1fc5c4848ed09801bfe2403" +checksum = "2c3d416121da2d56bcbd1b1623725a68890af4552fef0c6d1e4bfa92776ccd6a" dependencies = [ "bitflags 2.4.0", "bytecheck", @@ -2569,9 +2568,9 @@ dependencies = [ [[package]] name = "swc_ecma_parser" -version = "0.141.22" +version = "0.141.27" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "acfad502c2e0579e09e216da1c627d583fdbc6c8a08f2c8bd0160f9119d4246d" +checksum = "5c01ab163c83f4e8c0d82382478d142ceecf897e5b2822707fec662a22208287" dependencies = [ "either", "new_debug_unreachable", @@ -2636,15 +2635,15 @@ dependencies = [ [[package]] name = "swc_ecma_transforms_base" -version = "0.134.31" +version = "0.134.44" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "6b008a854b2429e01b5c810e415392fe18560fc868997d0cbd8587a6d8c37206" +checksum = "84a880cd951f82c4f1bf970e12e8fab616ea7feb41c97203d2d0cfa063d775bb" dependencies = [ "better_scoped_tls", "bitflags 2.4.0", "indexmap", "once_cell", - "phf 0.10.1", + "phf 0.11.2", "rustc-hash", "serde", "smallvec", @@ -2763,9 +2762,9 @@ dependencies = [ [[package]] name = "swc_ecma_utils" -version = "0.124.27" +version = "0.124.33" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "d32413e3fe1aa7a375d8c57fad7321d51b8b8a7b30b403fe468a74ccfc8b71a5" +checksum = "cd7f189c68e7aa895a19afd5c61eeeb4f4e71d80123b3b42f32e80c1f6641928" dependencies = [ "indexmap", "num_cpus", @@ -2781,9 +2780,9 @@ dependencies = [ [[package]] name = "swc_ecma_visit" -version = "0.96.9" +version = "0.96.10" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "21305b130986e771206c9f447c8040f9b3be47c9fbbb1f659904e223b8e1c007" +checksum = "ba962f0becf83bab12a17365dface5a4f636c9e1743d479e292b96910a753743" dependencies = [ "num-bigint", "swc_atoms", @@ -2795,7 +2794,7 @@ dependencies = [ [[package]] name = "swc_emotion" -version = "0.62.0" +version = "0.63.0" dependencies = [ "base64", "byteorder", @@ -2871,7 +2870,7 @@ dependencies = [ [[package]] name = "swc_magic" -version = "0.9.0" +version = "0.10.0" dependencies = [ "serde", "swc_atoms", @@ -3108,7 +3107,7 @@ dependencies = [ [[package]] name = "swc_relay" -version = "0.34.0" +version = "0.35.0" dependencies = [ "once_cell", "regex", diff --git a/packages/constify/package.json b/packages/constify/package.json index 06cf880b1..8693d9ba1 100644 --- a/packages/constify/package.json +++ b/packages/constify/package.json @@ -1,6 +1,6 @@ { "name": "@swc/plugin-constify", - "version": "0.1.31", + "version": "0.1.32", "description": "SWC plugin for optimization", "main": "swc_plugin_constify.wasm", "scripts": { diff --git a/packages/constify/transform/Cargo.toml b/packages/constify/transform/Cargo.toml index 13294675e..cc41d1746 100644 --- a/packages/constify/transform/Cargo.toml +++ b/packages/constify/transform/Cargo.toml @@ -5,7 +5,7 @@ edition = "2021" license = "Apache-2.0" name = "swc_constify" repository = "https://github.com/swc-project/plugins.git" -version = "0.26.0" +version = "0.27.0" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html diff --git a/packages/emotion/package.json b/packages/emotion/package.json index df43a3503..bcd0a635d 100644 --- a/packages/emotion/package.json +++ b/packages/emotion/package.json @@ -1,6 +1,6 @@ { "name": "@swc/plugin-emotion", - "version": "2.5.101", + "version": "2.5.102", "description": "SWC plugin for emotion css-in-js library", "main": "swc_plugin_emotion.wasm", "scripts": { diff --git a/packages/emotion/transform/Cargo.toml b/packages/emotion/transform/Cargo.toml index 280ab122e..b576eee87 100644 --- a/packages/emotion/transform/Cargo.toml +++ b/packages/emotion/transform/Cargo.toml @@ -5,7 +5,7 @@ edition = "2021" license = "Apache-2.0" name = "swc_emotion" repository = "https://github.com/swc-project/plugins.git" -version = "0.62.0" +version = "0.63.0" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html diff --git a/packages/jest/package.json b/packages/jest/package.json index 00e9a477d..3ec239f68 100644 --- a/packages/jest/package.json +++ b/packages/jest/package.json @@ -1,6 +1,6 @@ { "name": "@swc/plugin-jest", - "version": "1.5.101", + "version": "1.5.102", "description": "SWC plugin for jest", "main": "swc_plugin_jest.wasm", "scripts": { diff --git a/packages/loadable-components/package.json b/packages/loadable-components/package.json index 6be9cba6d..657bf990f 100644 --- a/packages/loadable-components/package.json +++ b/packages/loadable-components/package.json @@ -1,6 +1,6 @@ { "name": "@swc/plugin-loadable-components", - "version": "0.3.101", + "version": "0.3.102", "description": "SWC plugin for `@loadable/components`", "main": "swc_plugin_loadable_components.wasm", "scripts": { diff --git a/packages/noop/package.json b/packages/noop/package.json index 0f922bd8e..d12b1c421 100644 --- a/packages/noop/package.json +++ b/packages/noop/package.json @@ -1,6 +1,6 @@ { "name": "@swc/plugin-noop", - "version": "1.5.99", + "version": "1.5.100", "description": "Noop SWC plugin, for debugging", "main": "swc_plugin_noop.wasm", "scripts": { diff --git a/packages/react-remove-properties/package.json b/packages/react-remove-properties/package.json index bfb465b43..cd15c62bd 100644 --- a/packages/react-remove-properties/package.json +++ b/packages/react-remove-properties/package.json @@ -1,6 +1,6 @@ { "name": "@swc/plugin-react-remove-properties", - "version": "1.5.101", + "version": "1.5.102", "description": "SWC plugin for https://www.npmjs.com/package/babel-plugin-react-remove-properties", "main": "swc_plugin_react_remove_properties.wasm", "scripts": { diff --git a/packages/react-remove-properties/transform/Cargo.toml b/packages/react-remove-properties/transform/Cargo.toml index f7c740241..22ee9d580 100644 --- a/packages/react-remove-properties/transform/Cargo.toml +++ b/packages/react-remove-properties/transform/Cargo.toml @@ -5,7 +5,7 @@ edition = "2021" license = "Apache-2.0" name = "react_remove_properties" repository = "https://github.com/swc-project/plugins.git" -version = "0.14.0" +version = "0.15.0" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html diff --git a/packages/relay/package.json b/packages/relay/package.json index 98f17cae2..8d1e968d9 100644 --- a/packages/relay/package.json +++ b/packages/relay/package.json @@ -1,6 +1,6 @@ { "name": "@swc/plugin-relay", - "version": "1.5.101", + "version": "1.5.102", "description": "SWC plugin for relay", "main": "swc_plugin_relay.wasm", "types": "./types.d.ts", diff --git a/packages/relay/transform/Cargo.toml b/packages/relay/transform/Cargo.toml index 8e7c368c5..6ace6caef 100644 --- a/packages/relay/transform/Cargo.toml +++ b/packages/relay/transform/Cargo.toml @@ -5,7 +5,7 @@ edition = "2021" license = "Apache-2.0" name = "swc_relay" repository = "https://github.com/swc-project/plugins.git" -version = "0.34.0" +version = "0.35.0" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html diff --git a/packages/remove-console/package.json b/packages/remove-console/package.json index 2507079b5..cb4c28686 100644 --- a/packages/remove-console/package.json +++ b/packages/remove-console/package.json @@ -1,6 +1,6 @@ { "name": "@swc/plugin-remove-console", - "version": "1.5.101", + "version": "1.5.102", "description": "SWC plugin for https://www.npmjs.com/package/babel-plugin-remove-console", "main": "swc_plugin_remove_console.wasm", "scripts": { diff --git a/packages/remove-console/transform/Cargo.toml b/packages/remove-console/transform/Cargo.toml index e378b34e3..9fa43f686 100644 --- a/packages/remove-console/transform/Cargo.toml +++ b/packages/remove-console/transform/Cargo.toml @@ -5,7 +5,7 @@ edition = "2021" license = "Apache-2.0" name = "remove_console" repository = "https://github.com/swc-project/plugins.git" -version = "0.15.0" +version = "0.16.0" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html diff --git a/packages/styled-components/package.json b/packages/styled-components/package.json index 7a0336976..320996cf9 100644 --- a/packages/styled-components/package.json +++ b/packages/styled-components/package.json @@ -1,6 +1,6 @@ { "name": "@swc/plugin-styled-components", - "version": "1.5.101", + "version": "1.5.102", "description": "SWC plugin for styled-components", "main": "swc_plugin_styled_components.wasm", "scripts": { diff --git a/packages/styled-components/transform/Cargo.toml b/packages/styled-components/transform/Cargo.toml index d12b4e4dc..6e1397829 100644 --- a/packages/styled-components/transform/Cargo.toml +++ b/packages/styled-components/transform/Cargo.toml @@ -6,7 +6,7 @@ include = ["Cargo.toml", "src/**/*.rs"] license = "Apache-2.0" name = "styled_components" repository = "https://github.com/swc-project/plugins.git" -version = "0.86.0" +version = "0.87.0" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html diff --git a/packages/styled-components/transform/src/lib.rs b/packages/styled-components/transform/src/lib.rs index ee81cd464..a3ee28b27 100644 --- a/packages/styled-components/transform/src/lib.rs +++ b/packages/styled-components/transform/src/lib.rs @@ -11,7 +11,7 @@ pub use crate::{ utils::{analyze, analyzer, State}, visitors::{ display_name_and_id::display_name_and_id, minify::visitor::minify, - transpile_css_prop::transpile::transpile_css_prop, + template_literals::template_literals, transpile_css_prop::transpile::transpile_css_prop, }, }; @@ -72,8 +72,7 @@ impl Config { /// NOTE: **This is not complete**. /// -/// Only [transpile_css_prop], [minify] and [display_name_and_id] is -/// implemented. +/// [pure] is not implemented. pub fn styled_components( file_name: FileName, src_file_hash: u128, @@ -92,6 +91,10 @@ pub fn styled_components( enabled: config.minify, visitor: minify(state.clone()) }, - display_name_and_id(file_name, src_file_hash, config.clone(), state) + display_name_and_id(file_name, src_file_hash, config.clone(), state.clone()), + Optional { + enabled: config.transpile_template_literals, + visitor: template_literals(state) + } ) } diff --git a/packages/styled-components/transform/src/visitors/mod.rs b/packages/styled-components/transform/src/visitors/mod.rs index bf55f0e4c..56dbb493e 100644 --- a/packages/styled-components/transform/src/visitors/mod.rs +++ b/packages/styled-components/transform/src/visitors/mod.rs @@ -1,4 +1,5 @@ pub mod assign_style_required; pub mod display_name_and_id; pub mod minify; +pub mod template_literals; pub mod transpile_css_prop; diff --git a/packages/styled-components/transform/src/visitors/template_literals.rs b/packages/styled-components/transform/src/visitors/template_literals.rs new file mode 100644 index 000000000..2157ab785 --- /dev/null +++ b/packages/styled-components/transform/src/visitors/template_literals.rs @@ -0,0 +1,70 @@ +//! Port of https://github.com/styled-components/babel-plugin-styled-components/blob/4e2eb388d9c90f2921c306c760657d059d01a518/src/visitors/templateLiterals/transpile.js + +use std::{cell::RefCell, iter, rc::Rc}; + +use swc_common::{util::take::Take, DUMMY_SP}; +use swc_ecma_ast::*; +use swc_ecma_visit::{as_folder, noop_visit_mut_type, Fold, VisitMut, VisitMutWith}; + +use crate::utils::State; + +pub fn template_literals(state: Rc>) -> impl Fold + VisitMut { + as_folder(TemplateLiterals { state }) +} + +#[derive(Debug)] +struct TemplateLiterals { + state: Rc>, +} + +impl VisitMut for TemplateLiterals { + noop_visit_mut_type!(); + + fn visit_mut_expr(&mut self, expr: &mut Expr) { + expr.visit_mut_children_with(self); + + let Expr::TaggedTpl(tagged) = expr else { + return; + }; + if !self.state.borrow().is_styled(&tagged.tag) + && !self.state.borrow().is_helper(&tagged.tag) + { + return; + } + + expr.map_with_mut(|expr| { + let tagged = expr.expect_tagged_tpl(); + + let quasis = tagged + .tpl + .quasis + .into_iter() + .map(|q| { + Expr::Lit(Lit::Str(Str { + span: q.span, + value: q.cooked.unwrap_or(q.raw), + raw: None, + })) + }) + .map(ExprOrSpread::from) + .map(Some); + let exprs = tagged.tpl.exprs.into_iter().map(ExprOrSpread::from); + let args = iter::once( + Expr::Array(ArrayLit { + span: DUMMY_SP, + elems: quasis.collect(), + }) + .into(), + ) + .chain(exprs) + .collect(); + + Expr::Call(CallExpr { + span: tagged.span, + callee: tagged.tag.into(), + args, + type_args: tagged.type_params, + }) + }); + } +} diff --git a/packages/styled-components/transform/tests/fixtures/.transpile-template-literals-with-config/.babelrc b/packages/styled-components/transform/tests/fixtures/.transpile-template-literals-with-config/.babelrc deleted file mode 100644 index 4e78d26f1..000000000 --- a/packages/styled-components/transform/tests/fixtures/.transpile-template-literals-with-config/.babelrc +++ /dev/null @@ -1,14 +0,0 @@ -{ - "presets": ["@babel/preset-env"], - "plugins": [ - [ - "../../../src", - { - "ssr": false, - "displayName": true, - "transpileTemplateLiterals": true, - "minify": false - } - ] - ] -} diff --git a/packages/styled-components/transform/tests/fixtures/.transpile-template-literals-with-config/output.js b/packages/styled-components/transform/tests/fixtures/.transpile-template-literals-with-config/output.js deleted file mode 100644 index 2c5c07a68..000000000 --- a/packages/styled-components/transform/tests/fixtures/.transpile-template-literals-with-config/output.js +++ /dev/null @@ -1,32 +0,0 @@ -"use strict"; - -function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } - -var _styledComponents = _interopRequireWildcard(require("styled-components")); - -function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } - -function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; } - -var Named = _styledComponents["default"].div.withConfig({ - displayName: "code__Named" -})(["\n width: 100%;\n"]); - -var NamedWithInterpolation = _styledComponents["default"].div.withConfig({ - displayName: "code__NamedWithInterpolation" -})(["\n color: ", ";\n"], function (color) { - return props.color; -}); - -var Wrapped = (0, _styledComponents["default"])(Inner).withConfig({ - displayName: "code__Wrapped" -})(["\n color: red;\n"]); - -var Foo = _styledComponents["default"].div.withConfig({ - displayName: "code__Foo" -})({ - color: 'green' -}); - -var style = (0, _styledComponents.css)(["\n background: green;\n"]); -var GlobalStyle = (0, _styledComponents.createGlobalStyle)(["\n html {\n background: silver;\n }\n"]); diff --git a/packages/styled-components/transform/tests/fixtures/minify-css-to-use-with-transpilation/output.js b/packages/styled-components/transform/tests/fixtures/minify-css-to-use-with-transpilation/output.js index 2b3112d1b..59a566d8b 100644 --- a/packages/styled-components/transform/tests/fixtures/minify-css-to-use-with-transpilation/output.js +++ b/packages/styled-components/transform/tests/fixtures/minify-css-to-use-with-transpilation/output.js @@ -1,6 +1,18 @@ import styled from 'styled-components'; -const Simple = styled.div`width:100%;`; -const Interpolation = styled.div`content:" ${(props)=>props.text} ";`; -const SpecialCharacters = styled.div`content:" ${(props)=>props.text} ";color:red;`; -const Comment = styled.div`color:red;`; -const Parens = styled.div`&:hover{color:blue;}`; +const Simple = styled.div([ + "width:100%;" +]); +const Interpolation = styled.div([ + 'content:" ', + ' ";' +], (props)=>props.text); +const SpecialCharacters = styled.div([ + 'content:" ', + ' ";color:red;' +], (props)=>props.text); +const Comment = styled.div([ + "color:red;" +]); +const Parens = styled.div([ + "&:hover{color:blue;}" +]); diff --git a/packages/styled-components/transform/tests/fixtures/minify-css-to-use-without-transpilation/output.js b/packages/styled-components/transform/tests/fixtures/minify-css-to-use-without-transpilation/output.js index 656e3c57f..3b1d14524 100644 --- a/packages/styled-components/transform/tests/fixtures/minify-css-to-use-without-transpilation/output.js +++ b/packages/styled-components/transform/tests/fixtures/minify-css-to-use-without-transpilation/output.js @@ -1,7 +1,21 @@ import styled from 'styled-components'; -const Simple = styled.div`width:100%;`; -const Interpolation = styled.div`content:"https://test.com/${props => props.endpoint}";`; -const SpecialCharacters = styled.div`content:" ${props => props.text} ";color:red;`; -const Comment = styled.div`width:100%;color:red;`; -const Parens = styled.div`&:hover{color:blue;}color:red;`; -const UrlComments = styled.div`color:red;background:red;border:1px solid green;`; +const Simple = styled.div([ + "width:100%;" +]); +const Interpolation = styled.div([ + 'content:"https://test.com/', + '";' +], (props)=>props.endpoint); +const SpecialCharacters = styled.div([ + 'content:" ', + ' ";color:red;' +], (props)=>props.text); +const Comment = styled.div([ + "width:100%;color:red;" +]); +const Parens = styled.div([ + "&:hover{color:blue;}color:red;" +]); +const UrlComments = styled.div([ + "color:red;background:red;border:1px solid green;" +]); diff --git a/packages/styled-components/transform/tests/fixtures/minify-single-line-comments-with-interpolations/output.js b/packages/styled-components/transform/tests/fixtures/minify-single-line-comments-with-interpolations/output.js index eb1927db1..2ceaf100b 100644 --- a/packages/styled-components/transform/tests/fixtures/minify-single-line-comments-with-interpolations/output.js +++ b/packages/styled-components/transform/tests/fixtures/minify-single-line-comments-with-interpolations/output.js @@ -2,28 +2,47 @@ import styled from 'styled-components'; const Test1 = styled.div.withConfig({ displayName: "code__Test1", componentId: "sc-bfa13f91-0" -})`width:100%;`; +})([ + "width:100%;" +]); const Test2 = styled.div.withConfig({ displayName: "code__Test2", componentId: "sc-bfa13f91-1" -})`width:100%;`; +})([ + "width:100%;" +]); const Test3 = styled.div.withConfig({ displayName: "code__Test3", componentId: "sc-bfa13f91-2" -})`width:100%;${'red'};`; +})([ + "width:100%;", + ";" +], 'red'); const Test4 = styled.div.withConfig({ displayName: "code__Test4", componentId: "sc-bfa13f91-3" -})`width:100%;`; +})([ + "width:100%;" +]); const Test5 = styled.div.withConfig({ displayName: "code__Test5", componentId: "sc-bfa13f91-4" -})`width:100%;`; +})([ + "width:100%;" +]); const Test6 = styled.div.withConfig({ displayName: "code__Test6", componentId: "sc-bfa13f91-5" -})`background:url("https://google.com");width:100%;${'green'} `; +})([ + 'background:url("https://google.com");width:100%;', + " " +], 'green'); const Test7 = styled.div.withConfig({ displayName: "code__Test7", componentId: "sc-bfa13f91-6" -})`background:url("https://google.com");width:${(p)=>p.props.width};${'green'} height:${(p)=>p.props.height};`; +})([ + 'background:url("https://google.com");width:', + ";", + " height:", + ";" +], (p)=>p.props.width, 'green', (p)=>p.props.height); diff --git a/packages/styled-components/transform/tests/fixtures/transpile-css-prop-all-options-on/output.js b/packages/styled-components/transform/tests/fixtures/transpile-css-prop-all-options-on/output.js index adac803bc..ae6c1a3ed 100644 --- a/packages/styled-components/transform/tests/fixtures/transpile-css-prop-all-options-on/output.js +++ b/packages/styled-components/transform/tests/fixtures/transpile-css-prop-all-options-on/output.js @@ -6,11 +6,15 @@ const { SomeOtherComponent } = require('../SomeOtherComponentPath'); */ const Thing = styled.div.withConfig({ displayName: "code__Thing", componentId: "sc-867225be-0" -})`color:red;`; +})([ + "color:red;" +]); const Thing2 = styled(Thing).withConfig({ displayName: "code__Thing2", componentId: "sc-867225be-1" -})`background:blue;`; +})([ + "background:blue;" +]); /* * Basic fixtures */ const StaticString = (p)=><_StyledP>A; @@ -82,7 +86,9 @@ const SpreadObjectPropMixedInputs = (p)=>{ const Thing3 = styled.div.withConfig({ displayName: "code__Thing3", componentId: "sc-867225be-2" -})`color:blue;`; +})([ + "color:blue;" +]); var _StyledThing6 = styled(Thing3).withConfig({ displayName: "code___StyledThing6", componentId: "sc-867225be-3" @@ -116,7 +122,9 @@ var _StyledThing3 = styled(Thing3).withConfig({ var _StyledThing = styled(Thing3).withConfig({ displayName: "code___StyledThing", componentId: "sc-867225be-7" -})`color:red;`; +})([ + "color:red;" +]); const EarlyUsageComponent2 = (p)=><_StyledThing2/>; function Thing4(props1) { return
; @@ -176,23 +184,33 @@ const ObjectPropWithSpread = ()=>{ var _StyledSomeComponent = styled(SomeComponent).withConfig({ displayName: "code___StyledSomeComponent", componentId: "sc-867225be-8" -})`color:red;`; +})([ + "color:red;" +]); var _StyledSomeOtherComponent = styled(SomeOtherComponent).withConfig({ displayName: "code___StyledSomeOtherComponent", componentId: "sc-867225be-9" -})`color:red;`; +})([ + "color:red;" +]); var _StyledThing2 = styled(Thing4).withConfig({ displayName: "code___StyledThing2", componentId: "sc-867225be-10" -})`color:red;`; +})([ + "color:red;" +]); var _StyledP = styled("p").withConfig({ displayName: "code___StyledP", componentId: "sc-867225be-11" -})`flex:1;`; +})([ + "flex:1;" +]); var _StyledP2 = styled("p").withConfig({ displayName: "code___StyledP2", componentId: "sc-867225be-12" -})`flex:1;`; +})([ + "flex:1;" +]); var _StyledP3 = styled("p").withConfig({ displayName: "code___StyledP3", componentId: "sc-867225be-13" @@ -202,55 +220,87 @@ var _StyledP3 = styled("p").withConfig({ var _StyledP4 = styled("p").withConfig({ displayName: "code___StyledP4", componentId: "sc-867225be-14" -})`flex:1;`; +})([ + "flex:1;" +]); var _StyledP5 = styled("p").withConfig({ displayName: "code___StyledP5", componentId: "sc-867225be-15" -})`color:blue;`; +})([ + "color:blue;" +]); var _StyledParagraph = styled(Paragraph).withConfig({ displayName: "code___StyledParagraph", componentId: "sc-867225be-16" -})`flex:1`; +})([ + "flex:1" +]); var _StyledP6 = styled("p").withConfig({ displayName: "code___StyledP6", componentId: "sc-867225be-17" -})`${(p)=>p.$_css}`; +})([ + "", + "" +], (p)=>p.$_css); var _StyledP7 = styled("p").withConfig({ displayName: "code___StyledP7", componentId: "sc-867225be-18" -})`background:${(p)=>p.$_css2};`; +})([ + "background:", + ";" +], (p)=>p.$_css2); var _StyledP8 = styled("p").withConfig({ displayName: "code___StyledP8", componentId: "sc-867225be-19" -})`color:${(props1)=>props1.theme.a};`; +})([ + "color:", + ";" +], (props1)=>props1.theme.a); var _StyledP9 = styled("p").withConfig({ displayName: "code___StyledP9", componentId: "sc-867225be-20" -})`border-radius:${radius}px;`; +})([ + "border-radius:", + "px;" +], radius); var _StyledP10 = styled("p").withConfig({ displayName: "code___StyledP10", componentId: "sc-867225be-21" -})`color:${(p)=>p.$_css3};`; +})([ + "color:", + ";" +], (p)=>p.$_css3); var _StyledP11 = styled("p").withConfig({ displayName: "code___StyledP11", componentId: "sc-867225be-22" -})`color:${(props1)=>props1.theme.color};`; +})([ + "color:", + ";" +], (props1)=>props1.theme.color); var _StyledButtonGhost = styled(Button.Ghost).withConfig({ displayName: "code___StyledButtonGhost", componentId: "sc-867225be-23" -})`flex:1`; +})([ + "flex:1" +]); var _StyledButtonGhostNew = styled(Button.Ghost.New).withConfig({ displayName: "code___StyledButtonGhostNew", componentId: "sc-867225be-24" -})`flex:1`; +})([ + "flex:1" +]); var _StyledButtonGhost2 = styled(button.ghost).withConfig({ displayName: "code___StyledButtonGhost2", componentId: "sc-867225be-25" -})`flex:1`; +})([ + "flex:1" +]); var _StyledButtonGhost3 = styled("button-ghost").withConfig({ displayName: "code___StyledButtonGhost3", componentId: "sc-867225be-26" -})`flex:1`; +})([ + "flex:1" +]); var _StyledP12 = styled("p").withConfig({ displayName: "code___StyledP12", componentId: "sc-867225be-27" diff --git a/packages/styled-components/transform/tests/fixtures/.transpile-template-literals-with-config/code.js b/packages/styled-components/transform/tests/fixtures/transpile-template-literals-with-config/code.js similarity index 100% rename from packages/styled-components/transform/tests/fixtures/.transpile-template-literals-with-config/code.js rename to packages/styled-components/transform/tests/fixtures/transpile-template-literals-with-config/code.js diff --git a/packages/styled-components/transform/tests/fixtures/transpile-template-literals-with-config/config.json b/packages/styled-components/transform/tests/fixtures/transpile-template-literals-with-config/config.json new file mode 100644 index 000000000..8f1987508 --- /dev/null +++ b/packages/styled-components/transform/tests/fixtures/transpile-template-literals-with-config/config.json @@ -0,0 +1,6 @@ +{ + "ssr": false, + "displayName": true, + "transpileTemplateLiterals": true, + "minify": false +} diff --git a/packages/styled-components/transform/tests/fixtures/transpile-template-literals-with-config/output.js b/packages/styled-components/transform/tests/fixtures/transpile-template-literals-with-config/output.js new file mode 100644 index 000000000..fe1e69be4 --- /dev/null +++ b/packages/styled-components/transform/tests/fixtures/transpile-template-literals-with-config/output.js @@ -0,0 +1,28 @@ +import styled, { css, createGlobalStyle } from 'styled-components'; +const Named = styled.div.withConfig({ + displayName: "code__Named" +})([ + "\n width: 100%;\n" +]); +const NamedWithInterpolation = styled.div.withConfig({ + displayName: "code__NamedWithInterpolation" +})([ + "\n color: ", + ";\n" +], (color)=>props.color); +const Wrapped = styled(Inner).withConfig({ + displayName: "code__Wrapped" +})([ + "\n color: red;\n" +]); +const Foo = styled.div.withConfig({ + displayName: "code__Foo" +})({ + color: 'green' +}); +const style = css([ + "\n background: green;\n" +]); +const GlobalStyle = createGlobalStyle([ + "\n html {\n background: silver;\n }\n" +]); diff --git a/packages/styled-jsx/package.json b/packages/styled-jsx/package.json index a4189a7ca..db28613d7 100644 --- a/packages/styled-jsx/package.json +++ b/packages/styled-jsx/package.json @@ -1,6 +1,6 @@ { "name": "@swc/plugin-styled-jsx", - "version": "1.5.101", + "version": "1.5.102", "description": "SWC plugin for styled-jsx", "main": "swc_plugin_styled_jsx.wasm", "scripts": { diff --git a/packages/styled-jsx/transform/Cargo.toml b/packages/styled-jsx/transform/Cargo.toml index f7c7a17b1..8650312eb 100644 --- a/packages/styled-jsx/transform/Cargo.toml +++ b/packages/styled-jsx/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.63.0" +version = "0.64.0" [features] custom_transform = ["swc_common/concurrent"] diff --git a/packages/swc-magic/package.json b/packages/swc-magic/package.json index 386b9d2a1..117666d7a 100644 --- a/packages/swc-magic/package.json +++ b/packages/swc-magic/package.json @@ -1,6 +1,6 @@ { "name": "@swc/plugin-swc-magic", - "version": "1.5.101", + "version": "1.5.102", "description": "SWC plugin for swc-magic", "main": "swc_plugin_swc_magic.wasm", "scripts": { diff --git a/packages/swc-magic/transform/Cargo.toml b/packages/swc-magic/transform/Cargo.toml index a4cb30747..1af6f9dbc 100644 --- a/packages/swc-magic/transform/Cargo.toml +++ b/packages/swc-magic/transform/Cargo.toml @@ -4,7 +4,7 @@ description = "AST transforms visitor for swc-magic" edition = "2021" license = "Apache-2.0" name = "swc_magic" -version = "0.9.0" +version = "0.10.0" [dependencies] serde = { version = "1.0.189", features = ["derive"] } diff --git a/packages/transform-imports/package.json b/packages/transform-imports/package.json index 3617ec649..3f9dd02d2 100644 --- a/packages/transform-imports/package.json +++ b/packages/transform-imports/package.json @@ -1,6 +1,6 @@ { "name": "@swc/plugin-transform-imports", - "version": "1.5.101", + "version": "1.5.102", "description": "SWC plugin for https://www.npmjs.com/package/babel-plugin-transform-imports", "main": "swc_plugin_transform_imports.wasm", "scripts": { diff --git a/packages/transform-imports/transform/Cargo.toml b/packages/transform-imports/transform/Cargo.toml index e39b24d98..10dfe2df6 100644 --- a/packages/transform-imports/transform/Cargo.toml +++ b/packages/transform-imports/transform/Cargo.toml @@ -5,7 +5,7 @@ edition = "2021" license = "Apache-2.0" name = "modularize_imports" repository = "https://github.com/swc-project/plugins.git" -version = "0.58.0" +version = "0.59.0" # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html