brettstimmerman / mensch Goto Github PK
View Code? Open in Web Editor NEWA decent CSS parser.
License: Other
A decent CSS parser.
License: Other
For single line rules the right "workaround" is to add the length of the at-rule name (type) to the end column number.
Hi Brett,
first of all I want to thank you for this great parser!
In the next weeks I'm going to publish an opensource project (https://github.com/voidlabs/mosaico) depending on my fork for mensch (https://github.com/bago/mensch).
As you can see (from other open issues and PR) I have applied a few patches to mensch, mainly related to "positions" and a few other improvements.
Is there any chance to get write access to your repository or to have you accept my PR anytime soon?
@media tty {
i{content:"\";/*" "*/}} a { color: black; } /*";}
}
a {color: white}
The hack itself is handled ok - two strings in the content property
The problem is that the next ruleset is considered part of the media block, while it should be outside of it
Test code:
var mensch = require('mensch');
var css = require('fs').readFileSync('./examples/css.css').toString();
var parsed = mensch.parse(css);
var res = mensch.stringify(parsed, {indentation: ' '})
console.log(res)
Result:
@media tty {
i {
content: "\";/*" "*/}} a { color: black; } /*";
}
a {
color: white;
}
}
Run this code:
var mensch = require('mensch');
var parsed = mensch.parse('.my-class:not(.class1, .class2) {}', {
position: true,
comments: true,
});
The parsed.stylesheet.rules
will be an array with two items: ['.my-class:not(.class1', '.class)']
, this rules are wrong.
It should not be splited by ,
simply.
body
div
{color: red}
gives
{ type: 'rule',
selectors: [ 'bodydiv' ],
declarations: [ { type: 'property', name: 'color', value: 'red' } ] }
I think the selector should be body div
this confuses the parser:
.sele {
content: "he\"lo";
}
this is ok:
.sele {
content: "helo";
}
{ type: 'property',
name: 'content',
value: '"helo"' }
body {
background-color:( yellow;
background-color:@ yellow;
background-color:* yellow;
background-color:/ yellow;
background-color:{ yellow;
background-color:) yellow;
background-color:: yellow;
}
is parsed like this:
body {
background-color: (yellow;
background-color: @yellow;
background-color: *yellow;
background-color: /yellow;
background-color: {yellow;
background-color: )yellow;
background-color: :yellow;
}
Notice how the space after the special char and before "yellow" is lost by mensch. This is because the special char is added to the buffer but the state is never changed from before-value to value, so the next spaces are considered "something to be trimmed".
in
body {background:;}
#yo {display: block;}
Expected
body {
}
#yo {
display: block;
}
Actual
body {
background: ;#yo display: block;
}
AST
{
"type": "stylesheet",
"stylesheet": {
"rules": [
{
"type": "rule",
"selectors": [
"body"
],
"declarations": [
{
"type": "property",
"name": "background",
"value": ";#yo display: block"
}
]
}
]
}
}
missing:
@document
@page
@namespace
reference: https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule
Hi @brettstimmerman and @bago,
I am using the npm package, juice, on a project for work. The Juice package has a dependency on mensch#v0.3.3, but they reference your github repository instead of the npm package itself. It looks like this could be because you haven't published the release to npm (currently 0.3.1 on npm). If it isn't too much of a hassle, would you mind publishing the latest release to npm? Then I can get them to switch the dependency to npm (my deployment setup doesn't allow me to use git on my prod server).
Thanks for your time.
Cheers,
Max
There's an issue with newlines and comparison (CRLF vs LF)
Adding .replace(/\r\n/g,'\n') after every string to be compared fixes them.
On line 1 the first column is column 1, on the following lines the first column is column 0.
I guess the correct positioning is the one when the first char is col:1, line:1 so the right solution is to have following lines to start with 1 too.
When comments are enabled, stringifyBlock
doesn't handle the case when one of an at-group's child nodes is a comment.
Given source CSS like:
@media (max-width: 1024) {
/* I am a comment. */
.foo { color: blue; }
}
The parsed-and-stringified CSS looks like:
@media (max-width: 1024) {
@comment { }
.foo { color: blue; }
}
Input:
.zen-resources ul{
margin:30px 20px 50px 25px
}
(there's a TAB between 30px and 20)
var mensch = require('mensch');
var css = ".zen-resources ul{margin:30px\t20px 50px 25px}";
var parsed = mensch.parse(css);
console.log(JSON.stringify(parsed, '', 2));
Output:
{
"type": "stylesheet",
"stylesheet": {
"rules": [
{
"type": "rule",
"selectors": [
".zen-resources ul"
],
"declarations": [
{
"type": "property",
"name": "margin",
"value": "30px20px 50px 25px"
}
]
}
]
}
}
Hi,
version 0.3.3 has an error with stringify indentation, an error that has already been resolved about two years ago !!! but nobody has published a new version (0.3.4) with that solution
Can anyone publish that new version to fix that, please?
@-ms-keyframes boom {
from {
background-position: 0 0;
}
to {
background-position: 100% 100%;
}
}
gives you a rule type
{ type: 'rule',
selectors: [ '@-ms-keyframes boom' ],
declarations:
[ { type: 'property', name: 'from' },
{ type: 'property', name: 'background-position', value: '0 0' } ] }
while
@-moz-keyframes boom {
from {
background-position: 0 0;
}
to {
background-position: 100% 100%;
}
}
acknowledges the prefix and gives you keyframes:
{ type: 'keyframes',
name: 'boom',
prefix: '-moz-',
rules:
[ { type: 'rule', selectors: [Object], declarations: [Object] },
{ type: 'rule', selectors: [Object], declarations: [Object] } ] }
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.