v6 generates different css code
endze1t opened this issue · comments
- 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.
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
@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.
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.
@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...
@rjgotten do you have a suggestion of which version of less to use to avoid this issue?
@megawac
I'd suggest updating your code instead, really.
Otherwise you're just dead-ending yourself.
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.
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?