next-plugin-vanilla-extract

vanilla-extract is a CSS-in-JS compiler that writes styles in TypeScript (or JavaScript) using locale-scoped class names and CSS variables, then generates static CSS files at build time.

@syfxlin/next-plugin-vanilla-extract is a alternative plugin for @vanilla-extract/next-plugin that fixes @vanilla-extract/next-plugin's inability to generate CSS files for React Server Components on Windows. (vanilla-extract-css/vanilla-extract#1086)

Motivation

vanilla-extract does provide a Next.js plugin, but I'm having problems with the build not outputting CSS on Windows (vanilla-extract-css/vanilla-extract#1086). To get it to work correctly you need to use Client Component, or use Linux/macOS instead of Windows.

@vanilla-extract/next-plugin uses virtualFileLoader to collect styles and write them to virtual modules during compilation, and then MiniCssExtractPlugin extracts these virtual CSS files. So I did a simple analysis, modified the implementation of virtualFileLoader to write the styles to the actual CSS file and replaced the import statement (here), and was surprised to find that the styles were output just fine, so the problem was in the virtualFileLoader.

Sukka had a similar problem with style9-webpack (here) and created a similar virtualFileLoader solution. Next.js removes the resource matching query (!=!) and the inline loader (!virtual-file-loader.js?{}!), so you need to pass the virtual CSS file directly to noop.css, and then extract the virtual CSS file from noop.css via a loader like this:

import "noop.css?{ filename, source }"

I started this project as a proof-of-concept, based on @vanilla-extract/next-plugin, to see if it would solve the vanilla-extract-css/vanilla-extract#1086 issue.

This is a temporary solution, if you are not developing on Windows or have not encountered similar problems, use @vanilla-extract/next-plugin. but if you are using Next.js 13 App Directory and are having problems with @vanilla-extract/next-plugin, you can try @syfxlin/next-plugin-vanilla-extract.

Installation

# NPM
npm i -D @syfxlin/next-plugin-vanilla-extract
# Yarn
yarn add -D @syfxlin/next-plugin-vanilla-extract
# PNPM
pnpm add -D @syfxlin/next-plugin-vanilla-extract

Usage

// next.config.js
const { createVanillaExtractPlugin } = require("@syfxlin/next-plugin-vanilla-extract");
const withVanillaExtract = createVanillaExtractPlugin();

/** @type {import('next').NextConfig} */
const config = {
  // Your Next.js config goes here.
};

module.exports = withVanillaExtract(config);

Notes:

• Currently, it is not compatible with ESM, so please use CJS. I am looking for solutions to fix ESM compatibility issue.

Maintainer

@syfxlin/next-plugin-vanilla-extract is written and maintained with the help of Otstar Lin and the following contributors.

License

Released under the MIT License.