postcss-scss: new nested props parsing

[dryoma]

Hi!

A couple of days ago postcss-scss was updated to consider groups of nested properties as well. Right now a group of props like

margin: 0px {
  left: 10px;
}

is parsed as Declaration that has some additional attributes and stores nested props in nodes (i.e. behaves like a Container, with walk(), etc.):

type: 'decl',
nested: true,
prop: 'margin',
value: '0',
nodes: [ {
  ...
  type: 'decl',
  prop: 'left',
  value: '10px',
  ...
} ]

Because, well, margin: 0 is a declaration :) (you can have a look as the reasoning on the (pull request) page)

Yet there is a concern that postcss-nested-props would break an postcss-scss should revert to making it Rule again.

What would your thoughts be? Does having a nested group as a Declaration with Container capabilities make sense?

[jednano]

I'm having a bit of a hard time understanding the question. Can you give me an example of what the expected result would be after transpilation? Maybe that would help.

[dryoma]

Say, we have

margin: 0px {
  left: 10px;
}

inside some ruleset. Initially postcss-scss was treating it as Rule and had it like

{
  type: 'rule',
  selector: 'margin: 0px',
  nodes: ...,
  ...
}

(including only some properties of the resulting object). After the update the same nested properties group is going to be parsed as

{
  type: 'decl',
  nested: true,
  prop: 'margin',
  value: '0px',
  raws: { /* raws that a usual decl has */ }
  nodes: [ {
    ...
    type: 'decl',
    prop: 'left',
    value: '10px',
    ...
  } ]

But the author thought that in order to not break postcss-nested-props, this:

margin: {
  left: 10px;
}

(i.e., the nested properties group without a value for a root (or "namespace") property) should be treated differently - as a Rule, just as it always was.

---

I initially proposed to parse nested props groups as declarations (with nodes) rather than rules, and would happily rebuild the code I do to accomodate that. But I'm not really happy to have some of them as declarations and others as rules. So I wanted to know what would your thoughts be, since concern for postcss-nested-props was the reason for that destinction.

[jednano]

Ahh, I see now. Yes, I definitely think these should be treated as declarations, not rules.

[dryoma]

But that would require rewriting code that uses that feature. Are you ok with that?

[jednano]

You mean rewriting plugin code, right? Not rewriting CSS?

[dryoma]

Sure, the JS code.

[jednano]

Yeah. I'm OK with that as long as @ai is OK with that. I'm assuming it will be in the next major version of PostCSS parser? If so, I can update this plugin to work with what I assume will be the v6.0 release of PostCSS our an I misunderstanding something?

[dryoma]

Not exactly, it's just postcss-scss that is getting updated, and the behavior from my post above (including margin: { left:0; } being parsed as Rule) is already shipped with version 0.2.1 (I did propose shipping it with a major version, i.e. 1.0.0, but somehow it ended up as it is now)

[jednano]

I guess I'm not sure what you want me to do then, at this point. Is there still work to be done? It sounds like you already have a solution shipped w/o parsing as a nested declaration?

[dryoma]

I just wanted to know if you'd rather have nested groups parsed as now (margin: { left:0; } as Rule and margin: 10px { left:0; } as declaration) or, like me, have both as declaration. And depending on that I'd approach postcss-scss author with the proposal to unify these two cases. So now I got your opinion, and you have my thanks for taking time and discussing that :)

[jednano]

Yes, I see them both as declarations. Anatomically, a rule should have a selector and margin is not a selector, but a "declaration property" as well as a "declaration namespace," as I've been calling it. I just don't see how it would ever be considered a rule, but I'm no linguist.

Now that you have my opinion, I'll close this issue. Thanks!

[ai]

margin: 10px {
  top: 0;
}

is not part of PostCSS core parser, but part only PostCSS SCSS parser.

So PostCSS SCSS parser has a NestedDeclaration node type (extended a simple Declaration).