Not compatible with postcss-each like `@each $name, $color in (danger, primary), (red, blue)`
Grawl opened this issue · comments
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
postcss-each doesn't support arrays
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?
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%)
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.
@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.