[SWC] - Adds rust based replica of babel-plugin and accompanying tests

.github/workflows/build.yml

@@ -23,6 +23,16 @@ jobs:
         with:
           node-version: ${{ steps.nvm.outputs.NVMRC }}
 
+      - name: Setup Rust
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: wasm32-wasip1
+
+      - name: Verify Rust targets
+        run: |
+          rustup target list --installed
+          rustup target add wasm32-wasip1 --toolchain stable
+
       - name: Get yarn cache
         id: yarn-cache
         run: echo "::set-output name=dir::$(yarn cache dir)"

.github/workflows/release.yml

@@ -27,6 +27,11 @@ jobs:
         with:
           node-version: ${{ steps.nvm.outputs.NVMRC }}
 
+      - name: Setup Rust
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: wasm32-wasip1
+
       - name: Install Dependencies
         run: yarn
 

.github/workflows/test.yml

@@ -23,6 +23,11 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
 
+      - name: Setup Rust
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: wasm32-wasip1
+
       - name: Get yarn cache
         id: yarn-cache
         run: echo "::set-output name=dir::$(yarn cache dir)"
@@ -60,7 +65,7 @@ jobs:
         # Needs to run after `yarn build` so that `packages/webpack-loader/`
         # tests can resolve `@compiled/react/runtime` correctly.
       - name: Run tests
-        run: yarn test:cover --ci
+        run: yarn test:cover
 
       - name: Run import test
         run: yarn test:imports

.github/workflows/visual-regression-test.yml

@@ -23,6 +23,16 @@ jobs:
         with:
           node-version: ${{ steps.nvm.outputs.NVMRC }}
 
+      - name: Setup Rust
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: wasm32-wasip1
+
+      - name: Verify Rust targets
+        run: |
+          rustup target list --installed
+          rustup target add wasm32-wasip1 --toolchain stable
+
       - name: Get yarn cache
         id: yarn-cache
         run: echo "::set-output name=dir::$(yarn cache dir)"

.gitignore

@@ -10,3 +10,5 @@ storybook-static
 
 *.log
 *.tsbuildinfo
+
+.swc/

.prettierignore

@@ -3,3 +3,9 @@ coverage
 dist
 storybook-static
 **/__fixtures__/*.css
+# Build artifacts and caches
+**/dist/
+**/target/
+.parcel-cache/
+**/.parcel-cache/
+packages/swc-plugin/target/

fixtures/parcel-transformer-swc-test-app/.compiledcssrc

@@ -0,0 +1,6 @@
+{
+  "importReact": false,
+  "extract": false,
+  "optimizeCss": false,
+  "swc": "auto"
+}

fixtures/parcel-transformer-swc-test-app/.parcelrc

@@ -0,0 +1,10 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.{js,jsx}": [
+      "@compiled/parcel-transformer-external",
+      "@compiled/parcel-transformer-swc",
+      "..."
+    ]
+  }
+}

fixtures/parcel-transformer-swc-test-app/CHANGELOG.md

@@ -0,0 +1,68 @@
+# @compiled/parcel-transformer-test-app
+
+## 0.1.6
+
+### Patch Changes
+
+- Updated dependencies [9a15e742]
+  - @compiled/[email protected]
+
+## 0.1.5
+
+### Patch Changes
+
+- Updated dependencies [4b2e5eeb]
+- Updated dependencies [39d9a02c]
+- Updated dependencies [20528e91]
+- Updated dependencies [5701b914]
+  - @compiled/[email protected]
+
+## 0.1.4
+
+### Patch Changes
+
+- Updated dependencies [f8d01fa2]
+  - @compiled/[email protected]
+
+## 0.1.3
+
+### Patch Changes
+
+- Updated dependencies [b6f3e41e]
+  - @compiled/[email protected]
+
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies [4a2174c5]
+- Updated dependencies [c5377cdb]
+  - @compiled/[email protected]
+
+## 0.1.1
+
+### Patch Changes
+
+- Updated dependencies [c4e6b7c0]
+- Updated dependencies [c4e6b7c0]
+  - @compiled/[email protected]
+
+## 0.1.0
+
+### Minor Changes
+
+- a41e41e6: Update monorepo node version to v18, and drop support for node v12
+
+### Patch Changes
+
+- Updated dependencies [a41e41e6]
+- Updated dependencies [f9c957ef]
+  - @compiled/[email protected]
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies [ad4d257]
+- Updated dependencies [1cab89a]
+  - @compiled/[email protected]

fixtures/parcel-transformer-swc-test-app/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@compiled/parcel-transformer-swc-test-app",
+  "version": "0.1.6",
+  "private": true,
+  "dependencies": {
+    "@compiled/react": "^0.18.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@compiled/parcel-transformer": "*",
+    "@parcel/config-default": "^2.8.3"
+  }
+}

fixtures/parcel-transformer-swc-test-app/src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title></title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.jsx"></script>
+  </body>
+</html>

fixtures/parcel-transformer-swc-test-app/src/index.jsx

@@ -0,0 +1,13 @@
+console.log('File START');
+
+import { css } from '@compiled/react';
+
+const styles = css({ backgroundColor: 'green' });
+
+const App = () => (
+  <>
+    <div css={[{ fontSize: 50, color: 'red' }, styles]}>hello from parcel</div>
+  </>
+);
+
+console.log('File END');

fixtures/parcel-transformer-swc-test-extract-app/.compiledcssrc

@@ -0,0 +1,7 @@
+{
+  "importReact": false,
+  "extract": true,
+  "optimizeCss": false,
+  "inlineCss": true,
+  "swc": "auto",
+}

fixtures/parcel-transformer-swc-test-extract-app/.parcelrc

@@ -0,0 +1,16 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.{js,jsx}": [
+      "@compiled/parcel-transformer-external",
+      "@compiled/parcel-transformer-swc",
+      "..."
+    ]
+  },
+  "optimizers": {
+    "*.html": [
+      "@compiled/parcel-optimizer",
+      "..."
+    ]
+  }
+}

fixtures/parcel-transformer-swc-test-extract-app/CHANGELOG.md

@@ -0,0 +1,78 @@
+# @compiled/parcel-transformer-test-extract-app
+
+## 0.1.6
+
+### Patch Changes
+
+- Updated dependencies [9a15e742]
+  - @compiled/[email protected]
+
+## 0.1.5
+
+### Patch Changes
+
+- Updated dependencies [4b2e5eeb]
+- Updated dependencies [39d9a02c]
+- Updated dependencies [20528e91]
+- Updated dependencies [5701b914]
+  - @compiled/[email protected]
+
+## 0.1.4
+
+### Patch Changes
+
+- Updated dependencies [f8d01fa2]
+  - @compiled/[email protected]
+
+## 0.1.3
+
+### Patch Changes
+
+- Updated dependencies [b6f3e41e]
+  - @compiled/[email protected]
+
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies [4a2174c5]
+- Updated dependencies [c5377cdb]
+  - @compiled/[email protected]
+
+## 0.1.1
+
+### Patch Changes
+
+- Updated dependencies [c4e6b7c0]
+- Updated dependencies [c4e6b7c0]
+  - @compiled/[email protected]
+
+## 0.1.0
+
+### Minor Changes
+
+- a41e41e6: Update monorepo node version to v18, and drop support for node v12
+
+### Patch Changes
+
+- Updated dependencies [a41e41e6]
+- Updated dependencies [f9c957ef]
+  - @compiled/[email protected]
+
+## 0.0.3
+
+### Patch Changes
+
+- 966a1080: Changed the approach of stylesheet extraction on Parcel
+
+  - @compiled/parcel-resolver is no longer used
+  - Pass styleRules to optimizer via metadata
+  - Optimizer then collects styleRules, and inserts it to output HTML
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies [ad4d257]
+- Updated dependencies [1cab89a]
+  - @compiled/[email protected]

fixtures/parcel-transformer-swc-test-extract-app/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@compiled/parcel-transformer-swc-test-extract-app",
+  "version": "0.1.6",
+  "private": true,
+  "dependencies": {
+    "@compiled/react": "^0.18.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@compiled/babel-component-extracted-fixture": "*",
+    "@compiled/babel-component-fixture": "*",
+    "@compiled/parcel-transformer": "*",
+    "@compiled/parcel-transformer-external": "*",
+    "@parcel/config-default": "^2.8.3"
+  }
+}

fixtures/parcel-transformer-swc-test-extract-app/src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title></title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.jsx"></script>
+  </body>
+</html>

fixtures/parcel-transformer-swc-test-extract-app/src/index.jsx

@@ -0,0 +1,13 @@
+import BabelComponentExtracted from '@compiled/babel-component-extracted-fixture/dist/index';
+import BabelComponent from '@compiled/babel-component-fixture';
+import { css } from '@compiled/react';
+
+import { GREEN } from './colors';
+
+const App = () => (
+  <>
+    <div css={css({ fontSize: 50, color: GREEN })}>CSS prop</div>
+    <BabelComponent>Babel component</BabelComponent>
+    <BabelComponentExtracted>Component from NPM</BabelComponentExtracted>
+  </>
+);

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  projects: ['<rootDir>/jest.config.json', '<rootDir>/packages/swc-plugin/jest.config.js'],
+};