Add Stylis

package.json

@@ -37,7 +37,8 @@
     "stylecow-plugin-prefixes": "^6.0.5",
     "stylecow-plugin-variables": "^5.1.1",
     "stylus": "^0.54.5",
-    "through2": "^2.0.3"
+    "through2": "^2.0.3",
+    "stylis": "^3.0.5"
   },
   "scripts": {
     "lint-staged": "lint-staged",

parsers.js

@@ -29,6 +29,7 @@ var gonzales   = require('gonzales');
 var parserlib  = require('parserlib');
 var gonzalesPe = require('gonzales-pe');
 var csstree    = require('css-tree');
+var stylis     = require('stylis');
 
 module.exports = {
     name: 'Bootstrap',
@@ -105,6 +106,12 @@ module.exports = {
             fn: function () {
                 stylecow.parse(css).toString();
             }
+        },
+        {
+            name: 'Stylis',
+            fn: function () {
+                stylis('', css)
+            }
         }
     ]
 };

prefixers.js

@@ -45,6 +45,9 @@ var scss = '@import \'compass/css3\';\n' + css
 var scssFile = path.join(__dirname, 'cache/bootstrap.prefixers.scss');
 fs.writeFileSync(scssFile, scss);
 
+// Stylis
+var stylis = require('stylis')
+
 module.exports = {
     name: 'Bootstrap',
     maxTime: 15,
@@ -90,6 +93,14 @@ module.exports = {
                     done.resolve();
                 });
             }
+        },
+        {
+            name: 'Stylis',
+            defer: true,
+            fn: function (done) {
+                stylis('', css);
+                done.resolve();
+            }
         }
     ]
 };

preprocessors.js

@@ -103,6 +103,17 @@ for ( i = 0; i < 100; i++ ) {
     lcss += '.search { fill: black; .icon() }';
 }
 
+// Stylis
+var stylis = require('stylis');
+var styi = css;
+styi += ':root { --size: 100px; }';
+for ( i = 0; i < 100; i++ ) {
+    styi += 'body h1 a { color: black; }';
+    styi += 'h2 { width: var(--size); }';
+    styi += 'h1 { width: calc(2 * var(--size)); }';
+    styi += '.search { fill: black; width: 16px; height: 16px; }';
+}
+
 module.exports = {
     name: 'Bootstrap',
     maxTime: 15,
@@ -170,6 +181,12 @@ module.exports = {
                     done.resolve();
                 });
             }
+        },
+        {
+            name: 'Stylis',
+            fn: function () {
+                stylis('', styi);
+            }  
         }
     ]
 };