search

sebastiaanvisser / clay

A CSS preprocessor as embedded Haskell.
Other
357 stars 72 forks source link

Nesting Selector(`&`) Usage in Clay #265

Open bglgwyng opened 2 months ago

bglgwyng commented 2 months ago

I am looking for a way to use the nesting selector in Clay. I was expecting a syntax similar to the following:

do
  div # ".container" ? do
    -- styles
    self # ".item" ? do
      -- styles
      self ** ".active" ? do
        -- styles

Currently, <? provides partial functionality which is equivalent to self |>, but there doesn’t seem to be a general one. Is there an existing solution for this, or is it something that could be added to Clay?

turion commented 2 months ago

That sounds useful. Isn't that just what https://hackage.haskell.org/package/clay-0.15.0/docs/Clay-Stylesheet.html#v:-38- does?

bglgwyng commented 2 months ago

They are a bit different. As far as I know, we can't express & .item with & in Clay. self(=& in CSS) should have its type as Selector, not Refinement -> CSS -> CSS.

bglgwyng commented 2 months ago

I tried element "*" and it didn't work. The selectors including & should not be flattened. I think we need another tag in Selector.