feat: make validate addon compile

Author: streamich

.storybook/rule.stories.js

@@ -5,9 +5,9 @@ const {linkTo} = require('@storybook/addon-links');
 const {create} = require('../index');
 const {addon} = require('../addon/rule');
 
-const renderer = create();
-addon(renderer);
-const {rule} = renderer;
+const nano = create();
+addon(nano);
+const {rule} = nano;
 
 const className1 = rule({
   border: '1px solid red'

.storybook/validate.stories.js

@@ -0,0 +1,19 @@
+import {createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+const {action} = require('@storybook/addon-actions');
+const {linkTo} = require('@storybook/addon-links');
+const {create} = require('../index');
+
+const nano = create();
+require('../addon/rule').addon(nano);
+require('../addon/validate').addon(nano);
+const {rule} = nano;
+
+const className1 = rule({
+  border: '1px solid red'
+}, 'validate1');
+
+storiesOf('Addons/validate', module)
+  .add('No error', () =>
+    h('div', {className: className1}, 'Hello world')
+  )

.storybook/webpack.config.js

@@ -9,7 +9,7 @@ module.exports = {
   },
 
   resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
     enforceExtension: false
   }
 };

addon/validate.js

@@ -1,6 +1,55 @@
 'use strict';
 
-var validateString = require('csstree-validator').validateString;
+var csstree = require('css-tree');
+var syntax = csstree.lexer;
+
+function validate(css, filename) {
+    var errors = [];
+    var ast = csstree.parse(css, {
+        filename: filename,
+        positions: true,
+        onParseError: function(error) {
+            errors.push(error);
+        }
+    });
+
+    csstree.walk(ast, {
+        visit: 'Declaration',
+        enter: function(node) {
+            var match = syntax.matchDeclaration(node);
+            var error = match.error;
+
+            if (error) {
+                var message = error.rawMessage || error.message || error;
+
+                // ignore errors except those which make sense
+                if (error.name !== 'SyntaxMatchError' &&
+                    error.name !== 'SyntaxReferenceError') {
+                    return;
+                }
+
+                if (message === 'Mismatch') {
+                    message = 'Invalid value for `' + node.property + '`';
+                } else if (message === 'Uncomplete match') {
+                    message = 'The rest part of value can\'t be matched to `' + node.property + '` syntax';
+                }
+
+                errors.push({
+                    name: error.name,
+                    node: node,
+                    loc: error.loc || node.loc,
+                    line: error.line || node.loc && node.loc.start && node.loc.start.line,
+                    column: error.column || node.loc && node.loc.start && node.loc.start.column,
+                    property: node.property,
+                    message: message,
+                    error: error
+                });
+            }
+        }
+    });
+
+    return errors;
+}
 
 exports.addon = function (renderer) {
     if (process.env.NODE_ENV !== 'production') {
@@ -17,7 +66,7 @@ exports.addon = function (renderer) {
     var putRaw = renderer.putRaw;
 
     renderer.putRaw = function (rawCssRule) {
-        var errors = validateString(rawCssRule)['<unknown>'];
+        var errors = validate(rawCssRule);
 
         if (errors.length) {
             errors.forEach(function (error) {
@@ -28,6 +77,6 @@ exports.addon = function (renderer) {
             });
         }
 
-        putRaw(rawCssRule);
+        return putRaw.apply(renderer, arguments);
     };
 };

package.json

@@ -39,7 +39,7 @@
     "stylis": "3.5.0",
     "inline-style-prefixer": "^4.0.0",
     "rtl-css-js": "^1.9.0",
-    "csstree-validator": "^1.3.1"
+    "css-tree": "^1.0.0-alpha.28"
   },
   "devDependencies": {
     "@types/react": "16.0.40",