├── test ├── fixtures │ ├── error.styl │ ├── resolve.styl │ ├── includes │ │ └── header.styl │ ├── import.styl │ ├── define.styl │ ├── normal.styl │ ├── ie8.css │ └── one.styl ├── expected │ ├── resolve.css │ ├── compressed.css │ ├── define.css │ ├── normal.css │ ├── imported.css │ └── import.css └── main.js ├── .travis.yml ├── examples ├── css │ ├── linenos.styl │ ├── compressed.styl │ ├── sourcemaps-external.styl │ ├── sourcemaps-inline.styl │ └── one.styl └── gulpfile.js ├── .gitignore ├── .npmignore ├── .jshintrc ├── LICENSE ├── package.json ├── index.js └── README.md /test/fixtures/error.styl: -------------------------------------------------------------------------------- 1 | .hello 2 | some#garback white 3 | -------------------------------------------------------------------------------- /test/fixtures/resolve.styl: -------------------------------------------------------------------------------- 1 | @import './includes/header.styl'; -------------------------------------------------------------------------------- /test/expected/resolve.css: -------------------------------------------------------------------------------- 1 | .logo { 2 | background-image: url("gulp.png"); 3 | } 4 | -------------------------------------------------------------------------------- /test/fixtures/includes/header.styl: -------------------------------------------------------------------------------- 1 | .logo { 2 | background-image: url('../gulp.png'); 3 | } -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - "4.2.0" 5 | - "6.9.0" 6 | -------------------------------------------------------------------------------- /test/expected/compressed.css: -------------------------------------------------------------------------------- 1 | body{width:100%;height:10%}div{background:#555}div:hover{background:#000} -------------------------------------------------------------------------------- /test/fixtures/import.styl: -------------------------------------------------------------------------------- 1 | @import "./one.styl" 2 | @import "./includes/header.styl" 3 | @import "./normal" -------------------------------------------------------------------------------- /test/fixtures/define.styl: -------------------------------------------------------------------------------- 1 | black = #000 2 | 3 | body 4 | width 100% 5 | height: 10%; 6 | div 7 | background unquote(white) 8 | &:hover 9 | background black -------------------------------------------------------------------------------- /test/expected/define.css: -------------------------------------------------------------------------------- 1 | body { 2 | width: 100%; 3 | height: 10%; 4 | } 5 | div { 6 | background: #fff; 7 | } 8 | div:hover { 9 | background: #000; 10 | } 11 | -------------------------------------------------------------------------------- /test/expected/normal.css: -------------------------------------------------------------------------------- 1 | body { 2 | width: 100%; 3 | height: 10%; 4 | } 5 | div { 6 | background: #555; 7 | } 8 | div:hover { 9 | background: #000; 10 | } 11 | -------------------------------------------------------------------------------- /test/fixtures/normal.styl: -------------------------------------------------------------------------------- 1 | grey = #555 2 | black = #000 3 | 4 | body 5 | width 100% 6 | height: 10%; 7 | div 8 | background grey 9 | &:hover 10 | background black -------------------------------------------------------------------------------- /examples/css/linenos.styl: -------------------------------------------------------------------------------- 1 | grey = #555 2 | black = #000 3 | 4 | body 5 | width 100% 6 | height: 10%; 7 | div 8 | background grey 9 | &:hover 10 | background black 11 | -------------------------------------------------------------------------------- /examples/css/compressed.styl: -------------------------------------------------------------------------------- 1 | grey = #555 2 | black = #000 3 | 4 | body 5 | width 100% 6 | height: 10%; 7 | div 8 | background grey 9 | &:hover 10 | background black 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | build 3 | lib-cov 4 | *.seed 5 | *.log 6 | *.csv 7 | *.dat 8 | *.out 9 | *.pid 10 | *.gz 11 | 12 | pids 13 | logs 14 | results 15 | 16 | npm-debug.log 17 | node_modules 18 | *.sublime* -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | build 3 | lib-cov 4 | *.seed 5 | *.log 6 | *.csv 7 | *.dat 8 | *.out 9 | *.pid 10 | *.gz 11 | 12 | pids 13 | logs 14 | results 15 | 16 | npm-debug.log 17 | node_modules 18 | *.sublime* -------------------------------------------------------------------------------- /examples/css/sourcemaps-external.styl: -------------------------------------------------------------------------------- 1 | // External sourcemaps 2 | grey = #555 3 | black = #000 4 | 5 | body 6 | width 100% 7 | height: 10%; 8 | div 9 | background grey 10 | &:hover 11 | background black 12 | -------------------------------------------------------------------------------- /examples/css/sourcemaps-inline.styl: -------------------------------------------------------------------------------- 1 | // External sourcemaps 2 | grey = #555 3 | black = #000 4 | 5 | body 6 | width 100% 7 | height: 10%; 8 | div 9 | background grey 10 | &:hover 11 | background black 12 | -------------------------------------------------------------------------------- /test/fixtures/ie8.css: -------------------------------------------------------------------------------- 1 | body { 2 | width: 100%; 3 | filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( 4 | src='../img/dark-round-control-disabled.png', 5 | sizingMethod='scale'); 6 | } 7 | 8 | .wrapper 9 | { 10 | width: 100%; 11 | } -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "camelcase": true, 3 | "curly": true, 4 | "eqeqeq": true, 5 | "freeze": true, 6 | "indent": 2, 7 | "newcap": false, 8 | "quotmark": "single", 9 | "maxdepth": 5, 10 | "maxstatements": 50, 11 | "maxlen": 100, 12 | "eqnull": true, 13 | "funcscope": true, 14 | "strict": true, 15 | "undef": true, 16 | "unused": true, 17 | "node": true, 18 | "mocha": true 19 | } 20 | -------------------------------------------------------------------------------- /test/fixtures/one.styl: -------------------------------------------------------------------------------- 1 | .one 2 | background: #555 3 | background: -moz-linear-gradient(top, #555 0%, #000 100%) 4 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(100%,#000)) 5 | background: -webkit-linear-gradient(top, #555 0%,#000 100%) 6 | background: -o-linear-gradient(top, #555 0%,#000 100%) 7 | background: -ms-linear-gradient(top, #555 0%,#000 100%) 8 | background: linear-gradient(top, #555 0%,#000 100%) 9 | filter: unquite("progid:DXImageTransform.Microsoft.gradient( startColorstr='#555', endColorstr='#000',GradientType=0 )") -------------------------------------------------------------------------------- /examples/css/one.styl: -------------------------------------------------------------------------------- 1 | .one 2 | background: #555 3 | background: -moz-linear-gradient(top, #555 0%, #000 100%) 4 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(100%,#000)) 5 | background: -webkit-linear-gradient(top, #555 0%,#000 100%) 6 | background: -o-linear-gradient(top, #555 0%,#000 100%) 7 | background: -ms-linear-gradient(top, #555 0%,#000 100%) 8 | background: linear-gradient(top, #555 0%,#000 100%) 9 | filter: unquite("progid:DXImageTransform.Microsoft.gradient( startColorstr='#555', endColorstr='#000',GradientType=0 )") 10 | -------------------------------------------------------------------------------- /test/expected/imported.css: -------------------------------------------------------------------------------- 1 | .one { 2 | background: #555; 3 | background: -moz-linear-gradient(top, #555 0%, #000 100%); 4 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555), color-stop(100%, #000)); 5 | background: -webkit-linear-gradient(top, #555 0%, #000 100%); 6 | background: -o-linear-gradient(top, #555 0%, #000 100%); 7 | background: -ms-linear-gradient(top, #555 0%, #000 100%); 8 | background: linear-gradient(top, #555 0%, #000 100%); 9 | filter: unquite("progid:DXImageTransform.Microsoft.gradient( startColorstr='#555', endColorstr='#000',GradientType=0 )"); 10 | } 11 | body { 12 | width: 100%; 13 | height: 10%; 14 | } 15 | div { 16 | background: #555; 17 | } 18 | div:hover { 19 | background: #000; 20 | } 21 | -------------------------------------------------------------------------------- /test/expected/import.css: -------------------------------------------------------------------------------- 1 | .one { 2 | background: #555; 3 | background: -moz-linear-gradient(top, #555 0%, #000 100%); 4 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555), color-stop(100%, #000)); 5 | background: -webkit-linear-gradient(top, #555 0%, #000 100%); 6 | background: -o-linear-gradient(top, #555 0%, #000 100%); 7 | background: -ms-linear-gradient(top, #555 0%, #000 100%); 8 | background: linear-gradient(top, #555 0%, #000 100%); 9 | filter: unquite("progid:DXImageTransform.Microsoft.gradient( startColorstr='#555', endColorstr='#000',GradientType=0 )"); 10 | } 11 | .logo { 12 | background-image: url("../gulp.png"); 13 | } 14 | body { 15 | width: 100%; 16 | height: 10%; 17 | } 18 | div { 19 | background: #555; 20 | } 21 | div:hover { 22 | background: #000; 23 | } 24 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Steve Lacy (slacy.me) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-stylus", 3 | "description": "Stylus plugin for gulp", 4 | "version": "3.0.1", 5 | "homepage": "http://github.com/stevelacy/gulp-stylus", 6 | "repository": { 7 | "type": "git", 8 | "url": "http://github.com/stevelacy/gulp-stylus.git" 9 | }, 10 | "author": "Steve Lacy (http://slacy.me)", 11 | "main": "./index.js", 12 | "dependencies": { 13 | "accord": "^0.30.0", 14 | "lodash.assign": "^4.2.0", 15 | "plugin-error": "^2.0.1", 16 | "replace-ext": "2.0.0", 17 | "stylus": "^0.59.0", 18 | "through2": "^4.0.2", 19 | "vinyl-sourcemaps-apply": "^0.2.1" 20 | }, 21 | "devDependencies": { 22 | "gulp-sourcemaps": "^3.0.0", 23 | "mocha": "^10.1.0", 24 | "should": "^13.2.3", 25 | "vinyl": "^3.0.0" 26 | }, 27 | "engines": { 28 | "node": ">= 4.2.0" 29 | }, 30 | "scripts": { 31 | "test": "mocha --reporter spec" 32 | }, 33 | "license": "MIT", 34 | "bugs": { 35 | "url": "https://github.com/stevelacy/gulp-stylus/issues" 36 | }, 37 | "directories": { 38 | "example": "examples", 39 | "test": "test" 40 | }, 41 | "keywords": [ 42 | "gulp", 43 | "stylus", 44 | "css", 45 | "preprocessor", 46 | "gulpplugin", 47 | "gulp-plugin" 48 | ] 49 | } 50 | -------------------------------------------------------------------------------- /examples/gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // include the required packages. 4 | var gulp = require('gulp'); 5 | var stylus = require('../'); 6 | 7 | 8 | // include, if you want to work with sourcemaps 9 | var sourcemaps = require('gulp-sourcemaps'); 10 | 11 | // Get one .styl file and render 12 | gulp.task('one', function () { 13 | gulp.src('./css/one.styl') 14 | .pipe(stylus()) 15 | .pipe(gulp.dest('./css/build')); 16 | }); 17 | 18 | // Options 19 | // Options compress 20 | gulp.task('compress', function () { 21 | gulp.src('./css/compressed.styl') 22 | .pipe(stylus({ 23 | compress: true 24 | })) 25 | .pipe(gulp.dest('./css/build')); 26 | }); 27 | 28 | 29 | // Set linenos 30 | gulp.task('linenos', function () { 31 | gulp.src('./css/linenos.styl') 32 | .pipe(stylus({linenos: true})) 33 | .pipe(gulp.dest('./css/build')); 34 | }); 35 | 36 | // Inline sourcemaps 37 | gulp.task('sourcemaps-inline', function () { 38 | gulp.src('./css/sourcemaps-inline.styl') 39 | .pipe(sourcemaps.init()) 40 | .pipe(stylus()) 41 | .pipe(sourcemaps.write()) 42 | .pipe(gulp.dest('./css/build')); 43 | }); 44 | 45 | // External sourcemaps 46 | gulp.task('sourcemaps-external', function () { 47 | gulp.src('./css/sourcemaps-external.styl') 48 | .pipe(sourcemaps.init()) 49 | .pipe(stylus()) 50 | .pipe(sourcemaps.write('.')) 51 | .pipe(gulp.dest('./css/build')); 52 | }); 53 | 54 | gulp.task('include-css', function() { 55 | // Stylus has an awkward and perplexing 'include css' option 56 | gulp.src('./css/*.styl') 57 | .pipe(stylus({ 58 | 'include css': true 59 | })) 60 | .pipe(gulp.dest('./')); 61 | 62 | }); 63 | 64 | 65 | // Default gulp task to run 66 | gulp.task('default', ['one', 'compress', 'linenos', 'sourcemaps-inline', 'sourcemaps-external']); 67 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var through = require('through2'); 4 | var stylus = require('accord').load('stylus'); 5 | var rext = require('replace-ext'); 6 | var extname = require('path').extname; 7 | var assign = require('lodash.assign'); 8 | var PluginError = require('plugin-error'); 9 | var applySourceMap = require('vinyl-sourcemaps-apply'); 10 | 11 | function guErr(err) { 12 | return new PluginError('gulp-stylus', err); 13 | } 14 | 15 | module.exports = function (options) { 16 | var opts = assign({}, options); 17 | 18 | return through.obj(function (file, enc, cb) { 19 | 20 | if (file.isStream()) { 21 | return cb(guErr('Streaming not supported')); 22 | } 23 | if (file.isNull()) { 24 | return cb(null, file); 25 | } 26 | if (extname(file.path) === '.css') { 27 | return cb(null, file); 28 | } 29 | if (file.sourceMap || opts.sourcemap) { 30 | opts.sourcemap = assign({basePath: file.base}, opts.sourcemap); 31 | } 32 | if (file.data) { 33 | opts.define = file.data; 34 | } 35 | opts.filename = file.path; 36 | 37 | stylus.render(file.contents.toString(enc || 'utf-8'), opts) 38 | .catch(function(err) { 39 | delete err.input; 40 | return cb(guErr(err)); 41 | }) 42 | .done(function(res) { 43 | if (res == null) { 44 | return; 45 | } 46 | if (res.result !== undefined) { 47 | file.path = rext(file.path, '.css'); 48 | if (res.sourcemap) { 49 | res.result = res.result.replace(/\/\*[@#][\s\t]+sourceMappingURL=.*?\*\/$/mg, ''); 50 | res.sourcemap.file = file.relative; 51 | applySourceMap(file, res.sourcemap); 52 | } 53 | file.contents = Buffer.from(res.result); 54 | return cb(null, file); 55 | } 56 | }); 57 | }); 58 | 59 | }; 60 | 61 | module.exports.stylus = require('stylus'); 62 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gulp-stylus 2 | [![Build Status](https://travis-ci.org/stevelacy/gulp-stylus.png?branch=master)](https://travis-ci.org/stevelacy/gulp-stylus) 3 | [![NPM version](https://badge.fury.io/js/gulp-stylus.png)](http://badge.fury.io/js/gulp-stylus) 4 | 5 | > Compile [Stylus](http://learnboost.github.io/stylus/) with gulp (gulpjs.com) 6 | 7 | ## Information 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
Packagegulp-stylus
DescriptionStylus plugin for gulp
Node Version>= 0.9
Gulp Version>= 3.x
26 | 27 | ## Usage 28 | 29 | #### Install 30 | 31 | ```sh 32 | $ npm install --save-dev gulp-stylus 33 | ``` 34 | 35 | ## Examples 36 | 37 | ```javascript 38 | 39 | // include the required packages. 40 | var gulp = require('gulp'); 41 | var data = require('gulp-data'); 42 | var stylus = require('gulp-stylus'); 43 | 44 | 45 | // include, if you want to work with sourcemaps 46 | var sourcemaps = require('gulp-sourcemaps'); 47 | 48 | // Get one .styl file and render 49 | gulp.task('one', function () { 50 | return gulp.src('./css/one.styl') 51 | .pipe(stylus()) 52 | .pipe(gulp.dest('./css/build')); 53 | }); 54 | 55 | // Options 56 | // Options compress 57 | gulp.task('compress', function () { 58 | return gulp.src('./css/compressed.styl') 59 | .pipe(stylus({ 60 | compress: true 61 | })) 62 | .pipe(gulp.dest('./css/build')); 63 | }); 64 | 65 | 66 | // Set linenos 67 | gulp.task('linenos', function () { 68 | return gulp.src('./css/linenos.styl') 69 | .pipe(stylus({linenos: true})) 70 | .pipe(gulp.dest('./css/build')); 71 | }); 72 | 73 | // Include css 74 | // Stylus has an awkward and perplexing 'include css' option 75 | gulp.task('include-css', function() { 76 | return gulp.src('./css/*.styl') 77 | .pipe(stylus({ 78 | 'include css': true 79 | })) 80 | .pipe(gulp.dest('./')); 81 | 82 | }); 83 | 84 | // Inline sourcemaps 85 | gulp.task('sourcemaps-inline', function () { 86 | return gulp.src('./css/sourcemaps-inline.styl') 87 | .pipe(sourcemaps.init()) 88 | .pipe(stylus()) 89 | .pipe(sourcemaps.write()) 90 | .pipe(gulp.dest('./css/build')); 91 | }); 92 | 93 | // External sourcemaps 94 | gulp.task('sourcemaps-external', function () { 95 | return gulp.src('./css/sourcemaps-external.styl') 96 | .pipe(sourcemaps.init()) 97 | .pipe(stylus()) 98 | .pipe(sourcemaps.write('.')) 99 | .pipe(gulp.dest('./css/build')); 100 | }); 101 | 102 | // Pass an object in raw form to be accessable in stylus 103 | var data = {red: '#ff0000'}; 104 | gulp.task('pass-object', function () { 105 | gulp.src('./sty/main.styl') 106 | .pipe(stylus({ rawDefine: { data: data }})) 107 | .pipe(gulp.dest('./css/build')); 108 | }); 109 | 110 | // Use with gulp-data 111 | gulp.task('gulp-data', function() { 112 | gulp.src('./components/**/*.styl') 113 | .pipe(data(function(file){ 114 | return { 115 | componentPath: '/' + (file.path.replace(file.base, '').replace(/\/[^\/]*$/, '')) 116 | }; 117 | })) 118 | .pipe(stylus()) 119 | .pipe(gulp.dest('./css/build')); 120 | }); 121 | 122 | /* Ex: 123 | body 124 | color: data.red; 125 | */ 126 | 127 | // Default gulp task to run 128 | gulp.task('default', ['one', 'compress', 'linenos', 'sourcemaps-inline', 'sourcemaps-external', 'pass-object']); 129 | 130 | ``` 131 | 132 | ##### You can view more examples in the [example folder.](https://github.com/stevelacy/gulp-stylus/tree/master/examples) 133 | 134 | ## Extras 135 | You can access the original `stylus` module that `gulp-stylus` uses. 136 | ``` 137 | var originalStylus = require('gulp-stylus').stylus; 138 | ``` 139 | 140 | ## Options 141 | #### All stylus options are passed to [accord/stylus](https://github.com/jenius/accord/blob/master/docs/stylus.md) 142 | 143 | 144 | 145 | ## LICENSE [MIT](LICENSE) 146 | -------------------------------------------------------------------------------- /test/main.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var should = require('should'); 4 | var sourcemaps = require('gulp-sourcemaps'); 5 | var File = require('vinyl'); 6 | var originalStylus = require('stylus'); 7 | var stylus = require('../'); 8 | var fs = require('fs'); 9 | 10 | require('mocha'); 11 | 12 | var normalContents = fs.readFileSync('test/fixtures/normal.styl'); 13 | 14 | describe('gulp-stylus', function() { 15 | it('should render stylus .styl to CSS .css', function(done) { 16 | var stream = stylus(); 17 | 18 | var fakeFile = new File({ 19 | base: 'test/fixtures', 20 | cwd: 'test/', 21 | path: 'test/fixtures/normal.styl', 22 | contents: normalContents 23 | }); 24 | 25 | stream.once('data', function(newFile) { 26 | should.exist(newFile); 27 | should.exist(newFile.contents); 28 | String(newFile.contents).should.equal(fs.readFileSync('test/expected/normal.css', 'utf8')); 29 | done(); 30 | }); 31 | stream.write(fakeFile); 32 | stream.end(); 33 | 34 | }); 35 | 36 | it ('should compress when called', function(done) { 37 | var stream = stylus({compress: true}); 38 | var fakeFile = new File({ 39 | base: 'test/fixtures', 40 | cwd: 'test/', 41 | path: 'test/fixtures/normal.styl', 42 | contents: normalContents 43 | }); 44 | 45 | stream.on('data', function(newFile) { 46 | should.exist(newFile); 47 | should.exist(newFile.contents); 48 | 49 | var fixture = fs.readFileSync('test/expected/compressed.css', 'utf8'); 50 | String(newFile.contents).should.equal(fixture); 51 | done(); 52 | }); 53 | 54 | stream.write(fakeFile); 55 | stream.end(); 56 | }); 57 | 58 | it ('should import other .styl files', function(done) { 59 | var stream = stylus({import: __dirname + '/fixtures/one.styl'}); 60 | var fakeFile = new File({ 61 | base: 'test/fixtures', 62 | cwd: 'test/', 63 | path: 'test/fixtures/normal.styl', 64 | contents: normalContents 65 | }); 66 | 67 | stream.on('data', function(newFile) { 68 | should.exist(newFile); 69 | should.exist(newFile.contents); 70 | 71 | String(newFile.contents).should.equal(fs.readFileSync('test/expected/imported.css', 'utf8')); 72 | done(); 73 | }); 74 | 75 | stream.write(fakeFile); 76 | stream.end(); 77 | }); 78 | 79 | it ('should define variables in .styl files', function(done) { 80 | var stream = stylus({define: {'white': '#fff'}}); 81 | var fakeFile = new File({ 82 | base: 'test/fixtures', 83 | cwd: 'test/', 84 | path: 'test/fixtures/define.styl', 85 | contents: fs.readFileSync('test/fixtures/define.styl') 86 | }); 87 | 88 | stream.on('data', function(newFile) { 89 | should.exist(newFile); 90 | should.exist(newFile.contents); 91 | 92 | String(newFile.contents).should.equal(fs.readFileSync('test/expected/define.css', 'utf8')); 93 | done(); 94 | }); 95 | 96 | stream.write(fakeFile); 97 | stream.end(); 98 | }); 99 | 100 | it ('should support defining variables in .styl files using gulp-data (data object attached to file)', function(done) { 101 | var stream = stylus(); 102 | var fakeFile = new File({ 103 | base: 'test/fixtures', 104 | cwd: 'test/', 105 | path: 'test/fixtures/define.styl', 106 | contents: fs.readFileSync('test/fixtures/define.styl') 107 | }); 108 | 109 | fakeFile.data = {'white': '#fff'}; 110 | 111 | stream.on('data', function(newFile) { 112 | should.exist(newFile); 113 | should.exist(newFile.contents); 114 | 115 | should.exist(newFile.data); 116 | should.exist(newFile.data.white); 117 | should(newFile.data.white).equal('#fff'); 118 | 119 | String(newFile.contents).should.equal(fs.readFileSync('test/expected/define.css', 'utf8')); 120 | done(); 121 | }); 122 | 123 | stream.write(fakeFile); 124 | stream.end(); 125 | }); 126 | 127 | it('should skip css files', function(done) { 128 | var stream = stylus(); 129 | 130 | var fakeFile = new File({ 131 | base: 'test/fixtures', 132 | cwd: 'test/', 133 | path: 'test/fixtures/ie8.css', 134 | contents: fs.readFileSync('test/fixtures/ie8.css') 135 | }); 136 | 137 | stream.once('data', function(newFile) { 138 | should.exist(newFile); 139 | should.exist(newFile.contents); 140 | String(newFile.contents).should.equal(fs.readFileSync('test/fixtures/ie8.css', 'utf8')); 141 | done(); 142 | }); 143 | stream.write(fakeFile); 144 | stream.end(); 145 | 146 | }); 147 | 148 | 149 | it('should throw on parse error', function(done) { 150 | var stream = stylus(); 151 | 152 | var file = 'test/fixtures/error.styl'; 153 | 154 | var fakeFile = new File({ 155 | base: 'test/fixtures', 156 | cwd: 'test/', 157 | path: file, 158 | contents: fs.readFileSync(file) 159 | }); 160 | 161 | stream.on('error', function(err) { 162 | should.exist(err); 163 | err.name.toString().should.match(/ParseError/); 164 | done(); 165 | }); 166 | stream.write(fakeFile); 167 | stream.end(); 168 | 169 | }); 170 | 171 | it ('should import nested and reverse recursive files', function(done) { 172 | var stream = stylus(); 173 | var fakeFile = new File({ 174 | base: 'test/fixtures', 175 | cwd: 'test/', 176 | path: 'test/fixtures/import.styl', 177 | contents: fs.readFileSync('test/fixtures/import.styl') 178 | }); 179 | 180 | stream.on('data', function(newFile) { 181 | should.exist(newFile); 182 | should.exist(newFile.contents); 183 | String(newFile.contents).should.equal(fs.readFileSync('test/expected/import.css', 'utf8')); 184 | done(); 185 | }); 186 | stream.write(fakeFile); 187 | stream.end(); 188 | }); 189 | 190 | it ('should generate sourcemaps', function(done) { 191 | var stream = stylus({sourcemap: true}); 192 | 193 | var fakeFile = new File({ 194 | base: 'test/fixtures', 195 | cwd: 'test/', 196 | path: 'test/fixtures/normal.styl', 197 | contents: normalContents 198 | }); 199 | 200 | stream.on('data', function(newFile) { 201 | should.exist(newFile); 202 | should.exist(newFile.contents); 203 | String(newFile.contents).should.equal(fs.readFileSync('test/expected/normal.css', 'utf8')); 204 | should.exist(newFile.sourceMap); 205 | newFile.sourceMap.version.should.equal(3); 206 | newFile.sourceMap.mappings.length.should.be.above(1); 207 | newFile.sourceMap.sources[0].should.equal('normal.styl'); 208 | newFile.sourceMap.file.should.equal('normal.css'); 209 | done(); 210 | }); 211 | 212 | stream.write(fakeFile); 213 | stream.end(); 214 | 215 | }); 216 | 217 | it ('should generate sourcemaps with gulp-sourcemaps', function(done) { 218 | var stream = sourcemaps.init(); 219 | 220 | var fakeFile = new File({ 221 | base: 'test/fixtures', 222 | cwd: 'test/', 223 | path: 'test/fixtures/normal.styl', 224 | contents: normalContents 225 | }); 226 | 227 | stream.write(fakeFile); 228 | stream.pipe(stylus()) 229 | .on('error', done) 230 | .on('data', function(newFile) { 231 | should.exist(newFile); 232 | should.exist(newFile.contents); 233 | String(newFile.contents).should.equal(fs.readFileSync('test/expected/normal.css', 'utf8')); 234 | should.exist(newFile.sourceMap); 235 | newFile.sourceMap.version.should.equal(3); 236 | newFile.sourceMap.mappings.length.should.be.above(1); 237 | newFile.sourceMap.sources[0].should.equal('normal.styl'); 238 | newFile.sourceMap.file.should.equal('normal.css'); 239 | done(); 240 | }); 241 | 242 | stream.end(); 243 | 244 | }); 245 | 246 | it ('should use native stylus sourcemap options when provided', function(done) { 247 | var stream = sourcemaps.init(); 248 | 249 | var fakeFile = new File({ 250 | base: 'test', 251 | cwd: 'test/', 252 | path: 'test/fixtures/normal.styl', 253 | contents: normalContents 254 | }); 255 | 256 | stream.write(fakeFile); 257 | stream.pipe(stylus({ 258 | sourcemap: {basePath: '.'} 259 | })) 260 | .on('error', done) 261 | .on('data', function(newFile) { 262 | should.exist(newFile); 263 | should.exist(newFile.sourceMap); 264 | newFile.sourceMap.sources.length.should.equal(1); 265 | newFile.sourceMap.mappings.length.should.be.above(1); 266 | newFile.sourceMap.sources[0].should.equal('test/fixtures/normal.styl'); 267 | newFile.sourceMap.file.should.equal('fixtures/normal.css'); 268 | done(); 269 | }); 270 | 271 | stream.end(); 272 | 273 | }); 274 | 275 | it('should export Stylus', function(done) { 276 | should.exist(stylus.stylus); 277 | should(stylus.stylus).equal(originalStylus); 278 | done(); 279 | }); 280 | 281 | }); 282 | --------------------------------------------------------------------------------