I'm using Vite as build tool.
Vite has an integrated postCSS config option that you can set in vite.config.js, so I'm using this to load cssNano as a plugin :
//vite.config.js
export default defineConfig({
//other config
css: {
postcss: {
plugins: [ cssnano ]
}
}
})
This works fine (minification, etc) as it is as cssNano uses the "default" configuration when loaded with no config.
"...Without configuration, cssnano runs with the default preset."
https://cssnano.co/docs/config-file/
The issue occurs when I want to use individual plugins/optimisation, particularly "discardDuplicates".(But I didn't test every optimisation on it's own)
eg:
//vite.config.js
import discardUnused from 'postcss-discard-unused';
import colormin from 'postcss-colormin';
import discardDuplicates from 'postcss-discard-duplicates';
export default defineConfig({
//other config
css: {
postcss: {
plugins: [
cssnano(
{
plugins: [discardUnused,colormin,discardDuplicates]
}),
]
}
}
})
In this code above, discardUnused and colormin works fine.
My unused @keyframes rule is discarded by discardUnused
as in the Docs (cssnano.co/docs/optimisations/discardunused/)\
and my background: hsl(134, 50%, 50%); rule is transformed into background: #40bf5e; by colormin
as in the Docs (https://cssnano.co/docs/optimisations/colormin/)\
But the duplicate selectors I use to test discardDuplicates (https://cssnano.co/docs/optimisations/discardduplicates/)
are not merged together.
May be I missed something (I'm kind of a newbie in js build tools), because everything works fine when I use the default CssNano preset.\
Input :
/** duplicate body for testing discardDuplicates **/
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
}
body {
/** hsl value for testing colormin **/
background: hsl(134, 50%, 50%);
}
/** unused keyframe for testing discardUnused **/
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
Expected Output :
/** duplicate body for testing discardDuplicates **/
body {
display:flex;
height:100vh;
margin:0;
padding:0;
background: #40bf5e;
}
/** unused keyframe for testing **/
Actual output :
/** duplicate body for testing discardDuplicates **/
body{
display:flex;
height:100vh;
margin:0;
padding:0;
}
body {
/** hsl value for testing colormin **/
background: #40bf5e;
}
/** unused keyframe for testing discardUnused **/