Ever since https://github.com/intuit/postcss-themed/pull/48 was merged, the theme cascading logic isn't working as expected because the corresponding classes aren't being generated. Certain values are triggering the correct classes to be created; if we revert the value - the changes are reflected properly, which shouldn't be the case. It seems to be an issue with the value being compared to other themes and postcss-themed not knowing to create those theme-specific classes.
For now, we've isolated this occurrence to dark mode, as the theme does update properly in light mode.
To Reproduce
Update the value for an object, see that the object's value has updated, but postcss-themed isn't generating the right class associated with that theme, meaning the styling doesn't get applied. Using the VS Code snippet to preview token values in the CSS file, you can see the correct values (meaning the import is working), just that it's failing to apply them.
Expected behavior
If an object value is different from a theme, generate a class for that theme and apply that theme-specific value.
Screenshots
Desktop (please complete the following information):
OS: [e.g. iOS]
Browser [e.g. chrome, safari]
Version [e.g. 22]
Additional context
Reverting the postcss-themed version resolved the issue, but this means we can't use objects in our CSS files to reference design tokens until this is resolved.
kharrop
commented
3 years ago
Describe the bug
Ever since https://github.com/intuit/postcss-themed/pull/48 was merged, the theme cascading logic isn't working as expected because the corresponding classes aren't being generated. Certain values are triggering the correct classes to be created; if we revert the value - the changes are reflected properly, which shouldn't be the case. It seems to be an issue with the value being compared to other themes and
postcss-themednot knowing to create those theme-specific classes.For now, we've isolated this occurrence to
darkmode, as the theme does update properly inlightmode.To Reproduce
Update the value for an object, see that the object's value has updated, but
postcss-themedisn't generating the right class associated with that theme, meaning the styling doesn't get applied. Using the VS Code snippet to preview token values in the CSS file, you can see the correct values (meaning the import is working), just that it's failing to apply them.Expected behavior
If an object value is different from a theme, generate a class for that theme and apply that theme-specific value.
Screenshots
Desktop (please complete the following information):
Additional context
Reverting the postcss-themed version resolved the issue, but this means we can't use objects in our CSS files to reference design tokens until this is resolved.