esbuild-plugin-windicss

An unofficial and experimental esbuild plugin for Windi CSS.
This plugin uses @babel/parser to extract string literals from source code.

Limitations

• Attributify Mode is not supported.

Installation

$ npm i -D esbuild @luncheon/esbuild-plugin-windicss

Usage Example

• build.js

const esbuild = require('esbuild')
const windiCssPlugin = require('@luncheon/esbuild-plugin-windicss')

esbuild.build({
  entryPoints: ['src/app.ts'],
  outdir: 'dist',
  bundle: true,
  minify: true,
  plugins: [
    windiCssPlugin({ windiCssConfig: { prefixer: false } }),
  ],
})

• src/app.ts

let green = false
document.body.className = `mx-4 sm:m-auto ${green ? 'bg-green-300' : 'bg-red-300'}`

Run build.js

$ node build.js

Then two files will be output

• dist/app.js

(()=>{var s=!1;document.body.className=`mx-4 sm:m-auto ${s?"bg-green-300":"bg-red-300"}`;})();

• dist/app.css

.bg-green-300{--tw-bg-opacity:1;background-color:rgba(110,231,183,var(--tw-bg-opacity))}.bg-red-300{--tw-bg-opacity:1;background-color:rgba(252,165,165,var(--tw-bg-opacity))}.mx-4{margin-left:1rem;margin-right:1rem}@media (min-width: 640px){.sm\:m-auto{margin:auto}}

Options

The following are the options for this plugin and their default values.

windiCssPlugin({
  filter: /\.[jt]sx?$/,
  babelParserOptions: {
    errorRecovery: true,
    allowAwaitOutsideFunction: true,
    allowImportExportEverywhere: true,
    allowReturnOutsideFunction: true,
    allowSuperOutsideMethod: true,
    allowUndeclaredExports: true,
    tokens: true,
    plugins: ['jsx', 'typescript', 'topLevelAwait'],
  },
  windiCssConfig: undefined,
})

• filter is an option for esbuild to narrow down the files to which this plugin should be applied.
  https://esbuild.github.io/plugins/#filters
• babelParserOptions is passed to the @babel/parser.
  https://babeljs.io/docs/en/babel-parser
• windiCssConfig is passed to the Windi CSS API.
  https://github.com/windicss/windicss/blob/main/src/interfaces.ts#:~:text=export%20interface%20Config

With esbuild-plugin-pipe

If you use this plugin with esbuild-plugin-pipe, pass the same plugin instance to both esbuild-plugin-pipe and esbuild.

import esbuild from 'esbuild'
import pipe from 'esbuild-plugin-pipe'
import windiCssPlugin from '@luncheon/esbuild-plugin-windicss'

const windiCss = windiCssPlugin({
  filter: /^$/,
  windiCssConfig: { prefixer: false },
})

esbuild.build({
  entryPoints: ['src/app.ts'],
  outdir: 'dist',
  bundle: true,
  minify: true,
  plugins: [
    pipe({
      filter: /\.[jt]sx?$/,
      plugins: [windiCss],
    }),
    windiCss,
  ],
})

License

WTFPL