Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Sass @at-rule embedding issue #193

Closed
DanPurdy opened this issue Jun 22, 2016 · 4 comments
Closed

Sass @at-rule embedding issue #193

DanPurdy opened this issue Jun 22, 2016 · 4 comments
Assignees
@tonyganch
Labels
syntax: sass type: bug

Comments

@DanPurdy
Copy link
Collaborator

There's an issue with the Sass syntax where an at-rule immediately following an at-rule on the same level (siblings) is actually interpreted as a child node.

@function hello($value)
  @return $value

@function world($value)
  @return $value
 -> stylesheet
 | -> atrule
 | | -> atkeyword
 | | | -> ident
 | | |    "function"
 | | -> space
 | |    " "
 | | -> function
 | | | -> ident
 | | |    "hello"
 | | | -> arguments
 | | | | -> variable
 | | | | | -> ident
 | | | | |    "value"
 | | -> space
 | |    "\n"
 | | -> block
 | | | -> space
 | | |    "  "
 | | | -> atrule
 | | | | -> atkeyword
 | | | | | -> ident
 | | | | |    "return"
 | | | | -> space
 | | | |    " "
 | | | | -> variable
 | | | | | -> ident
 | | | | |    "value"
 | | | | -> space
 | | | |    "\n"
 | | | -> space
 | | |    "\n"
 | | | -> atrule
 | | | | -> atkeyword
 | | | | | -> ident
 | | | | |    "function"
 | | | | -> space
 | | | |    " "
 | | | | -> function
 | | | | | -> ident
 | | | | |    "world"
 | | | | | -> arguments
 | | | | | | -> variable
 | | | | | | | -> ident
 | | | | | | |    "value"
 | | | | -> space
 | | | |    "\n"
 | | | | -> block
 | | | | | -> space
 | | | | |    "  "
 | | | | | -> atrule
 | | | | | | -> atkeyword
 | | | | | | | -> ident
 | | | | | | |    "return"
 | | | | | | -> space
 | | | | | |    " "
 | | | | | | -> variable
 | | | | | | | -> ident
 | | | | | | |    "value"

happens with media queries, mixins etc too so all at-rules seem equally affected such as with the following example

@media (max-width: 900px)
  .test
    color: red

@function world($value)
  @return $value
@DanPurdy DanPurdy mentioned this issue Jun 22, 2016
Closed
@DanPurdy DanPurdy mentioned this issue Oct 24, 2016
Closed
@DanPurdy
Copy link
Collaborator Author

DanPurdy commented Oct 24, 2016 •
edited
Loading

Another example just popped up

@mixin media-breakpoint-notebook
    @media (max-width: 1280px) and (min-width: 1024px)
        @content

// $noop: 0 // hide sass-lint false error

@mixin media-breakpoint-msie-10-11
    @media (-ms-high-contrast: none), (-ms-high-contrast: active)
        @content
 -> stylesheet
 | -> declaration
 | | -> property
 | | | -> variable
 | | | | -> ident
 | | | |    "orange-color"
 | | -> propertyDelimiter
 | |    ":"
 | | -> space
 | |    " "
 | | -> value
 | | | -> color
 | | |    "ff8011"
 | -> declarationDelimiter
 |    "\n"
 | -> declaration
 | | -> property
 | | | -> variable
 | | | | -> ident
 | | | |    "vk-color"
 | | -> propertyDelimiter
 | |    ":"
 | | -> space
 | |    " "
 | | -> value
 | | | -> color
 | | |    "67bae3"
 | -> declarationDelimiter
 |    "\n"
 | -> declaration
 | | -> property
 | | | -> variable
 | | | | -> ident
 | | | |    "telegram-color"
 | | -> propertyDelimiter
 | |    ":"
 | | -> space
 | |    " "
 | | -> value
 | | | -> color
 | | |    "61b3db"
 | -> declarationDelimiter
 |    "\n"
 | -> declaration
 | | -> property
 | | | -> variable
 | | | | -> ident
 | | | |    "tw-color"
 | | -> propertyDelimiter
 | |    ":"
 | | -> space
 | |    " "
 | | -> value
 | | | -> color
 | | |    "7cd1f0"
 | -> declarationDelimiter
 |    "\n"
 | -> space
 |    "\n"
 | -> mixin
 | | -> atkeyword
 | | | -> ident
 | | |    "mixin"
 | | -> space
 | |    " "
 | | -> ident
 | |    "media-breakpoint-notebook"
 | | -> space
 | |    "\n"
 | | -> block
 | | | -> space
 | | |    "    "
 | | | -> atrule
 | | | | -> atkeyword
 | | | | | -> ident
 | | | | |    "media"
 | | | | -> space
 | | | |    " "
 | | | | -> parentheses
 | | | | | -> ident
 | | | | |    "max-width"
 | | | | | -> operator
 | | | | |    ":"
 | | | | | -> space
 | | | | |    " "
 | | | | | -> dimension
 | | | | | | -> number
 | | | | | |    "1280"
 | | | | | | -> ident
 | | | | | |    "px"
 | | | | -> space
 | | | |    " "
 | | | | -> ident
 | | | |    "and"
 | | | | -> space
 | | | |    " "
 | | | | -> parentheses
 | | | | | -> ident
 | | | | |    "min-width"
 | | | | | -> operator
 | | | | |    ":"
 | | | | | -> space
 | | | | |    " "
 | | | | | -> dimension
 | | | | | | -> number
 | | | | | |    "1024"
 | | | | | | -> ident
 | | | | | |    "px"
 | | | | -> space
 | | | |    "\n"
 | | | | -> block
 | | | | | -> space
 | | | | |    "        "
 | | | | | -> atrule
 | | | | | | -> atkeyword
 | | | | | | | -> ident
 | | | | | | |    "content"
 | | | | | | -> space
 | | | | | |    "\n"
 | | | | | -> space
 | | | | |    "\n"
 | | | | | -> singlelineComment
 | | | | |    " $noop: 0 // hide sass-lint false error"
 | | | | | -> space
 | | | | |    "\n"
 | | | | | -> space
 | | | | |    "\n"
 | | | | | -> atrule
 | | | | | | -> atkeyword
 | | | | | | | -> ident
 | | | | | | |    "mixin"
 | | | | | | -> space
 | | | | | |    " "
 | | | | | | -> ident
 | | | | | |    "media-breakpoint-msie-10-11"
 | | | | | | -> space
 | | | | | |    "\n"
 | | | | | | -> block
 | | | | | | | -> space
 | | | | | | |    "    "
 | | | | | | | -> atrule
 | | | | | | | | -> atkeyword
 | | | | | | | | | -> ident
 | | | | | | | | |    "media"
 | | | | | | | | -> space
 | | | | | | | |    " "
 | | | | | | | | -> parentheses
 | | | | | | | | | -> ident
 | | | | | | | | |    "-ms-high-contrast"
 | | | | | | | | | -> operator
 | | | | | | | | |    ":"
 | | | | | | | | | -> space
 | | | | | | | | |    " "
 | | | | | | | | | -> ident
 | | | | | | | | |    "none"
 | | | | | | | | -> operator
 | | | | | | | |    ","
 | | | | | | | | -> space
 | | | | | | | |    " "
 | | | | | | | | -> parentheses
 | | | | | | | | | -> ident
 | | | | | | | | |    "-ms-high-contrast"
 | | | | | | | | | -> operator
 | | | | | | | | |    ":"
 | | | | | | | | | -> space
 | | | | | | | | |    " "
 | | | | | | | | | -> ident
 | | | | | | | | |    "active"
 | | | | | | | | -> space
 | | | | | | | |    "\n"
 | | | | | | | | -> block
 | | | | | | | | | -> space
 | | | | | | | | |    "        "
 | | | | | | | | | -> atrule
 | | | | | | | | | | -> atkeyword
 | | | | | | | | | | | -> ident
 | | | | | | | | | | |    "content"

If you uncomment the line then normal service is resumed!

@mixin media-breakpoint-notebook
    @media (max-width: 1280px) and (min-width: 1024px)
        @content

$noop: 0 // hide sass-lint false error

@mixin media-breakpoint-msie-10-11
    @media (-ms-high-contrast: none), (-ms-high-contrast: active)
        @content

 -> stylesheet
 | -> declaration
 | | -> property
 | | | -> variable
 | | | | -> ident
 | | | |    "orange-color"
 | | -> propertyDelimiter
 | |    ":"
 | | -> space
 | |    " "
 | | -> value
 | | | -> color
 | | |    "ff8011"
 | -> declarationDelimiter
 |    "\n"
 | -> declaration
 | | -> property
 | | | -> variable
 | | | | -> ident
 | | | |    "vk-color"
 | | -> propertyDelimiter
 | |    ":"
 | | -> space
 | |    " "
 | | -> value
 | | | -> color
 | | |    "67bae3"
 | -> declarationDelimiter
 |    "\n"
 | -> declaration
 | | -> property
 | | | -> variable
 | | | | -> ident
 | | | |    "telegram-color"
 | | -> propertyDelimiter
 | |    ":"
 | | -> space
 | |    " "
 | | -> value
 | | | -> color
 | | |    "61b3db"
 | -> declarationDelimiter
 |    "\n"
 | -> declaration
 | | -> property
 | | | -> variable
 | | | | -> ident
 | | | |    "tw-color"
 | | -> propertyDelimiter
 | |    ":"
 | | -> space
 | |    " "
 | | -> value
 | | | -> color
 | | |    "7cd1f0"
 | -> declarationDelimiter
 |    "\n"
 | -> space
 |    "\n"
 | -> mixin
 | | -> atkeyword
 | | | -> ident
 | | |    "mixin"
 | | -> space
 | |    " "
 | | -> ident
 | |    "media-breakpoint-notebook"
 | | -> space
 | |    "\n"
 | | -> block
 | | | -> space
 | | |    "    "
 | | | -> atrule
 | | | | -> atkeyword
 | | | | | -> ident
 | | | | |    "media"
 | | | | -> space
 | | | |    " "
 | | | | -> parentheses
 | | | | | -> ident
 | | | | |    "max-width"
 | | | | | -> operator
 | | | | |    ":"
 | | | | | -> space
 | | | | |    " "
 | | | | | -> dimension
 | | | | | | -> number
 | | | | | |    "1280"
 | | | | | | -> ident
 | | | | | |    "px"
 | | | | -> space
 | | | |    " "
 | | | | -> ident
 | | | |    "and"
 | | | | -> space
 | | | |    " "
 | | | | -> parentheses
 | | | | | -> ident
 | | | | |    "min-width"
 | | | | | -> operator
 | | | | |    ":"
 | | | | | -> space
 | | | | |    " "
 | | | | | -> dimension
 | | | | | | -> number
 | | | | | |    "1024"
 | | | | | | -> ident
 | | | | | |    "px"
 | | | | -> space
 | | | |    "\n"
 | | | | -> block
 | | | | | -> space
 | | | | |    "        "
 | | | | | -> atrule
 | | | | | | -> atkeyword
 | | | | | | | -> ident
 | | | | | | |    "content"
 | | | | | | -> space
 | | | | | |    "\n"
 | | | | | -> space
 | | | | |    "\n"
 | -> declaration
 | | -> property
 | | | -> variable
 | | | | -> ident
 | | | |    "noop"
 | | -> propertyDelimiter
 | |    ":"
 | | -> space
 | |    " "
 | | -> value
 | | | -> number
 | | |    "0"
 | -> space
 |    " "
 | -> singlelineComment
 |    " hide sass-lint false error"
 | -> space
 |    "\n"
 | -> space
 |    "\n"
 | -> mixin
 | | -> atkeyword
 | | | -> ident
 | | |    "mixin"
 | | -> space
 | |    " "
 | | -> ident
 | |    "media-breakpoint-msie-10-11"
 | | -> space
 | |    "\n"
 | | -> block
 | | | -> space
 | | |    "    "
 | | | -> atrule
 | | | | -> atkeyword
 | | | | | -> ident
 | | | | |    "media"
 | | | | -> space
 | | | |    " "
 | | | | -> parentheses
 | | | | | -> ident
 | | | | |    "-ms-high-contrast"
 | | | | | -> operator
 | | | | |    ":"
 | | | | | -> space
 | | | | |    " "
 | | | | | -> ident
 | | | | |    "none"
 | | | | -> operator
 | | | |    ","
 | | | | -> space
 | | | |    " "
 | | | | -> parentheses
 | | | | | -> ident
 | | | | |    "-ms-high-contrast"
 | | | | | -> operator
 | | | | |    ":"
 | | | | | -> space
 | | | | |    " "
 | | | | | -> ident
 | | | | |    "active"
 | | | | -> space
 | | | |    "\n"
 | | | | -> block
 | | | | | -> space
 | | | | |    "        "
 | | | | | -> atrule
 | | | | | | -> atkeyword
 | | | | | | | -> ident
 | | | | | | |    "content"

@tonyganch tonyganch self-assigned this Nov 3, 2016
@tonyganch
Copy link
Owner

I rewrote part which marked where blocks ended and it should have fixed similar issues.

First example:

@function hello($value)
  @return $value

@function world($value)
  @return $value

Parse tree

 -> stylesheet
 | -> atrule
 | | -> atkeyword
 | | | -> ident
 | | |    "function"
 | | -> space
 | |    " "
 | | -> function
 | | | -> ident
 | | |    "hello"
 | | | -> arguments
 | | | | -> variable
 | | | | | -> ident
 | | | | |    "value"
 | | -> space
 | |    "\n"
 | | -> block
 | | | -> space
 | | |    "  "
 | | | -> atrule
 | | | | -> atkeyword
 | | | | | -> ident
 | | | | |    "return"
 | | | | -> space
 | | | |    " "
 | | | | -> variable
 | | | | | -> ident
 | | | | |    "value"
 | | | | -> space
 | | | |    "\n"
 | -> space
 |    "\n"
 | -> atrule
 | | -> atkeyword
 | | | -> ident
 | | |    "function"
 | | -> space
 | |    " "
 | | -> function
 | | | -> ident
 | | |    "world"
 | | | -> arguments
 | | | | -> variable
 | | | | | -> ident
 | | | | |    "value"
 | | -> space
 | |    "\n"
 | | -> block
 | | | -> space
 | | |    "  "
 | | | -> atrule
 | | | | -> atkeyword
 | | | | | -> ident
 | | | | |    "return"
 | | | | -> space
 | | | |    " "
 | | | | -> variable
 | | | | | -> ident
 | | | | |    "value"

Second example:

@mixin media-breakpoint-notebook
    @media (max-width: 1280px) and (min-width: 1024px)
        @content

$noop: 0 // hide sass-lint false error

@mixin media-breakpoint-msie-10-11
    @media (-ms-high-contrast: none), (-ms-high-contrast: active)
        @content

Parse tree

 -> stylesheet
 | -> mixin
 | | -> atkeyword
 | | | -> ident
 | | |    "mixin"
 | | -> space
 | |    " "
 | | -> ident
 | |    "media-breakpoint-notebook"
 | | -> space
 | |    "\n"
 | | -> block
 | | | -> space
 | | |    "    "
 | | | -> atrule
 | | | | -> atkeyword
 | | | | | -> ident
 | | | | |    "media"
 | | | | -> space
 | | | |    " "
 | | | | -> parentheses
 | | | | | -> ident
 | | | | |    "max-width"
 | | | | | -> operator
 | | | | |    ":"
 | | | | | -> space
 | | | | |    " "
 | | | | | -> dimension
 | | | | | | -> number
 | | | | | |    "1280"
 | | | | | | -> ident
 | | | | | |    "px"
 | | | | -> space
 | | | |    " "
 | | | | -> ident
 | | | |    "and"
 | | | | -> space
 | | | |    " "
 | | | | -> parentheses
 | | | | | -> ident
 | | | | |    "min-width"
 | | | | | -> operator
 | | | | |    ":"
 | | | | | -> space
 | | | | |    " "
 | | | | | -> dimension
 | | | | | | -> number
 | | | | | |    "1024"
 | | | | | | -> ident
 | | | | | |    "px"
 | | | | -> space
 | | | |    "\n"
 | | | | -> block
 | | | | | -> space
 | | | | |    "        "
 | | | | | -> atrule
 | | | | | | -> atkeyword
 | | | | | | | -> ident
 | | | | | | |    "content"
 | | | | | | -> space
 | | | | | |    "\n"
 | | | -> declarationDelimiter
 | | |    "\n"
 | -> singlelineComment
 |    " $noop: 0 // hide sass-lint false error"
 | -> space
 |    "\n"
 | -> space
 |    "\n"
 | -> mixin
 | | -> atkeyword
 | | | -> ident
 | | |    "mixin"
 | | -> space
 | |    " "
 | | -> ident
 | |    "media-breakpoint-msie-10-11"
 | | -> space
 | |    "\n"
 | | -> block
 | | | -> space
 | | |    "    "
 | | | -> atrule
 | | | | -> atkeyword
 | | | | | -> ident
 | | | | |    "media"
 | | | | -> space
 | | | |    " "
 | | | | -> parentheses
 | | | | | -> ident
 | | | | |    "-ms-high-contrast"
 | | | | | -> operator
 | | | | |    ":"
 | | | | | -> space
 | | | | |    " "
 | | | | | -> ident
 | | | | |    "none"
 | | | | -> operator
 | | | |    ","
 | | | | -> space
 | | | |    " "
 | | | | -> parentheses
 | | | | | -> ident
 | | | | |    "-ms-high-contrast"
 | | | | | -> operator
 | | | | |    ":"
 | | | | | -> space
 | | | | |    " "
 | | | | | -> ident
 | | | | |    "active"
 | | | | -> space
 | | | |    "\n"
 | | | | -> block
 | | | | | -> space
 | | | | |    "        "
 | | | | | -> atrule
 | | | | | | -> atkeyword
 | | | | | | | -> ident
 | | | | | | |    "content"

@TheJaredWilcurt
Copy link

Using latest version of Gulp-Sass-Lint with this file:

indentation

@henrahmagix henrahmagix mentioned this issue Aug 4, 2017
Open
@henrahmagix
Copy link

henrahmagix commented Aug 4, 2017 •
edited
Loading

@tonyganch May we please have a release of this fix? I've been using it with sass-lint@1.10.2 on a few codebases, and it would mean sasstools/sass-lint#1084 can be closed.

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tonyganch tonyganch

Labels
syntax: sass type: bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@tonyganch @DanPurdy @henrahmagix @TheJaredWilcurt