tonyganch / gonzales-pe Goto Github PK

View Code? Open in Web Editor NEW

330.0 330.0 66.0 5.73 MB

CSS parser with support of preprocessors

License: MIT License

JavaScript 78.94% CSS 11.67% Shell 0.68% CoffeeScript 8.71%

gonzales-pe's People

Contributors

Stargazers

Watchers

gonzales-pe's Issues

LESS: Passing ruleset to mixin

From csscomb/csscomb.js#266

Please check the validity of the block starting from line #118
116 |     min-width: 320px;
118*|     .screen-less980({
119 |         width: 100%;
120 |         padding-left: 20px;
Gonzales PE version: 3.0.0-10
CSScomb Core version: 2.0.2

see: http://lesscss.org/features/#detached-rulesets-feature

AST documentation?

Is there any documentation on the AST produced when parsing SCSS?

I'm having a hard time interpreting how that tree is read and how to use it.

Thanks!

If you have a #{} interpolation in the middle of a classname of the selector, gonzales-pe seems to drop the declaration.

For example:

$yo: "YO";
.YO-#{$yo}-YO {
    margin: auto;
}

becomes

["ruleset",
  ["selector",
    ["simpleselector",
      ["class",
        ["ident",
          "YO-",
          ["interpolation",
            ["variable",
              ["ident", "yo"]]],
          "-YO"]]]]]

This should really be…

["ruleset",
  ["selector",
    ["simpleselector",
        ["class",
          "YO-",
          ["ident",
            ["interpolation",
              ["variable",
                ["ident", "yo"]]],
            "-YO"]]]],
  ["s", " "],
  ["block",
    ["s", "\n\t"],
    ["declaration",
      ["property",
        ["ident", "margin"]],
      ["propertyDelim"],
      ["s", " "],
      ["value",
        ["ident", "auto"]]],
    ["declDelim"],
    ["s", "\n"]
  ]
]

SASS: != operator is considered to be invalid

Where: current dev.
Input:

$bootstrap-sass-asset-helper: (twbs-font-path("") != unquote('twbs-font-path("")')) !default;

Output:

/Users/varya/WebDev/SC5/gonzales-pe/lib/src-to-ast.js:15
        throw error;
              ^
Parsing error: Please check the validity of the block starting from line #1

1*| $bootstrap-sass-asset-helper: (twbs-font-path("") != unquote('twbs-font-path("")')) !default;

This code is used in Bootsrap https://github.com/twbs/bootstrap-sass/blob/d3531a6fded02ba8ecd3e2d1f987927bd414883b/assets/stylesheets/bootstrap/_variables.scss#L4 and is considered to be valid by http://sassmeister.com/

== works normally

Does not work with examples from README

varya/gonzales-try@48d20b3

Output:

$ node test.js

/Users/varya/WebDev/SC5/gonzales-try/test.js:5
console.log(gonzales.cssToAST(css));
                     ^
TypeError: Object #<Object> has no method 'cssToAST'
    at Object.<anonymous> (/Users/varya/WebDev/SC5/gonzales-try/test.js:5:22)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:906:3

golzales-pe is installed locally

Trying to implement new rule for scss

Hey Tony, thank you for all your awesome work on this and on CSSComb. My question does concern CSSComb but I'm pretty sure I can solve it myself once I learn how to add a new rule to gonzales-pe, more specifically I need to differentiate between @include one-liners like

@include font_size(0.85);

and multi-line includes like

@include breakpoint($breakpoint_tablet) {
    width: 50%;
}

This is actually already implemented internally by the standard checkInclude(i) function in the rules.js portion for SCSS by this function

    /**
     * Check if token is part of an included mixin like `@include nani(foo) {...}`
     * @param {Number} i Token's index number
     * @returns {Number} Length of the include
     */
    function checkInclude1(i) { ...

I would just need to make a rule to make this check seperately without lumping in all the other @include cases. In CSSComb, I could then do something like

if(currentNode[0] === 'include-multi-line') { ... }

I have tried hacking this in but I never made it execute up to the point of my custom function. I'm a total node.js noob unfortunately. Any help on this would be immensely appreciated, CSSComb now does almost everything I need perfectly :)

`.toCSS` outputs `null` for empty SL comment string

This code

var res = gonzales.parse('$mycolor: #00ff00;\n//', {syntax: 'sass'}).toCSS('sass');
console.log(res);

outputs

$mycolor: #00ff00

//null

The problem exists for all the syntaxes.

LESS: declarations vs atrules

From csscomb/csscomb.js#255

@widthSmall:    ~"(max-width: 1300px)";

.Foo {
  @media @widthSmall {
      width:    400px;
  }
}

Throws error:

stack:  Error: Parsing error at test.less: Please check the validity of the CSS block starting from the line #1
    at cssToAST (/usr/lib/node_modules/csscomb/lib/csscomb.js:464:19)
    at processString (/usr/lib/node_modules/csscomb/lib/csscomb.js:351:20)
    at /usr/lib/node_modules/csscomb/lib/csscomb.js:323:39
    at Array.0 (/usr/lib/node_modules/csscomb/node_modules/vow/lib/vow.js:555:56)
    at Object.callFns [as _onImmediate] (/usr/lib/node_modules/csscomb/node_modules/vow/lib/vow.js:1148:35)
    at processImmediate [as _immediateCallback] (timers.js:336:15)

Antitests

Collect tests that should fail.

srcToAst c SASS контентом теряет ; в конце строк

SCSS: multiple classes in the same @extend throw error

From csscomb/csscomb.js#257

.search {
    @extend .icon, .icon-search;
}

Error

stack:  Error: Parsing error at _head.scss: Please check the validity of the CSS block starting from the line #28
    at cssToAST (/usr/local/lib/node_modules/csscomb/lib/csscomb.js:464:19)
    at processString (/usr/local/lib/node_modules/csscomb/lib/csscomb.js:351:20)
    at /usr/local/lib/node_modules/csscomb/lib/csscomb.js:323:39
    at Array.0 (/usr/local/lib/node_modules/csscomb/node_modules/vow/lib/vow.js:555:56)
    at Object.callFns [as _onImmediate] (/usr/local/lib/node_modules/csscomb/node_modules/vow/lib/vow.js:1148:35)
    at processImmediate [as _immediateCallback] (timers.js:330:15)

Sass variable parsing error

This is valid SASS LESS syntax should be parsed without problem
Parsing error: Please check the validity of the block starting from line 23

23* | $palette-color-1: #ffcf3c;

Gonzales PE version: 3.0.0-16
Syntax: scss

Improvements to .map method needed (v 3.0.0)

I tried new .map method and it looks like it needs to be improved. For example, this is the code I use to grab all the variables from the source and their values.

  ast.map(function(node) {
    if (node.type !== 'declaration') {
      return;
    }
    var variable = {}
    ast.map.call(node, function(nnode){
      if (nnode.type === 'variable') {
        ast.map.call(nnode, function(nnnode){
          if (nnnode.type === 'ident') {
            variable.name = nnnode.content;
          }
        });
      }
      if (nnode.type === 'value') {
        variable.value = nnode.toCSS(syntax);
      }
    });
    out.push(variable);
  });

It turns out to be very messy code when I need to get deeper into the structure. I think something like json-path is needed here. Do you think it is possible to embed any path-router into Gonzales? Or maybe you can recommend to use a ready-made pather and mention this in the documentation?

SCSS support

Sass: Mixins with content

Related CSScomb issue: csscomb/csscomb.js#270

== Source string:
@include breakpoint(max-width ($page-width - 1)) {
margin-left: 15px;
margin-right: 15px;
}

== AST:
['include',
  ['atkeyword',
    ['ident', 'include']],
  ['s', ' '],
  ['simpleselector',
    ['ident', 'breakpoint']]]

== Translated string:
@include breakpoint

~ escaping function argument in LESS is considered to be invalid

3.0.0-10 does not allow tildas ~ in LESS

Parsing error: Please check the validity of the block starting from line #50

48 |     border-color: @focusBorderColor;//rgba(82,168,236,.8);
49 |     .disable-outline();
50*|     .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
51 | }

However this is LESS escaping http://webdesign.tutsplus.com/articles/get-into-less-the-programmable-stylesheet-language--webdesign-5216

LESS support

Invalid npm module version

Hello!

Please, fix npm module version.
Invalid: 3.0.0-10.
Valid: 3.0.0.

Parse block with curly braces failed [sass]

.name > a {
  display: inline-block
  font-weight: bold
}

/Users/Leonid/Development/OSS/gonzales-pe/bin/gonzales.js:25
    if (!silent) throw e;
                       ^
Parsing error: Please check the validity of the block starting from line #1

1*| .name > a {
2 |   display: inline-block
3 |   font-weight: bold

Gonzales PE version: 3.0.0-16
Syntax: sass

Update documentation

Code comments
Readme
Changelog
doc/*

Move tests to another platform

Use mocha maybe.

Pass syntax name as an argument

Syntax name (e.g. scss) should be passed as an argument in order to:

reduce number of unnecessary checks;
add support for new syntaxes swimmingly.

SASS: Double parenthesis in functions are considerend to be invalid

Where: current dev
Input:

$font-size-base: 3px;
.myclass {
  padding: cell(($font-size-base * 1.25));
}
``
Single test result:

/Users/varya/WebDev/SC5/gonzales-pe/lib/src-to-ast.js:15
throw error;
^
Parsing error: Please check the validity of the block starting from line #2

1 | $font-size-large: 3px;
2*| $font-size-large: ceil(($font-size-base * 1.25))


This syntax often used in Bootsrap https://github.com/twbs/bootstrap-sass/blob/d3531a6fded02ba8ecd3e2d1f987927bd414883b/assets/stylesheets/bootstrap/_variables.scss#L57 and is considered to be valid by http://sassmeister.com/

Property name CSS hacks for IE6/IE7 is discarded.

I'm not a big fan of CSS hacks for sure, and who cares IE6 and IE7… but I just stumbled upon this.

CSS:

.wtf {
  *overflow-x: hidden;
  //max-height: 110px;
  #height: 18px;
}

AST by gonzales-pe

["ruleset",
    ["selector",
        ["simpleselector",
            ["class", ["ident", "wtf"]],
            ["s", " "]]],
    ["block",
        ["s", "\n  "],
        ["declaration",
            ["property", ["ident","*overflow-x"]],
            ["propertyDelim"],
            ["s", " "],
            ["value", ["ident", "hidden"]]],
        ["declDelim"],
        ["s", "\n  "],
        ["commentSL", "max-height: 110px;"],
        ["s", "\n  "],
        ["declaration",
            ["property", ["ident", "height"]],
            ["propertyDelim"],
            ["s", " "],
            ["value",
                ["dimension",
                    ["number", "18"],
                    ["ident", "px"]]]],
        ["declDelim"],
        ["s", "\n"]]]

Too different ASTs for SASS content

Версия пакета 3.0.0-10, синтаксис — SASS.

Если входные данные

$mycolor: #00ff00;
$mypadding: 3px

то AST следующий

[  
   "stylesheet",
   [  
      "declaration",
      [  
         "property",
         [  
            "variable",
            [  
               "ident",
               "mycolor"
            ]
         ]
      ],
      [  
         "propertyDelim"
      ],
      [  
         "s",
         " "
      ],
      [  
         "value",
         [  
            "vhash",
            "00ff00"
         ]
      ]
   ],
   [  
      "declDelim"
   ],
   [  
      "s",
      "\n"
   ],
   [  
      "declaration",
      [  
         "property",
         [  
            "variable",
            [  
               "ident",
               "mypadding"
            ]
         ]
      ],
      [  
         "propertyDelim"
      ],
      [  
         "s",
         " "
      ],
      [  
         "value",
         [  
            "dimension",
            [  
               "number",
               "3"
            ],
            [  
               "ident",
               "px"
            ]
         ]
      ]
   ]
]

т.е 2 декларации.

Если входные данные:

$mycolor: #00ff00
$mypadding: 3px

(убрана ;)

то AST:

[  
   "stylesheet",
   [  
      "declaration",
      [  
         "property",
         [  
            "variable",
            [  
               "ident",
               "mycolor"
            ]
         ]
      ],
      [  
         "propertyDelim"
      ],
      [  
         "s",
         " "
      ],
      [  
         "value",
         [  
            "vhash",
            "00ff00"
         ],
         [  
            "s",
            "\n"
         ],
         [  
            "variable",
            [  
               "ident",
               "mypadding"
            ]
         ],
         [  
            "operator",
            ":"
         ],
         [  
            "s",
            " "
         ],
         [  
            "dimension",
            [  
               "number",
               "3"
            ],
            [  
               "ident",
               "px"
            ]
         ]
      ]
   ]
]

Т.е. одна декларация.

Если здесь нет ошибки, и так и должно быть, подскажите тогда, как выбрать все переменные из AST. Сейчас я использую пакет https://www.npmjs.org/package/gonzales-ast но при такой разнице в AST он не справляется.

Less: Support extend feature

See docs: http://lesscss.org/features/#extend-feature
CSScomb related issue: csscomb/csscomb.js#222

Broken AST for SASS: Indented lines are sticked with comment

Package 3.0.0-10

Normal case:

This input

// Text comment1
$mycolor: #00ff00;

gives this AST:

[  
   "stylesheet",
   [  
      "commentSL",
      " Text comment1"
   ],
   [  
      "s",
      "\n"
   ],
   [  
      "declaration",
      [  
         "property",
         [  
            "variable",
            [  
               "ident",
               "mycolor"
            ]
         ]
      ],
      [  
         "propertyDelim"
      ],
      [  
         "s",
         " "
      ],
      [  
         "value",
         [  
            "vhash",
            "00ff00"
         ]
      ]
   ],
   [  
      "declDelim"
   ]
]

But if there in an indent in the line which follows the comment:

// Text comment1
  $mycolor: #00ff00;

the AST gets broken:

[  
   "stylesheet",
   [  
      "commentSL",
      " Text comment1\n  $mycolor: #00ff00;"
   ]
]

Interpolations inside nth-selectors

Interpolations (variables and other expressions) inside nth selectors should be parsed correctly.
Example:

a:nth-child(#{$n}){
    color: red;
}

SCSS: values in variables and extends throw error

Any kind of value in variables and extends throw validity error.

Scss:

$background-16px: url(background-16px.png);
or
@extend %background-16px;

throws:

Please check the validity of the block

LESS: incorrect parsing of nested rules with pseudo-classes and pseudo-elements

gonzales-pe version 3.0.0-10

var util = require('util');
var gonzales = require('gonzales-pe');

var css = 'a { color: tomato; span:first-child {color: blue;} }';
console.log(util.inspect(gonzales.srcToAST({src: css, syntax: 'less'}), {depth: null, colors: true}));

AST output:

[ 'stylesheet',
  [ 'ruleset',
    [ 'selector',
      [ 'simpleselector',
        [ 'ident', 'a' ],
        [ 's', ' ' ] ] ],
    [ 'block',
      [ 's', ' ' ],
      [ 'declaration',
        [ 'property',
          [ 'ident', 'color' ] ],
        [ 'propertyDelim' ],
        [ 's', ' ' ],
        [ 'value', [ 'ident', 'tomato' ] ] ],
      [ 'declDelim' ],
      [ 's', ' ' ],
      [ 'declaration',
        [ 'property',
          [ 'ident', 'span' ] ],
        [ 'propertyDelim' ],
        [ 'value',
          [ 'ident', 'first-child' ],
          [ 's', ' ' ],
          [ 'block',
            [ 'declaration',
              [ 'property',
                [ 'ident', 'color' ] ],
              [ 'propertyDelim' ],
              [ 's', ' ' ],
              [ 'value', [ 'ident', 'blue' ] ] ],
            [ 'declDelim' ] ] ] ],
      [ 's', ' ' ] ] ] ]

Should be:

[ 'stylesheet',
  [ 'ruleset',
    [ 'selector',
      [ 'simpleselector',
        [ 'ident', 'a' ],
        [ 's', ' ' ] ] ],
    [ 'block',
      [ 's', ' ' ],
      [ 'declaration',
        [ 'property',
          [ 'ident', 'color' ] ],
        [ 'propertyDelim' ],
        [ 's', ' ' ],
        [ 'value', [ 'ident', 'tomato' ] ] ],
      [ 'declDelim' ],
      [ 's', ' ' ],
      [ 'ruleset',
        [ 'selector',
          [ 'simpleselector',
            [ 'ident', 'span' ],
            [ 'pseudoc',
              [ 'ident', 'first-child' ] ],
            [ 's', ' ' ] ] ],
        [ 'block',
          [ 'declaration',
            [ 'property',
              [ 'ident', 'color' ] ],
            [ 'propertyDelim' ],
            [ 's', ' ' ],
            [ 'value', [ 'ident', 'blue' ] ] ],
          [ 'declDelim' ] ] ],
      [ 's', ' ' ] ] ] ]

Works as expected for SCSS syntax.

srcToAst -> astToSrc создает дополнительные строки

https://gist.github.com/varya/915847e2ec7b16e42d9e

[SASS] multiple selectors in new lines

a,
li,
p
  color: red

output:

{
  "type": "stylesheet",
  "content": [
    {
      "type": "ruleset",
      "content": [
        {
          "type": "selector",
          "content": [
            {
              "type": "simpleSelector",
              "content": [
                {
                  "type": "ident",
                  "content": "a",
                  "start": {
                    "line": 1,
                    "column": 1
                  }
                }
              ],
              "start": {
                "line": 1,
                "column": 1
              }
            },
            {
              "type": "delimiter",
              "content": ",",
              "start": {
                "line": 1,
                "column": 2
              }
            },
            {
              "type": "space",
              "content": "\n",
              "start": {
                "line": 1,
                "column": 3
              }
            },
            {
              "type": "simpleSelector",
              "content": [
                {
                  "type": "ident",
                  "content": "li",
                  "start": {
                    "line": 2,
                    "column": 1
                  }
                }
              ],
              "start": {
                "line": 2,
                "column": 1
              }
            }
          ],
          "start": {
            "line": 1,
            "column": 1
          }
        },
        {
          "type": "selector",
          "content": [
            {
              "type": "delimiter",
              "content": ",",
              "start": {
                "line": 2,
                "column": 3
              }
            },
            {
              "type": "space",
              "content": "\n",
              "start": {
                "line": 2,
                "column": 4
              }
            },
            {
              "type": "simpleSelector",
              "content": [
                {
                  "type": "ident",
                  "content": "p",
                  "start": {
                    "line": 3,
                    "column": 1
                  }
                },
                {
                  "type": "space",
                  "content": "\n",
                  "start": {
                    "line": 3,
                    "column": 2
                  }
                }
              ],
              "start": {
                "line": 3,
                "column": 1
              }
            }
          ],
          "start": {
            "line": 2,
            "column": 3
          }
        },
        {
          "type": "block",
          "content": [
            {
              "type": "space",
              "content": "  ",
              "start": {
                "line": 4,
                "column": 1
              }
            },
            {
              "type": "declaration",
              "content": [
                {
                  "type": "property",
                  "content": [
                    {
                      "type": "ident",
                      "content": "color",
                      "start": {
                        "line": 4,
                        "column": 3
                      }
                    }
                  ],
                  "start": {
                    "line": 4,
                    "column": 3
                  }
                },
                {
                  "type": "propertyDelimiter",
                  "content": ":",
                  "start": {
                    "line": 4,
                    "column": 8
                  }
                },
                {
                  "type": "space",
                  "content": " ",
                  "start": {
                    "line": 4,
                    "column": 9
                  }
                },
                {
                  "type": "value",
                  "content": [
                    {
                      "type": "ident",
                      "content": "red",
                      "start": {
                        "line": 4,
                        "column": 10
                      }
                    }
                  ],
                  "start": {
                    "line": 4,
                    "column": 10
                  }
                }
              ],
              "start": {
                "line": 4,
                "column": 3
              }
            },
            {
              "type": "declarationDelimiter",
              "content": "\n",
              "start": {
                "line": 4,
                "column": 13
              }
            }
          ],
          "start": {
            "line": 4,
            "column": 1
          }
        }
      ],
      "start": {
        "line": 1,
        "column": 1
      }
    }
  ],
  "start": {
    "line": 1,
    "column": 1
  }
}

As you can see, parser break last selector in separate group.

As result csscomb breaks on this example:

stack:  TypeError: Cannot read property 'length' of undefined
    at module.exports.process (/Users/Leonid/Development/OSS/csscomb.js/lib/options/space-before-selector-delimiter.js:33:42)
    at /Users/Leonid/Development/OSS/csscomb.js/node_modules/csscomb-core/lib/core.js:206:21
    at Array.forEach (native)
    at processNode (/Users/Leonid/Development/OSS/csscomb.js/node_modules/csscomb-core/lib/core.js:202:14)
    at /Users/Leonid/Development/OSS/csscomb.js/node_modules/csscomb-core/lib/core.js:211:13
    at Array.forEach (native)
    at processNode (/Users/Leonid/Development/OSS/csscomb.js/node_modules/csscomb-core/lib/core.js:202:14)
    at /Users/Leonid/Development/OSS/csscomb.js/node_modules/csscomb-core/lib/core.js:211:13
    at Array.forEach (native)
    at processNode (/Users/Leonid/Development/OSS/csscomb.js/node_modules/csscomb-core/lib/core.js:202:14)

Sass (indented syntax) support

Blocks without { and }
Declaration delimiter is \n instead of ;
Property can start with a semicolon: :color tomato
Comments can be indent based:

/* Some
  nice
  comment
color: tomato
// The
  greatest
  one
top: 0

Imports can be w/o quotes: @import nani
Mixins: =nani or = nani (same as @mixin nani)
Includes: +nani but not + nani (same as @include nani)

Preprocessors support

In order of importance:

Traverse is needed

Do you think it is possible and suitable to implement traverse as a part of this package? I currently use gonzales-ast but as it was built by the time when Gonzales could only parse CSS, it can be sometimes buggy. This is an example of what I mean stoyan/gonzales-ast#1

Having a traverse method together with the parser would guarantee the compatibility for new versions.

Variable interpolation in SCSS not supported

Variable interpolation in SCSS doesn't seem to be supported.

Example code:

$classes: .dog, .cat;

#{$classes},
.horse {
    color: red;
}

Results in "Parsing error: Please check the validity of the block starting from line #XXX".

`extend #{$variable};` parse error in SCSS

Gonzales is having a hard time parsing an @extend with string interpolation for SCSS, see below.

parsing error: Please check the validity of the block starting from line #284

283 | .button-close {
284*|     @extend #{$button-close-icon} !optional;
286 |     &.ng-hide-remove,

Gonzales PE version: 3.0.0-26

Identifiers with digits after underscore

From csscomb/csscomb.js#275:

/*colors*/
$color_0: #fff;
$color_1: #285592;
$color_2: #86a9c2;

$color_0 is parsed as a variable with ident color_ without 0.

#{} interpolation does not work with @media query

Gonzales-pe is unable to parse definition when #{} interpolation is used with the media query
The following input breaks the parsing:

$medium: "screen and (min-width: 600px)";
@media #{$medium} {
}

     Please check the validity of the block starting from line #2

1 |           $medium: "screen and (min-width: 600px)";
2*|           @media #{$medium} {
3 |           }

Gonzales PE version: 3.0.0-26
Syntax: scss

Wrong line numbers in error message when using multiline comments

From csscomb/csscomb.js#269

Input:

 /*
 *
 *
 *
 */

@widthSmall:    ~"(max-width: 1300px)";

Error message:

stack:  test.less
Please check the validity of the block starting from line #3

1 | /*
2 |  *
3*|  *
4 |  *
5 |  */

Gonzales PE version: 3.0.0-10
CSScomb Core version: 2.0.2

Python Includes {% are invalid block

Gonzales, as a dependency of csscomb, breaks on python scss includes

[sass] Declaration is parsed as a ruleset

From csscomb/csscomb.js#333

» cat test.sass
.page-sidebar
  background #ccc

» csscomb -v  -l test.sass
stack:  TypeError: Cannot read property '0' of undefined
    at module.exports.process (/usr/local/lib/node_modules/csscomb/lib/options/eof-newline.js:16:26)
    at /usr/local/lib/node_modules/csscomb/node_modules/csscomb-core/lib/core.js:206:21
    at Array.forEach (native)
    at processNode (/usr/local/lib/node_modules/csscomb/node_modules/csscomb-core/lib/core.js:202:14)
    at /usr/local/lib/node_modules/csscomb/node_modules/csscomb-core/lib/core.js:189:13

background #ccc is getting parsed as a ruleset with selector only, no block

Неудобный AST для atrules в LESS синтаксисе

Паке 3.0.0-10.

Парсим строки с переменными препроцессоров, чтобы получить таблицу "ключ-значение".

В варианте SCSS синтаксиса:

Input:

$myfont:   "Helvetica Neue", Helvetica, Arial, sans-serif;

AST:

[  
   "stylesheet",
   [  
      "s",
      "  "
   ],
   [  
      "declaration",
      [  
         "property",
         [  
            "variable",
            [  
               "ident",
               "myfont"
            ]
         ]
      ],
      [  
         "propertyDelim"
      ],
      [  
         "s",
         "   "
      ],
      [  
         "value",
         [  
            "string",
            "\"Helvetica Neue\""
         ],
         [  
            "operator",
            ","
         ],
         [  
            "s",
            " "
         ],
         [  
            "ident",
            "Helvetica"
         ],
         [  
            "operator",
            ","
         ],
         [  
            "s",
            " "
         ],
         [  
            "ident",
            "Arial"
         ],
         [  
            "operator",
            ","
         ],
         [  
            "s",
            " "
         ],
         [  
            "ident",
            "sans-serif"
         ]
      ]
   ],
   [  
      "declDelim"
   ]

Удобно получить строку со всеми знаниями, потому что они объединены в value.

Вариант LESS синтаксиса

Input:

@myfont:   "Helvetica Neue", Helvetica, Arial, sans-serif;

AST:

[  
   "stylesheet",
   [  
      "s",
      "  "
   ],
   [  
      "atrules",
      [  
         "atkeyword",
         [  
            "ident",
            "myfont"
         ]
      ],
      [  
         "operator",
         ":"
      ],
      [  
         "s",
         "   "
      ],
      [  
         "string",
         "\"Helvetica Neue\""
      ],
      [  
         "operator",
         ","
      ],
      [  
         "s",
         " "
      ],
      [  
         "ident",
         "Helvetica"
      ],
      [  
         "operator",
         ","
      ],
      [  
         "s",
         " "
      ],
      [  
         "ident",
         "Arial"
      ],
      [  
         "operator",
         ","
      ],
      [  
         "s",
         " "
      ],
      [  
         "ident",
         "sans-serif"
      ]
   ],
   [  
      "declDelim"
   ]
]

Значения никак не объединены, а просто идут списком внутри atrules, получать строчку неудобно.

Errors: Add info about column number

Related CSScomb issue: csscomb/csscomb.js#245

Prefix tests fail (dev branch)

1) sass/value >> 5:

Failed src -> ast

Expected:
{
  "type": "value",
  "content": [
    {
      "type": "ident",
      "content": "-webkit-panda",
      "start": {
        "line": 1,
        "column": 1
      }
    }
  ],
  "start": {
    "line": 1,
    "column": 1
  }
}

Result:
{
  "type": "value",
  "content": [
    {
      "type": "unaryOperator",
      "content": "-",
      "start": {
        "line": 1,
        "column": 1
      }
    },
    {
      "type": "ident",
      "content": "webkit-panda",
      "start": {
        "line": 1,
        "column": 2
      }
    }
  ],
  "start": {
    "line": 1,
    "column": 1
  }
}

Sass: Spaces at EOF throw error

From csscomb/csscomb.js#243

combing (without any config file):

body
  background-color: red
  color: white
  float: left
  width: 100%
  padding: 4em

(on the last line are only two spaces.)

throws:

stack:  Error: Parsing error at test/_test-partial1.sass: Cannot read property 'type' of undefined
    at cssToAST (/usr/local/lib/node_modules/csscomb/lib/csscomb.js:464:19)
    at processString (/usr/local/lib/node_modules/csscomb/lib/csscomb.js:351:20)
    at /usr/local/lib/node_modules/csscomb/lib/csscomb.js:323:39
    at Array.0 (/usr/local/lib/node_modules/csscomb/node_modules/vow/lib/vow.js:555:56)
    at Object.callFns [as _onImmediate] (/usr/local/lib/node_modules/csscomb/node_modules/vow/lib/vow.js:1148:35)
    at processImmediate [as _immediateCallback] (timers.js:336:15)

tree = typeof options === 'string' ? options : options.ast;

tonyganch / gonzales-pe Goto Github PK

gonzales-pe's People

Contributors

Stargazers

Watchers

Forkers

gonzales-pe's Issues

Related

В варианте SCSS синтаксиса:

Вариант LESS синтаксиса

Recommend Projects

Recommend Topics

Recommend Org