feat(scss): export colors as module for JS consumption #3910

dkoo · 2025-04-11T17:20:12Z

All Submissions:

Have you followed the Newspack Contributing guideline?
Does your code follow the WordPress' coding standards and VIP Go coding standards?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR adds an :export pseudo-class to the colors stylesheet (renamed "module.colors") so it can be us imported into React components. See #3893 (review)

How to test the changes in this Pull Request:

Switch to this branch
Check if you see the colours on the dashboard correctly
Navigate to the post editor, try adding the reader registration block (and you can check corrections if you have them enabled). Does the icon have the Primary 400 colour?

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your changes, as applicable?
Have you successfully ran tests with your changes locally?

dkoo · 2025-04-14T18:06:07Z

@Automattic/newspack-product this PR could use a review by another engineer, since I started it. Thanks!

adekbadek

I see the following warnings when JS is compiled with npm run watch:

WARNING in chunk commons [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/blocks/correction-box/style.scss
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/shared/scss/_colors.module.scss
   - couldn't fulfill desired order of chunk group(s) blocks
   - while fulfilling desired order of chunk group(s) correction-box-block

WARNING in chunk commons [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/shared/scss/_colors.module.scss
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/blocks/correction-item/style.scss
   - couldn't fulfill desired order of chunk group(s) correction-item-block
   - while fulfilling desired order of chunk group(s) blocks

(I don't see these on trunk)

That being said, works as expected according to testing instructions.

dkoo · 2025-04-17T18:08:32Z

I think 7abe393 should fix this without causing any issues. The style.scss import in src/blocks/correction-box/edit.jsx is redundant because the same SCSS module is imported in src/blocks/correction-box/index.js, which itself imports edit.jsx.

github-actions · 2025-04-22T22:28:33Z

Hey @dkoo, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️

# [6.5.0-alpha.1](v6.4.4...v6.5.0-alpha.1) (2025-04-23) ### Bug Fixes * add white background to Newspack admin screens ([#3909](#3909)) ([4c8409e](4c8409e)) * allow guest contributors to have empty archives ([#3902](#3902)) ([af8bed9](af8bed9)) * **analytics:** migrate back-end GA4 events to front-end ([#3895](#3895)) ([7e18628](7e18628)) * **auth-form:** check user before is_user_reader() call ([#3944](#3944)) ([1cbb760](1cbb760)) * avoid warning for network event ([#3942](#3942)) ([60d0aa3](60d0aa3)) * **bylines:** avoid rerendering of editable area ([#3896](#3896)) ([9fdf659](9fdf659)) * **bylines:** custom edited state for modal ([#3919](#3919)) ([2a1a800](2a1a800)) * **bylines:** get CAP data from the plugin's store ([#3906](#3906)) ([0745113](0745113)) * **corrections:** Limit CPT to posts only ([#3927](#3927)) ([1d49c39](1d49c39)) * **corrections:** Use Corrections Archive template by default ([#3929](#3929)) ([c4c1925](c4c1925)) * **email-change:** ensure success and error messages persist after redirect ([#3913](#3913)) ([caf82a5](caf82a5)) * **email-change:** improve messaging for in-progress or expired change requests ([#3886](#3886)) ([02d2ea0](02d2ea0)) * **email-change:** typo in variable name ([#3941](#3941)) ([941dc21](941dc21)) * **google-login:** handle google oauth disabled state in the editor ([#3946](#3946)) ([0f9f7c6](0f9f7c6)) * hide campaigns menu when the Newspack Campaigns plugin is not activated ([#3922](#3922)) ([adcc21f](adcc21f)) * make front end not dependent on coauthors plus ([#3905](#3905)) ([dc96e5b](dc96e5b)) * **otp-input:** enhance OTP input handling for clipboard ([#3898](#3898)) ([a56328b](a56328b)) * reinstate the Add New Newsletter link in the admin menu ([#3926](#3926)) ([1c8c7d7](1c8c7d7)) * remove extra space above empty help text ([#3904](#3904)) ([6a4fe4f](6a4fe4f)) * remove import and route for Suppression ([#3894](#3894)) ([a2034e7](a2034e7)) * **setup-wizard:** prevent Yoast redirect ([#3940](#3940)) ([3461b5f](3461b5f)) ### Features * **auth:** OTP autocomplete integration ([#3888](#3888)) ([5a1d7a8](5a1d7a8)) * **bylines:** get post byline authors ([#3911](#3911)) ([17942a2](17942a2)) * **bylines:** useAuthorTokens() hook with user entity validation ([#3907](#3907)) ([3d1feee](3d1feee)) * **email-change:** allow old email to cancel email change only, not confirm ([#3912](#3912)) ([92413e3](92413e3)) * **ga4:** np_newsletter_subscribed event upon front-end signup ([#3938](#3938)) ([2295277](2295277)) * **ras-newsletter:** Newsletters list progressive disclosure ([#3887](#3887)) ([53f4eed](53f4eed)) * **reader-auth:** send WP login reminder email to non-reader accounts ([#3796](#3796)) ([d1af25e](d1af25e)), closes [#3823](#3823) * **scss:** export colors as module for JS consumption ([#3910](#3910)) ([81da8f0](81da8f0)) * **segments:** add filter for device segment ([#3880](#3880)) ([d465726](d465726)) * update colors and add all design system variables ([#3882](#3882)) ([6ee8e30](6ee8e30))

matticbot · 2025-04-23T17:55:51Z

🎉 This PR is included in version 6.5.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [6.6.0-alpha.1](v6.5.0...v6.6.0-alpha.1) (2025-05-08) ### Bug Fixes * add white background to Newspack admin screens ([#3909](#3909)) ([4c8409e](4c8409e)) * allow guest contributors to have empty archives ([#3902](#3902)) ([af8bed9](af8bed9)) * **analytics:** migrate back-end GA4 events to front-end ([#3895](#3895)) ([7e18628](7e18628)) * **auth-form:** check user before is_user_reader() call ([#3944](#3944)) ([1cbb760](1cbb760)) * avoid warning for network event ([#3942](#3942)) ([60d0aa3](60d0aa3)) * **bylines:** avoid rerendering of editable area ([#3896](#3896)) ([9fdf659](9fdf659)) * **bylines:** custom edited state for modal ([#3919](#3919)) ([2a1a800](2a1a800)) * **bylines:** get CAP data from the plugin's store ([#3906](#3906)) ([0745113](0745113)) * **corrections:** Limit CPT to posts only ([#3927](#3927)) ([1d49c39](1d49c39)) * **corrections:** Use Corrections Archive template by default ([#3929](#3929)) ([c4c1925](c4c1925)) * **email-change:** ensure success and error messages persist after redirect ([#3913](#3913)) ([caf82a5](caf82a5)) * **email-change:** improve messaging for in-progress or expired change requests ([#3886](#3886)) ([02d2ea0](02d2ea0)) * **email-change:** typo in variable name ([#3941](#3941)) ([941dc21](941dc21)) * **ga4:** ensure gate_post_id and newspack_popup_id are passed to activities ([#3956](#3956)) ([fadaa4d](fadaa4d)) * **google-login:** handle google oauth disabled state in the editor ([#3946](#3946)) ([0f9f7c6](0f9f7c6)) * hide campaigns menu when the Newspack Campaigns plugin is not activated ([#3922](#3922)) ([adcc21f](adcc21f)) * make front end not dependent on coauthors plus ([#3905](#3905)) ([dc96e5b](dc96e5b)) * **newsletters-wizard:** remove advertisers menu item ([#3948](#3948)) ([2fddbd6](2fddbd6)) * **otp-input:** enhance OTP input handling for clipboard ([#3898](#3898)) ([a56328b](a56328b)) * reinstate the Add New Newsletter link in the admin menu ([#3926](#3926)) ([1c8c7d7](1c8c7d7)) * remove extra space above empty help text ([#3904](#3904)) ([6a4fe4f](6a4fe4f)) * remove import and route for Suppression ([#3894](#3894)) ([a2034e7](a2034e7)) * **setup-wizard:** prevent Yoast redirect ([#3940](#3940)) ([3461b5f](3461b5f)) ### Features * **auth:** OTP autocomplete integration ([#3888](#3888)) ([5a1d7a8](5a1d7a8)) * **bylines:** get post byline authors ([#3911](#3911)) ([17942a2](17942a2)) * **bylines:** useAuthorTokens() hook with user entity validation ([#3907](#3907)) ([3d1feee](3d1feee)) * **email-change:** allow old email to cancel email change only, not confirm ([#3912](#3912)) ([92413e3](92413e3)) * **ga4:** np_newsletter_subscribed event upon front-end signup ([#3938](#3938)) ([2295277](2295277)) * **ras-newsletter:** Newsletters list progressive disclosure ([#3887](#3887)) ([53f4eed](53f4eed)) * **reader-auth:** send WP login reminder email to non-reader accounts ([#3796](#3796)) ([d1af25e](d1af25e)), closes [#3823](#3823) * **scss:** export colors as module for JS consumption ([#3910](#3910)) ([81da8f0](81da8f0)) * **segments:** add filter for device segment ([#3880](#3880)) ([d465726](d465726)) * update colors and add all design system variables ([#3882](#3882)) ([6ee8e30](6ee8e30))

matticbot · 2025-05-08T17:11:25Z

🎉 This PR is included in version 6.6.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [6.6.0](v6.5.1...v6.6.0) (2025-05-14) ### Bug Fixes * add white background to Newspack admin screens ([#3909](#3909)) ([4c8409e](4c8409e)) * allow guest contributors to have empty archives ([#3902](#3902)) ([af8bed9](af8bed9)) * **analytics:** migrate back-end GA4 events to front-end ([#3895](#3895)) ([7e18628](7e18628)) * **auth-form:** check user before is_user_reader() call ([#3944](#3944)) ([1cbb760](1cbb760)) * avoid warning for network event ([#3942](#3942)) ([60d0aa3](60d0aa3)) * **bylines:** avoid rerendering of editable area ([#3896](#3896)) ([9fdf659](9fdf659)) * **bylines:** custom edited state for modal ([#3919](#3919)) ([2a1a800](2a1a800)) * **bylines:** get CAP data from the plugin's store ([#3906](#3906)) ([0745113](0745113)) * **corrections:** Limit CPT to posts only ([#3927](#3927)) ([1d49c39](1d49c39)) * **corrections:** Use Corrections Archive template by default ([#3929](#3929)) ([c4c1925](c4c1925)) * **email-change:** ensure success and error messages persist after redirect ([#3913](#3913)) ([caf82a5](caf82a5)) * **email-change:** improve messaging for in-progress or expired change requests ([#3886](#3886)) ([02d2ea0](02d2ea0)) * **email-change:** typo in variable name ([#3941](#3941)) ([941dc21](941dc21)) * **ga4:** ensure gate_post_id and newspack_popup_id are passed to activities ([#3956](#3956)) ([fadaa4d](fadaa4d)) * **google-login:** handle google oauth disabled state in the editor ([#3946](#3946)) ([0f9f7c6](0f9f7c6)) * hide campaigns menu when the Newspack Campaigns plugin is not activated ([#3922](#3922)) ([adcc21f](adcc21f)) * make front end not dependent on coauthors plus ([#3905](#3905)) ([dc96e5b](dc96e5b)) * **newsletters-wizard:** remove advertisers menu item ([#3948](#3948)) ([2fddbd6](2fddbd6)) * **otp-input:** enhance OTP input handling for clipboard ([#3898](#3898)) ([a56328b](a56328b)) * reinstate the Add New Newsletter link in the admin menu ([#3926](#3926)) ([1c8c7d7](1c8c7d7)) * remove extra space above empty help text ([#3904](#3904)) ([6a4fe4f](6a4fe4f)) * remove import and route for Suppression ([#3894](#3894)) ([a2034e7](a2034e7)) * **setup-wizard:** prevent Yoast redirect ([#3940](#3940)) ([3461b5f](3461b5f)) ### Features * **auth:** OTP autocomplete integration ([#3888](#3888)) ([5a1d7a8](5a1d7a8)) * **bylines:** get post byline authors ([#3911](#3911)) ([17942a2](17942a2)) * **bylines:** useAuthorTokens() hook with user entity validation ([#3907](#3907)) ([3d1feee](3d1feee)) * **email-change:** allow old email to cancel email change only, not confirm ([#3912](#3912)) ([92413e3](92413e3)) * **email-change:** remove env constant requirement ([#3943](#3943)) ([f04e58f](f04e58f)) * **ga4:** np_newsletter_subscribed event upon front-end signup ([#3938](#3938)) ([2295277](2295277)) * **ras-newsletter:** Newsletters list progressive disclosure ([#3887](#3887)) ([53f4eed](53f4eed)) * **reader-auth:** send WP login reminder email to non-reader accounts ([#3796](#3796)) ([d1af25e](d1af25e)), closes [#3823](#3823) * **scss:** export colors as module for JS consumption ([#3910](#3910)) ([81da8f0](81da8f0)) * **segments:** add filter for device segment ([#3880](#3880)) ([d465726](d465726)) * update colors and add all design system variables ([#3882](#3882)) ([6ee8e30](6ee8e30))

matticbot · 2025-05-14T17:29:45Z

🎉 This PR is included in version 6.6.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

dkoo mentioned this pull request Apr 11, 2025

feat(colors): move color variables to JSON and auto-generate SCSS file #3893

Closed

6 tasks

feat(scss): export colors as module for JS consumption

a09948f

thomasguillot force-pushed the feat/colors-module branch from 665ffc8 to a09948f Compare April 14, 2025 09:13

thomasguillot added the [Status] Needs Review The issue or pull request needs to be reviewed label Apr 14, 2025

thomasguillot marked this pull request as ready for review April 14, 2025 09:18

thomasguillot requested a review from a team as a code owner April 14, 2025 09:18

dkoo self-assigned this Apr 14, 2025

adekbadek requested changes Apr 15, 2025

View reviewed changes

fix: mini-css-extract-plugin conflicting order error

7abe393

dkoo requested a review from adekbadek April 17, 2025 18:08

adekbadek approved these changes Apr 22, 2025

View reviewed changes

github-actions bot added [Status] Approved The pull request has been reviewed and is ready to merge and removed [Status] Needs Review The issue or pull request needs to be reviewed labels Apr 22, 2025

dkoo merged commit 81da8f0 into trunk Apr 22, 2025
8 checks passed

dkoo deleted the feat/colors-module branch April 22, 2025 22:28

github-actions bot added the needs-changelog label Apr 22, 2025

matticbot added the released on @alpha label Apr 23, 2025

leogermani removed the needs-changelog label Apr 25, 2025

matticbot added the released label May 14, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(scss): export colors as module for JS consumption #3910

feat(scss): export colors as module for JS consumption #3910

Uh oh!

dkoo commented Apr 11, 2025 •

edited by thomasguillot

Loading

Uh oh!

dkoo commented Apr 14, 2025

Uh oh!

adekbadek left a comment

Uh oh!

dkoo commented Apr 17, 2025

Uh oh!

Uh oh!

github-actions bot commented Apr 22, 2025

Uh oh!

matticbot commented Apr 23, 2025

Uh oh!

matticbot commented May 8, 2025

Uh oh!

matticbot commented May 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

feat(scss): export colors as module for JS consumption #3910

feat(scss): export colors as module for JS consumption #3910

Uh oh!

Conversation

dkoo commented Apr 11, 2025 • edited by thomasguillot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

Uh oh!

dkoo commented Apr 14, 2025

Uh oh!

adekbadek left a comment

Choose a reason for hiding this comment

Uh oh!

dkoo commented Apr 17, 2025

Uh oh!

Uh oh!

github-actions bot commented Apr 22, 2025

Uh oh!

matticbot commented Apr 23, 2025

Uh oh!

matticbot commented May 8, 2025

Uh oh!

matticbot commented May 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

dkoo commented Apr 11, 2025 •

edited by thomasguillot

Loading