Permalink
Browse files

Add prefixers benchmark

  • Loading branch information...
1 parent 38c6a2a commit d3dfeef6cf6c9ad7b7b7d1e4a09b002c53dca6b7 @ai ai committed May 18, 2015
Showing with 151 additions and 17 deletions.
  1. +1 −0 Gemfile
  2. +19 −0 Gemfile.lock
  3. +21 −0 README.md
  4. +9 −15 gulpfile.js
  5. +5 −2 package.json
  6. +96 −0 prefixers.js
View
@@ -1,3 +1,4 @@
source "https://rubygems.org"
gem 'sass'
+gem 'compass'
View
@@ -1,10 +1,29 @@
GEM
remote: https://rubygems.org/
specs:
+ chunky_png (1.3.4)
+ compass (1.0.3)
+ chunky_png (~> 1.2)
+ compass-core (~> 1.0.2)
+ compass-import-once (~> 1.0.5)
+ rb-fsevent (>= 0.9.3)
+ rb-inotify (>= 0.9)
+ sass (>= 3.3.13, < 3.5)
+ compass-core (1.0.3)
+ multi_json (~> 1.0)
+ sass (>= 3.3.0, < 3.5)
+ compass-import-once (1.0.5)
+ sass (>= 3.2, < 3.5)
+ ffi (1.9.8)
+ multi_json (1.11.0)
+ rb-fsevent (0.9.4)
+ rb-inotify (0.9.5)
+ ffi (>= 0.5.0)
sass (3.4.13)
PLATFORMS
ruby
DEPENDENCIES
+ compass
sass
View
@@ -52,3 +52,24 @@ npm test parsers
```
[Compare CSS parsers]: https://github.com/postcss/benchmark/blob/master/parsers.js
+
+## Prefixers
+
+[Compare vendor prefixes tools]:
+
+```
+Autoprefixer: 59 ms
+Stylecow: 285 ms (4.8 times slower)
+nib: 403 ms (6.8 times slower)
+Compass: 2564 ms (43.2 times slower)
+```
+
+To get results on your environment:
+
+```sh
+npm install
+bundle install
+npm test prefixers
+```
+
+[Compare CSS parsers]: https://github.com/postcss/benchmark/blob/master/prefixers.js
View
@@ -28,20 +28,14 @@ gulp.task('bootstrap', function (done) {
});
});
-gulp.task('preprocessors', ['bootstrap'], function () {
- var bench = require('gulp-bench');
- var summary = require('gulp-bench-summary');
- return gulp.src('./preprocessors.js', { read: false })
- .pipe(bench())
- .pipe(summary('PostCSS'));
-});
-
-gulp.task('parsers', ['bootstrap'], function () {
- var bench = require('gulp-bench');
- var summary = require('gulp-bench-summary');
- return gulp.src('./parsers.js', { read: false })
- .pipe(bench())
- .pipe(summary('PostCSS'));
+['preprocessors', 'parsers', 'prefixers'].forEach(function (name) {
+ gulp.task(name, ['bootstrap'], function () {
+ var bench = require('gulp-bench');
+ var summary = require('gulp-bench-summary');
+ return gulp.src('./' + name + '.js', { read: false })
+ .pipe(bench())
+ .pipe(summary(name === 'prefixers' ? 'Autoprefixer' : 'PostCSS'));
+ });
});
-gulp.task('default', ['lint', 'preprocessors', 'parsers']);
+gulp.task('default', ['lint', 'preprocessors', 'parsers', 'prefixers']);
View
@@ -3,9 +3,11 @@
"dependencies": {
"postcss-simple-vars": "0.3.0",
"gulp-bench-summary": "0.1.0",
+ "autoprefixer-core": "5.1.11",
"load-resources": "0.1.0",
"postcss-nested": "0.3.1",
"postcss-mixins": "0.3.0",
+ "autoprefixer": "5.1.1",
"postcss-calc": "4.0.1",
"gonzales-pe": "3.0.0-27",
"gulp-eslint": "0.12.0",
@@ -16,14 +18,15 @@
"stylecow": "6.5.0",
"gonzales": "1.0.7",
"fs-extra": "0.18.3",
- "postcss": "4.1.10",
+ "postcss": "4.1.11",
"mensch": "0.3.1",
"stylus": "0.51.1",
"rework": "1.0.1",
"cssom": "0.3.0",
"less": "2.5.0",
"myth": "1.4.0",
- "gulp": "3.8.11"
+ "gulp": "3.8.11",
+ "nib": "1.1.0"
},
"scripts": {
"test": "gulp"
View
@@ -0,0 +1,96 @@
+/* Results on Fedora 21, Intel 5Y70, 8 GB RAM and SSD:
+
+Autoprefixer: 59 ms
+Stylecow: 285 ms (4.8 times slower)
+nib: 403 ms (6.8 times slower)
+Compass: 2564 ms (43.2 times slower)
+*/
+
+var exec = require('child_process').exec;
+var path = require('path');
+var fs = require('fs');
+
+var example = path.join(__dirname, 'cache', 'bootstrap.css');
+var css = fs.readFileSync(example).toString();
+
+// Autoprefixer
+var autoprefixer = require('autoprefixer-core');
+var postcss = require('postcss');
+
+css = postcss([ autoprefixer({ browsers: [] }) ]).process(css).css;
+var processor = postcss([ autoprefixer ]);
+
+// Stylecow
+var stylecow = require('stylecow');
+stylecow.loadPlugin('prefixes');
+
+// nib
+var stylus = require('stylus');
+var styl = "@import 'nib';\n" + css
+ .replace('@charset "UTF-8";', '')
+ .replace(/\}/g, '}\n').replace(/(\w)\[[^\]]+\]/g, '$1')
+ .replace(/filter:[^;}]+;?/ig, '')
+ .replace(/(@keyframes[^\{]+)\{/ig, '$1 {')
+ .replace(/url\([^\)]+\)/ig, 'white');
+
+// Compass
+var scss = "@import 'compass/css3';\n" + css
+ .replace(/([^-])transform:([^;}]+)(;|})/g, '$1@include transform($2)$3')
+ .replace(/transition:([^;}]+)(;|})/g, '@include transition($1)$2')
+ .replace(/background(-image)?:((linear|radial)([^;}]+))(;|})/g,
+ '@include background($2)$5')
+ .replace(/box-sizing:([^;}]+)(;|})/g, '@include box-sizing($1)$2');
+var scssFile = path.join(__dirname, 'cache/bootstrap.scss');
+fs.writeFileSync(scssFile, scss);
+
+module.exports = {
+ name: 'Bootstrap',
+ maxTime: 15,
+ tests: [
+ {
+ name: 'Autoprefixer',
+ defer: true,
+ fn: function (done) {
+ processor.process(css, { map: false }).then(function () {
+ done.resolve();
+ });
+ }
+ },
+ {
+ name: 'Stylecow',
+ defer: true,
+ fn: function (done) {
+ var file = new stylecow.Reader(new stylecow.Tokens(css));
+ var ast = stylecow.Root.create(file);
+ stylecow.run(ast);
+ ast.toString();
+ done.resolve();
+ }
+ },
+ {
+ name: 'nib',
+ defer: true,
+ fn: function (done) {
+ stylus(styl)
+ .include(require('nib').path)
+ .render(function (err) {
+ if ( err ) throw err;
+ done.resolve();
+ });
+ }
+ },
+ {
+ name: 'Compass',
+ defer: true,
+ fn: function (done) {
+ var command = 'sass -C --compass --sourcemap=none ' + scssFile;
+ var dir = __dirname;
+ exec('cd ' + dir + '; bundle exec ' + command,
+ function (error, stdout, stderr) {
+ if ( error ) throw stderr;
+ done.resolve();
+ });
+ }
+ }
+ ]
+};

0 comments on commit d3dfeef

Please sign in to comment.