{"id":23274313,"url":"https://github.com/luncheon/esbuild-plugin-windicss","last_synced_at":"2025-08-21T06:31:56.050Z","repository":{"id":81428713,"uuid":"353822606","full_name":"luncheon/esbuild-plugin-windicss","owner":"luncheon","description":"An unofficial and experimental esbuild plugin for Windi CSS.","archived":false,"fork":false,"pushed_at":"2023-08-24T03:15:42.000Z","size":67,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-30T16:51:19.507Z","etag":null,"topics":["esbuild","esbuild-plugin","tailwindcss","windicss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"wtfpl","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/luncheon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-01T20:45:50.000Z","updated_at":"2023-08-23T09:48:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"2aa23c00-1ebf-456a-8450-2e8d89decc22","html_url":"https://github.com/luncheon/esbuild-plugin-windicss","commit_stats":{"total_commits":14,"total_committers":1,"mean_commits":14.0,"dds":0.0,"last_synced_commit":"11fa00ca91fc490fc00dbc999dd7437280f80516"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luncheon%2Fesbuild-plugin-windicss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luncheon%2Fesbuild-plugin-windicss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luncheon%2Fesbuild-plugin-windicss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luncheon%2Fesbuild-plugin-windicss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luncheon","download_url":"https://codeload.github.com/luncheon/esbuild-plugin-windicss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230494926,"owners_count":18235047,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["esbuild","esbuild-plugin","tailwindcss","windicss"],"created_at":"2024-12-19T20:12:49.922Z","updated_at":"2024-12-19T20:12:50.464Z","avatar_url":"https://github.com/luncheon.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# esbuild-plugin-windicss\r\n\r\nAn unofficial and experimental [esbuild](https://esbuild.github.io/) plugin for [Windi CSS](https://windicss.org/).  \r\nThis plugin uses [@babel/parser](https://babeljs.io/docs/en/babel-parser) to extract string literals from source code.\r\n\r\n## Limitations\r\n\r\n- [Attributify Mode](https://windicss.org/posts/attributify.html) is not supported.\r\n\r\n## Installation\r\n\r\n```sh\r\n$ npm i -D esbuild @luncheon/esbuild-plugin-windicss\r\n```\r\n\r\n## Usage Example\r\n\r\n- build.js\r\n\r\n```js\r\nconst esbuild = require('esbuild')\r\nconst windiCssPlugin = require('@luncheon/esbuild-plugin-windicss')\r\n\r\nesbuild.build({\r\n  entryPoints: ['src/app.ts'],\r\n  outdir: 'dist',\r\n  bundle: true,\r\n  minify: true,\r\n  plugins: [\r\n    windiCssPlugin({ windiCssConfig: { prefixer: false } }),\r\n  ],\r\n})\r\n```\r\n\r\n- src/app.ts\r\n\r\n```tsx\r\nlet green = false\r\ndocument.body.className = `mx-4 sm:m-auto ${green ? 'bg-green-300' : 'bg-red-300'}`\r\n```\r\n\r\nRun build.js\r\n\r\n```sh\r\n$ node build.js\r\n```\r\n\r\nThen two files will be output\r\n\r\n- dist/app.js\r\n\r\n```js\r\n(()=\u003e{var s=!1;document.body.className=`mx-4 sm:m-auto ${s?\"bg-green-300\":\"bg-red-300\"}`;})();\r\n```\r\n\r\n- dist/app.css\r\n\r\n```css\r\n.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}}\r\n```\r\n\r\n## Options\r\n\r\nThe following are the options for this plugin and their default values.\r\n\r\n```js\r\nwindiCssPlugin({\r\n  filter: /\\.[jt]sx?$/,\r\n  babelParserOptions: {\r\n    errorRecovery: true,\r\n    allowAwaitOutsideFunction: true,\r\n    allowImportExportEverywhere: true,\r\n    allowReturnOutsideFunction: true,\r\n    allowSuperOutsideMethod: true,\r\n    allowUndeclaredExports: true,\r\n    tokens: true,\r\n    plugins: ['jsx', 'typescript', 'topLevelAwait'],\r\n  },\r\n  windiCssConfig: undefined,\r\n})\r\n```\r\n\r\n- `filter` is an option for esbuild to narrow down the files to which this plugin should be applied.  \r\n  https://esbuild.github.io/plugins/#filters\r\n- `babelParserOptions` is passed to the `@babel/parser`.  \r\n  https://babeljs.io/docs/en/babel-parser\r\n- `windiCssConfig` is passed to the Windi CSS API.  \r\n  https://github.com/windicss/windicss/blob/main/src/interfaces.ts#:~:text=export%20interface%20Config\r\n\r\n## With `esbuild-plugin-pipe`\r\n\r\nIf 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`.\r\n\r\n```js\r\nimport esbuild from 'esbuild'\r\nimport pipe from 'esbuild-plugin-pipe'\r\nimport windiCssPlugin from '@luncheon/esbuild-plugin-windicss'\r\n\r\nconst windiCss = windiCssPlugin({\r\n  filter: /^$/,\r\n  windiCssConfig: { prefixer: false },\r\n})\r\n\r\nesbuild.build({\r\n  entryPoints: ['src/app.ts'],\r\n  outdir: 'dist',\r\n  bundle: true,\r\n  minify: true,\r\n  plugins: [\r\n    pipe({\r\n      filter: /\\.[jt]sx?$/,\r\n      plugins: [windiCss],\r\n    }),\r\n    windiCss,\r\n  ],\r\n})\r\n```\r\n\r\n## License\r\n\r\n[WTFPL](http://www.wtfpl.net/)\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluncheon%2Fesbuild-plugin-windicss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluncheon%2Fesbuild-plugin-windicss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluncheon%2Fesbuild-plugin-windicss/lists"}