refactor: Remove Deprecated Bourbon/Neat from CSS stack#17160
Merged
miketheman merged 15 commits intopypi:mainfrom Nov 25, 2024
Merged
refactor: Remove Deprecated Bourbon/Neat from CSS stack#17160miketheman merged 15 commits intopypi:mainfrom
miketheman merged 15 commits intopypi:mainfrom
Conversation
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>
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>
Expect Dart Sass warnings to be emitted, as our custom updates have been reverted. Signed-off-by: Mike Fiedler <miketheman@gmail.com>
Signed-off-by: Mike Fiedler <miketheman@gmail.com>
Last before 5.x release, emits deprecation warnings. Signed-off-by: Mike Fiedler <miketheman@gmail.com>
Many of these are being replaced by native CSS functions available at this time. Signed-off-by: Mike Fiedler <miketheman@gmail.com>
Changes the import path slightly, no other changes. Signed-off-by: Mike Fiedler <miketheman@gmail.com>
Signed-off-by: Mike Fiedler <miketheman@gmail.com>
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>
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>
Signed-off-by: Mike Fiedler <miketheman@gmail.com>
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>
The `card` mixin is already setting the border width properties for tables. Signed-off-by: Mike Fiedler <miketheman@gmail.com>
Signed-off-by: Mike Fiedler <miketheman@gmail.com>
Good-night, sweet prince. Signed-off-by: Mike Fiedler <miketheman@gmail.com>
miketheman
added
CSS/SCSS
Member
Author
|
Any open TODOs inline are considered beyond the scope of this change, since they were too extensive to try and get done with this already-large PR. |
ewdurbin
approved these changes
Nov 25, 2024
Member
ewdurbin
left a comment
ewdurbin
left a comment
There was a problem hiding this comment.
Reviewed by running locally and viewing. So, quite literally LGTM.
miketheman
added a commit
to miketheman/warehouse
that referenced
this pull request
Dec 6, 2024
`display: grid` needs to be at a parent level, and `col-half` didn't have a container per se, as the previous implementation was a computed column width, not part of a CSS Grid. Fixes pypi#17233 Refs: pypi#17160 Signed-off-by: Mike Fiedler <miketheman@gmail.com>
ewdurbin
pushed a commit
that referenced
this pull request
Dec 6, 2024
* fix: create a parent for column grids `display: grid` needs to be at a parent level, and `col-half` didn't have a container per se, as the previous implementation was a computed column width, not part of a CSS Grid. Fixes #17233 Refs: #17160 Signed-off-by: Mike Fiedler <miketheman@gmail.com> * make translations Signed-off-by: Mike Fiedler <miketheman@gmail.com> --------- Signed-off-by: Mike Fiedler <miketheman@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Bourbon 4.2.5 was released on Sep 17, 2015.
Neat 1.7.2 was released on Mar 13, 2015.
Warehouse vendored them on Nov 18, 2015 from a design repo, using
gulpto handle the build process, replaced since by webpack.Bourbon and Neat are now both deprecated libraries, with the final Neat release of 4.0.0 on Jul 10, 2019, and the final Bourbon release of 7.3.0 on Jan 23, 2023.
The authors have also helpfully provided a Bourbon replacement guide to native CSS features.
Steps
Here's a list of tasks to get us there:
neatwith native CSS featuresbourbon4.2.5 with package, reintroducing warnings from chore: handle sass warnings #12742bourbon4.2.x versionbourbon4.3.x version, fix issues foundall-text-inputsmarginclearfix- vendored, and deferred for nowborder-widthellipsisBundle Size
Before: 252k uncompressed, 30k gzip, 24k brotli
After: 195k uncompressed, 29k gzip, 23k brotli
The CSS bundle size drops a little, largely due to removing the vendored files with custom license headers - since the rest of bourbon/neat were only used during compile-time, the resulting compiled bundles have the same functionality as before.
Related links