Skip to content

Commit 242849d

Browse files
shanshrewshanshrew
committed
Add swc plugin support
1 parent a9baf29 commit 242849d

42 files changed

Lines changed: 8904 additions & 18 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
],
1212
"scripts": {
1313
"benchmark": "jest --config benchmark.config.json",
14-
"build": "yarn build:babel-fixture && yarn build:browser && yarn build:cjs && yarn build:esm && yarn postbuild",
14+
"build": "yarn build:babel-fixture && yarn build:swc-plugin && yarn build:browser && yarn build:cjs && yarn build:esm && yarn postbuild",
1515
"postbuild": "scripts/postbuild.sh",
1616
"build:babel-fixture": "yarn workspace @compiled/babel-component-fixture build && yarn workspace @compiled/babel-component-extracted-fixture build",
1717
"build:browser": "ttsc --build packages/tsconfig.browser.json",
@@ -21,6 +21,7 @@
2121
"build:parcel": "ttsc --build examples/parcel/tsconfig.json && yarn workspace @compiled/parcel-app build",
2222
"build:ssr": "CI=false && ttsc --build examples/ssr/tsconfig.json && yarn workspace @compiled/ssr-app build",
2323
"build:storybook": "build-storybook",
24+
"build:swc-plugin": "yarn workspace @compiled/swc-plugin build",
2425
"build:webpack": "yarn build:babel-fixture && ttsc --build examples/webpack/tsconfig.json && yarn workspace @compiled/webpack-app build",
2526
"build:webpack:extract": "EXTRACT_TO_CSS=true yarn build:webpack",
2627
"bundlesize": "yarn build && size-limit",
@@ -42,10 +43,11 @@
4243
"start:ssr": "ttsc --build examples/ssr/tsconfig.json && yarn workspace @compiled/ssr-app start",
4344
"start:webpack": "yarn build:babel-fixture && ttsc --build examples/webpack/tsconfig.json && yarn workspace @compiled/webpack-app start",
4445
"start:webpack:extract": "EXTRACT_TO_CSS=true yarn start:webpack",
45-
"test": "jest --no-cache",
46+
"test": "jest --no-cache && yarn test:swc",
4647
"test:cover": "yarn test --collectCoverage",
4748
"test:imports": "node test/test-imports",
4849
"test:parcel": "jest --testMatch '**/src/**/*.parceltest.{ts,tsx}' --testEnvironment=node",
50+
"test:swc": "yarn workspace @compiled/swc-plugin test && yarn workspace @compiled/swc-plugin test:ts",
4951
"test:vr": "yarn loki --host host.docker.internal",
5052
"test:watch": "jest --no-cache --watch",
5153
"website:build": "cd website/ && NODE_ENV=production yarn build",
@@ -128,6 +130,7 @@
128130
}
129131
}
130132
},
133+
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
131134
"size-limit": [
132135
{
133136
"path": "./packages/react/dist/browser/runtime/css-custom-property.js",

‎packages/css/src/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ export { addUnitIfNeeded } from './utils/css-property';
22
export { transformCss } from './transform';
33
export {
44
cssAffixInterpolation,
5-
AfterInterpolation,
6-
BeforeInterpolation,
5+
type AfterInterpolation,
6+
type BeforeInterpolation,
77
} from './utils/css-affix-interpolation';
88
export { sort } from './sort';
99
export { generateCompressionMap } from './generate-compression-map';

‎packages/swc-plugin/.gitignore‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Rust build artifacts
2+
/target/
3+
Cargo.lock
4+
5+
# Generated WASM files
6+
compiled_rust_swc.wasm
7+
compiled_swc.wasm
8+
9+
# Node.js
10+
node_modules/
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
15+
# IDE files
16+
.vscode/
17+
.idea/
18+
*.swp
19+
*.swo
20+
21+
# OS files
22+
.DS_Store
23+
Thumbs.db
24+
25+
# Temporary files
26+
*.tmp
27+
*.log

‎packages/swc-plugin/.npmignore‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Source files that shouldn't be published
2+
src/__fixtures__/
3+
src/__tests__/
4+
tests/
5+
target/wasm32-wasip1/debug/
6+
target/debug/
7+
target/release/
8+
*.test.*
9+
*.spec.*
10+
11+
# Build artifacts
12+
Cargo.lock
13+
.cargo/
14+
*.tmp
15+
*.log
16+
17+
# Development files
18+
.vscode/
19+
.idea/
20+
*.swp
21+
*.swo
22+
*~
23+
24+
# OS files
25+
.DS_Store
26+
Thumbs.db
27+
28+
# Git files
29+
.git/
30+
.gitignore
31+
32+
# Only include the release WASM binary
33+
!target/wasm32-wasip1/release/compiled_swc.wasm

‎packages/swc-plugin/Cargo.toml‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
[package]
2+
name = "compiled-swc"
3+
version = "0.1.0"
4+
edition = "2021"
5+
description = "A SWC implementation of the Compiled CSS-in-JS library"
6+
license = "Apache-2.0"
7+
8+
[package.metadata.swc]
9+
plugin = true
10+
11+
[lib]
12+
crate-type = ["cdylib", "rlib"]
13+
14+
[dependencies]
15+
swc_core = { version = "0.96", features = [
16+
"ecma_plugin_transform",
17+
"ecma_utils",
18+
"ecma_visit",
19+
"ecma_codegen",
20+
"__parser",
21+
"ecma_parser",
22+
] }
23+
serde = { version = "1.0", features = ["derive"] }
24+
serde_json = "1.0"
25+
path-clean = "1.0"
26+
pathdiff = "0.2"
27+
regex = "1.10"
28+
29+
# WASI target automatically supports getrandom
30+
# No special dependencies needed for wasm32-wasip1
31+
32+
[dev-dependencies]
33+
swc_core = { version = "0.96", features = [
34+
"testing_transform",
35+
"__parser",
36+
"ecma_parser",
37+
"ecma_codegen",
38+
] }
39+
40+
[profile.release]
41+
lto = true
42+
codegen-units = 1
43+
opt-level = "z"

‎packages/swc-plugin/README.md‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
# @compiled/swc-plugin
2+
3+
> A high-performance SWC plugin for [Compiled CSS-in-JS](https://compiledcssinjs.com)
4+
5+
This package provides a SWC plugin that transforms Compiled CSS-in-JS components at build time, offering significant performance improvements over the Babel plugin equivalent.
6+
7+
## Installation
8+
9+
```bash
10+
npm install @compiled/swc-plugin
11+
# or
12+
yarn add @compiled/swc-plugin
13+
```
14+
15+
## Usage
16+
17+
Add the plugin to your SWC configuration:
18+
19+
### .swcrc
20+
21+
```json
22+
{
23+
"jsc": {
24+
"experimental": {
25+
"plugins": [["@compiled/swc-plugin", {}]]
26+
}
27+
}
28+
}
29+
```
30+
31+
### Next.js
32+
33+
```javascript
34+
// next.config.js
35+
module.exports = {
36+
experimental: {
37+
swcPlugins: [['@compiled/swc-plugin', {}]],
38+
},
39+
};
40+
```
41+
42+
### Webpack with swc-loader
43+
44+
```javascript
45+
// webpack.config.js
46+
module.exports = {
47+
module: {
48+
rules: [
49+
{
50+
test: /\.(js|ts|jsx|tsx)$/,
51+
use: {
52+
loader: 'swc-loader',
53+
options: {
54+
jsc: {
55+
experimental: {
56+
plugins: [['@compiled/swc-plugin', {}]],
57+
},
58+
},
59+
},
60+
},
61+
},
62+
],
63+
},
64+
};
65+
```
66+
67+
## Supported Features
68+
69+
- ✅ `<ClassNames>` component transformation
70+
- ✅ `styled.*` component transformation
71+
- ✅ `css` prop transformation
72+
- ✅ `cssMap` object resolution
73+
- ✅ `keyframes` animation support
74+
- ✅ Import resolution and optimization
75+
- ✅ Automatic runtime injection
76+
77+
## Configuration Options
78+
79+
```typescript
80+
interface CompiledOptions {
81+
/** Custom import source for runtime (default: "@compiled/react") */
82+
importSrc?: string;
83+
84+
/** Enable/disable specific transformations */
85+
transformations?: {
86+
classNames?: boolean;
87+
styled?: boolean;
88+
css?: boolean;
89+
cssMap?: boolean;
90+
keyframes?: boolean;
91+
};
92+
}
93+
```
94+
95+
## Performance
96+
97+
This SWC plugin offers significant performance improvements over the Babel equivalent:
98+
99+
- **~10x faster** compilation times
100+
- **Lower memory usage**
101+
- **Parallel processing** support
102+
- **WASM-based** for consistent performance across platforms
103+
104+
## Examples
105+
106+
### ClassNames Component
107+
108+
```jsx
109+
// Input
110+
<ClassNames>
111+
{({ css }) => (
112+
<div className={css({ color: 'red', fontSize: 12 })}>
113+
Hello World
114+
</div>
115+
)}
116+
</ClassNames>
117+
118+
// Output
119+
<CC>
120+
<CS>{["._syaz13q2{color:red;}", "._1wyb1fwx{font-size:12px;}"]}</CS>
121+
<div className={ax(["_syaz13q2", "_1wyb1fwx"])}>
122+
Hello World
123+
</div>
124+
</CC>
125+
```
126+
127+
### Styled Components
128+
129+
```jsx
130+
// Input
131+
const StyledDiv = styled.div`
132+
color: blue;
133+
font-size: 14px;
134+
`;
135+
136+
// Output
137+
const StyledDiv = forwardRef(({ as: C = 'div', ...props }, ref) => (
138+
<CC>
139+
<CS>{['._syaz1d4w{color:blue;}', '._1wyba8vr{font-size:14px;}']}</CS>
140+
<C {...props} className={ax(['_syaz1d4w', '_1wyba8vr', props.className])} ref={ref} />
141+
</CC>
142+
));
143+
```
144+
145+
## Requirements
146+
147+
- Node.js >= 16.0.0
148+
- SWC >= 1.3.0
149+
- React >= 16.8.0
150+
151+
## License
152+
153+
Apache-2.0 © [Atlassian](https://github.com/atlassian-labs)

‎packages/swc-plugin/package.json‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
{
2+
"name": "@compiled/swc-plugin",
3+
"version": "0.1.0",
4+
"description": "A performant SWC plugin for Compiled CSS-in-JS library for React.",
5+
"keywords": [
6+
"swc",
7+
"plugin",
8+
"css-in-js",
9+
"compiled",
10+
"react",
11+
"wasm",
12+
"rust",
13+
"performance"
14+
],
15+
"homepage": "https://compiledcssinjs.com/docs/pkg-swc-plugin",
16+
"bugs": "https://github.com/atlassian-labs/compiled/issues/new?assignees=&labels=bug&template=bug_report.md",
17+
"repository": {
18+
"type": "git",
19+
"url": "https://github.com/atlassian-labs/compiled.git",
20+
"directory": "packages/swc-plugin"
21+
},
22+
"license": "Apache-2.0",
23+
"author": "Shanon Jackson",
24+
"main": "./dist/index.js",
25+
"module": "./dist/index.js",
26+
"types": "./dist/index.d.ts",
27+
"files": [
28+
"dist",
29+
"compiled_swc.wasm",
30+
"README.md"
31+
],
32+
"scripts": {
33+
"build": "npm run build:rust && npm run build:ts && npm run copy-wasm",
34+
"build:dev": "cargo build --target wasm32-wasip1",
35+
"build:rust": "cargo build --target wasm32-wasip1 --release",
36+
"build:ts": "tsc",
37+
"check": "cargo check",
38+
"clean": "cargo clean && rm -rf dist",
39+
"clippy": "cargo clippy",
40+
"copy-wasm": "cp target/wasm32-wasip1/release/compiled_swc.wasm ./compiled_swc.wasm",
41+
"fmt": "cargo fmt",
42+
"prepare": "npm run build && npm run copy-wasm",
43+
"test": "cargo test --lib --bins --tests",
44+
"test:ts": "tsc --noEmit"
45+
},
46+
"devDependencies": {
47+
"@swc/core": "^1.7.35",
48+
"@types/node": "^20.0.0",
49+
"typescript": "^5.0.0"
50+
},
51+
"peerDependencies": {
52+
"@swc/core": ">=1.3.0",
53+
"react": ">=16.8.0"
54+
},
55+
"engines": {
56+
"node": ">=16.0.0"
57+
},
58+
"swc": {
59+
"plugin": "./target/wasm32-wasip1/release/compiled_swc.wasm"
60+
}
61+
}

0 commit comments

Comments
 (0)