0.1.3 • Published 7 months ago
vite-join-media-queries v0.1.3
vite-join-media-queries
About
This library is needed to optimize the css bundle in applications that use vite.
input.css
div {
width: 100px;
}
@media (max-width: 1200px) {
div {
width: 100px;
}
}
p {
color: red;
}
@media (max-width: 1200px) {
p {
color: blue;
}
}
output.css
div {
width: 100px;
}
p {
color: red;
}
@media (max-width: 1200px) {
div {
width: 100px;
}
p {
color: blue;
}
}
Install
npm
npm install vite-join-media-queries --save-dev
yarn
yarn add vite-join-media-queries --dev
Usage
/vite.config.js
import viteJoinMediaQueries from 'vite-join-media-queries';
export default defineConfig({
plugins: [
viteJoinMediaQueries({
paths2css: Array<string>,
cssnanoConfig: object,
}),
],
});
Defaults:
- paths2css:
['./dist/assets']
- cssnanoConfig:
{ preset: 'default' }
Side Effects
Rearranging css rules can (with a bad strategy for organizing CSS code in a project) lead to unexpected consequences. Therefore, it is recommended to enable this plugin during development, and not just when building before deploying. See more here.