Add default browsers list for autoprefixer (#38)

giuseppeg · web-flow · commit 7b8526dd11f3 · 2016-09-21T20:40:15.000+02:00
Add default browsers list for autoprefixer Fixes #34
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ### HEAD
 
+* Add default browsers list for autoprefixer
 * Use `stylelint-config-suitcss` from within the preprocessor. No longer needs
   to be installed locally by the consumer.
 
diff --git a/README.md b/README.md
@@ -278,6 +278,21 @@ var result = [
 ];
 ```
 
+#### Autoprefixer: vendor prefixes
+
+By default the preprocessor uses the SUIT
+[browserslist](https://github.com/ai/browserslist) configuration:
+
+```
+> 1%, last 2 versions, safari > 6, ie > 9, ios > 6, android > 4.3, samsung > 3, chromeandroid > 50
+```
+
+The preprocessor doesn't attempt to find any `browserslist` config file.
+
+Instead you can customise the browsers list
+via [configuration file](#plugin-configuration).
+
+
 ## Acknowledgements
 
 Based on [Myth](https://github.com/segmentio/myth) by Segment.io.
diff --git a/lib/index.js b/lib/index.js
@@ -32,6 +32,10 @@ var defaults = {
     'autoprefixer',
     'postcss-reporter'
   ],
+  autoprefixer: {
+    browsers: '> 1%, last 2 versions, safari > 6, ie > 9, ' +
+      'ios > 6, android > 4.3, samsung > 3, chromeandroid > 50'
+  },
   'postcss-easy-import': {
     onImport: function(imported) {
       // Update the watch task with the list of imported files
diff --git a/test/fixtures/cli/input.out.css b/test/fixtures/cli/input.out.css
@@ -1,7 +1,6 @@
 .cli {
   color: #f00;
   width: 100px;
-  -webkit-transition: all 1s;
   transition: all 1s;
 }
 
diff --git a/test/fixtures/component.out.css b/test/fixtures/component.out.css
@@ -10,8 +10,6 @@
 }
 
 .Component-item {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 
diff --git a/test/fixtures/config.out.css b/test/fixtures/config.out.css
@@ -10,8 +10,6 @@
 }
 
 .Component-item {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 
diff --git a/test/fixtures/import.out.css b/test/fixtures/import.out.css
@@ -1,4 +1,3 @@
 body {
-  -webkit-transition: -webkit-transform 1s;
-          transition: transform 1s;
+  transition: transform 1s;
 }
diff --git a/test/fixtures/minify.out.css b/test/fixtures/minify.out.css
@@ -1 +1 @@
-.u-img{border-radius:50%}.Component{font-size:16px;width:16.66667%}.Component-item{display:-webkit-box;display:-ms-flexbox;display:flex}@media (min-width:200px){.Component-item{color:red}}
+.u-img{border-radius:50%}.Component{font-size:16px;width:16.66667%}.Component-item{display:flex}@media (min-width:200px){.Component-item{color:red}}
diff --git a/test/noautoprefixer.config.js b/test/noautoprefixer.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  autoprefixer: {
+    add: false,
+    remove: false
+  }
+};
diff --git a/test/test.config.js b/test/test.config.js
@@ -5,5 +5,9 @@ module.exports = {
   },
   use: [
     "postcss-property-lookup"
-  ]
+  ],
+  autoprefixer: {
+    add: false,
+    remove: false
+  }
 };
diff --git a/test/test.js b/test/test.js
@@ -40,6 +40,7 @@ describe('suitcss', function() {
 
     it('should use default options when nothing is passed', function() {
       var keys = [
+        'autoprefixer',
         'minify',
         'use',
         'lint',
@@ -279,7 +280,25 @@ describe('features', function() {
     var input = read('fixtures/component');
     var output = read('fixtures/component.out');
 
-    suitcss(input, {root: 'test/fixtures'}).then(function(result) {
+    suitcss(input, {
+      root: 'test/fixtures',
+      // disable autoprefixer
+      autoprefixer: {add: false, remove: false}
+    }).then(function(result) {
+      expect(result.css.trim()).to.be.equal(output.trim());
+      done();
+    }).catch(done);
+  });
+
+  it('should add vendor prefixes', function(done) {
+    var input = '.test { filter: blur(1px) }';
+    var output = '.test { -webkit-filter: blur(1px); filter: blur(1px) }';
+
+    suitcss(input, {
+      autoprefixer: {
+        browsers: 'Chrome 50'
+      }
+    }).then(function(result) {
       expect(result.css.trim()).to.be.equal(output.trim());
       done();
     }).catch(done);
@@ -299,7 +318,7 @@ describe('cli', function() {
   });
 
   it('should read from a file and write to a file', function(done) {
-    exec('node bin/suitcss test/fixtures/cli/input.css test/fixtures/cli/output.css', function(err) {
+    exec('node bin/suitcss -c test/noautoprefixer.config.js test/fixtures/cli/input.css test/fixtures/cli/output.css', function(err) {
       if (err) return done(err);
       var res = read('fixtures/cli/output');
       expect(res).to.equal(output);
@@ -308,15 +327,15 @@ describe('cli', function() {
   });
 
   it('should read from a file and write to stdout', function(done) {
-    exec('node bin/suitcss test/fixtures/cli/input.css', function(err, stdout) {
+    exec('node bin/suitcss -c test/noautoprefixer.config.js test/fixtures/cli/input.css', function(err, stdout) {
       if (err) return done(err);
       expect(stdout).to.equal(output);
       done();
     });
   });
 
   it('should read from stdin and write to stdout', function(done) {
-    var testChild = exec('node bin/suitcss', function(err, stdout) {
+    var testChild = exec('node bin/suitcss -c test/noautoprefixer.config.js', function(err, stdout) {
       if (err) return done(err);
       expect(stdout).to.equal(output);
       expect(stdout).to.not.contain('beforeLint ran');
@@ -328,7 +347,7 @@ describe('cli', function() {
   });
 
   it('should log on verbose', function(done) {
-    exec('node bin/suitcss -v test/fixtures/cli/input.css test/fixtures/cli/output.css', function(err, stdout) {
+    exec('node bin/suitcss -v  -c test/noautoprefixer.config.js test/fixtures/cli/input.css test/fixtures/cli/output.css', function(err, stdout) {
       if (err) return done(err);
       expect(stdout).to.contain('write');
       expect(stdout).to.not.contain('beforeLint ran');
@@ -337,7 +356,7 @@ describe('cli', function() {
   });
 
   it('should allow configurable import root', function(done) {
-    exec('node bin/suitcss -i test/fixtures test/fixtures/import.css test/fixtures/cli/output.css', function(err, stdout) {
+    exec('node bin/suitcss -i test/fixtures -c test/noautoprefixer.config.js test/fixtures/import.css test/fixtures/cli/output.css', function(err, stdout) {
       if (err) return done(err);
       var res = read('fixtures/cli/output');
       var expected = read('fixtures/component.out');
@@ -348,15 +367,15 @@ describe('cli', function() {
   });
 
   it('should output stylelint warnings', function(done) {
-    exec('node bin/suitcss -i test/fixtures test/fixtures/stylelint-import.css test/fixtures/cli/output.css -l', function(err, stdout) {
+    exec('node bin/suitcss -i test/fixtures -c test/noautoprefixer.config.js test/fixtures/stylelint-import.css test/fixtures/cli/output.css -l', function(err, stdout) {
       if (err) return done(err);
       expect(stdout).to.contain('Expected indentation of 2 spaces');
       done();
     });
   });
 
   it('should minify the output', function(done) {
-    exec('node bin/suitcss -i test/fixtures test/fixtures/import.css test/fixtures/cli/output.css -m', function(err, stdout) {
+    exec('node bin/suitcss -i test/fixtures -c test/noautoprefixer.config.js test/fixtures/import.css test/fixtures/cli/output.css -m', function(err, stdout) {
       if (err) return done(err);
       var res = read('fixtures/cli/output');
       var expected = read('fixtures/minify.out');
@@ -387,7 +406,7 @@ describe('cli', function() {
   });
 
   it('should log on non-existant file', function(done) {
-    exec('node bin/suitcss test/fixtures/cli/non-existant.css', function(err, stdout, stderr) {
+    exec('node bin/suitcss -c test/noautoprefixer.config.js test/fixtures/cli/non-existant.css', function(err, stdout, stderr) {
       expect(err).to.be.an('error');
       expect(err.code).to.equal(1);
       expect(stderr).to.contain('not found');

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,6 @@`
`1`	`1`	`.cli {`
`2`	`2`	`color: #f00;`
`3`	`3`	`width: 100px;`
`4`		`- -webkit-transition: all 1s;`
`5`	`4`	`transition: all 1s;`
`6`	`5`	`}`
`7`	`6`
Original file line number	Diff line number	Diff line change
`@@ -10,8 +10,6 @@`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`.Component-item {`
`13`		`- display: -webkit-box;`
`14`		`- display: -ms-flexbox;`
`15`	`13`	`display: flex;`
`16`	`14`	`}`
`17`	`15`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`	`1`	`body {`
`2`		`- -webkit-transition: -webkit-transform 1s;`
`3`		`- transition: transform 1s;`
	`2`	`+ transition: transform 1s;`
`4`	`3`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-.u-img{border-radius:50%}.Component{font-size:16px;width:16.66667%}.Component-item{display:-webkit-box;display:-ms-flexbox;display:flex}@media (min-width:200px){.Component-item{color:red}}`
	`1`	`+.u-img{border-radius:50%}.Component{font-size:16px;width:16.66667%}.Component-item{display:flex}@media (min-width:200px){.Component-item{color:red}}`