postcss / sugarss

Indent-based CSS syntax for PostCSS

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Ignored line with a comment

do7be opened this issue · comments

commented

I found a bug. When building with a comment it seems to ignore the line, without an error.

> a // b
  font-size: normal

This snippet seems to reproduce the problem:

body
  > a // comment
    font-size: normal

However, this only happens in combination with cssnano used as a plugin with sugarss as a parser. When cssnano runs, it reduces the body > a selector to (an invalid) >a; but if the comment is moved to the next line, it correctly reduces to body>a.

Something seems to be generating a not exactly correct AST?

body
  > a // comment
    font-size: normal

compiles to correct:

body {
  > a /* comment */ {
    font-size: normal
  }
}

maybe we have a cssnano issue here? @ben-eb

While we are thinking about issue here is a hot fix (by deleting all comments):

const postcss = require('postcss')
module.exports = postcss.plugin('no-comments', () => {
  return root => {
    root.walkComments(i => i.remove())
  }
})

Use this plugin before cssnano

Interestingly, the same-line comment is not preserved in my output, even without cssnano.

This could be a potential interaction with yet another plugin, that then ultimately breaks with cssnano. 🤔

@ben-eb AST for > a // comment looks correct too:

Rule {
  raws: 
   { before: '\n  ',
     selector: 
      { value: '> a ',
        raw: '> a /* comment */',
        sss: '> a // comment' } },
  type: 'rule',
  …

@do7be I tested your source and everything was find in SugarSS. This input source:

> a // b
  font-size: normal

compiles to:

> a /* b */ {
  font-size: normal
}

@ai It's not valid CSS; a child combinator should separate two compound selectors. I think this is more of a Sass construct, which cssnano doesn't support.

https://drafts.csswg.org/selectors-4/#child-combinators