Skip to content

Commit

Permalink
Merge pull request #92 from enb-make/issue-71
Browse files Browse the repository at this point in the history 
Use postcss for compress
  • Loading branch information
@tavriaforever
tavriaforever committed Jul 23, 2015
2 parents 8da26e9 + b9fef45 commit a4ff7fd
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 46 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
9 changes: 7 additions & 2 deletions techs/stylus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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);
},

Expand Down
8 changes: 7 additions & 1 deletion test/stylus-native-tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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,

Expand Down
137 changes: 94 additions & 43 deletions test/stylus-tech.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand Down Expand Up @@ -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; }' }
};
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
});
});
});

Expand Down Expand Up @@ -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) {
Expand All @@ -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);
});
}

Expand Down

0 comments on commit a4ff7fd

Please sign in to comment.