Implement a SCSS `@apply` equivalent about girouette HOT 6 CLOSED

@jacobobryant You can use the branch garden-comp as a base for your PR.

from girouette.

Hoping to get to this in the next couple days FYI!

from girouette.

Not having dug into the code base much, I wrote this as a naive solution:

(declare class-name->garden)

(def apply-classes
  '{btn [p-3 bg-rgba-343a40ff text-white rounded]})

(def apply-components
  (vec
    (for [[from to] apply-classes]
      {:id (keyword from)
       :rules (str "\n" from " = <'" from "'>\n")
       :garden (fn [_]
                 (->> to
                   (map (comp second class-name->garden str))
                   (reduce merge)))})))

So far I don't see any situation in which this wouldn't work, as long as you don't do '{foo [foo]} ;)

from girouette.

Actually this doesn't work for state variants. would there be a simple way to make this approach work? e.g. for '{foo [hover:bg-red-200 ...]} somehow let the garden fn return [[:&:hover {:--gi-bg-opacity 1, :background-color "rgba(254,202,202,var(--gi-bg-opacity))"}] ...] instead of just {:--gi-bg-opacity 1, :background-color "rgba(254,202,202,var(--gi-bg-opacity))" ...} ?

In the mean time I'm defining a separate class for the hover state:

[:button.btn.hover:btn-hover ...

(def apply-classes
  '{btn [...]
    btn-hover [...]})

...

                 (->> to
                   (map (comp second class-name->garden str))
                   (filter map?)  ; <- added this line
                   (reduce merge)))})))

from girouette.

I think that this apply function should operate directly on garden-data structures. No need to involve Girouette's grammar into the process.

I will write a small API and some tests in a separated branch which should be the base code for this feature. Ideally, it should have no dependency on Girouette and could hypothetically be moved to the Garden project.

from girouette.

Oh good point, that does seem like obviously the best way to do it.

from girouette.