Skip to content

Tooling: Fix base-styles rebuilds during npm run dev workflow #69903

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.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

Tooling: Fix base-styles rebuilds during npm run dev workflow #69903

wants to merge 1 commit into from

Conversation

im3dabasia
Copy link
Contributor

What?

Closes #55568
Related comment: #55568 (comment)

This PR adds functionality to automatically rebuild SCSS files in base-styles/. when base-styles partial files (like _colors.scss, _mixins.scss) are modified during npm run dev.

Why?

  • When working with SCSS partials in the base-styles package, changes to these files weren't automatically triggering rebuilds of the main files that import them (like admin-schemes.scss).
  • This meant developers had to manually rebuild or restart the dev server to see their changes, creating friction in the development workflow.

How?

Modified the isSourceFile function as suggested in #55568 (comment). In a special case scenario, I am manually handling the base-styles.scss files, which are located outside the src/ folder, to ensure they are included in the build."

Testing Instructions

  1. Run npm run dev to start the development server
  2. Open a base-styles partial file (e.g., packages/base-styles/_mixins.scss)
  3. Make a simple change (e.g., modify a color value)
  4. Save the file
  5. Check that your changes are reflected in the compiled output without needing to restart the dev server. The files to check are ( packages/base-styles/build-style/admin-schemes.css )

Screencast

Before

Changes were not watched

After

Screen.Recording.2025-04-15.at.2.03.05.PM.mov

@github-actions GitHub Actions
Copy link

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: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: kevin940726 <kevin940726@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: gziolo <gziolo@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>

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

t-hamano
t-hamano reviewed Apr 17, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

Thanks for the PR!

I think that just adding the special logic inside the isSourceFile() function isn't enough.

For example, update the value of an SCSS variable, such as $gray-900. The CSS file will not be built.

This is because the base-styles package isn't a module package, which means this conditional statement always returns false:

gutenberg/bin/packages/watch.js

Lines 108 to 110 in adc77d7

return isSourceFile( filename ) && isModulePackage( filename )
? true
: skip;

@t-hamano t-hamano added the [Type] Build Tooling Issues or PRs related to build tooling label Apr 17, 2025
@t-hamano t-hamano added the [Package] Base styles /packages/base-styles label Jun 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@t-hamano t-hamano t-hamano left review comments

@ntwb ntwb Awaiting requested review from ntwb ntwb is a code owner

@nerrad nerrad Awaiting requested review from nerrad nerrad is a code owner

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

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

Assignees
No one assigned
Labels
[Package] Base styles /packages/base-styles [Type] Build Tooling Issues or PRs related to build tooling
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Tooling: npm run dev doesn't watch for changes to the base-styles package
2 participants
@im3dabasia @t-hamano