Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

v6: Sass modules only#41512

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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Draft
mdo wants to merge16 commits intomain
base:main
Choose a base branch
Loading
fromsass-modules-only
Draft

v6: Sass modules only#41512

mdo wants to merge16 commits intomainfromsass-modules-only

Conversation

mdo
Copy link
Member

@mdomdo commentedJun 2, 2025•
edited
Loading

This is a WIP effort to pull out the Sass module changes from my v6 branch to see how minimal we can make an earlier release to get folks onto newer versions of Dart Sass, Sass modules, etc. TBD if we do this, but wanted to try over the weekend. Still a few more things to bring in here, but it's getting close. I think the_maps and_variables-dark are my current biggest problems.

This branch aims to:

  1. Migrate to Dart Sass only, dropping the older and deprecated Node Sass.
  2. Replace all@import with@use and@forward, including in our documentation.
  3. Lightly reorganize thescss/ directory with additional subfolders.
  4. Colocate Sass variables, loops, and mixins within each stylesheet that relies on them.
  5. Minimally revamp our theme colors, functions, and some global configuration variables to avoid circular dependency imports with the move to Sass modules.More info coming here…
  6. Restore flex grid alongside CSS grid, update grid bundle

Optional changes that feel within reason of a more focused v6 release:

  • Dropping jQuery interfaces
  • Bumping browser support slightly
  • Embrace logical properties exclusively, thereby dropping our RTL bundles
  • Utilities: migrate aspect ratio helper to utility, some additional and more modern utilities

What's not coming that would be moved to a faster v7 release:

  • CSS layers
  • Revamping the utility API to allow multiple selector types, removing!important for layers, streamlining keys
  • Nearly all utilities and helpers changes
  • More extensive changes to theming, color modes, and colors
  • Dropping flexbox grid system for CSS Grid system

Probably some other things to pull out too, but wanted to spike this out.

julien-deramond, CyrilKrylatov, jcoyne, ajiho, rafaeldev, JacobJoergensen, goldmont, MasihTak, Justintime50, piotaixr, and 5 more reacted with heart emojiajiho and MasihTak reacted with rocket emojijulien-deramond, ajiho, theodorejb, louismaximepiton, and MasihTak reacted with eyes emoji
@ajiho
Copy link

I'm glad to have started considering this and look forward to updates

@richware
Copy link

I have just spent a week converting 5.3.3 to use namespace removing all@imports and using @use/@forward. I have created a 5.3.6 version (on my system) that I would be willing to share for those using the newest version of PhpStorm which advanced dart sass and deprecated@import.

This is a temporary fix until v6 is released and I would be willing to share.

@mdomdoforce-pushed thesass-modules-only branch 2 times, most recently from77b5a29 toa66964bCompareJune 22, 2025 16:26
@ajiho
Copy link

@raajtram

I think@mdo will soon complete the migration in this area, and I am also waiting for it

  1. Replace all@import with@use and@forward, including in our documentation.

Just for this point, it seems like we don't need to release it in v6, right?
Could it be 5.4?

@mdo
Copy link
MemberAuthor

mdo commentedJun 22, 2025

Just for this point, it seems like we don't need to release it in v6, right?
Could it be 5.4?

Not the way we want to do it. It requires changing all our imports, and to allow the new Dart Sass customization methods, it feels like the right approach to refactor some things now.

It was suggested to us that we could double the number of files we have and so some custom forwarding (I think Core UI did this with their Bootstrap fork), but that pollutes the codebase and makes things much less approachable. Making the dependencies and modules super clear feels right at this time.

@julien-deramondjulien-deramondforce-pushed thesass-modules-only branch 3 times, most recently from03b0c2e to3371816CompareJune 26, 2025 15:39
@use"../colors"as*;
@use"../config"as*;
@use"../variables"as*;

// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
Copy link
Member

@julien-deramondjulien-deramondJun 26, 2025•
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Just to remember checking it, maybe we can switch torgba() orcolor-mix() in this file and_colored-links.scss.

mdo reacted with thumbs up emoji
@@ -140,7 +140,7 @@ As part of Bootstrap’s evolving CSS variables approach, alerts now use local C

<DeprecatedIn version="5.3.0" />

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Since it's going to be a major version, we'll need to get rid (and probably document in the migration guide) all the things that were deprecated in v5.

mdo reacted with thumbs up emoji
@mrholek
Copy link
Contributor

Just for this point, it seems like we don't need to release it in v6, right?
Could it be 5.4?

Not the way we want to do it. It requires changing all our imports, and to allow the new Dart Sass customization methods, it feels like the right approach to refactor some things now.

It was suggested to us that we could double the number of files we have and so some custom forwarding (I think Core UI did this with their Bootstrap fork), but that pollutes the codebase and makes things much less approachable. Making the dependencies and modules super clear feels right at this time.

@ajiho, as@mdo mentioned, the only way to maintain backward compatibility is to double the number of files by adding a*.import.scss scss file, which is not an elegant solution.

}

// Shade a color: mix a color with black
////Shade a color: mix a color with black

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Why are extra slashes added to three of these comments?

Copy link
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Just to make sure it's really really commented out. Kidding aside, it's because I commented out large sections of code and then restored sub-sections one at a time. It'll get cleaned up eventually.

theodorejb reacted with thumbs up emoji
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Reviewers

@theodorejbtheodorejbtheodorejb left review comments

@julien-deramondjulien-deramondjulien-deramond left review comments

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

6 participants
@mdo@ajiho@richware@mrholek@theodorejb@julien-deramond
[8]ページ先頭
©2009-2025 Movatter.jp