v6 generates different css code

[endze1t]

• Operating System: Windows 10
• Node Version: 12.16.0
• NPM Version: 6.14.4
• webpack Version: 4.43.0
• less-loader Version: 6.0.0

Less code

@c: .Spinner;

@{c} {
    svg {
        animation: spin 0.5s linear infinite;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

Expected Behavior

.Spinner svg {
        animation: spin 0.5s linear infinite;
}

Actual Behavior

svg {
        animation: spin 0.5s linear infinite;
}

Code

                {
                    test: /\.less$/,
                    use: [
                        {
                            loader: dev ? 'style-loader' : MiniCssExtractPlugin.loader
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 1,
                                modules: {
                                    localIdentName: '[local]'
                                }

                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: () => [autoprefixer()]
                            }
                        },
                        {
                            loader: 'less-loader',
                            options: {
                                lessOptions: {
                                    javascriptEnabled: true
                                }
                            }
                        }
                    ]
                },

This is just happend after upgrading to less-loader v6. The old v5 version doesn't have this issue.

[alexander-akait]

Can't reproduce, please create reproducible test repo.

Please fill out all fields in the issue template, we have header - ### How Do We Reproduce? Closing now, I will reopen issue after all field filled, please respect time other developers, thanks

[rjgotten]

@endbay
This is just happend after upgrading to less-loader v6. The old v5 version doesn't have this issue.

less-loader v6 has a dependency "less": "^3.11.1" whereas v5 had a peer dependency "^2.3.1 || ^3.0.0". I.e. where v5 would have used whatever version of less you had installed, v6 instead will use its local v3.11.1 if you were using a lower version before with v5.

I would call this a definite regression in less-loader and I've already opened up #352 to have less restored as a peer dependency. This is currently also necessary to work around a memory consumption problem in less v3.10 and up.

[BartWaardenburg]

I'm having the exact same issue. I'm on the latest less version and the latest less-loader version, but I'm getting the same results as described by @endbay. So latest less version still works with less-loader v5 but does not with later versions.

It is the exact same less code as described by @endbay, where I have a root less variable as the container class.

[rjgotten]

@BartWaardenburg
It is the exact same less code as described by @endbay, where I have a root less variable as the container class.

And what happens if you instead use:

@c : ~".Spinner";

@{c} {
  svg { /* ... */ }
}

Because in newer versions of Less, @c : .Spinner; expresses: "find the ruleset or mixin .Spinner and alias/assign it as/to the variable @c. If you attempt to serialize such a thing to a string (which is what the @{c} expansion does) then it produces an empty string, afaik. And that explains the wrapped selector going missing...

[megawac]

@rjgotten do you have a suggestion of which version of less to use to avoid this issue?

[rjgotten]

@megawac
I'd suggest updating your code instead, really.
Otherwise you're just dead-ending yourself.

[megawac]

Yeah, I hear you 💯. One of our major dependencies is actually causing this issue - it's on our planned upgrade path but not for a several months.

[rjgotten]

In that case you want a version of Less from before mixins could be aliased/assigned to variables.
Iirc that's one of the version from before the each() function was added.
Off the top of my head: 3.6 or earlier?