jotform / css.js

A lightweight, battle tested, fast, CSS parser in JavaScript
https://medium.com/jotform-form-builder/writing-a-css-parser-in-javascript-3ecaa1719a43
MIT License
426 stars 63 forks source link

Parse CSS with multiple curly braces #6

Closed tpgmartin closed 9 years ago

tpgmartin commented 9 years ago

This is a fix for https://github.com/jotform/css.js/issues/4

kemaldaggen commented 9 years ago

Thanks for the pull request, but it does not seem to fix curly brackets inside commented areas problem,

try parsing this

.someSelector 
{ 
  margin:40px 10px; 
  padding:5px; /* This is { blue } */
}

.someSelector2 
{ 
  margin:40px 10px; 
  padding:5px;
}

will result :

[
  {
    "selector": ".someSelector",
    "rules": [
      {
        "directive": "margin",
        "value": "40px 10px"
      },
      {
        "directive": "padding",
        "value": "5px"
      },
      {
        "directive": "",
        "value": "/* This is { blue",
        "defective": true
      }
    ]
  },
  {
    "selector": "*/\n}\n\n.someSelector2",
    "rules": [
      {
        "directive": "margin",
        "value": "40px 10px"
      },
      {
        "directive": "padding",
        "value": "5px"
      }
    ]
  }
]

So, apparently it brakes next selector. So I suggest cleaning of comments before parsing, unless they are needed absolutely :

var parser = new cssjs();
var cssString = ".someSelector{color:blue;/*{somecomment*/}";
cssString = parser.stripComments(cssString);
var parsed = parser.parseCSS(cssString);

My general thought about the whole comments issue is, using a non-regex parser. Regexes are already too complicated, I see no practical use continuing adding rules to current regexes.