[DO NOT MERGE] Remove SASS CSS diff #11718
Conversation
jesstelford
force-pushed
the
remove-sass-compiled-css
branch
from
712bf1f
to
d46e33c
Compare
jesstelford
force-pushed
the
remove-sass-main-css
branch
from
a14ca8b
to
f7d3678
Compare
| @@ -3369,6 +3398,8 @@ html[class~='Polaris-Safari-16-Font-Optical-Sizing-Patch'] { | |||
| border-bottom: var(--p-border-width-050) dotted var(--p-color-border); | |||
| } | |||
| .Polaris-Popover { | |||
| --pc-popover-visible-portion-of-arrow: 0.3125rem; | |||
| --pc-popover-vertical-motion-offset: -0.3125rem; | |||
There was a problem hiding this comment.
SASS variables that were only used locally within a component have been converted to CSS Custom Properties with the --pc- prefix.
| --pg-control-height: 2rem; | ||
| --pg-control-vertical-padding: calc( | ||
| (2.25rem - var(--p-font-line-height-600) - var(--p-space-050)) / 2 | ||
| ); |
There was a problem hiding this comment.
Any SASS variables that couldn't be inlined have been converted to CSS Custom Properties with the --pg- prefix (and that prefix has been added to our linter along with --pc-).
| @@ -666,7 +689,7 @@ body { | |||
| min-height: 100%; | |||
| margin: 0; | |||
| padding: 0; | |||
| background-color: #f1f2f4; | |||
| background-color: rgba(241, 242, 244, 1); | |||
There was a problem hiding this comment.
SASS was previously converting rgb/rgba usages into hex. Postcss does not do this, so the output is closer to the input (ie; identical).
| @@ -5576,6 +5606,9 @@ li:first-of-type > .Polaris-Listbox-TextOption { | |||
| border: var(--p-border-width-100) solid transparent; | |||
| } | |||
| } | |||
| .Polaris-RadioButton__Backdrop { | |||
| position: relative; | |||
| } | |||
There was a problem hiding this comment.
The way SASS resolves mixins & nested rules is mostly the same as how postcss-mixins and postcss-nesting does it, except for the case where a mixin comes after a nested rule; the final CSS output will be in a slightly different order (see this explanation for details).
This is only an issue if any declarations following the mixin (which follows a nested rule) are used to overwrite declarations the mixin inserts.
Thankfully, there's an easy fix which requires moving the mixin call above any nested rules. We only had to do this twice (for Navigation & ActionList), the rest we left the source alone and hence the slighly changed output css above.
| ); | ||
| --pc-action-list-item-vertical-padding: calc( | ||
| (var(--pc-action-list-item-min-height) - var(--p-font-line-height-500)) / 2 | ||
| ); |
There was a problem hiding this comment.
Similar to this comment, we had to rearrange the mixins to be at the top here, but due to git's diff algorithm it looks like the CSS Custom Properties have moved.
| @@ -12223,14 +12294,14 @@ li:first-of-type > .Polaris-Listbox-TextOption { | |||
| .Polaris-Navigation__SecondaryActions { | |||
| display: flex; | |||
| align-items: center; | |||
| height: calc(nav(mobile-height) - var(--p-space-100)); | |||
| height: calc(var(--pc-navigation-mobile-height) - var(--p-space-100)); | |||
There was a problem hiding this comment.
Is this fixing a bug? Looks like it might be!
jesstelford
force-pushed
the
remove-sass-compiled-css
branch
from
d46e33c
to
fbee8b4
Compare
jesstelford
force-pushed
the
remove-sass-main-css
branch
from
f7d3678
to
02170e8
Compare
jesstelford
force-pushed
the
remove-sass-compiled-css
branch
from
fbee8b4
to
e057d66
Compare
See #11677