Minifier: Drop Redundant Doubled Properties?

[karlhorky]

Hi @devongovett ! 👋 First of all, thanks for all of your effort on this, really amazing for the community to have such a great tool!

I was looking for a feature of @parcel/css that would allow for removal of duplicate properties.

For example:

Input

div {
  color: green;
  color: red;
}

@parcel/css Output (Playground Link)

div{color:green;color:red}

Expected Output

div{color:red}

However, it could be a problem with my understanding of the CSS spec somehow, because I see that some duplicated properties do indeed get dropped:

Input

div {
  background: green;
  background: red;
}

@parcel/css Output (Playground Link)

div{background:red}

[devongovett]

Yeah, some properties are specially handled. For example, the background property is a shorthand, so it gets special treatment. At the moment, other properties are just passed straight through. We could probably do something here, but not sure how often duplicate properties are found in real-world code.

[karlhorky]

Ok, understood, thanks for the answer.

If this is not something that has a high likelihood of being addressed, then feel free to close too.

[deckchairlabs]

Delcaring props twice is usually used for fallbacks to supported values, for instance if a browser doesn't support CSS variables. Would probably need to be driven by browserlists targets.

.foo {
  color: red; /* fallback */
  color: var(--red);
}

[karlhorky]

Good point, I didn't think about fallbacks!

I was thinking more in terms of mistakes that developers would make that somehow made it through linting and code review. But as @devongovett mentioned, maybe that's not as common.

[deckchairlabs]

@karlhorky Perhaps it can be a flag for the CLI that enables warnings about duplicate properties?

[devongovett]

I do think it would be pretty awesome if someone made a linter on top of Parcel CSS. Since every property is fully parsed, it might enable some really cool things.

As for fallbacks, we do handle that somewhat already. Example

[Commandtechno]

This could be a really cool feature especially for bundling with styles from dependencies!

How clean-css handles it: