Better SCSS minification

[offbit-it]

Hi,

FIrst of all, thanks for creating this package, it is really helpful! I have one report/proposal for you in order to have better results in SCSS/CSS modification.

The "problem" which I am currently having is redundant styles. If I have two rules with different values, both rules will be present. For example:

p {
color: red;
}
p {
color: blue;
}

This is the result:

p{color:red}p{color:#00f}

It would be cool if overridden attributes would be excluded from output. Do you agree?

[NikolaRHristov]

Hi, no problem.

This package just wraps CSSO into a pipeline type component - https://github.com/css/csso. You can maybe check for the optimizations provided there.

[offbit-it]

Hmm, I guess that there are some problems with wrapping then. I tried this:

import { minify } from 'csso';
const minifiedCss = minify('.test { color: red; } .test { color: blue; }').css;
console.log(minifiedCss);

The output was: .test{color:#00f}

The csso is working properly

[NikolaRHristov]

AstroCompress runs CSSO with these options as defaults:

{
    clone: false,
    comments: false,
    forceMediaMerge: true,
    restructure: false,
}

Can you try replacing the restructure: false with true in your astro.config.ts file:

import Compress from "astro-compress";
import { defineConfig } from "astro/config";

export default defineConfig({
    integrations: [
        Compress({
            CSS: {
                restructure: true,
            },
        }),
    ],
});

[NikolaRHristov]

I don't remember why I turned those off but it probably broke some tailwind related styles.