Not compatible with postcss-each like `@each $name, $color in (danger, primary), (red, blue)`

[Даниил Пронин]

Trying to use postcss-simple-vars before postcss-each and get an error:

Undefined variable

~/Р/postcss-playground $ npm run postcss:watch

> @ postcss:watch /Users/grawl/Разработчик/postcss-playground
> npm run postcss -- --watch


> @ postcss /Users/grawl/Разработчик/postcss-playground
> postcss --config postcss.json "--watch"

postcss-simple-vars: /Users/grawl/Разработчик/postcss-playground/style.sss:3:3: Undefined variable $name   1 | $colors: (good, bad, purple), (hsl(95, 63%, 46%), hsl(6, 63%, 46%), purple)
  2 | .item
> 3 |   @each $name, $color in $colors
    |   ^
  4 |     &-$(name)
  5 |       color: $color

npm ERR! Darwin 16.3.0
npm ERR! argv "/usr/local/Cellar/node/7.0.0/bin/node" "/usr/local/bin/npm" "run" "postcss" "--" "--watch"
npm ERR! node v7.0.0
npm ERR! npm  v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! @ postcss: `postcss --config postcss.json "--watch"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ postcss script 'postcss --config postcss.json "--watch"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     postcss --config postcss.json "--watch"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/grawl/Разработчик/postcss-playground/npm-debug.log

npm ERR! Darwin 16.3.0
npm ERR! argv "/usr/local/Cellar/node/7.0.0/bin/node" "/usr/local/bin/npm" "run" "postcss:watch"
npm ERR! node v7.0.0
npm ERR! npm  v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! @ postcss:watch: `npm run postcss -- --watch`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ postcss:watch script 'npm run postcss -- --watch'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run postcss -- --watch
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/grawl/Разработчик/postcss-playground/npm-debug.log
~/Р/postcss-playground $ 

This is how I do this:

style.sss

$colors: (good, bad, purple), (hsl(95, 63%, 46%), hsl(6, 63%, 46%), purple)
.item
  @each $name, $color in $colors
    &-$(name)
      color: $color

The same with flat array like

$colors: (hsl(95, 63%, 46%), hsl(6, 63%, 46%), purple)

& @each $color in $colors.

postcss.json

{
  "input": "style.sss",
  "output": "style.css",
  "parser": "sugarss",
  "use": [
    "postcss-devtools",
    "postcss-simple-vars",
    "postcss-each",
    "autoprefixer"
  ],
  "local-plugins": true
}

package.json

{
  "private": true,
  "scripts": {
    "postcss": "postcss --config postcss.json",
    "postcss:watch": "npm run postcss -- --watch"
  },
  "devDependencies": {
    "autoprefixer": "^6.5.1",
    "postcss-cli": "^2.6.0",
    "postcss-devtools": "^1.1.0",
    "postcss-each": "^0.9.3",
    "postcss-simple-vars": "^3.0.0",
    "sugarss": "^0.2.0"
  }
}

Also this issue referenced here: madyankin/postcss-each#14 (comment)

With postcss-at-rules-variables, it works as expected:

:root
	--colors-names: (good, bad, purple)
	--color-values: (hsl(95, 63%, 46%), hsl(6, 63%, 46%), purple)
.item
	@each $name, $color in var(--colors-names), var(--color-values)
		&-$name
			color: $color

[Andrey Sitnik]

postcss-each doesn't support arrays

[Andrey Sitnik]

I think using @each is too tricky in this case. Mixins will be simpler:

@define-mixin color $name, $color
  &-$(name)
      color: $color

@mixin color good hsl(95, 63%, 46%)
@mixin color bad hsl(6, 63%, 46%)
@mixin color purple purple

With mixins it is easy to understand what name use that color. And you don’t need to be a programmer to understand final CSS

[Даниил Пронин]

I think not. Everyone can understand this Sass:

$colors: (good: hsl(95, 63%, 46%), bad: hsl(6, 63%, 46%), purple: purple)
.item
  @each $name, $color in $colors
    &-#{$name}
      color: $color

Don't?

[Andrey Sitnik]

If need to understand key-value maps for it :).

Of course, many developers could do it.

But when I imagine PreCSS, I thought about make a real simple language to protect CSS from tricky programming thins.

In this case you do too DRY. This source is much readable:

&.is-bad
   color: hsl(95, 63%, 46%)

[Andrey Sitnik]

Of course “no programming in CSS” is goal for PreCSS and postcss-simple-vars you can create any complicated system of top of PostCSS. Or just use Sass if you don’t share my worries about unreadable CSS.

But I think that good CSS is not about DRY. It is about isolation and components.

[Даниил Пронин]

Oh okay, so Sass will be my friend for sources and PostCSS will be for post-processing only. Sad.

[Andrey Sitnik]

@Grawl why you don’t want to remove code from your CSS sources too? Look at CSS Modules or cssnext — they both suggest to forget making a programs inside a sources. It is a current trend.

[Даниил Пронин]

@ai it's a huge step for all my work. And I don't like KISS methodology at all. I like DRY and tabs for indentation, and don't limit line length.