Feature/rust deployment

.github/workflows/example.yml

@@ -0,0 +1,64 @@
+name: Build and Deploy packages/example
+env:
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+
+on:
+  push:
+    branches-ignore:
+      - main
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Install Rust
+      uses: actions-rs/toolchain@v1
+      with:
+        toolchain: stable
+        profile: minimal
+        override: true
+
+    - name: Add wasm32-wasi target
+      run: rustup target add wasm32-wasi
+
+    - uses: pnpm/action-setup@v4
+      name: Install pnpm
+      with:
+        version: 8.6.1
+        run_install: false
+
+    - name: Install Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: 20
+        cache: 'pnpm'
+
+    - name: Install node_modules
+      run: pnpm install
+
+    - name: Install Vercel CLI
+      run: npm install -g vercel@35
+
+    - name: Enable caching
+      uses: Swatinem/rust-cache@v2
+      with:
+        workspaces: packages/yak-swc
+
+    - name: Build with SWC
+      run: pnpm run build:swc
+
+    - name: Link Vercel project
+      run: vercel link --yes --token ${{ secrets.VERCEL_TOKEN }}
+
+    - name: Pull Vercel environment information
+      run: vercel pull --yes --environment=preview --token ${{ secrets.VERCEL_TOKEN }}
+
+    - name: Build project artifacts
+      run: vercel build --yes --token ${{ secrets.VERCEL_TOKEN }}
+
+    - name: Deploy to Vercel
+      run: vercel deploy --prebuilt --token ${{ secrets.VERCEL_TOKEN }}

.github/workflows/swc.yml

@@ -0,0 +1,30 @@
+name: SWC validation
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+env:
+  CARGO_TERM_COLOR: always
+
+jobs:
+  rust:
+    name: Rust tests & lints
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout sources
+        uses: actions/checkout@v4
+      - name: Install stable toolchain
+        uses: dtolnay/rust-toolchain@stable
+      - name: Enable caching
+        uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: packages/yak-swc
+      - name: Run cargo check
+        run: cargo check --manifest-path packages/yak-swc/Cargo.toml
+      - name: Run cargo test
+        run: cargo test --manifest-path packages/yak-swc/Cargo.toml
+      - name: Run cargo fmt
+        run: cargo fmt --manifest-path packages/yak-swc/Cargo.toml --all -- --check

.gitignore

@@ -2,4 +2,6 @@
 node_modules
 packages/docs/docs/dist
 packages/next-yak/dist
-packages/playground/dist
+packages/playground/dist
+target
+.vercel

README.md

@@ -269,7 +269,7 @@ const Container = styled.div`
 ## Yak shaving
 
 While trying to get next-yak to work properly we stumbled accross several bugs.  
-Thanks for merging our prs fixes in next.js and postcss ❤️
+Thanks for merging our prs fixes in next.js, webpack and postcss ❤️
 
 <details>
   <summary>PRS</summary>
@@ -296,14 +296,19 @@ Thanks for merging our prs fixes in next.js and postcss ❤️
 
 ## Acknowledgments
 
+Massive kudos to:
+
+  - @sokra: For guiding us through the webpacks module and loader APIs
+  - @kdy1: For his support while rewriting our Babel plugin as a blazing fast SWC Rust WASM plugin
+
 Special thanks to the contributors and the inspiring projects that influenced next-yak:
 
   - Styled-Components 💅: For pioneering the styled syntax and redefining styling in the React ecosystem.
   - Linaria: For its innovative approach to zero-runtime CSS in JS and efficient styling solutions.
   - Emotion: For pushing the boundaries of CSS-in-JS and providing a high-performance styling experience.
   - Vanilla Extract: For its focus on type-safe, zero-runtime CSS and contributing to the evolution of styling techniques.
   - Tailwind CSS: For its exceptional atomic CSS approach, enabling efficient and customizable styling solutions.
-
+  
 ## License
 
 **next-yak** is licensed under the [MIT License](link/to/LICENSE).

package.json

@@ -8,6 +8,7 @@
   ],
   "scripts": {
     "build": "pnpm run --filter=next-yak build",
+    "build:swc": "pnpm run --filter=yak-swc build",
     "watch": "pnpm run --filter=next-yak watch",
     "example": "pnpm --filter=next-yak-example run dev",
     "test": "pnpm --filter=next-yak --filter=webpack-tests run \"/test($|:types)/\"",

packages/example/app/mixins/constants.yak.ts

@@ -1,13 +1,11 @@
 import { mixin } from "next-yak/static";
 
 export const typography = {
-  h1: mixin.css`
+  h1: `
     font-family: "Roboto", sans-serif;
     font-size: 16px;
     font-weight: 400;
     line-height: 1.5;
-    ${mixin.css`
-      letter-spacing: 0.00938em;
-    `}
+    letter-spacing: 0.00938em;
   `,
 };

packages/example/app/page.tsx

@@ -1,5 +1,4 @@
 /** @jsxImportSource next-yak */
-
 import { YakThemeProvider, css, styled } from "next-yak";
 import styles from "./page.module.css";
 import { queries, colors } from "@/theme/constants.yak";
@@ -9,8 +8,7 @@ import { HighContrastToggle } from "./HighContrastToggle";
 import { typography } from "./mixins/constants.yak";
 
 const headline = css<{ $primary?: boolean }>`
-  ${typography.h1}
-
+  ${typography.h1};
   filter: drop-shadow(0px 0px 1px #fff);
   ${({ theme }) =>
     theme.highContrast
@@ -129,13 +127,7 @@ export default function Home() {
         <StyledLink href="https://github.com/jantimon/next-yak/tree/main/packages/example/app">
           view code
         </StyledLink>
-        <p
-          css={css`
-            color: green;
-          `}
-        >
-          CSS Prop works if this is green
-        </p>
+        <p>CSS Prop works if this is green</p>
         <Inputs />
       </main>
     </YakThemeProvider>

packages/example/package.json

@@ -7,6 +7,7 @@
     "build": "pnpm run build:yak && pnpm run build:next",
     "build:next": "next build",
     "build:yak": "pnpm run --filter next-yak build",
+    "build:swc": "pnpm run --filter yak-swc build",
     "start": "next start",
     "lint": "next lint",
     "test": "jest",

packages/next-yak/README.md

@@ -269,7 +269,7 @@ const Container = styled.div`
 ## Yak shaving
 
 While trying to get next-yak to work properly we stumbled accross several bugs.  
-Thanks for merging our prs fixes in next.js and postcss ❤️
+Thanks for merging our prs fixes in next.js, webpack and postcss ❤️
 
 <details>
   <summary>PRS</summary>
@@ -296,14 +296,19 @@ Thanks for merging our prs fixes in next.js and postcss ❤️
 
 ## Acknowledgments
 
+Massive kudos to:
+
+  - @sokra: For guiding us through webpacks module and loader APIs
+  - @kdy1: For his support while rewriting our Babel plugin as a blazing fast SWC Rust WASM plugin
+
 Special thanks to the contributors and the inspiring projects that influenced next-yak:
 
   - Styled-Components 💅: For pioneering the styled syntax and redefining styling in the React ecosystem.
   - Linaria: For its innovative approach to zero-runtime CSS in JS and efficient styling solutions.
   - Emotion: For pushing the boundaries of CSS-in-JS and providing a high-performance styling experience.
   - Vanilla Extract: For its focus on type-safe, zero-runtime CSS and contributing to the evolution of styling techniques.
   - Tailwind CSS: For its exceptional atomic CSS approach, enabling efficient and customizable styling solutions.
-
+  
 ## License
 
 **next-yak** is licensed under the [MIT License](link/to/LICENSE).

packages/next-yak/loaders/__tests__/babel-swc-comparison.test.ts

@@ -0,0 +1,98 @@
+import { it, describe, expect } from "vitest";
+import fs from "fs";
+import path from "path";
+import { glob } from "glob";
+import tsloader from "../ts-loader";
+import * as prettier from "prettier";
+
+describe("should work", () => {
+  const inputFiles = glob.sync("../yak-swc/**/input.tsx", {
+    absolute: true,
+    ignore: "node_modules/**",
+  });
+  inputFiles.forEach((inputFile) => {
+    it(`processing ${inputFile
+      .split(path.sep)
+      .at(-2)} should match output`, async () => {
+      const input = fs.readFileSync(inputFile, "utf8");
+      const output = await tsloader
+        .call(
+          {
+            _compilation: {},
+            resourcePath: "/some/path/input.tsx",
+            rootContext: "/some",
+            mode: "development",
+            importModule: () => {
+              return {
+                replaces: {
+                  queries: {
+                    sm: "@media (min-width: 640px)",
+                    md: "@media (min-width: 768px)",
+                    lg: "@media (min-width: 1024px)",
+                    xl: "@media (min-width: 1280px)",
+                    xxl: "@media (min-width: 1536px)",
+                  },
+                },
+              };
+            },
+            getOptions: () => ({
+              configPath: "/some/special/path/config",
+              experiments: {
+                crossFileSelectors: true,
+              },
+            }),
+            async: () => (err, result) => {
+              if (err) {
+                throw err;
+              }
+              return result;
+            },
+          },
+          input,
+        )
+        .then((result) => result)
+        .catch((err) => err.toString());
+
+      if (fs.existsSync(path.resolve(inputFile, "../output.stderr"))) {
+        const outputFile = path.join(path.dirname(inputFile), "output.stderr");
+        const expectedOutput = fs.readFileSync(outputFile, "utf8");
+        expect(prettifyBabelError(output)).toEqual(
+          prettifySWCError(expectedOutput),
+        );
+      } else {
+        const outputFile = path.join(path.dirname(inputFile), "output.tsx");
+        const expectedOutput = fs.readFileSync(outputFile, "utf8");
+        expect(await prettify(output)).toEqual(await prettify(expectedOutput));
+      }
+    });
+  });
+});
+
+/** Helper to format SWC and Babel compile outputs the same way */
+const prettify = async (code: string) =>
+  await prettier.format(
+    code
+      // replace the newlines and spaces before comments
+      .replace(/\s*\/\*/g, "/*")
+      // replace the newlines and spaces after comments
+      .replace(/\s*\*\//g, "*/")
+      // replace the newlines after comments
+      .replace(/\*\/\s*/g, "*/\n")
+      // remove ts ignore comments
+      .replace(/\/\/\s*@ts-ignore/g, "")
+      // replace empty lines
+      .replace(/\n\n+/g, "\n")
+      .trim(),
+    {
+      parser: "typescript",
+    },
+  );
+
+const prettifySWCError = (code: string) =>
+  code
+    .replace(/\n  [^\|x][\s\S]+/, "")
+    .replace(/  [\|x] /g, "")
+    .trim();
+
+const prettifyBabelError = (code: string) =>
+  code.replace(/.*line \d+: /, "").trim();

packages/next-yak/loaders/lib/encodeModuleImport.ts

@@ -26,5 +26,5 @@ export function encodeModuleImport(
     .map((part) => encodeURIComponent(part))
     .join(":");
 
-  return `:yak-css-import(${modulePath}:${kind}:${encodedChain})`;
+  return `--yak-css-import: url("${modulePath}:${encodedChain}")`;
 }