Use postcss-calc to simplify css calc(), closes #23581

[bangzek]

It will simplify css calc() expression on .col-form-label, .col-form-label-lg and .col-form-label-sm.

[XhmikosR]

@bangzek: you need to update package-lock.json too.

@mdo: this is what I meant we should use more postcss plugins. This is an easy optimization, same as the mqpacker one. :)

[mdo]

This is an easy optimization, same as the mqpacker one. :)

Why do we need it?

[XhmikosR]

It's one of the many available optimization steps we can take advantage of to reduce the final bundle size to the minimum. It might seem like a small improvement but the whole idea is to apply many more; at least that is my plan and eventually we can save an important amount of CSS with these easy changes.

…

On Aug 22, 2017 00:01, "Mark Otto" ***@***.***> wrote: Why do we need it? — You are receiving this because you were assigned. Reply to this email directly, view it on GitHub <#23582 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAVVtdl_o5Wf-NwZtAp_kKgOOZv5mV2Oks5safAsgaJpZM4O8zeG> .

[mdo]

Okay, I think maybe I need to rephrase myself with these kind of questions. Here's what goes through my mind with PRs like this:

• What does postcss-calc do?
• How is it better or simpler than CSS's regular calc?
• Is it more approachable than the regular calc?
• Does it add more burden to us, or users of Bootstrap?
• Why so many PostCSS plugins lately? We use Sass—how do we communicate this to folks?

None of these PRs lately have answers those questions @XhmikosR. You're telling me it's an optimization and it's better—you gotta tell me how exactly. I can go hunt some of this information down myself, but without it, I can't approve of the changes.

[XhmikosR]

postcss-calc just reduces the calc references. In our case it's only 3 but it's a pretty safe and easy optimization we could/should have in our toolbox.

The resulting CSS has still the same effect. See the diff:

 dist/css/bootstrap.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css
index 9164d6876..8e667f466 100644
--- a/dist/css/bootstrap.css
+++ b/dist/css/bootstrap.css
@@ -1796,20 +1796,20 @@ select.form-control:focus::-ms-value {
 }
 
 .col-form-label {
-  padding-top: calc(0.5rem - 1px * 2);
-  padding-bottom: calc(0.5rem - 1px * 2);
+  padding-top: calc(0.5rem - 2px);
+  padding-bottom: calc(0.5rem - 2px);
   margin-bottom: 0;
 }
 
 .col-form-label-lg {
-  padding-top: calc(0.5rem - 1px * 2);
-  padding-bottom: calc(0.5rem - 1px * 2);
+  padding-top: calc(0.5rem - 2px);
+  padding-bottom: calc(0.5rem - 2px);
   font-size: 1.25rem;
 }
 
 .col-form-label-sm {
-  padding-top: calc(0.25rem - 1px * 2);
-  padding-bottom: calc(0.25rem - 1px * 2);
+  padding-top: calc(0.25rem - 2px);
+  padding-bottom: calc(0.25rem - 2px);
   font-size: 0.875rem;
 }

We do use Sass, but that doesn't mean we can't hook up Postcss plugins. We should definitely do this because Postcss is a post-processor not a pre-processor and can help a lot if we set up things carefully.

Note that one thing people blame us is the bloat/result size. We can't do miracles and keep the same functionality but we can squash a few KB here and there.

[mdo]

Ahhh okay so it rewrites things for a simpler output. That's chill. I didn't know if it was just affecting compiled code or trying to change how we use calc in our source Sass files.

[XhmikosR]

@mdo: I think we can drop this PR since the gain isn't big.

[bangzek]

This no longer needed cause that calc() on .col-form-label* not exist anymore