Selectors inside mixin do not work

[MaijaHeiskanen]

Hi! I am updating postcss-mixins from 6.2.3 to 8.1.0, and noticed that if mixin has a selector inside it, it wont work anymore.

This:

@define-mixin svgicon-size-16 {
    height: 16px;
    width: 16px;
    stroke-width: .75px;

    .fill-notification-icon-line {
        stroke-width: 1.2px;
    }
    .stroke-notification-icon-line {
        stroke-width: 1px;
    }
}

.kanban-warning-icon {
    @mixin svgicon-size-16;
    flex: 0 0 16px;
    display: flex;
}

will become this:

.kanban-warning-icon {
    stroke-width: .75px;
    display: flex;
    flex: 0 0 16px;
    height: 16px;
    width: 16px;
    .fill-notification-icon-line {
        stroke-width: 1.2px
    }
    .stroke-notification-icon-line {
        stroke-width: 1px
    }
}

which obviously wont work.

Is this a bug or something wrong with my config?

These are postcss packages in use (before updating):

"postcss": "8.3.5",
"postcss-color-function": "4.1.0",
"postcss-flexbugs-fixes": "5.0.2",
"postcss-import": "14.0.2",
"postcss-mixins": "6.2.3",                // Updating to 8.1.0
"postcss-nested": "5.0.1",
"postcss-scss": "4.0.0",
"postcss-simple-vars": "6.0.2",

[ai]

Looks like a bug in postcss-nested.

Can you update all dependencies (inside dependencies tree) by calling npm update or yarn upgrade and then try to reproduce an issue.

We recently fixed very similar bug

[MaijaHeiskanen]

I tried yarn upgrade, but it did not change anything. I tried updating postcss-nested from 5.0.1 to 5.0.5 (and to 5.0.2), but that causes another kind of a problem:

[14:25:42] TypeError in plugin "gulp-postcss"
Message:
    Cannot read property 'toLowerCase' of undefined
Details:
    fileName: <removed_pathname_here>\styles.scss

Stack:
TypeError: Cannot read property 'toLowerCase' of undefined
    at getEvents (<removed_pathname_here>\node_modules\postcss\lib\lazy-result.js:59:21)
    at toStack (<removed_pathname_here>\node_modules\postcss\lib\lazy-result.js:86:14)
    at LazyResult.visitTick (<removed_pathname_here>\node_modules\postcss\lib\lazy-result.js:513:22)
    at LazyResult.runAsync (<removed_pathname_here>\node_modules\postcss\lib\lazy-result.js:408:30)
[14:25:42] 'start' errored after 1.25 min
error Command failed with exit code 1.

I investigated this a bit, and seems like in postcss\lib\lazy-result.js, in getEvents function, some nodes are missing name or prop:

function getEvents(node) {
  let key = false
  let type = TYPE_TO_CLASS_NAME[node.type]
  if (node.type === 'decl') {
    key = node.prop.toLowerCase()
  } else if (node.type === 'atrule') {
    key = node.name.toLowerCase()        // This is line 59, to which the error is pointing at
  }
  ...
}

I logged nodes to console and the last one that was logged before the error occurred was a media query inside a selector.

.viewcontent {
    background: $white;
    box-shadow: 0 3px .7rem $gray60;
    border: 1px solid $gray60;
    border-radius: 3px;
    margin: -1px .75rem .75rem; /* Hide top border */
    padding: 1.5rem;

    @media (min-width: $breakpoint-xl-min) {
        margin: -1px 1.5rem 1.5rem;
    }
}

Is this a bug too?

[ai]

Hard to say. Very strange behavior. I will have time to investigate it only on next week.

Very likely it is related to postcss/postcss-nested#124

[yevgeniy-belov]

I updated postcss-nested to 5.0.6 - still doesn't work.

[lumburr]

Hi! I am updating postcss-mixins from 6.2.3 to 8.1.0, and noticed that if mixin has a selector inside it, it wont work anymore.

嗨！我正在将 postcss-mixin 从6.2.3更新到8.1.0，并注意到如果 mixin 在其中有一个选择器，它就不能工作了。

This:

这个:

@define-mixin svgicon-size-16 {
    height: 16px;
    width: 16px;
    stroke-width: .75px;

    .fill-notification-icon-line {
        stroke-width: 1.2px;
    }
    .stroke-notification-icon-line {
        stroke-width: 1px;
    }
}

.kanban-warning-icon {
    @mixin svgicon-size-16;
    flex: 0 0 16px;
    display: flex;
}

will become this:

会变成这样:

.kanban-warning-icon {
    stroke-width: .75px;
    display: flex;
    flex: 0 0 16px;
    height: 16px;
    width: 16px;
    .fill-notification-icon-line {
        stroke-width: 1.2px
    }
    .stroke-notification-icon-line {
        stroke-width: 1px
    }
}

which obviously wont work.

这显然不起作用。

Is this a bug or something wrong with my config?

这是一个错误还是我的配置错误？

These are postcss packages in use (before updating):

这些是使用中的 postcss 包(在更新之前) :

"postcss": "8.3.5",
"postcss-color-function": "4.1.0",
"postcss-flexbugs-fixes": "5.0.2",
"postcss-import": "14.0.2",
"postcss-mixins": "6.2.3",                // Updating to 8.1.0
"postcss-nested": "5.0.1",
"postcss-scss": "4.0.0",
"postcss-simple-vars": "6.0.2",

Can you provide a link to reproduce?
I'm afraid our project configuration is different, I can't reproduce it.

[wesleyboar]

.kanban-warning-icon {
    stroke-width: .75px;
    display: flex;
    flex: 0 0 16px;
    height: 16px;
    width: 16px;
    .fill-notification-icon-line {
        stroke-width: 1.2px
    }
    .stroke-notification-icon-line {
        stroke-width: 1px
    }
}

which obviously wont work.

Why not? What output did OP expect?

That is exactly what I expect to be output, and it looks like valid CSS.

Into .kanban-warning-icon (which has display and flex), the mixin adds its width, height, stroke-width and its selectors (and their one rule each) as nested rulesets (sans & , because it was not included; no problem, because it is optional).