{"id":28541472,"url":"https://github.com/windicss/postcss-windicss","last_synced_at":"2025-07-07T15:31:18.197Z","repository":{"id":39612505,"uuid":"353648597","full_name":"windicss/postcss-windicss","owner":"windicss","description":"PostCSS integrations for Windi CSS","archived":false,"fork":false,"pushed_at":"2022-05-31T03:43:38.000Z","size":262,"stargazers_count":35,"open_issues_count":4,"forks_count":3,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-06-11T15:38:34.818Z","etag":null,"topics":["postcss","postcss-plugin","windicss"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/postcss-windicss","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/windicss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["antfu"]}},"created_at":"2021-04-01T09:39:42.000Z","updated_at":"2024-01-04T16:56:23.000Z","dependencies_parsed_at":"2022-08-31T08:01:05.378Z","dependency_job_id":null,"html_url":"https://github.com/windicss/postcss-windicss","commit_stats":null,"previous_names":["antfu/postcss-windicss"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/windicss/postcss-windicss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/windicss%2Fpostcss-windicss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/windicss%2Fpostcss-windicss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/windicss%2Fpostcss-windicss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/windicss%2Fpostcss-windicss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/windicss","download_url":"https://codeload.github.com/windicss/postcss-windicss/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/windicss%2Fpostcss-windicss/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260951294,"owners_count":23087661,"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":["postcss","postcss-plugin","windicss"],"created_at":"2025-06-09T20:08:45.866Z","updated_at":"2025-07-07T15:31:18.190Z","avatar_url":"https://github.com/windicss.png","language":"TypeScript","funding_links":["https://github.com/sponsors/antfu"],"categories":[],"sub_categories":[],"readme":"# postcss-windicss\n\n[![NPM version](https://img.shields.io/npm/v/postcss-windicss?color=a1b858\u0026label=)](https://www.npmjs.com/package/postcss-windicss)\n\n\u003e 🧪 Experimental.\n\n\u003e ⚠️ Using this package is **discouraged** as there are some limitations of PostCSS's API. Use our [first-class integrations](https://next.windicss.org/guide/installation.html) for each dedicated framework/build tool to get the best developer experience and performance. This plugin should be your last option to use Windi CSS.\n\n## Installation\n\nInstall `postcss-windicss` from NPM\n\n```bash\nnpm i -D postcss-windicss\n```\n\nCreate `postcss.config.js` under your project root.\n\n```js\n// postcss.config.js\nmodule.exports = {\n  plugins: {\n    'postcss-windicss': {\n      /* Options */\n    },\n  },\n}\n```\n\nAdd `@windicss` to your main css entry:\n\n```css\n/* main.css */\n@windicss;\n```\n\nCreate `windi.config.js` / `windi.config.ts` under your project root with the following configurations\n\n```js\n// windi.config.js\nimport { defineConfig } from 'windicss/helpers'\n\nexport default defineConfig({\n  extract: {\n    include: ['src/**/*.{html,vue,jsx,tsx,svelte}'],\n  },\n  /* ... */\n})\n```\n\nAnd enjoy!\n\n## Configuration\n\nYou can pass options to the plugin by\n\n```js\n// postcss.config.js\nmodule.exports = {\n  plugins: {\n    'postcss-windicss': {\n      config: 'path/to/windi.config.js', // by default it will try to find it in your project root\n    }\n  }\n}\n```\n\nThe full configuration options can be found [here](https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts)\n\n## Dev / Build modes\n\n`postcss-windicss` has two different modes, one for incremental dev serving and one for a one-time production build. It's based on your `process.env.NODE_ENV` value.\n\nIf the tool you use does not infer it to you, you can always set them explicitly by\n\n```bash\ncross-env NODE_ENV=production npm run build # production mode\ncross-env NODE_ENV=development npm run build # development mode\n```\n\n## Touch Mode\n\nBy default, this plugin \"touches\" your css entry by updating the file's \"updated time\" (utime) to trigger the hot reload without changing its content.\n\nIt should work most of the time. But for some tools, they might also compare the file's content to avoid unnecessary hot reloads. In that cases, you will need to specify `touchMode` to `insert-comment` to get proper style updates with those tools.\n\n```js\n// postcss.config.js\nmodule.exports = {\n  plugins: {\n    'postcss-windicss': {\n      touchMode: 'insert-comment' // \u003c--\n    }\n  }\n}\n```\n\n## Progress\n\n### Features\n\n- [x] Build\n- [x] Hot reload\n- [x] Inline class utilities \n- [x] Load TypeScript / ESM configure\n- [x] `@apply` `@screen` `@variants` `theme()`\n- [ ] `@layer` \n- [ ] \"Design in DevTools\"\n- [ ] Variant Groups (probably not possible)\n\n### Frameworks\n\nCurrently tested on \n\n- [x] Vite\n- [x] Webpack\n- [x] Snowpack\n\nFeel free to add more if you got it working on other tools/frameworks!\n\n#### Integrations\n\n- [@leanup/stack](https://leanupjs.org)\n\n## Sponsors\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg\"\u003e\n    \u003cimg src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg'/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## License\n\n[MIT](./LICENSE) License © 2021 [Anthony Fu](https://github.com/antfu)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwindicss%2Fpostcss-windicss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwindicss%2Fpostcss-windicss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwindicss%2Fpostcss-windicss/lists"}