├── .gitignore ├── .npmignore ├── README.md ├── index.js ├── package.json └── test ├── expected ├── compile-test-original.css ├── compile-test.css ├── prepend-test.scss └── type-test.scss ├── main.js └── scss ├── compile-test-original.scss ├── compile-test.scss ├── prepend-test.scss └── type-test.scss /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | npm-debug.log 3 | node_modules 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | test 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## What is this 2 | Add Sass variables to gulp stream, so that you can use for example environment variables in your Sass build process. 3 | 4 | Supports strings, numbers and booleans. 5 | 6 | ## Installation 7 | 8 | ```bash 9 | $ npm install gulp-sass-variables --save-dev 10 | ``` 11 | 12 | ## Usage 13 | 14 | ### gulpfile.js 15 | ```javascript 16 | var gulp = require('gulp'), 17 | argv = require('yargs').argv, 18 | sassVariables = require('gulp-sass-variables'), 19 | sass = require('gulp-sass'); 20 | 21 | // Compile css 22 | gulp.task('css', function () { 23 | return gulp.src('./src/scss/master.scss') 24 | .pipe(sassVariables({ 25 | $env: argv.production ? 'production' : 'development' 26 | })) 27 | .pipe(sass()) 28 | .pipe(gulp.dest('./dist/css')) 29 | }); 30 | 31 | ``` 32 | 33 | ### master.scss 34 | ```scss 35 | $env: 'development' !default; 36 | $path: '/dev/path/' !default; 37 | 38 | @if($env == 'production') { 39 | $path: '/prod/path'; 40 | } 41 | ``` 42 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const PLUGIN_NAME = 'gulp-sass-variables'; 4 | 5 | const PluginError = require('plugin-error'); 6 | const through = require('through2'); 7 | 8 | const getVariablesBuffer = function(sassVariables, file) { 9 | let str = ''; 10 | 11 | for(let variable in sassVariables) { 12 | str += variable + ': ' + JSON.stringify(sassVariables[variable]) + ';\n'; 13 | } 14 | 15 | return new Buffer(str, file); 16 | } 17 | 18 | module.exports = function(sassVariables) { 19 | 20 | return through.obj(function (file, encoding, cb) { 21 | 22 | if(file.isNull()) { 23 | return cb(null, file); 24 | } 25 | 26 | if(file.isStream()) { 27 | return cb(new PluginError(PLUGIN_NAME, 'Streaming not supported')); 28 | } 29 | 30 | if(sassVariables && typeof sassVariables === 'object') { 31 | let variablesBuffer = getVariablesBuffer(sassVariables, file); 32 | file.contents = Buffer.concat([variablesBuffer, file.contents], variablesBuffer.length + file.contents.length); 33 | } else { 34 | return cb(new PluginError(PLUGIN_NAME, 'Variables object expected')); 35 | } 36 | 37 | return cb(null, file); 38 | 39 | }); 40 | }; 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-sass-variables", 3 | "version": "1.2.0", 4 | "description": "Define Sass variables in your gulp task", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "./node_modules/.bin/mocha test" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/osaton/gulp-sass-variables.git" 12 | }, 13 | "keywords": [ 14 | "gulpplugin", 15 | "gulp-sass-variables", 16 | "environment variabes", 17 | "sass", 18 | "scss" 19 | ], 20 | "author": "osaton", 21 | "license": "ISC", 22 | "bugs": { 23 | "url": "https://github.com/osaton/gulp-sass-variables/issues" 24 | }, 25 | "homepage": "https://github.com/osaton/gulp-sass-variables", 26 | "devDependencies": { 27 | "gulp": "^3.9.1", 28 | "gulp-sass": "^2.3.2", 29 | "gulp-tap": "^0.1.3", 30 | "mocha": "^3.0.2", 31 | "should": "^11.1.0" 32 | }, 33 | "dependencies": { 34 | "plugin-error": "^1.0.1", 35 | "through2": "^2.0.1" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /test/expected/compile-test-original.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: #000; } 3 | -------------------------------------------------------------------------------- /test/expected/compile-test.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: #fff; } 3 | -------------------------------------------------------------------------------- /test/expected/prepend-test.scss: -------------------------------------------------------------------------------- 1 | $ENV: "test"; 2 | body { 3 | color: #fff; 4 | } 5 | -------------------------------------------------------------------------------- /test/expected/type-test.scss: -------------------------------------------------------------------------------- 1 | $STRING: "string"; 2 | $INT: 200; 3 | $FLOAT: 1234.1234; 4 | $BOOLEAN: false; 5 | -------------------------------------------------------------------------------- /test/main.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const sassVariables = require('../index'), 4 | gutil = require('gulp-util'), 5 | fs = require('fs'), 6 | path = require('path'), 7 | gulp = require('gulp'), 8 | sass = require('gulp-sass'), 9 | tap = require('gulp-tap'), 10 | should = require('should'); 11 | 12 | let createVinyl = function createVinyl(filename, contents) { 13 | let base = path.join(__dirname, 'scss'), 14 | filePath = path.join(base, filename); 15 | 16 | return new gutil.File({ 17 | 'cwd': __dirname, 18 | 'base': base, 19 | 'path': filePath, 20 | 'contents': contents || fs.readFileSync(filePath) 21 | }); 22 | }; 23 | 24 | describe('gulp-sass-variables', function() { 25 | it('isNull() file should pass ', function (done) { 26 | let stream = sassVariables(); 27 | let emptyFile = { 28 | 'isNull': function () { 29 | return true; 30 | } 31 | }; 32 | 33 | stream.on('data', function(data) { 34 | data.should.equal(emptyFile); 35 | done(); 36 | }); 37 | 38 | stream.write(emptyFile); 39 | }); 40 | 41 | it('isStream() file should emit error', function (done) { 42 | let stream = sassVariables(); 43 | let streamFile = { 44 | 'isNull': function () { 45 | return false; 46 | }, 47 | 'isStream': function () { 48 | return true; 49 | } 50 | }; 51 | 52 | stream.on('error', function(err) { 53 | err.message.should.equal('Streaming not supported'); 54 | done(); 55 | }); 56 | 57 | stream.write(streamFile); 58 | }); 59 | 60 | it('should emit error if passed other than object', function (done) { 61 | let stream = sassVariables(false); 62 | 63 | let sassFile = createVinyl('prepend-test.scss'); 64 | 65 | stream.on('error', function(err) { 66 | err.message.should.equal('Variables object expected'); 67 | done(); 68 | }); 69 | 70 | stream.write(sassFile); 71 | 72 | }); 73 | 74 | it('should prepend file with defined variables', function (done) { 75 | let stream = sassVariables({ 76 | $ENV: 'test' 77 | }); 78 | 79 | let sassFile = createVinyl('prepend-test.scss'); 80 | 81 | stream.on('data', function(file) { 82 | should.exist(file); 83 | should.exist(file.path); 84 | should.exist(file.relative); 85 | should.exist(file.contents); 86 | should.equal(path.basename(file.path), 'prepend-test.scss'); 87 | String(file.contents).should.equal( 88 | fs.readFileSync(path.join(__dirname, 'expected/prepend-test.scss'), 'utf8') 89 | ); 90 | done(); 91 | }); 92 | 93 | stream.write(sassFile); 94 | }); 95 | 96 | it('should work with strings and numbers', function (done) { 97 | let stream = sassVariables({ 98 | $STRING: 'string', 99 | $INT: 200, 100 | $FLOAT: 1234.1234, 101 | $BOOLEAN: false 102 | }); 103 | 104 | let sassFile = createVinyl('type-test.scss'); 105 | 106 | stream.on('data', function(file) { 107 | should.exist(file); 108 | should.exist(file.path); 109 | should.exist(file.relative); 110 | should.exist(file.contents); 111 | should.equal(path.basename(file.path), 'type-test.scss'); 112 | String(file.contents).should.equal( 113 | fs.readFileSync(path.join(__dirname, 'expected/type-test.scss'), 'utf8') 114 | ); 115 | done(); 116 | }); 117 | 118 | stream.write(sassFile); 119 | }); 120 | 121 | it('should work with gulp-sass', function (done) { 122 | let streamDoneCount = 0; 123 | 124 | let streamDone = function () { 125 | streamDoneCount++; 126 | if(streamDoneCount === 2) { 127 | done(); 128 | } 129 | } 130 | // Without modification 131 | gulp.src(path.join(__dirname, '/scss/compile-test-original.scss')) 132 | .pipe(sass()) 133 | .pipe(tap(function(file) { 134 | should.exist(file); 135 | should.exist(file.path); 136 | should.exist(file.relative); 137 | should.exist(file.contents); 138 | should.equal(path.basename(file.path), 'compile-test-original.css'); 139 | String(file.contents).should.equal( 140 | fs.readFileSync(path.join(__dirname, 'expected/compile-test-original.css'), 'utf8') 141 | ); 142 | //done(); 143 | })) 144 | .on('end', function () { 145 | streamDone(); 146 | }); 147 | 148 | // With variable 149 | gulp.src(path.join(__dirname, '/scss/compile-test.scss')) 150 | .pipe(sassVariables({ 151 | $ENV: 'production' 152 | })) 153 | .pipe(sass()) 154 | .pipe(tap(function(file) { 155 | should.exist(file); 156 | should.exist(file.path); 157 | should.exist(file.relative); 158 | should.exist(file.contents); 159 | should.equal(path.basename(file.path), 'compile-test.css'); 160 | String(file.contents).should.equal( 161 | fs.readFileSync(path.join(__dirname, 'expected/compile-test.css'), 'utf8') 162 | ); 163 | //done(); 164 | })) 165 | .on('end', function () { 166 | streamDone(); 167 | }); 168 | }); 169 | }); 170 | -------------------------------------------------------------------------------- /test/scss/compile-test-original.scss: -------------------------------------------------------------------------------- 1 | $ENV: 'development' !default; 2 | $test-var: #000; 3 | 4 | @if($ENV == 'production') { 5 | $test-var: #fff; 6 | } 7 | 8 | body { 9 | color: $test-var; 10 | } 11 | -------------------------------------------------------------------------------- /test/scss/compile-test.scss: -------------------------------------------------------------------------------- 1 | $ENV: 'development' !default; 2 | $test-var: #000; 3 | 4 | @if($ENV == 'production') { 5 | $test-var: #fff; 6 | } 7 | 8 | body { 9 | color: $test-var; 10 | } 11 | -------------------------------------------------------------------------------- /test/scss/prepend-test.scss: -------------------------------------------------------------------------------- 1 | body { 2 | color: #fff; 3 | } 4 | -------------------------------------------------------------------------------- /test/scss/type-test.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/osaton/gulp-sass-variables/655540e92271a0be7941edb9c0581a154f234ff2/test/scss/type-test.scss --------------------------------------------------------------------------------