Case studies: Two color management plugins for PostCSS
summary
Two concrete PostCSS plugins: a tiny replaces one color with another utility (about 9 lines of code) that uses a color-conversion library and css-tree parsing to match keywords, hex, rgb/hsla and handle shortened properties, and a production color theme generator that clones rules by BEM modifiers, maps theme cases, converts colors to HSL and applies a lightness delta (example 20%) to produce lighter/darker variants. Implementation uses PostCSS and CSSTree, runs in production, supports IE10/11 by emitting static CSS and emits warnings for inconsistent modifier styles.
AI-written summary · about
chapters (14)
- 0:00Introduction
- 0:37PostCSS
- 2:18Other useful plugins
- 5:45Removing media queries
- 8:40PostCSS documentation
- 14:30Visitor Pattern
- 16:25Relative Values
- 18:19Brand Colors
- 22:05Code
- 24:22Side effects
- 26:40Solution
- 28:24IcedTea Explorer
- 29:36Conclusion
- 30:06Questions
