Variable declaration replaced

[oleersoy]

Hi,

I have a CSS file like this:

@import 'cssB.css';

:root {
  --varA: var(--varB);
}

h1 {
  color: var(--varA);
}

And in cssB.css:

:root {
  --varB: 'valueB';
}

If I run this through the following script:

var postcss = require('postcss');
var cssvariables = require('postcss-css-variables');
var importCSS = require('postcss-import');

var fs = require('fs');

var mycss = fs.readFileSync('cssA.css', 'utf8');

// Process your CSS with postcss-css-variables
var output = postcss([
  cssvariables( /*options*/ )
]).use(importCSS)
  .process(mycss)
  .css;

console.log(output);

I get this as a result:

:root {
  --varB: 'valueB';
}

h1 {
  color: undefined;
}

So the original cssA.css :root selector is completely replaced by the :root selector from cssB.css. Is that supposed to happen? Since suitcss theme uses multiple :root selectors in a single file, I assumed that this was OK?

Cheers, Ole

[oleersoy]

I tried changing cssA.css to look like this:

/*
@import 'cssB.css';
*/

:root {
  --varB: 'valueB';
}

:root {
  --varA: var(--varB);
}

h1 {
  color: var(--varA);
}

When I run process.js I now get this as a result:

/*
@import 'cssB.css';
*/

h1 {
  color: 'valueB';
}

So it works fine with multiple :root selectors in the same file. It appears the core issue is that when css-simple-vars is combined with postcss-import the :root block gets replaced...

Thoughts?

Ole

[oleersoy]

I did one more experiment. It looks like this:

@import 'cssB.css';

:root {
  --varB: 'valueB';
}

:root {
  --varA: var(--varB);
}

h1 {
  color: var(--varA);
}

In this case the result is:

ole@MKI:~/Sandbox/test1$ node process.js 
:root {
  --varB: 'valueB';
}

h1 {
  color: 'valueB';
}

So the @import statement only replaces the first root selector...

[ai]

Hi. It is not postcss-simple-vars syntax. It looks like cssnext.

[oleersoy]

Ooops - Wrong repository - Thanks.