cwdoh / cssparser.js Goto Github PK
View Code? Open in Web Editor NEWcssparser.js is a parser that generate json from css with matched orders & structures.
Home Page: https://www.npmjs.com/package/cssparser
License: MIT License
cssparser.js is a parser that generate json from css with matched orders & structures.
Home Page: https://www.npmjs.com/package/cssparser
License: MIT License
Error: Parse error on line 174:
...: middle;}svg:not(:root) { overflow:
---------------------^
Expecting 'IDENT', '[', 'S', got ':'
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
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.