cwdoh / cssparser.js Goto Github PK

If I parse the string:

 .foo .bar { bar:foo; }

The data object contains:

 selector: ".foo.bar"

when it should be:

  selector: ".foo .bar"

Rules with attribute selectors currently give me wrong output:

button, html [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
}

results in

{
    "type": "rule",
    "selectors": [
        "button",
        "html [undefined]",
        "[undefined]",
        "[undefined]"
    ],
    "declarations": {
        "-webkit-appearance": "button"
    }
}

One use case is for documentation. For example, at the top of each CSS file I might include a title and a description. The JSON could then be used to output that meta information along with the actual CSS.

Would it be possbile to support these? They are IE 7 and below "hacks". I wanted to parse a CSS file from the Tachyons framework, but it fails, because of such prefixed properties. Tachyons uses the undersore character, but I read that asterisk is also used.

example:

.fl { float: left; _display: inline; }

 .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    overflow: hidden;
    width: 1rem;
}

Error: Parse error on line 6:
... hidden; width: 1rem;}

Twitter css has omitted semicolons on tailing declaration in blocks, and it doesn't be parsed.

마지막 세미콜론이 생략된 경우 파싱이 되지 않음.

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust:100%
}

error case

border-radius: 3px / 7px

li:before {
  content: "";
  display: block;
  position: absolute;
  width: 3px;
  background-color: #1da1f2;
  left: 35px;
  z-index: 1;
  border-radius: 3px / 7px
}

Is there a api to take the json result and recompile back to CSS?

.navigation-wrapper:after, .main-navigation > ul:after, .split-section-row:after {
  content: "";
  display: table;
  clear: both; }

Error:

Error: Parse error on line 29:
...gation-wrapper:after, .main-navigation >
-----------------------^
Expecting ':', 'HASH', '.', '[', 'S', got ','

Not able to find in the npm registry.
Got this below error.

Not Found - GET https://registry.npmjs.org/cssparse - Not found

A hack for IE. link

.yui-button .first-child
{
    display:block;
    *display:inline-block;
}

Hi.

When I use command 'node_modules/.bin/jison src/cssparser.y src/css.l -t -o p.js 2>err.log | tee debug.log', jison gives me 634 conflicts in grammar.

It's possible to make this zero?

update1: note - http://stackoverflow.com/questions/15825195/debugging-in-jison

I tried input a comment string like:

/* test */

in http://cwdoh.com/cssparser.js/demo/CSS_stringify.html
and press Transform

then browser dead. :(

is there endless loop?

"main": "lib/cli.js",
if you wanna use it in commonJS way by impoting cssparser it will lead you to wrong entry point with no way to access
new cssparser.Parser()
class definition

in matter to fix it localy just use
require("cssparser/lib/cssparser")
in matter to fix package (in which i doubt according to version last appearance date)
package.json "main" property should be updated
from
lib/cli.js
to
lib/cssparser.js

.btn {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f2f5', endColorstr='#d1d9e1', GradientType=0);
}

Throws this exception

Parse error on line 1483:
...t-x; filter: progid:DXImageTransform.Mi
----------------------^
Expecting 'RIGHT_CURLY_BRACKET', 'SEMICOLON', 'COMMA', 'URL_FUNC', 'OPERATOR_NOT', 'LEFT_PARENTHESIS', 'RIGHT_PARENTHESIS', 'CALC_FUNC', 'ASTERISK', 'ASTERISK_WITH_WHITESPACE', 'PLUS_SIGN', 'HYPHEN_MINUS', 'SOLIDUS', 'IMPORTANT', 'REVERSE_SOLIDUS', 'NUMBER', 'HASH_STRING', 'HEXA_NUMBER', 'GENERAL_IDENT', 'SELECTOR_TYPE_WITH_WHITESPACE', 'SELECTOR_ID_WITH_WHITESPACE', 'DIMENSION', 'STRING', 'PERCENTAGE', 'VENDOR_PREFIX_IDENT', got 'COLON'
Error: Parse error on line 1483:
...t-x; filter: progid:DXImageTransform.Mi
----------------------^
Expecting 'RIGHT_CURLY_BRACKET', 'SEMICOLON', 'COMMA', 'URL_FUNC', 'OPERATOR_NOT', 'LEFT_PARENTHESIS', 'RIGHT_PARENTHESIS', 'CALC_FUNC', 'ASTERISK', 'ASTERISK_WITH_WHITESPACE', 'PLUS_SIGN', 'HYPHEN_MINUS', 'SOLIDUS', 'IMPORTANT', 'REVERSE_SOLIDUS', 'NUMBER', 'HASH_STRING', 'HEXA_NUMBER', 'GENERAL_IDENT', 'SELECTOR_TYPE_WITH_WHITESPACE', 'SELECTOR_ID_WITH_WHITESPACE', 'DIMENSION', 'STRING', 'PERCENTAGE', 'VENDOR_PREFIX_IDENT', got 'COLON'
    at Parser.parseError (C:\Users\djdar\AppData\Roaming\npm\node_modules\cssparser\lib\cssparser.js:434:21)
    at Parser.parse (C:\Users\djdar\AppData\Roaming\npm\node_modules\cssparser\lib\cssparser.js:501:22)
    at toJSON (C:\Users\djdar\AppData\Roaming\npm\node_modules\cssparser\lib\cli.js:58:22)
    at C:\Users\djdar\AppData\Roaming\npm\node_modules\cssparser\lib\cli.js:84:18
    at Object.<anonymous> (C:\Users\djdar\AppData\Roaming\npm\node_modules\cssparser\lib\cli.js:103:3)
    at Module._compile (internal/modules/cjs/loader.js:945:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:962:10)
    at Module.load (internal/modules/cjs/loader.js:798:32)
    at Function.Module._load (internal/modules/cjs/loader.js:711:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1014:10)
undefined

I have been playing around with the cssparser. Nice tool. However it's missing support for the tilde selector ("~"), so something like this:

 div.foo ~ .bar

will thrown an error.

Any chance this might be fixed?

As far as I can tell, the type option is totally ignored. The examples in the README indicate that it has not been implemented, but I think the deep/atomic options would be very useful. This issue is to track any progress of those features, or if they are implemented, update the examples in the README.

I also hope the demo would be updated to allow selecting between the three modes to see how it looks like. Amazing work though, it's very cool to be able to parse CSS in JS. It allows some pretty powerful tools to be built in the language that matters the most for web developers.

Is there a built in function to convert the JSON back into valid CSS?

For simplifying grammar rules, I removed whole whitespaces from the grammar rules. This will be fixed at releasing rewritten parser. :)

Calc values are undefined in JSON:

.w-two-thirds-l { width: calc( 100% / 1.5 ); }

results in:

{
    "type": "rule",
    "selectors": [
        ".w-two-thirds-l"
    ],
    "declarations": {
        "width": "calc(undefined)"
    }
}

Still the spacing issue is not fixed for element and class combination selectors:

Input:
div .header { bar:foo; }

The data object contains:
selector: "div.header"

when it should be:
selector: "div .header"

If a file contains only import, the browser hangs.
For instance, this does not work:

@import url(./a.css);

while this does:

@import url("/a.css");
.c {}

Operation at function parameter.

div.d-Rc-Ya, div.G-q-Ya {
  filter: alpha(opacity=75);
  opacity: .75
}