mnwa / css-minify

Rust driven css minifier

Hello there

A little bit stats about me

How to reach me

• Email: [email protected]
• Telegram: @Mnwamnowich

css-minify's Issues

Pseudo-class incorrect remove of spaces

css-minify=0.3.1 optimization=1

input:

        .some-effect :lang(zh) {
            color: blue;
        }

output:

.some-effect:lang(zh){color:blue}

They are not equivalent.

<div class="some-effect">
    <span lang="zh">
            Only valid in case 1
    </span>
</div>

<div class="some-effect" lang="zh">
Only valid in scenario 2
</div>

css-minify=0.2.2

No problem about this.

panic on invalid color value

use css_minify::optimizations::{Minifier, Level};
fn main() {
	let _ = std::hint::black_box(
		Minifier::default().minify("*{color:#f}", Level::Three)
	);
}

thread 'main' panicked at 'byte index 4 is out of bounds of `#f`', /home/sarpnt/.local/share/cargo/registry/src/github.com-1ecc6299db9ec823/css-minify-0.3.1/src/optimizations/color.rs:27:12

issue is here, you should instead use get which doesn't panic. you might want to check other cases of indexing in your code too and ensure they don't have a chance of panicking either.

All three level optimisations produce invalid color values

All three level optimisations turned color: rgb(4, 120, 87); into color: #47857;

Storing declarations as a map results in a "dangerous" optimization in level 0

Take the following CSS code:

.test::after {
  content: url("./image.jpg");
  content: url("./image.jpg") / "Some alt text";
}

The second declaration in the block is a valid value for the content CSS property, at least according to the CSS Content Level 3 specification (see here in MDN), but it is only supported in Chromium browsers, and not in Firefox or Safari.

Declaring the content property twice in the same block achieves backwards compatibility for browsers that don't support the newer syntax for that property, since a declaration which doesn't have correct syntax for the given property will be ignored. Therefore, Firefox and Safari will use url("./image.png") as the value of the content property, and Chromium browsers will use url("./image.png") / "Some alt text".

css-minify, however, stores the CSS declarations in a block as a map from CSS properties to a single value, which means only the latter value is stored in the map. Therefore, even with level 0, the result of minification is:

.test:after {content:url("./image.jpg") / "Some alt text"}

which behaves differently from the original CSS.

CSS compress incorrect when both set `background-color` and `background-image`

Raising from: wilsonzlin/minify-html#132

Optimization level >= 2

Raw css:

        body {
            background-color: #3cb03c;
            background-image: linear-gradient(45deg, limegreen 25%, transparent 25%, transparent 75%, limegreen 75%), linear-gradient(-45deg, limegreen 25%, transparent 25%, transparent 75%, limegreen 75%);
            background-size: 128px 128px;
            background-attachment: fixed;
        }

Output css: (has been reformated)

    body {
        background: #3cb03c;
        background-size: 128px 128px
    }

It seem that background-color replace background-image, but them can be set both.

https://css-tricks.com/css-basics-using-multiple-backgrounds

Error when minifying `content: ";";`

Trying to minify this snippet: ::after { content: ";"; } fails with the error:The following snippet: MError { message: "Invalid block at line 1", error: "\"::after { content: \\\";\\\"; }\"" }. Replacing the content to another character makes the error disappear.

css-minifier fails to build due to clap changes

Clap updated it's derive macro and use modules slightly.

forked and fixed it already since it was just changing some names.
#4

Pseudo-element selectors improperly minified

It seems that psuedo-element selectors aren't being properly minified. Essentially, any selectors that begin with :: get the double colons minified to a single one :, which changes / invalidates the selector.

I came across this when using the ::backdrop psuedo-element. I would expect the following:

dialog::backdrop {
  backdrop-filter: blur(4px);
}

to minify down to:

dialog::backdrop{backdrop-filter:blur(4px)}

however, it instead minifies down to:

dialog:backdrop {backdrop-filter:blur(4px)}

(note the single :, which makes the selector not work at all. This happens across all of the optimization levels (Zero included).

Support pseudo classes without selector

Hi,

yesterday I raised this issue.

It seems that css-minify is causing the problem:

It should be possibe to use a pseudo class without a selector, e.g. :is() instead of *:is().

/* Original CSS (without `*` selector) */
:is(nav, .posts) a {
	text-decoration: none;
}

/* Minified CSS (error) */
:is(nav{text-decoration:none}

/* Original CSS (with `*` selector) */
:is(nav, .posts) a {
	text-decoration: none;
}

/* Minified CSS (correct) */
*:is(nav,.posts) a{text-decoration:none}

Thank you very much!