Error with nested rules

[ai]

Input:

a {
  b {
    margin-top: 2rem;
  }
}

Output:

a {
    margin-top: 32px;
  b {
    margin-top: 2rem;
  }
}

/cc @MoOx because this plugin is in cssnext

[ai]

Origin reported by @meritt postcss/postcss-nested#25

[ai]

The solution is very easy. In pixrem you use rule.eachDecl inside css.eachRule. But eachDecl is recursive and does to rule children too. Soo you need just replace eachDecl to each with child.type == 'decl' check.

[MoOx]

Or you can just run this plugin after the other ?
That seems a better idea.

I think some plugins (like pixrem) should be executed at the end, while some others (nested, mixins, etc) make sense at the beginning.

[ai]

@MoOx yeap, chaging order would fix it too. But here is just a issue, misunderstanding of PostCSS API. So there is not sense to keep this bug.

[robwierzbowski]

I think this plugin should as a rule be run after Sass or any other CSS precompiler, which would avoid this bug. pixrem runs on CSS, not any number of preprocessing languages; when nesting is added to CSS then this fix would be a good one.

Does the documentation say to run preprocessors first? If not, let's add it.

[robwierzbowski]

My main concern with adding preprocessor specific code for this particular plugin is the maintainer may end up having to support all preprocessor weirdness. Variables, different syntax, etc. Better to make a rule that it only works on CSS, IMO.

[ai]

@robwierzbowski it is not a question of plugin order. Plugin code has a bug. We got some effects with nested rules. We will got some effects in future with other cases.

Problem is only because algorithm is wrong.

[ai]

Wrong code:

css.eachRule( (rule) => {
  rule.eachDecl( (decl) => {
    rule.append(decl.clone()) // it is a wrong code, because eachDecl is recursive
                              // and not every decl has rule as parent
  })
})

[ai]

Right code:

css.eachRule( (rule) => {
  rule.each( (decl) => {
    if ( decl.type != 'decl' ) return;
    rule.append(decl.clone()) // it is a right code, because decl will be always a direct children of rule
  })
})

[MoOx]

True say

[iamvdo]

I'm agree with both of you. :)
This plugin should only run on CSS, but there was a bug. Now fixed.