Use variable from simple vars inside color function?

[niftylettuce]

Right now we can't do this -- or at least I'm not sure what the syntax is do to this -- since it's not documented anywhere.

$green: #B0FFCF;
$darkGreen: color($green) darkness(10%));

[MoOx]

Try this: $darkGreen: color($green darkness(10%));

[niftylettuce]

Same thing, please don't close it till it's resolved :frowning:

Error: /Users/nexus/Public/standard-signature/src/styles:7:1: Unable to parse color from string "$green"
    at /Users/nexus/Public/standard-signature/src/styles:7:1
    at Object.Color (/Users/nexus/Public/standard-signature/node_modules/color/index.js:33:10)
    at toRGB (/Users/nexus/Public/standard-signature/node_modules/css-color-function/lib/convert.js:39:15)
    at Object.convert (/Users/nexus/Public/standard-signature/node_modules/css-color-function/lib/convert.js:28:10)
    at transformColor (/Users/nexus/Public/standard-signature/node_modules/postcss-color-function/index.js:49:43)
    at transformColorValue (/Users/nexus/Public/standard-signature/node_modules/postcss-color-function/index.js:20:16)
    at Object.tryCatch [as try] (/Users/nexus/Public/standard-signature/node_modules/postcss-message-helpers/index.js:53:12)
    at transformDecl (/Users/nexus/Public/standard-signature/node_modules/postcss-color-function/index.js:19:31)
    at /Users/nexus/Public/standard-signature/node_modules/postcss/lib/container.js:88:34
    at /Users/nexus/Public/standard-signature/node_modules/postcss/lib/container.js:73:26
    at Root.each (/Users/nexus/Public/standard-signature/node_modules/postcss/lib/container.js:60:22)
    at Root.walk (/Users/nexus/Public/standard-signature/node_modules/postcss/lib/container.js:72:21)
    at Root.walkDecls (/Users/nexus/Public/standard-signature/node_modules/postcss/lib/container.js:86:25)
    at /Users/nexus/Public/standard-signature/node_modules/postcss-color-function/index.js:14:11
    at LazyResult.run (/Users/nexus/Public/standard-signature/node_modules/postcss/lib/lazy-result.js:206:20)
    at /Users/nexus/Public/standard-signature/node_modules/postcss/lib/lazy-result.js:120:37
    at LazyResult.asyncTick (/Users/nexus/Public/standard-signature/node_modules/postcss/lib/lazy-result.js:134:15)
    at /Users/nexus/Public/standard-signature/node_modules/postcss/lib/lazy-result.js:132:27
    at LazyResult.asyncTick (/Users/nexus/Public/standard-signature/node_modules/postcss/lib/lazy-result.js:134:15)
    at /Users/nexus/Public/standard-signature/node_modules/postcss/lib/lazy-result.js:132:27
    at LazyResult.asyncTick (/Users/nexus/Public/standard-signature/node_modules/postcss/lib/lazy-result.js:134:15)
    at /Users/nexus/Public/standard-signature/node_modules/postcss/lib/lazy-result.js:132:27
    at LazyResult.asyncTick (/Users/nexus/Public/standard-signature/node_modules/postcss/lib/lazy-result.js:134:15)

[niftylettuce]

It's converting it to a string and its a var, and I even have simple-color-vars declared before this plugin is in my postcss bundle order.

[MoOx]

Issues are for bug report. This does not look like a bug report but a bad usage of this plugin.

It seems that postcss-simple-vars (not simple-color-vars?) is not transforming $green in $darkGreen. What happen if you try $darkGreen: whatever($green darkness(10%));? Is $green transformed when you use $darkGreen.

[niftylettuce]

No it doesn't get transformed, I'm guessing it's because of postcss-simple-vars. Sorry for my typo.

[niftylettuce]

Actually sorry, @MoOx it DOES get transformed:

ul#navigation li.green-fill:hover {
  background-color: whatever(#B0FFCF darkness(10%));
}

[niftylettuce]

But it seems it doesn't get transformed until the very end.

[MoOx]

Can you show your postcss config?

[niftylettuce]

Here's logs:

ast { type: 'function',
  name: 'color',
  arguments:
   [ { type: 'color', value: '$green' },
     { type: 'function', name: 'darkness', arguments: [Object] } ] } ast.arguments[0].type color
Error: /Users/nexus/Public/standard-signature/src/styles:7:1: Unable to parse color from string "$green"
    at /Users/nexus/Public/standard-signature/src/styles:7:1

Here's postcss config:

import postcss from 'koa-postcss';
import cssImport from 'postcss-import';
import autoprefixer from 'autoprefixer';
import assets from 'postcss-assets';
import cssnano from 'cssnano';
import rucksack from 'rucksack-css';
import cssnext from 'postcss-cssnext';
import stylelint from 'stylelint';
import reporter from 'postcss-reporter';
import colorguard from 'colorguard';
import simpleVars from 'postcss-simple-vars';
import hide from 'postcss-hide';
import at2x from 'postcss-at2x';
import nested from 'postcss-nested';
import animation from 'postcss-animation';
import colorFunction from 'postcss-color-function';

let plugins = [
  cssImport(),
  cssnext(),
  simpleVars(),
  animation(),
  colorFunction(),
  hide(),
  rucksack(),
  stylelint(),
  autoprefixer({
    browsers: [
      'not ie <= 8'
    ]
  }),
  nested(),
  assets({
    basePath: path.join(__dirname, '..', 'static-assets'),
    loadPaths: [
      path.join(__dirname, '..', 'static-assets')
    ]
  }),
  at2x(),
  colorguard(),
  reporter({
    clearMessages: true
  })
];

if (config.env === 'production')
  plugins.push(cssnano());

app.use(convert(
  postcss({
    src: path.join(__dirname, '..', 'src', 'styles'),
    dest: path.join(__dirname, '..', 'static-assets', 'css'),
    plugins: plugins
  })
));

// serve up css
app.use(convert(serveStatic(
  path.join(__dirname, '..', 'static-assets'),
  config.serveStatic
)));

[MoOx]

cssnext already provide color-function. So it's indeed called before postcss-simple-vars. Use non standard stuff before cssnext please. Btw, cssnext also include autoprefixer.

[niftylettuce]

@MoOx Is your recommendation to use this https://github.com/postcss/postcss-custom-properties package instead of postcss-simple-vars? And P.S. thank you so much :heart:

[MoOx]

postcss-custom-properties is also included in cssnext.

[niftylettuce]

Great, thank you. A typical thing where I didn't read the docs :laughing:

[maggiben]

@MoOx answer is the correct one, postcss-simple-vars must be placed before postcss-cssnext