Iterating through map items

[bpaugam]

I'm trying to iterate through a map of colorschemes defined in a yaml file to achieve something like this:

# theme.yml
schemes:
    - green:
        color: '#00FF00'
        text: '#FFFFFF'
    - blue:
        color: '#0000FF'
        text: '#FFFFFF'
    - red:
        color: '#FF0000'
        text: '#FFFFFF'

// Before transpilation
@each $schemeName, $scheme in map(theme, schemes) {
    .$schemeName {
        background-color: $scheme['color'];
        color: $scheme['text'];
    }
}

// After transpilation (desired result)
.green {
    background-color: #00FF00;
    color: #FFFFFF;
}
.blue {
    background-color: #0000FF;
    color: #FFFFFF;
}
.red {
    background-color: #FF0000;
    color: #FFFFFF;
}

Is there any way of achieving this result with postcss-map ? Or am I gravely mistaken and should move to another plugin ?

[pascalduez]

Hi,

I don't think it's currently possible to acheive this with postcss-map. For many reasons, but one and formost is that CSS, PostCSS doesnt't have a list, or map type.

What's the list of plugins you're using ?

I guess what you're looking for is called Sass ;)

[bpaugam]

Yeah, Sass can achieve just that, but I don't really like the sass map syntax and find yaml files to be way more elegant.

I guess I'll use Sass, then, thank you for your time and keep up the good work.

[pascalduez]

Did you try with postcss-each? Maybe it's not that much work to make them play togehter.

[bpaugam]

I did not. I shall give it a try.

Thanks for the tip.

[aviemet]

Any luck with this? I tried using postcss-each, but the key compiled as [object Object].

[pascalduez]

Re-opening, as it seems feasible without too much heavy changes.

[bovisp]

I would love to see this feature implemented! +1 for me.

[thesainthell]

Stumbled over this issue right away, also +1 for me.

[pascalduez]

To clarify things a bit here, I give it a very quick try to be able to evaluate the needs. https://github.com/pascalduez/postcss-map/tree/features/iteration It turns out it would be quite some work to make it in a reliable way, we might need to introduce new methods like map-get and such.

I prefer no feature than a borken one.

Not saying a definitive no here, but personnaly laking time and motivation for it. On the other hand, PRs (with a shit loads of testing) are welcome.

[lan3jur]

Well, there a pretty easy working solution, using postcss-each. Not saying it's the best one, but it does the trick:

#grid-breakpoints.yml
breakpoints:
  sm: 576px
  md: 768px

sm:
  h1-responsive: 170%
  h2-responsive: 140%
md:
  h1-responsive: 200%
  h2-responsive: 170%

#input.css
:root {
  --grid-breakpoints-names: (sm, md);
  --grid-heading-names: (h1-responsive, h2-responsive);
}

@each $name in var(--grid-breakpoints-names) {
  @media (min-width: map(grid-breakpoints, breakpoints, $name)) {
    @each $heading in var(--grid-heading-names) {
      .$heading {
        font-size: map(grid-breakpoints, $name, $heading);
      }
    }
  }
}

#output.css
@media (min-width:576px) {
  .h1-responsive {
    font-size: 170%;
  }
  .h2-responsive {
    font-size: 140%;
  }
}
@media (min-width:768px) {
  .h1-responsive {
    font-size: 200%;
  }
  .h2-responsive {
    font-size: 170%;
  }
}

[YoungElPaso]

@lan3jur as of 2021, I believe that will only work if you're also using postcss-custom-properties or otheriwse converting var(--grid-breakpoints-names) into a static representation. AFAIK postcss-each cannot understand a list variable, which is a pain.