https://github.com/luncheon/esbuild-plugin-windicss
An unofficial and experimental esbuild plugin for Windi CSS.
https://github.com/luncheon/esbuild-plugin-windicss
esbuild esbuild-plugin tailwindcss windicss
Last synced: about 2 months ago
JSON representation
An unofficial and experimental esbuild plugin for Windi CSS.
- Host: GitHub
- URL: https://github.com/luncheon/esbuild-plugin-windicss
- Owner: luncheon
- License: wtfpl
- Created: 2021-04-01T20:45:50.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-08-24T03:15:42.000Z (about 2 years ago)
- Last Synced: 2024-05-30T16:51:19.507Z (over 1 year ago)
- Topics: esbuild, esbuild-plugin, tailwindcss, windicss
- Language: JavaScript
- Homepage:
- Size: 65.4 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# esbuild-plugin-windicss
An unofficial and experimental [esbuild](https://esbuild.github.io/) plugin for [Windi CSS](https://windicss.org/).
This plugin uses [@babel/parser](https://babeljs.io/docs/en/babel-parser) to extract string literals from source code.
## Limitations
- [Attributify Mode](https://windicss.org/posts/attributify.html) is not supported.
## Installation
```sh
$ npm i -D esbuild @luncheon/esbuild-plugin-windicss
```
## Usage Example
- build.js
```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
```tsx
let green = false
document.body.className = `mx-4 sm:m-auto ${green ? 'bg-green-300' : 'bg-red-300'}`
```
Run build.js
```sh
$ node build.js
```
Then two files will be output
- dist/app.js
```js
(()=>{var s=!1;document.body.className=`mx-4 sm:m-auto ${s?"bg-green-300":"bg-red-300"}`;})();
```
- dist/app.css
```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.
```js
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`](https://github.com/nativew/esbuild-plugin-pipe), pass the same plugin instance to both `esbuild-plugin-pipe` and `esbuild`.
```js
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](http://www.wtfpl.net/)