Getting Undefined variable $mainYellow

[interglobalmedia]

Hi,

I am getting Undefined variable $mainYellow using postcss-simple-vars. This is my package.json:

{
  "name": "map-plotting",
  "version": "0.0.1",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "styles": "gulp styles",
    "watch": "gulp watch"
  },
  "author": "Maria D. Campbell",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.1.1",
    "normalize.css": "^5.0.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.5",
    "browser-sync": "^2.18.8",
    "eslint": "^3.16.1",
    "gulp": "^3.9.1",
    "gulp-postcss": "^6.3.0",
    "gulp-watch": "^4.3.11",
    "postcss-import": "^9.1.0",
    "postcss-nested": "^1.0.0",
    "postcss-simple-vars": "^3.0.0"
  }
}

This is my gulpfile.js:

const gulp = require('gulp');
const watch = require('gulp-watch');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssvars = require('postcss-simple-vars');
const nested = require('postcss-nested');
const cssImport = require('postcss-import');
const browserSync = require('browser-sync').create();

gulp.task('default', () => {
    console.log('I just created my first gulp task!');
});

gulp.task('html', () => {
    console.log('Imagine what I could do with my html here!');
});

gulp.task('styles', () => {
    return gulp.src('./app/assets/styles/**/*.css')
    .pipe(postcss([cssImport, cssvars, nested, autoprefixer]))
    .pipe(gulp.dest('./app/temp/styles'));
});

gulp.task('watch', () => {

    browserSync.init({
        notify: false,
        server: {
            baseDir: 'app'
        }
    });

    watch('./app/index.html', () => {
        browserSync.reload();
    });

    watch('./app/assets/styles/**/*.css', () => {
        gulp.start('cssInject');
    });
});

gulp.task('cssInject', () => {
    return gulp.src('./app/temp/styles/styles.css')
    .pipe(browserSync.stream());
});

This is my _variables.css:

$mainYellow: #ffc600;

CSSLint gives me:

Unexpected token '$' at line 1, col 1.

This is what I get in Terminal:

npm run styles                          ⏎ ✭

> map-plotting@0.0.1 styles /Users/mariacam/Development/map-plotting
> gulp styles

[19:50:21] Using gulpfile ~/Development/map-plotting/gulpfile.js
[19:50:21] Starting 'styles'...

events.js:161
      throw er; // Unhandled 'error' event
      ^
Error: postcss-simple-vars: /Users/mariacam/Development/map-plotting/app/assets/styles/base/_global.css:6:5: Undefined variable $mainYellow

  4 |
  5 | body {
> 6 |     background: $mainYellow;
    |     ^
  7 | }
  8 |

npm ERR! Darwin 15.6.0
npm ERR! argv "/Users/mariacam/.nvm/versions/node/v7.6.0/bin/node" "/Users/mariacam/.nvm/versions/node/v7.6.0/bin/npm" "run" "styles"
npm ERR! node v7.6.0
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! map-plotting@0.0.1 styles: `gulp styles`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the map-plotting@0.0.1 styles script 'gulp styles'.
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 map-plotting package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     gulp styles
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs map-plotting
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls map-plotting
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/mariacam/Development/map-plotting/npm-debug.log

My styles.css file:

@import "normalize.css";
@import "base/_variables";
@import "base/_global";
@import "modules/_maps";

I am using Node.JS 7.6.0 and NPM 4.1.2

Thanks in advance for your help!

Best regards,

Maria

[ai]

Replace gulp.src('./app/assets/styles/**/*.css') to gulp.src(['./app/assets/styles/**/*.css', '!_*']), or something to exclude _-files from compiling.

By the way, I suggest you to use Stylelint. It is more popular, than CSSLint (Facebook, Wikipedia, GitHub uses Stylelint). And it supports all PostCSS features (because based on same PostCSS).

[interglobalmedia]

Thanks @ai! I will give it a try.

[interglobalmedia]

@ai Stylelint is much better. Thanks for suggesting! Also added brackets at your suggestion. postcss-simple-vars working now.