CSS ordering/specificity is incorrect

[ericclemmons]

When replacing tailwind.css with benefit.css for https://github.com/tailwindcss/playground (https://epic-edison-761ca3.netlify.com/), things like md:pl-4 pl-0 don't behave as expected.

There are a couple things to address:

• css.js shouldn't sort classes at all when outputting them.
• Classes should be generated such that specific rules are added after generic rules. (e.g. .bg-white, then .sm:bg-blue, then .sm:bg-black:hover)
• styleWith should respect the ordering of classes from the above efforts, vs. emotion enforcing left-to-right prioritization.

[ericclemmons]

Confirmed fixing this corrects the CSS issue: classes are compiled in the order they're listed in Object.keys(utilities) (which is deterministic):

[ericclemmons]

Looking into the behavior when using styleWith now...

[ericclemmons]

Enforcing order with styleWith ea8a0f4

Notice how we see the reset class, the md:pl-16 class, and the pl-0 class.

There's a potential that, if these rules are called individually, then we can't guarantee that their order matches that of `utilities.

Enforcing order with cx 59a643b

This builds on ea8a0f4 in that, instead of concatenating strings, we pass it to cx to ensure that the rules are compiled in an order to ensure it's deterministic:

I feel that this version is the safest approach: changing order of utilities will be all that's necessary to enforce order.

[ericclemmons]

The most controversial part is b657408, where normalizeClass is removed from each utility.

We've discussed this before, and it seems with more & more examples that normalization per-class (or per-usage) is overkill, as it's attempting to neuter a cascade that doesn't exist (or that we would want via base.css).

My recommendation would be for "sandboxing" to be done via a flag (like important), or a isolateWith(...) version.

[ericclemmons]

Sweet!

• styleWith keeps original behavior.
• cx uses emotion's cx utility to enforce order & flattens classes down.
• normalization has been removed by default so it can be added in React land.

[cdonohue]

Love this! @ericclemmons just update the jest snapshots then we can merge this.

[ericclemmons]

I'm an idiot. Tests were passing until I added cx.

Didn't realize you had CodeShip!