Commands: Update to modern Sass module system by m1r0 · Pull Request #70252 · WordPress/gutenberg

m1r0 · 2025-05-28T15:57:08Z

What?

Relates to #37044 and Automattic/wp-calypso#103652

Why?

The PR makes the Commands package compatible with the new Sass module system (https://sass-lang.com/blog/the-module-system-is-launched/).

This is a blocker for updating the @wordpress packages in the wp-calypso repo.

How?

I used the npx sass-migrator module division --verbose --migrate-deps packages/commands/src/components/style.scss command to migrate the code.

Testing Instructions

Build the Commands package and ensure there are no errors. There should be no visual changes.

github-actions · 2025-05-28T15:57:20Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: m1r0 <m1r0@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: aduth <aduth@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

github-actions · 2025-05-28T15:57:42Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @m1r0! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

t-hamano · 2025-05-28T17:01:46Z

Thanks for the PR!

Just to be sure, in order to update the @wordpress packages in wp-calypso project, do we need to update all @wordpress packages to the new Sass module system?

The @wordpress/commands package is very simple, so it might be easy to migrate to the new module system, but other packages are not. We'll have to update huge stylesheets. We might want to figure out how to split the tasks and what to pay attention to in the migration, and then invite contributors.

Personally, I'd like to see the whole Gutenberg project migrate to Dart Sass in the future. That way, we can update the old Sass version to the latest version.

cc @aduth @mirka @youknowriad

github-actions · 2025-05-28T17:02:32Z

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin.
Labels found: Gutenberg Plugin, [Type] Code Quality, First-time Contributor, [Package] Commands.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

m1r0 · 2025-05-29T12:11:32Z

Thanks for the quick response @t-hamano!

Just to be sure, in order to update the @WordPress packages in wp-calypso project, do we need to update all @WordPress packages to the new Sass module system?

I'm getting an error from this package only, so I'm guessing it's the only one that needs an update. 🙂🤞

t-hamano

so I'm guessing it's the only one that needs an update.

I see, it's only this one place, so there's no need to update other packages. As for other packages, it seems that they mainly refer to pre-built CSS (Example).

t-hamano · 2025-05-29T14:54:18Z

packages/commands/src/components/style.scss

+@use "../../../base-styles/mixins";
+@use "../../../base-styles/variables";


I'm not sure whether it's ok to reference SCSS files from other packages or not.

Should we add @wordpress/base-styles as a dependency of the @wordpress/commands package? Otherwise, consumers who only use the @wordpress/commands package and do not have the @wordpress/base-styles package installed may encounter a fatal error.

Any feedback would be appreciated.

Good question. 🤔 Waiting for feedback as well.

Adding a dependency makes sense to me.

At least as a devDependency since in prod it's bundled in the CSS file.

@m1r0 Can you add the dev dependencies [here](https://github.com/WordPress/gutenberg/blob/trunk/packages/commands/package.json)?

I've tried adding it as a dev dependency, but the build started failing with Error: Can't find stylesheet to import. Any ideas? 🤔

I've tried using a version instead of a local path to include the package, but the result was the same.

Diff:

diff --git a/package-lock.json b/package-lock.json index 950dd68787..b699f630ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -50179,6 +50179,9 @@ "clsx": "^2.1.1", "cmdk": "^1.0.0" }, + "devDependencies": { + "@wordpress/base-styles": "file:../base-styles" + }, "engines": { "node": ">=18.12.0", "npm": ">=8.19.2" diff --git a/packages/commands/package.json b/packages/commands/package.json index 4fab2eb874..80cb8bb528 100644 --- a/packages/commands/package.json +++ b/packages/commands/package.json @@ -39,6 +39,9 @@ "clsx": "^2.1.1", "cmdk": "^1.0.0" }, + "devDependencies": { + "@wordpress/base-styles": "file:../base-styles" + }, "peerDependencies": { "react": "^18.0.0", "react-dom": "^18.0.0" diff --git a/packages/commands/src/components/style.scss b/packages/commands/src/components/style.scss index b57b12baa0..11b96141e8 100644 --- a/packages/commands/src/components/style.scss +++ b/packages/commands/src/components/style.scss @@ -1,6 +1,6 @@ -@use "../../../base-styles/colors"; -@use "../../../base-styles/mixins"; -@use "../../../base-styles/variables"; +@use "@wordpress/base-styles/colors"; +@use "@wordpress/base-styles/mixins"; +@use "@wordpress/base-styles/variables"; // dirty hack to clean up modal .commands-command-menu {

@use "@wordpress/base-styles/colors"; @use "@wordpress/base-styles/mixins"; @use "@wordpress/base-styles/variables";

I don't think this syntax works with the Sass build process in Gutgenberg, so I think it's fine to leave the path as a relative path.

Does the Sass compilation include node_modules as a lookup path, or should it?

Alternatively, in the spirit of modern Sass, we could look at incorporating NodePackageImporter and exposing entrypoints for Sass, so that it can be used directly from the package like this.

Does the Sass compilation include node_modules as a lookup path, or should it?

I thought this part would handle the lookup paths nicely, but apparently not:

gutenberg/bin/packages/build-worker.js

Line 125 in a5e3592

includePaths: [ path.join( PACKAGES_DIR, 'base-styles' ) ],

After some experimentation, I found that the following approach works well:

Diff

diff --git a/bin/packages/build-worker.js b/bin/packages/build-worker.js index 06e30efc6c..db6c7584a0 100644 --- a/bin/packages/build-worker.js +++ b/bin/packages/build-worker.js @@ -122,7 +122,10 @@ async function buildCSS( file ) { const builtSass = await renderSass( { file, - includePaths: [ path.join( PACKAGES_DIR, 'base-styles' ) ], + includePaths: [ + path.join( PACKAGES_DIR, 'base-styles' ), + path.join( __dirname, '../../node_modules' ), + ], data: ''.concat( '@use "sass:math";', importLists, contents ), } ); diff --git a/packages/commands/src/components/style.scss b/packages/commands/src/components/style.scss index b57b12baa0..11b96141e8 100644 --- a/packages/commands/src/components/style.scss +++ b/packages/commands/src/components/style.scss @@ -1,6 +1,6 @@ -@use "../../../base-styles/colors"; -@use "../../../base-styles/mixins"; -@use "../../../base-styles/variables"; +@use "@wordpress/base-styles/colors"; +@use "@wordpress/base-styles/mixins"; +@use "@wordpress/base-styles/variables"; // dirty hack to clean up modal .commands-command-menu {

You can find a discussion about the includePath field here: #17883 (comment)

It seems like this field was added for the playground, but I don't understand why it doesn't work in the Gutenberg build 🤔

t-hamano · 2025-06-05T00:18:09Z

@m1r0 @mirka I saw that you solved the issue by importing built CSS (Automattic/wp-calypso#103652 (comment)).

I want to confirm if we should move forward with this PR now.

m1r0 · 2025-06-05T09:10:59Z

@t-hamano I can confirm that this is no longer a blocker for Calypso. Feel free to close/deprioritize this PR.

t-hamano · 2025-06-05T11:47:21Z

It may be a good idea to close this PR for now.

In the future, if plans arise to migrate the entire Gutenberg to a modern Sass system, it would be good to create a new issue based on the discussion held in this PR.

Commands: Update to modern Sass module system

f9774fb

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label May 28, 2025

t-hamano added Gutenberg Plugin Issues or PRs related to Gutenberg Plugin management related efforts [Type] Code Quality Issues or PRs that relate to code quality [Package] Commands /packages/commands labels May 28, 2025

m1r0 mentioned this pull request May 29, 2025

chore(deps): update wordpress monorepo Automattic/wp-calypso#103652

Closed

t-hamano approved these changes May 29, 2025

View reviewed changes

Add missing import for colors

8100914

t-hamano closed this Jun 5, 2025

		@use "../../../base-styles/mixins";
		@use "../../../base-styles/variables";

Conversation

m1r0 commented May 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Uh oh!

github-actions bot commented May 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented May 28, 2025

Uh oh!

t-hamano commented May 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented May 28, 2025

Uh oh!

m1r0 commented May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

t-hamano May 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

m1r0 May 29, 2025

Choose a reason for hiding this comment

Uh oh!

youknowriad May 29, 2025

Choose a reason for hiding this comment

Uh oh!

youknowriad May 29, 2025

Choose a reason for hiding this comment

Uh oh!

t-hamano May 31, 2025

Choose a reason for hiding this comment

Uh oh!

m1r0 Jun 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

t-hamano Jun 3, 2025

Choose a reason for hiding this comment

Uh oh!

aduth Jun 3, 2025

Choose a reason for hiding this comment

Uh oh!

t-hamano Jun 3, 2025

Choose a reason for hiding this comment

Uh oh!

t-hamano commented Jun 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

m1r0 commented Jun 5, 2025

Uh oh!

t-hamano commented Jun 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

m1r0 commented May 28, 2025 •

edited

Loading

github-actions bot commented May 28, 2025 •

edited

Loading

t-hamano commented May 28, 2025 •

edited

Loading

m1r0 commented May 29, 2025 •

edited

Loading

t-hamano May 29, 2025 •

edited

Loading

m1r0 Jun 2, 2025 •

edited

Loading

t-hamano commented Jun 5, 2025 •

edited

Loading