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

Bug with brackets ( } { ) in `content` #15

Open BTMPL opened 8 years ago

BTMPL commented 8 years ago

Using } in a content property breaks the parsing:

.someSelector:after { content: '} broken :) @media (screen) { lol }'; }

kemaldaggen commented 8 years ago

Hey BTMPL, thanks for reporting the issue. Since we are parsing CSS with a regex, this is expected behavior given the nature of solution. I will look into this problem that haunts this project for a long time.

pygy commented 8 years ago

This can be generalized to all strings, basically. I don't think you can solve this, short of using a traditional lexer/parser. The current approach won't cut it.

Likewise for nested media queries:

@media foo {
  @media bar {
    .someSelector 
    { 
      margin:40px 10px; 
      padding:5px;
    }
  }
}

becomes

[
  {
    "selector": "@media foo",
    "type": "media",
    "subStyles": [
      {
        "selector": "@media bar",
        "type": "media",
        "subStyles": []
      }
    ]
  }
]

Nesting can be arbitrarily deep.