Simple-vars not compatible with postcss-import update

[mihaeltomic]

postcss-simple-vars: 2.0..0 are not woking with postcss-import: 8.1.2 version in my case. I got an undefined variable error. After changing simple-vars to 1.2.0. and leaving import at 8.1.2 everything is working as it should again.

[ai]

Always provide input CSS, plugins list and full stacktrace, when you report a issue 😉

[mihaeltomic]

@ai my bad ;) So, here's an update. After checking it later I had to remove 8.1.2 'cause it's still not working. So I "falledback" to this:

   "autoprefixer": "^6.3.6",
    "cssnano": "^3.6.2",
    "gulp": "^3.9.1",
    "gulp-plumber": "^1.0.1",
    "gulp-postcss": "^6.1.1",
    "gulp-rename": "^1.2.2",
    "gulp-stylelint": "^2.0.2",
    "normalize.css": "^4.1.1",
    "postcss-calc": "^5.2.1",
    "postcss-color-function": "^2.0.1",
    "postcss-custom-media": "^5.0.1",
    "postcss-import": "^7.1.3",
    "postcss-inline-svg": "^1.4.0",
    "postcss-mixins": "^4.0.2",
    "postcss-nested": "^1.0.0",
    "postcss-reporter": "^1.3.3",
    "postcss-simple-vars": "^1.2.0",
    "postcss-svgo": "^2.1.3"

and now everything is working. I have variables first in input.css, later mixins etc.

Stack: node 4.2.2.; npm 3.4.1, gulp 3.9.0 CLI, local 3.9.1.

[ai]

If you want to fix this issue, you should provide how to reproduce the error.

So, show me plugins order (not versions) and input CSS (with all related files, try to find minimum case).

[ai]

And of close you should post failed versions, not your fallback 😉

[mihaeltomic]

Ok, this is how I've got an error. I've checked the status of my packages and updated them to latest version manually entering the versions into the package.json file. After that, I've deleted all node_modules for a clean install. And after I've installed and ran gulp task I got an "Undefined variable $unit" error.

So, I hope this is enough info...

gulpfile.js:

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    postcss = require('gulp-postcss'),
    plumber = require('gulp-plumber'),

    atImport = require('postcss-import'),
    simplevars = require('postcss-simple-vars'),
    mixins = require('postcss-mixins'),
    nested = require('postcss-nested'),
    customMedia = require('postcss-custom-media'),
    postcssInlineSvg = require('postcss-inline-svg'),
    postcssSvgo = require('postcss-svgo'),
    colorFunction = require('postcss-color-function'),
    calc = require('postcss-calc'),
    autoprefixer = require('autoprefixer'),
    cssNano = require('cssnano'),
    colorFunction = require('postcss-color-function');

gulp.task('cssBuild', function (){
  var postCSSPlugins = [

    atImport ({
      from: 'src/css/app.css',
    }),
    mixins,
    simplevars,
    nested,
    colorFunction,
    postcssInlineSvg,
    postcssSvgo,
    calc,
    customMedia,
    colorFunction,
    autoprefixer ({
      browsers: ['last 2 version']
    })
  ];
});

CSS:

@import "vars.globals.css";
@import "vars.typography.css";
@import "vars.responsive.css";
@import "vars.colors.css";
@import "vars.shadows.css";

@import "tools.typomatic.css";
@import "tools.bubba.css";
@import "tools.clearing.css";

@import "../../node_modules/normalize.css/normalize.css";
@import "generic.boxsizing.css";

@import "base.globals.css";
@import "base.typography.css";

and so on...

[ai]

Sorry, that I am so rude. But you didn’t show me full error stacktrace ;). I ask you third time :).

Error stacktrace is a error messages with that long list of methods, where this error happen.

[mihaeltomic]

No, you're fine, but I don't have stacktrace since I've deleted everything and installed again with lower versions. I can try to reproduce this issue again and send you stacktrace.

[mihaeltomic]

Update, here's the error log from plumber, that's all I have, I can't get full stacktrace:

[08:31:22] Starting 'cssBuild'...
{ [Error: postcss-simple-vars: D:\PROJECTS\SharePoint\Sharepoint\Sharepoint.Web\Content\src\css\vars.globals.css:5:1: Undefined variable $unit

/**
^
]* The $unit variable is a global variable to be used
  message: 'postcss-simple-vars: D:\\PROJECTS\\SharePoint\\Sharepoint\\Sharepoint.Web\\Content\\src\\css\\vars.globals.css:5:1: Undefined variable $unit\n\r\n/**\r\n\u001b[1;31m^\u001b[0m\n * The $unit variable is a global variable to be used\r',
  fileName: 'D:\\PROJECTS\\SharePoint\\Sharepoint\\Sharepoint.Web\\Content\\src\\css\\app.css',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-postcss',
  __safety: { toString: [Function: bound ] } }
[08:31:22] Finished 'cssBuild' after 127 ms
[08:31:22] Starting 'styles'...
[08:31:22] Finished 'styles' after 96 ms

This is default error message when plumber is off:

[08:44:37] Starting 'cssBuild'...

events.js:141
      throw er; // Unhandled 'error' event
      ^
 Error: postcss-simple-vars: D:\PROJECTS\SharePoint\Sharepoint\Sharepoint.Web\Content\src\css\vars.globals.css:5:1: Undefined variable $unit

/**
^
 * The $unit variable is a global variable to be used

if you have an information how to export full stacktrace from this, please let me know.

[ai]

@mihaeltomic show me vars.globals.css content

[mihaeltomic]

/*------------------------------------*\
    # vars.globals
\*------------------------------------*/

/**
 * The $unit variable is a global variable to be used
 * in paddings, margins, for sizing and positioning
 */
$unit: 6px;

/**
 * The $spacer variable is a global variable to be used
 * in to create a unified spacer for all kinds of elements
 */
$spacer: calc($unit * 4);

/**
 * Global class prefix - usage: .$(global-prefix)classname
 */
$global-prefix: pr-;

/**
 * Global radius and rounded
 */
$global-rounded: 1000px;
$global-radial: 2px;

[ai]

https://github.com/postcss/postcss-simple-vars/blob/master/CHANGELOG.md#20

[ai]

You should always read a ChangeLog before update :(

[ai]

And you should learn how to create a issues in open source.

If you saw that problem is in vars.globals.css:5:1 why you didn’t add it in the first message?

[mihaeltomic]

Ok, my bad for not posting in a proper way, but as I've mentioned, I've deleted setup and I didn't have this error to copy paste anymore...

So, the variable is set before it's been declared. And since it supports variables in comments that's the whole thing, damn... now everything is clear and it looks silly but that's the problem of getting used to something ;) Thanks and sorry for the inconvenience... P.S. I've read the changelog but sometimes it's so obvious, but you can't see it for yourself hehe

[mihaeltomic]

Also, just to drop an opinion about this issue. Can you explain why this switch in variables? I have a lot of comments with variables in it. Should I remove $ from all my variables in comments since they are before actual variable? I don't see logic in this.

[ai]

https://github.com/postcss/postcss-simple-vars/issues/48

[mihaeltomic]

Thanks for the info, but from my POV there should be an option not to parse variables from comments if you don't want to... But, that's just my thought.

[khue3012]

Hello. Thank you