GoogleChromeLabs / postcss-jit-props

A CSS custom property helper based on PostCSS. Supply a pool of variables and this plugin will add them to the stylesheet as they are used.
https://stackblitz.com/edit/jit-open-props?file=postcss.config.js
Apache License 2.0
210 stars 9 forks source link

improvement: merge :root rules, implements #16 #39

Open mod3x opened 1 year ago

mod3x commented 1 year ago

Hi. This PR is an attempt to resolve issue #16. Currently, it merges :root rules in the OnceExit listener when all mutations are completed. However, I'm concerned that this solution may be too simplistic. Additionally, I've only added one test case, which I don't think is enough. Let's discuss this further and try to find a better solution. Thank you.

argyleink commented 1 year ago

interesting strategy of consolidation as a post processing step. i had assumed a "resume state" strategy would be best, like finding an existing :root context and using it instead of making a new one PLUS cataloging already inserted props for cross referencing before inserting. but this probably works just as good, and maybe has some advantages because it shows up at the end after the entirety of props have been placed. worth exploring further, thanks for sharing!

some additional test ideas:

  1. "No prop is added if it already exists":
    A test where :root already has the prop that's being used, so the plugin should essentially do nothing.
  2. "Shouldn't consolidate :roots that it didnt append into":
    A test that makes sure this consolidation effort doesn't leak outside it's responsibilities. Maybe "merge roots" is a plugin all of it's own?
  3. "Can consolidate to the specified custom selector":
    should still consolidate/resume/aggregate for users using a custom selector.

Seems clear that a "understand the state of the world for custom props in this project" is important for this functionality. Either doing that up front or as a post process. Thanks for hackin on this, let me know how else I can provide some assistance 🙂