Using JS object for vars, referencing in CSS?

[benfrain]

I'm using Gulp and here is the relevant section of my gulpfile.js:

var gulp = require("gulp");
var changed = require('gulp-changed');

//As we need to reference a single set of vars across multiple independently processed CSS files, we have created a JS for the CSS vars
var cssVariables = require('./preCSS/variables.js');

var sourceCSS = ["preCSS/**/*.css"];
var outputCSS = "./";

gulp.task("styles", function () {

    //PostCSS related
    var postcss = require("gulp-postcss");
    var autoprefixer = require("autoprefixer");
    var mixins = require("postcss-mixins")({
        mixins: {
            FontHeadline: function () {
                return {
                    "font-family": cssVariables["$font-verdana"],
                    "font-weight": '400',

                    '@media (max-device-width: 1024px)': {
                        'font-family': cssVariables["$font-hv-bold"],
                        'font-weight': '700'
                    },
                    '@media (max-device-width: 2048px) and (min-resolution: 2dppx)': {
                        'font-family': cssVariables["$font-hv-bold"],
                        'font-weight': '700'
                    }
                }
            }
        }
    });
    var simpleVars = require("postcss-simple-vars");
    var nested = require("postcss-nested");
    //Utils
    var gutil = require("gulp-util");

    var processors = [
    postcssImport({ glob: true }), mixins, simpleVars({
        variables: cssVariables
    }), colorFunction(), nested, autoprefixer({ browsers: ["last 2 version", "safari 5", "ie > 9", "opera 12.1", "ios 6", "android 2.3"] })];

    return gulp.src(sourceCSS)
    // Only files that have changed are piped through
    .pipe(changed(outputCSS))

    // We always want PostCSS to run
    .pipe(postcss(processors).on("error", gutil.log))

    // Set the destination for the CSS file
    .pipe(gulp.dest(outputCSS));

});

Within my preCSS/variables.js I have my vars set up like this:

module.exports = {
    "$color-grey-47": "#474747"
}

Now, in my CSS files I have a rule like this:

.pm-Splash_TabsWrapper {
    @mixin FontHeadline;
    background-color: $color-grey-47;
    height: $size-quadruple;
    width: 100%;
    display: flex;
    padding: 0 $size-full;
}

The build fails with 'undefined variable $color-grey-47'

Is this how I should be referencing my vars in the CSS? Like I would if they were defined in the CSS? You will notice that the mixin (FontHeadline) I have included in the Gulpfile references the vars in a JS fashion (and this works) but when I try that in the CSS it fails too.

Could you advise what I'm doing wrong here? Thanks for any pointers.

[ai]

You should miss $ in variables.

But also we should add check for this case in plugin.

[benfrain]

Ha! Glad I asked - thanks for that. I was trying all manner of more complicated things! Yes, if it could adapt to there being a $ that would be really useful as vars from CSS style could be easily ported into JS object.

[benfrain]

If you want me to adapt the readme for this I would be happy to. However, if you plan on adapting the JS to cope it would be unneeded. :+1:

[ai]

I will fix choice ru work with both cases $name and name.

[ai]

Fixed 82f1ac3

[ai]

Released in 1.0.1

[benfrain]

Amazing, thanks :)

On 15 Sep 2015, at 18:14, Andrey Sitnik notifications@github.com wrote:

Released in 1.0.1

— Reply to this email directly or view it on GitHub.