New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CSS properties ordered alphabetically on build #2395
Comments
I changed |
Please provide a reproduction, especially demonstrating how you tried to change Also: Your code exmaples makes it seem as if the SCSS code would be sorted (it contains variables), but you say the final CSS is sorted. which is it. |
Yes sorry about the variables, it just a bit of code from my project.
Let's take my example, I have a class with radius applied on all corner. Then I create another variation (BEM style) with only radius on the right corners.
In dev mode, no problem, everything work as expected.
This break the style as I just wish to disable this, but I can seem to be able to with Thank you for your time |
@LinusBorg As requested, here is a repo that demonstrate the problem:
Hope that help ! EDIT: I pushed a change to set ...
/* config.plugin('optimize-css') */
new OptimizeCssnanoPlugin(
{
sourceMap: false,
cssnanoOptions: {
safe: true,
autoprefixer: {
disable: true
},
mergeLonghand: false,
cssDeclarationSorter: false
}
}
),
... |
Well, it is a bug in Vue CLI's default configuration, as we have set Current workaround: // vue.config.js
module.exports = {
chainWebpack: config => {
config.when(process.env.NODE_ENV === "production", config => {
config.plugin("optimize-css").tap(args => {
args[0].cssnanoOptions = {
preset: ["default", {
autoprefixer: { disable: true },
mergeLonghand: false,
cssDeclarationSorter: false
}
]
};
return args;
});
});
}
}; |
Version
3.0.1
Reproduction link
https://github.com/lionel-bijaoui/demo-order-css
Node and OS info
Node 8.11.4 / npm 5.6.0 / Windows 10
Steps to reproduce
Create a vue-cli project with scss support.
Create a basic component with a style block and add a class.
In this class, put the properties in non alphabetical order.
If you run
npm run serve
and inspect the style, they should be in the same order as what you wrote them.If you run
npm run build
and inspect the style, they will be in alphabetical orderWhat is expected?
What is actually happening?
The CSS properties get reordered alphabetically and it can create unexpected side effects
The change in behavior was observed between v3.0-beta.10 and 3.0.1 but it might be older.
I guess it has something to do with minification, but I was unable to find any option or mention in the changelog.
EDIT: Added link to repo of demo
The text was updated successfully, but these errors were encountered: