Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Vite usage included on README
  • Loading branch information
jonaswebdev committed Mar 14, 2023
commit c090f02e8e2fd3fe6ffc4c9f4dc280dc3b80e2df
45 changes: 45 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
- [Install](#install)
- [Usage with PostCSS](#usage-with-postcss)
- [Usage with Webpack](#usage-with-webpack)
- [Usage with Vite](#usage-with-vite)
- [Options](#options)
- [Maintainer](#maintainer)
- [Contribute](#contribute)
Expand Down Expand Up @@ -127,6 +128,50 @@ module: {
}
```


## Usage with Vite

Following the same way of Webpack but for Vite:

```js
import prefixer from 'postcss-prefix-selector';
import autoprefixer from 'autoprefixer';

...

export default defineConfig({
...
css: {
postcss: {
plugins: [
prefixer({
prefix: '.my-prefix',
transform(prefix, selector, prefixedSelector, filePath, rule) {
if (selector.match(/^(html|body)/)) {
return selector.replace(/^([^\s]*)/, `$1 ${prefix}`);
}

if (filePath.match(/node_modules/)) {
return selector; // Do not prefix styles imported from node_modules
}

const annotation = rule.prev();
if (annotation?.type === 'comment' && annotation.text.trim() === 'no-prefix') {
return selector; // Do not prefix style rules that are preceded by: /* no-prefix */
}

return prefixedSelector;
},
}),

autoprefixer({}) // add options if needed
],
}
},
...
});
```

## Options

| Name | Type | Description |
Expand Down