https://github.com/windicss/postcss-windicss
PostCSS integrations for Windi CSS
https://github.com/windicss/postcss-windicss
postcss postcss-plugin windicss
Last synced: 3 months ago
JSON representation
PostCSS integrations for Windi CSS
- Host: GitHub
- URL: https://github.com/windicss/postcss-windicss
- Owner: windicss
- License: mit
- Created: 2021-04-01T09:39:42.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-31T03:43:38.000Z (over 3 years ago)
- Last Synced: 2025-06-11T15:38:34.818Z (4 months ago)
- Topics: postcss, postcss-plugin, windicss
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/postcss-windicss
- Size: 256 KB
- Stars: 35
- Watchers: 4
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# postcss-windicss
[](https://www.npmjs.com/package/postcss-windicss)
> 🧪 Experimental.
> ⚠️ 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.
## Installation
Install `postcss-windicss` from NPM
```bash
npm i -D postcss-windicss
```
Create `postcss.config.js` under your project root.
```js
// postcss.config.js
module.exports = {
plugins: {
'postcss-windicss': {
/* Options */
},
},
}
```
Add `@windicss` to your main css entry:
```css
/* main.css */
@windicss;
```
Create `windi.config.js` / `windi.config.ts` under your project root with the following configurations
```js
// windi.config.js
import { defineConfig } from 'windicss/helpers'
export default defineConfig({
extract: {
include: ['src/**/*.{html,vue,jsx,tsx,svelte}'],
},
/* ... */
})
```
And enjoy!
## Configuration
You can pass options to the plugin by
```js
// postcss.config.js
module.exports = {
plugins: {
'postcss-windicss': {
config: 'path/to/windi.config.js', // by default it will try to find it in your project root
}
}
}
```
The full configuration options can be found [here](https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts)
## Dev / Build modes
`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.
If the tool you use does not infer it to you, you can always set them explicitly by
```bash
cross-env NODE_ENV=production npm run build # production mode
cross-env NODE_ENV=development npm run build # development mode
```
## Touch Mode
By default, this plugin "touches" your css entry by updating the file's "updated time" (utime) to trigger the hot reload without changing its content.
It 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.
```js
// postcss.config.js
module.exports = {
plugins: {
'postcss-windicss': {
touchMode: 'insert-comment' // <--
}
}
}
```
## Progress
### Features
- [x] Build
- [x] Hot reload
- [x] Inline class utilities
- [x] Load TypeScript / ESM configure
- [x] `@apply` `@screen` `@variants` `theme()`
- [ ] `@layer`
- [ ] "Design in DevTools"
- [ ] Variant Groups (probably not possible)
### Frameworks
Currently tested on
- [x] Vite
- [x] Webpack
- [x] Snowpack
Feel free to add more if you got it working on other tools/frameworks!
#### Integrations
- [@leanup/stack](https://leanupjs.org)
## Sponsors
## License
[MIT](./LICENSE) License © 2021 [Anthony Fu](https://github.com/antfu)