-
-
Notifications
You must be signed in to change notification settings - Fork 423
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
Document outputStyle is set to compressed in production mode #1129
Comments
Yeah, PR welcome |
@alexander-akait 👍 what do you prefer between a "production optimisations" section and mentioning this alongside existing references to For what it’s worth here are all the diffs this has caused for us between production and development styles, because of how Tailwind and cssnano process the Sass output differently based on prod/dev build diffs with outputStyle set by sass-loader .w-body-text-large {
font-size: 1.1875rem;
-}
-.w-body-text,
-.w-body-text-large {
font-weight: 400;
line-height: 1.5;
}
.w-body-text {
font-size: 1rem;
+ font-weight: 400;
+ line-height: 1.5;
}
[…]
.w-panel__header {
- margin-inline-start: calc((2 * 1.5rem + var(--header-gap)) * -1);
+ margin-inline-start: calc(
+ (2 * theme('spacing.6') + var(--header-gap)) * -1
+ );
}
[…]
.w-panel__heading {
color: var(--w-color-text-label);
+ cursor: pointer;
}
-.w-panel__heading,
.w-panel__heading label {
cursor: pointer;
}
[…]
.w-header {
- color: var(--w-color-text-label);
margin-bottom: 2rem;
}
+.w-header,
.w-header h1,
.w-header h2 {
- margin: 0;
+ color: var(--w-color-text-label);
}
.w-header h1,
.w-header h2 {
- color: var(--w-color-text-label);
+ margin: 0;
}
.w-header h1 {
+ color: var(--w-color-text-label);
font-size: 1.875rem; |
We can put this infromation to two places:
It should be same... in your diff I see how cssnano combine some rules (it is fine), but |
👍 thank you, I’ll get on with it. Yes as far as I can tell the cssnano differences are fine and the Still I wasn’t expecting this since we use cssnano in development and production to reduce the risk of CSS processing bugs. But as long as there is documentation in |
Documentation Is:
Please Explain in Detail...
There is no documentation that the plugin configures Sass differently in development and production mode: setting the
outputStyle
tocompressed
in production,expanded
in development.This is very unexpected for me and I was going to file this behavior as a bug but reading through #763 it seems to be intentional. This should be documented, so people who want to have the exact same output in both modes know how to configure
sass-loader
.Your Proposal for Changes
Either have a section about "production optimisations" mentioning this, or mention this where
outputStyle
is documented.This is very problematic for us because we’ve otherwise configured our styles to compile the exact same way in production and development (same as #763 (comment)). In this case, we noticed the discrepancy because we use PostCSS processing alongside Sass, and this processing can have incorrect handling of whitespace.
See for example:
The text was updated successfully, but these errors were encountered: