From b9fef45d1a802787ca323d549659d04bb6124e81 Mon Sep 17 00:00:00 2001 From: tavriaforever Date: Thu, 23 Jul 2015 17:17:16 +0300 Subject: [PATCH] Add option for compress styles --- package.json | 1 + techs/stylus.js | 9 ++- test/stylus-native-tests.js | 8 ++- test/stylus-tech.test.js | 137 +++++++++++++++++++++++++----------- 4 files changed, 109 insertions(+), 46 deletions(-) diff --git a/package.json b/package.json index 98392d8..f9210bc 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ }, "dependencies": { "autoprefixer-core": "5.2.0", + "csswring": "3.0.5", "nib": "1.1.0", "postcss": "4.1.11", "postcss-import": "5.2.2", diff --git a/techs/stylus.js b/techs/stylus.js index ba4c28a..8fbc372 100644 --- a/techs/stylus.js +++ b/techs/stylus.js @@ -56,7 +56,8 @@ var path = require('path'), stylus = require('stylus'), autoprefixer = require('autoprefixer-core'), nib = require('nib'), - EOL = require('os').EOL; + EOL = require('os').EOL, + csswring = require('csswring'); module.exports = require('enb/lib/build-flow').create() .name('stylus') @@ -139,7 +140,6 @@ module.exports = require('enb/lib/build-flow').create() } var renderer = stylus(content) - .set('compress', this._compress) .set('prefix', this._prefix) .set('filename', filename) .set('sourcemap', map) @@ -229,6 +229,11 @@ module.exports = require('enb/lib/build-flow').create() ); } + // compress css + if (this._compress) { + processor.use(csswring()); + } + return processor.process(css, opts); }, diff --git a/test/stylus-native-tests.js b/test/stylus-native-tests.js index 2037397..89b2c63 100644 --- a/test/stylus-native-tests.js +++ b/test/stylus-native-tests.js @@ -24,6 +24,13 @@ var fs = require('fs'), 'object', 'operators', + // not use native stylus compress option, + // by default, compression is a `postcss` plugin `csswring` + 'atrules.compressed', + 'compress.units', + 'regression.248.compressed', + 'compress.comments', + // skip this test, because on BEM project we don't need to check // for the file while you override links on stylus // for history: https://github.com/stylus/stylus/issues/1951 @@ -77,7 +84,6 @@ addSuite('cases', readDir(stylusDir + '/cases', '.styl'), function (test, done) node.runTechAndGetContent( StylusTech, { includes: ['./images', './cases/import.basic'], - compress: test.indexOf('compress') !== -1, prefix: test.indexOf('prefix.') !== -1 && 'prefix-', hoist: test.indexOf('hoist.') !== -1 || test.indexOf('rule.charset') !== -1, diff --git a/test/stylus-tech.test.js b/test/stylus-tech.test.js index 2e58452..3708c94 100644 --- a/test/stylus-tech.test.js +++ b/test/stylus-tech.test.js @@ -6,8 +6,9 @@ var fs = require('fs'), MockNode = require('mock-enb/lib/mock-node'), FileList = require('enb/lib/file-list'), StylusTech = require('../techs/stylus'), - stylus = mockFsHelper.duplicateFSInMemory(path.join(__dirname, 'fixtures', 'stylus')), - nib = mockFsHelper.duplicateFSInMemory(path.resolve('node_modules', 'nib')); + stylus = mockFsHelper.duplicateFSInMemory(path.resolve('node_modules', 'stylus')), + nib = mockFsHelper.duplicateFSInMemory(path.resolve('node_modules', 'nib')), + EOL = require('os').EOL; describe('stylus-tech', function () { afterEach(function () { @@ -53,8 +54,10 @@ describe('stylus-tech', function () { it('must require .styl file once', function () { var scheme = { blocks: { - 'block.styl': '@require "../plugins/file.styl"\n' + - '@require "../plugins/file.styl"' + 'block.styl': [ + '@require "../plugins/file.styl"', + '@require "../plugins/file.styl"' + ].join(EOL) }, plugins: { 'file.styl': 'body { color: #000; }' } }; @@ -102,14 +105,18 @@ describe('stylus-tech', function () { 'block.png': new Buffer('block image'), 'block.gif': new Buffer('block image') }, - 'block.styl': 'body { background-image: url(images/block.jpg) } ' + - 'div { background-image: url(images/block.png) } ' + - 'section { background-image: url(images/block.gif) }' + 'block.styl': [ + 'body { background-image: url(images/block.jpg) }', + 'div { background-image: url(images/block.png) }', + 'section { background-image: url(images/block.gif) }' + ].join(EOL) } }, - expected = 'body{background-image:url(\"data:image/jpeg;base64,YmxvY2sgaW1hZ2U=\");}' + - 'div{background-image:url(\"data:image/png;base64,YmxvY2sgaW1hZ2U=\");}' + - 'section{background-image:url(\"data:image/gif;base64,YmxvY2sgaW1hZ2U=\");}'; + expected = [ + 'body{background-image:url(\"data:image/jpeg;base64,YmxvY2sgaW1hZ2U=\");}', + 'div{background-image:url(\"data:image/png;base64,YmxvY2sgaW1hZ2U=\");}', + 'section{background-image:url(\"data:image/gif;base64,YmxvY2sgaW1hZ2U=\");}' + ].join(''); return build(scheme, { url: 'inline' }).then(function (actual) { actual.must.equal(expected); @@ -134,14 +141,18 @@ describe('stylus-tech', function () { it('must not rebase/inline absolute url()', function () { var scheme = { blocks: { - 'block.styl': 'body { background-image: url(http://foo.com/foo.css) } ' + - 'div { background-image: url(https://foo.com/foo.css) } ' + - 'section { background-image: url(//foo.com/foo.css) } ' + 'block.styl': [ + 'body { background-image: url(http://foo.com/foo.css) }', + 'div { background-image: url(https://foo.com/foo.css) }', + 'section { background-image: url(//foo.com/foo.css) }' + ].join(EOL) } }, - expected = 'body{background-image:url(\"http://foo.com/foo.css\");}' + - 'div{background-image:url(\"https://foo.com/foo.css\");}' + - 'section{background-image:url(\"//foo.com/foo.css\");}'; + expected = [ + 'body{background-image:url(\"http://foo.com/foo.css\");}', + 'div{background-image:url(\"https://foo.com/foo.css\");}', + 'section{background-image:url(\"//foo.com/foo.css\");}' + ].join(''); return build(scheme, { url: 'rebase' }).then(function (actual) { actual.must.equal(expected); @@ -153,19 +164,23 @@ describe('stylus-tech', function () { it('must add vendor prefixes from browserlist', function () { var scheme = { blocks: { - 'block.styl': 'body { ' + - ' color: #000; ' + - ' display: flex;' + - '} ' + 'block.styl': [ + 'body { ', + ' color: #000; ', + ' display: flex;', + '} ' + ].join(EOL) } }, - expected = 'body{' + - 'color:#000;' + - 'display:-webkit-box;' + - 'display:-webkit-flex;' + - 'display:-ms-flexbox;' + - 'display:flex;' + - '}'; + expected = [ + 'body{', + 'color:#000;', + 'display:-webkit-box;', + 'display:-webkit-flex;', + 'display:-ms-flexbox;', + 'display:flex;', + '}' + ].join(''); return build(scheme, { autoprefixer: true }).then(function (actual) { actual.must.equal(expected); @@ -175,22 +190,26 @@ describe('stylus-tech', function () { it('must add vendor prefixes from browser config', function () { var scheme = { blocks: { - 'block.styl': 'body { ' + - ' color: #000; ' + - ' display: flex;' + - '} ' + 'block.styl': [ + 'body { ', + ' color: #000; ', + ' display: flex;', + '} ' + ].join(EOL) } }, - expected = 'body{' + - 'color:#000;' + - 'display:-ms-flexbox;' + - 'display:flex;' + - '}', - browsersConfig = ['Explorer 10']; - - return build(scheme, { autoprefixer: { browsers: browsersConfig } }).then(function (actual) { - actual.must.equal(expected); - }); + expected = [ + 'body{', + 'color:#000;', + 'display:-ms-flexbox;', + 'display:flex;', + '}' + ].join(''); + + return build(scheme, { autoprefixer: { browsers: ['Explorer 10'] } }) + .then(function (actual) { + actual.must.equal(expected); + }); }); }); @@ -232,13 +251,45 @@ describe('stylus-tech', function () { 'block.styl': 'body { size: 5em 10em; }' } }, - expected = 'body{width:5em;height:10em;}'; + expected = [ + 'body{', + 'width:5em;', + 'height:10em;', + '}' + ].join(''); return build(scheme, { useNib: true }).then(function (actual) { actual.must.equal(expected); }); }); }); + + describe('compress', function () { + it('must compressed result css', function () { + var scheme = { + blocks: { + 'block.styl': [ + 'body { ', + ' color: #000; ', + '} ', + 'div {} ', + 'div { ', + ' font-weight: normal; ', + ' margin: 0px; ', + ' padding: 5px 0 5px 0; ', + ' background: hsl(134, 50%, 50%); ', + ' padding: 5px 0 5px 0; ', + '} ' + ].join(EOL) + } + }, + expected = 'body{color:#000}div{font-weight:400;margin:0;background:#40bf5e;padding:5px 0}'; + + return build(scheme, { compress: true }).then(function (actual) { + actual.must.equal(expected); + }); + }); + }); }); function build (scheme, options) { @@ -264,7 +315,7 @@ function build (scheme, options) { bundle.provideTechData('?.files', fileList); return bundle.runTechAndGetContent(StylusTech, commonOptions).spread(function (content) { - return normalizeContent(content); + return commonOptions.compress ? content : normalizeContent(content); }); }