brettstimmerman / mensch Goto Github PK

1. rules like @media or @supports return a much lower column number whene the rule is on a single line while it is correct when the rules is on a different line.
2. rules like @import return a much lower colum number when the rule is on a single line while returns a correct number when the rule is on multiple line and again a bad column number when the ";" is on a different line (in this case it returns the previous line lenght + 1 as column number, and it is invalid)

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] } ] }