Better SCSS minification

[Kristijan]

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?

[Nikola Hristov]

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.

[Kristijan]

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

[Nikola Hristov]

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,
			},
		}),
	],
});

[Nikola Hristov]

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