Open YassienW opened 4 years ago
Why do you consider this to be a bug? This is valid CSS
.container {
border-width: 1px;
border-style: solid;
border-color: black;
}
I thought a one liner would be expected and is a feature of this plugin as per the documentation: https://cssinjs.org/jss-plugin-expand?v=v10.0.0-alpha.9
If not i guess the documentation should be updated for consistency, i wasn't entirely sure if i was doing something wrong or if the documentation was incorrect
yeah, docs is wrong there, though I don't remember exactly why we don't generate a shortcut in this case, maybe @typical000 remembers
As far as I remember the reason was that it's more "safe" and optimal in terms of performance to write all rules separately instead of one shortcut concatenating sting in one line. As "safe" I mean that there is no standard in CSS in which order we should write rules inside shorthand. For example if we use padding and concatenate them without any additional checks:
// JS
container: {
padding: {
top: 10,
left: 1,
right: 20
}
}
// Resulting CSS
.container {
padding: 10px 1px 20px; /* Wrong! */
}
For avoiding such bug we should write additional logic for making shorthand rule if all values are correct, or write all rules separately it there is something wrong.
That makes sense @typical000, thanks!
Expected behavior:
As per https://cssinjs.org/jss-plugin-expand?v=v10.0.0-alpha.9
should compile to
Describe the bug:
It compiles to
Codesandbox link: https://codesandbox.io/s/jss-plugin-expand-issue-ww682
Versions (please complete the following information):
This was briefly mentioned in #1023
Edit: Same issue with font properties