fix(atomic): fix duplication of the same css properties in the same file #972
Conversation
| @@ -307,7 +307,7 @@ export default function getTemplateProcessor( | |||
| } | |||
| const atomicRules = atomize(cssText); | |||
| atomicRules.forEach((rule) => { | |||
| state.rules[rule.property] = { | |||
| state.rules[rule.cssText] = { | |||
There was a problem hiding this comment.
@jpnelson great catch! I spotted this issue whilst working on the styled PR (I thought it wasn't affecting css, my bad) – and it seemed fixed when using rule.className as the key (as atomizeFn already creates a unique key for the rule).
is the reason you prefer cssText (eg. .atm_gi_yh40bf{margin:2px;}) over className (eg. atm_gi_yh40bf) because className can be null on certain cases (@keyframes only, right?)
|
Hi @jpnelson! |
|
Btw, I'm in the process of big refactoring of shaker and during this refactoring I've replaced Lerna with Turborepo, and that's dramatically increased the speed of (pre-commit) checks, so when I finish it, you won't be needed to skip them anymore :) |
Motivation
This fixes a bug I discovered where the same property is getting overriden by other css in the same file. Test case provided for the scenario that's failing
Summary
Relatively simple fix – this just uses the CSS text itself as a key in the metadata to ensure that it's unique per rule + declaration, between declarations too.
Test plan
Fixed with a snapshot test