search

css / csso

CSS minifier with structural optimizations
https://css.github.io/csso/csso.html
MIT License
3.75k stars 188 forks source link

csso v5 whitespace might be broken #447

Closed barak007 closed 2 years ago

barak007 commented 2 years ago

input

.foo { border: 1px solid "PLACEHOLDER"; }

I know that in this example the value of border is not valid css value. But in our case we have a post-process that will replace the "PLACEHOLDER" with a real value later and in the new version of csso it removes the space before the "

it will become 

.foo { border: 1px solid"placeholder"; }

I know it's related to css-tree upgrade, any chances that we could preserve this space?

lahmatiy commented 2 years ago

I won't to change the behaviour, since that's a valid CSS in the most compact form what is the main purpose of CSSO. I'm sorry this breaks your scenario and is inconvenient in your case. However, your approach looks unstable to me and could be improved.

It's expected that CSSO should be last in a CSS transformation pipeline. Any placeholder substitutions should be applied before a minification since things like "PLACEHOLDER" in a property value makes it invalid which breaks the analysis and optimisations. CSSO uses the CSS syntax definitions to determine which part of the value is responsible for what, whether it can be transformed. For instance, border: 1px solid black will be transformed in border:1px solid#000. With a placeholder CSSO will not transform black to #000 since unable to understand a value and determine that black is a color.

As a workaround, you can use comments or whitespaces around a real values. I have not found where you perform placeholder substitution in CSS, but I saw that you add comments when substituting values in JavaScript source. I hope it will work for you.

barak007 commented 2 years ago

I totally understand that and aware of the limitations. That system is very old and I will find a workaround. I just wanted to make sure I don't miss any flag or no flag will be add from your side. Keep it spec safe.

lahmatiy commented 2 years ago

Currently CSSTree generator has 2 modes for output: spec and safe. First one is spec compliant, but an output might not work in old browsers. That's why safe mode was added (it adds extra whitespaces which makes output safe for IE11) and used by default. I see that output is confusing for users, even it's by spec and works in browsers. So I'm going to add a mode like pretty to CSSTree, to make output more common for users. Once it will be added, I will add an option to CSSO to choose a mode. Unfortunately, I can nothing about ETA for this feature.