yak-swc

library9.4.1jsnpmunverified

yak-swc is a Rust-based SWC (Speedy Web Compiler) plugin designed to compile CSS-in-JS code at build time, specifically for projects using `next-yak`. It transforms `next-yak`'s styled components syntax into optimized CSS, leveraging SWC's performance for faster build times. The current stable version is 9.4.1, with patch and minor releases aligning with the `next-yak` ecosystem, indicating an active development and release cadence. A key differentiator is its Rust implementation for high performance, allowing build-time CSS extraction, and its separation from the main `next-yak` package to ensure compatibility with specific `@swc/core` versions. This plugin is crucial for achieving zero-runtime CSS-in-JS with `next-yak` in environments leveraging SWC.

web-framework serialization

npm install yak-swc

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · YAK-SWC

yak-swc

web-frameworkjavascriptv9.4.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

yak-swc plugin

✓ ["yak-swc", {}]

✗ import { yakSwc } from 'yak-swc'

yak-swc is an SWC plugin configured via a string literal in the `plugins` array of an .swcrc file, not imported as a JavaScript module. The empty object `{}` can be replaced with plugin-specific options if available.

Configuring with options

✓ ["yak-swc", { /* plugin options */ }]

✗ import { configureYakSwc } from 'yak-swc/config'

Plugin-specific options for yak-swc would be passed as the second element in the plugin array within the .swcrc configuration.

TypeScript support

✓ jsc.parser.syntax: 'typescript'

✗ No direct TypeScript import; handled via SWC config

TypeScript parsing is enabled via the `jsc.parser.syntax` option in the .swcrc file, allowing yak-swc to process TypeScript files containing CSS-in-JS.

Demonstrates how to configure `yak-swc` in a `.swcrc` file to process `next-yak` styled components within a TypeScript React project.

// .swcrc { "jsc": { "parser": { "syntax": "typescript", "tsx": true }, "transform": { "react": { "runtime": "automatic" } }, "experimental": { "plugins": [ ["yak-swc", {}] ] } }, "module": { "type": "es6" } } // src/components/StyledButton.tsx // Requires 'next-yak' to be installed (npm install next-yak) import { styled } from 'next-yak'; const StyledButton = styled.button` background-color: #007bff; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer; &:hover { background-color: #0056b3; } @media (max-width: 768px) { padding: 8px 15px; } `; export function MyComponent() { return <StyledButton>Click Me</StyledButton>; }

Debug

Known issues

breakingyak-swc plugin versions are tightly coupled with `@swc/core` versions. Using an incompatible version can lead to compilation errors or unexpected behavior.

fix

Always install `yak-swc` and `@swc/core` versions recommended by the `next-yak` documentation or ensure compatibility using their provided compatibility tables.

affects: >=1.0.0

gotchaProjects using a custom Babel configuration will automatically opt-out of the SWC compiler in Next.js, preventing `yak-swc` from being utilized.

fix

Remove `.babelrc` or `babel.config.js` files to ensure Next.js uses SWC as the default compiler. Consider migrating Babel-specific transforms to SWC equivalents.

affects: >=1.0.0

gotchaOlder versions of `yak-swc` (prior to 9.4.1) could cause React Fast Refresh to trigger full page reloads for styled-only files, impacting development experience.

fix

Upgrade to `yak-swc@9.4.1` or newer to fix React Fast Refresh issues related to styled components by correctly renaming internal component functions.

affects: <9.4.1

gotchaDynamic computed member access in runtime expressions (e.g., `SIZES[size].width`) could lead to a 'Could not parse member expression' error in versions prior to 9.4.0.

fix

Update to `yak-swc@9.4.0` or later to resolve false parsing errors for complex dynamic member expressions within styled components.

affects: <9.4.0

gotchaVite builds could hang when using multi-environment configurations with `yak-swc` in versions prior to 9.4.1.

fix

Upgrade to `yak-swc@9.4.1` to fix issues with Vite build processes hanging during multi-environment builds.

affects: <9.4.1

Errors

Common errors & fixes

Error: SWC plugin version unmatched. Please ensure your SWC plugin matches the swc_core version.

The installed `yak-swc` version is incompatible with the `@swc/core` version in your project.

fix

Check the `next-yak` documentation or compatibility tables for `yak-swc` and `@swc/core` to install matching versions. Typically, upgrading both to their latest compatible versions resolves this.

Could not parse member expression

Using dynamic computed member access (e.g., `SIZES[size].width`) within `next-yak` styled components with an older `yak-swc` version.

fix

Update `yak-swc` to version 9.4.0 or newer to correctly handle dynamic member expressions during compilation.

React Fast Refresh causes full page reload for styled files

An internal naming conflict in `yak-swc` leading to improper Fast Refresh behavior for components defined purely with `next-yak` styles.

fix

Upgrade to `yak-swc@9.4.1` or later, which includes a fix for React Fast Refresh full page reloads by renaming the internal component function.

Upgrade

Version history

9.4.1latest on npm

Audit

Dependencies

@swc/corerequiredyak-swc is a plugin for SWC and requires a compatible version of @swc/core to function correctly.

next-yakrequiredyak-swc is specifically designed to compile the CSS-in-JS syntax used by the next-yak library. It has no functionality without next-yak code to process.

Agent activity

17 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/DigitecGalaxus/next-yak ↗

packagehttps://www.npmjs.com/package/yak-swc ↗

homepagehttps://yak.js.org/ ↗