refactor: Remove Deprecated Bourbon/Neat from CSS stack (pypi#17160)

* feat(css): create and use our own grid-container Bourbon's Neat has been deprecated and unmaintained since October 2019. The usage of Bourbon's `@span-columns` which uses the underlying functionality from Neat is only used in a couple of places - specifically the project description page, and the recovery codes pages. With CSS Grid being widely available, convert usages to create a `grid-container` mixin to set the column count and desired spacing. Removing `neat` from the build artifact reduces ~12KB from the bundle. Refs: thoughtbot/neat@6c76100 Refs: thoughtbot/neat.bourbon.io@fee0b05 Refs: https://developer.mozilla.org/en-US/docs/Web/CSS/grid Signed-off-by: Mike Fiedler <miketheman@gmail.com> * chore(deps): replace vendored bourbon with package The differences are minimal, and this sets an upgrade path to get us on track for potential upgrades and removal. After installing, using a creative `diff` command: diff --ignore-blank-lines --strip-trailing-cr \ <(find warehouse/static/sass/tools/bourbon/ -type f -exec sed '/\/\*!/,/\*\//d' {} +) \ <(find node_modules/bourbon/app/assets/stylesheets/ -type f -exec cat {} +) The only differences found are: - a header when vendored back in 5db8496 - license headers added in 9370bc5 - spelling fixes in 13c5a7c - sass warning fixes in a0f3817 Commits following this one will remove the vendored code, and start upgrades to get us updated, and see about other removals. Signed-off-by: Mike Fiedler <miketheman@gmail.com> * chore: remove vendored bourbon Expect Dart Sass warnings to be emitted, as our custom updates have been reverted. Signed-off-by: Mike Fiedler <miketheman@gmail.com> * chore(deps) update to bourbon 4.2.7 Signed-off-by: Mike Fiedler <miketheman@gmail.com> * chore(deps): update bourbon to 4.3.4 Last before 5.x release, emits deprecation warnings. Signed-off-by: Mike Fiedler <miketheman@gmail.com> * refactor: address bourbon deprecation warnings Many of these are being replaced by native CSS functions available at this time. Signed-off-by: Mike Fiedler <miketheman@gmail.com> * chore(deps): update bourbon to 5.0.0 Changes the import path slightly, no other changes. Signed-off-by: Mike Fiedler <miketheman@gmail.com> * chore(deps): update bourbon to 6.0.0 Signed-off-by: Mike Fiedler <miketheman@gmail.com> * chore(deps): update bourbon to 7.3.0 This is the final release of bourbon, after which we likely want to replace any usage with native CSS. Refs: https://thoughtbot.com/blog/you-might-not-need-bourbon Signed-off-by: Mike Fiedler <miketheman@gmail.com> * refactor(css): selector input variable replacement The `all-text-inputs*` selector macro from Bourbon does some nice stuff, replace it with native CSS behavior. - A better selector that can be overridden more specifically with `:where` - A mixin for the active/hover styles - Collapse duplicated selectors Signed-off-by: Mike Fiedler <miketheman@gmail.com> * refactor(css): replace mixin with native margin Signed-off-by: Mike Fiedler <miketheman@gmail.com> * chore(css): vendor `clearfix` from bourbon It's small enough to vendor safely, until all usages have been reviewed and updated with better layouts. Signed-off-by: Mike Fiedler <miketheman@gmail.com> * chore(css): remove redundant border property The `card` mixin is already setting the border width properties for tables. Signed-off-by: Mike Fiedler <miketheman@gmail.com> * refactor(css): replace mixin with native properties Signed-off-by: Mike Fiedler <miketheman@gmail.com> * chore(deps): remove bourbon Good-night, sweet prince. Signed-off-by: Mike Fiedler <miketheman@gmail.com> --------- Signed-off-by: Mike Fiedler <miketheman@gmail.com>
miketheman · Nov 25, 2024 · eb6e6ad · eb6e6ad
1 parent 630e971
commit eb6e6ad
Show file tree

Hide file tree

Showing 114 changed files with 105 additions and 5,588 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -6,8 +6,6 @@
     "stylelint-selector-bem-pattern"
   ],
   "ignoreFiles": [
-    "warehouse/static/sass/tools/bourbon/**/*",
-    "warehouse/static/sass/tools/neat/**/*",
     "warehouse/static/sass/resets/_boxsizing.scss",
     "warehouse/static/sass/resets/_reset.scss"
   ],

diff --git a/warehouse/static/sass/base/_forms.scss b/warehouse/static/sass/base/_forms.scss
@@ -14,8 +14,34 @@
 
 // FORMS
 
-#{$all-text-inputs},
-select {
+@mixin input-field-active-styles {
+  box-shadow: inset 0 0 0 1px $primary-color;
+  border-color: $primary-color;
+  outline: none;
+}
+
+// TODO: Cannot use :where() in the following selector
+// because of the order of normalize.css will reset it.
+:is(
+  input:not([type]),
+  select,
+  textarea,
+  [type="color"],
+  [type="date"],
+  [type="datetime"],
+  [type="datetime-local"],
+  [type="email"],
+  [type="month"],
+  [type="month"],
+  [type="number"],
+  [type="password"],
+  [type="search"],
+  [type="tel"],
+  [type="text"],
+  [type="time"],
+  [type="url"],
+  [type="week"]
+) {
   font-size: $input-font-size;
   border-radius: 2px;
   background-color: $white;
@@ -26,30 +52,23 @@ select {
   vertical-align: middle;
   width: 250px;
   max-width: 100%;
+
+  &:hover,
+  &:active,
+  &:focus {
+    @include input-field-active-styles;
+  }
 }
 
-#{$all-text-inputs-focus},
-#{$all-text-inputs-hover},
-#{$all-text-inputs-active},
-select:focus,
-select:hover,
-select:active,
-input[type="checkbox"]:focus,
-input[type="checkbox"]:hover,
-input[type="checkbox"]:active {
-  box-shadow: inset 0 0 0 1px $primary-color;
-  border-color: $primary-color;
-  outline: none;
+input[type="checkbox"] {
+  &:focus,
+  &:hover,
+  &:active {
+    @include input-field-active-styles;
+  }
 }
 
-input:disabled,
-input:disabled:focus,
-input:disabled:hover,
-input:disabled:active,
-select:disabled,
-select:disabled:focus,
-select:disabled:hover,
-select:disabled:active {
+:where(input:disabled, select:disabled) {
   cursor: not-allowed;
   box-shadow: none;
   background-color: $base-grey;

diff --git a/warehouse/static/sass/base/_typography.scss b/warehouse/static/sass/base/_typography.scss
@@ -157,7 +157,7 @@ button {
   line-height: $base-line-height;
 }
 
-@include selection {
+::selection {
   color: darken($primary-color, 15);
   background: $highlight-color;
 }

diff --git a/warehouse/static/sass/blocks/_footer.scss b/warehouse/static/sass/blocks/_footer.scss
@@ -54,9 +54,9 @@
   }
 
   &__menus {
-    @include display(flex);
-    @include justify-content(center);
-    @include flex-wrap(wrap);
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
     margin-bottom: $spacing-unit;
 
     @media only screen and (max-width: $mobile) {
@@ -65,8 +65,8 @@
   }
 
   &__menu {
-    @include flex-basis(220px);
-    @include flex-shrink(0);
+    flex-basis: 220px;
+    flex-shrink: 0;
     margin: 0 $half-spacing-unit 40px;
     padding: 0;
 

diff --git a/warehouse/static/sass/blocks/_form-group.scss b/warehouse/static/sass/blocks/_form-group.scss
@@ -44,7 +44,26 @@
     font-weight: normal;
   }
 
-  #{$all-text-inputs}.form-group__field,
+:where(
+  input:not([type]),
+  select,
+  textarea,
+  [type="color"],
+  [type="date"],
+  [type="datetime"],
+  [type="datetime-local"],
+  [type="email"],
+  [type="month"],
+  [type="month"],
+  [type="number"],
+  [type="password"],
+  [type="search"],
+  [type="tel"],
+  [type="text"],
+  [type="time"],
+  [type="url"],
+  [type="week"]
+).form-group__field,
   select.form-group__field {
     display: block;
     width: 350px;

diff --git a/warehouse/static/sass/blocks/_project-description.scss b/warehouse/static/sass/blocks/_project-description.scss
@@ -168,7 +168,6 @@
 
   table {
     @include card;
-    @include border-width(1px null);
     border-collapse: collapse;
     border-spacing: 0;
     text-align: left;

diff --git a/warehouse/static/sass/blocks/_release.scss b/warehouse/static/sass/blocks/_release.scss
@@ -112,7 +112,9 @@
   }
 
   &__yanked-reason p {
-    @include ellipsis;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   &--current {

diff --git a/warehouse/static/sass/blocks/_vertical-tabs.scss b/warehouse/static/sass/blocks/_vertical-tabs.scss
@@ -82,6 +82,8 @@
 
 .vertical-tabs {
   @include clearfix;
+  @include grid-container;
+
   margin: $spacing-unit 0;
 
   @media only screen and (max-width: $tablet) {
@@ -95,7 +97,7 @@
   }
 
   &__tabs {
-    @include span-columns(3);
+    grid-column: span 3;
     padding-left: 1px;
 
     @media only screen and (max-width: $tablet) {
@@ -167,9 +169,10 @@
   }
 
   &__panel {
-    @include span-columns(9);
+    grid-column: span 9;
 
     @media only screen and (max-width: $tablet) {
+      grid-column: span 12;
       width: 100%;
     }
   }

diff --git a/warehouse/static/sass/layout-helpers/_columns.scss b/warehouse/static/sass/layout-helpers/_columns.scss
@@ -18,7 +18,8 @@
 */
 
 .col-half {
-  @include span-columns(6);
+  @include grid-container;
+  grid-column: span 6;
 
   &:last-of-type {
     margin: 0;

diff --git a/warehouse/static/sass/layout-helpers/_left-layout.scss b/warehouse/static/sass/layout-helpers/_left-layout.scss
@@ -26,7 +26,7 @@
 
   &__sidebar {
     float: left;
-    @include calc(width, "25% - " $half-spacing-unit);
+    width: calc(25% - #{$half-spacing-unit});
     margin-right: $spacing-unit;
 
     @media only screen and (max-width: $desktop) {
@@ -37,7 +37,7 @@
 
   &__main {
     float: left;
-    @include calc(width, "75% - " $half-spacing-unit);
+    width: calc(75% - #{$half-spacing-unit});
     margin-right: 0;
 
     @media only screen and (max-width: $desktop) {

diff --git a/warehouse/static/sass/settings/_fonts.scss b/warehouse/static/sass/settings/_fonts.scss
@@ -16,16 +16,6 @@
 
 $base-font-family: "Source Sans 3", "Helvetica", arial, sans-serif;
 $code-font: "Source Code Pro", monospace;
-
-
-/*
-  For bourbon.io.
-  Sets global base em size for the px-to-em and px-to-rem function.
-  This should be the same size as your body font-size.
-  Defaults to 16px, but we want to be a tiny bit larger - 17px.
-*/
-
-$em-base:          17px;
 $base-font-size:   1rem;
 $small-font-size:  0.8rem;
 $input-font-size:  $base-font-size * 1.1;

diff --git a/warehouse/static/sass/settings/_grid.scss b/warehouse/static/sass/settings/_grid.scss
@@ -23,3 +23,6 @@ $spacing-unit:       30px;
 // Declare our own spacing unit variable since we recalculate it so often
 $half-spacing-unit:  math.div($spacing-unit, 2);
 $quarter-spacing-unit: math.div($spacing-unit, 4);
+
+// Set the number of columns in the grid
+$grid-columns: 12;
diff --git a/warehouse/static/sass/settings/_neat.scss b/warehouse/static/sass/settings/_neat.scss
diff --git a/warehouse/static/sass/tools/_layout-utilities.scss b/warehouse/static/sass/tools/_layout-utilities.scss
@@ -12,10 +12,22 @@
  * limitations under the License.
  */
 
+ @mixin clearfix {
+  // From Bourbon. https://www.bourbon.io/docs/latest/#clearfix
+  // TODO: Confirm usages across codebase, and remove if not needed.
+  // Guidance is to fix layouts with flexbox or grid instead.
+  &::after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
 @mixin centered-container($width) {
   max-width: $width;
 
-  @include margin(null auto);
+  margin-left: auto;
+  margin-right: auto;
   @include clearfix;
 }
 
@@ -28,6 +40,12 @@
   }
 }
 
+@mixin grid-container {
+  display: grid;
+  grid-template-columns: repeat($grid-columns, 1fr);
+  column-gap: $half-spacing-unit;
+}
+
 @mixin split-layout {
   display: flex;
   justify-content: space-between;