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: himanshupathak95 <abcd95@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

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

Hey @t-hamano, Please review these changes whenever you get a moment and let me know if the changes are as expected.

Thanks 😇

These changes broke Storybook integration on CI:

Can someone look into it?

These changes broke Storybook integration on CI:

Thank you @gziolo

I debugged and found that the issue arises from this place. All other file changes are not causing any issues, but this one is. The preprocessor is converting the SCSS to the following, as shown in the screenshot above. It was incorrectly compiling the not and the &.

The previous compiled code with wrong parenthisis

[1] 2575 │ @media (min-width: 782px) and (not (prefers-reduced-motion)) {

Changing the code to the following solves the issue: Reference

@media (prefers-reduced-motion: no-preference) {
	transition: border-radius, box-shadow 0.4s;
}

New compiled code:

@media (min-width: 782px) and (prefers-reduced-motion: no-preference) {
  .edit-site-layout__canvas .edit-site-resizable-frame__inner-content {
    transition: border-radius, box-shadow 0.4s;
  }
}

@im3dabasia Thanks for looking into it! I think we can go with that hotfix for now.

Though, we'll want some additional measures to prevent this from happening again:

• I will prepare a new CI check to ensure that Storybook-breaking PRs don't get merged into trunk (Check Storybook build on CI for PRs #68466).
• The compiled CSS @media (min-width: 782px) and (not (prefers-reduced-motion)) seems to be valid, according to sources like the W3C CSS Validator and MDN. Did you figure out what module is emitting the error? It could be that the module is outdated, or has a bug.

cc @WordPress/gutenberg-components for awareness.

Thank you for solving the problem with Storybook CI.

I was looking into what the cause of this problem was.

In Storybook, we import the CSS file built here. I'm not sure, but I'm guessing it might be because the CSS files are imported as SCSS files.

For example, I noticed that I could build the Storybook successfully by making the following changes:

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
index 8d44015d529..caf7dd78da4 100644
--- a/packages/edit-site/src/components/layout/style.scss
+++ b/packages/edit-site/src/components/layout/style.scss
@@ -118,7 +118,7 @@
                        // This ensure the radius work properly.
                        overflow: hidden;
 
-                       @media (prefers-reduced-motion: no-preference) {
+                       @media not (prefers-reduced-motion) {
                                transition: border-radius, box-shadow 0.4s;
                        }
 
diff --git a/storybook/package-styles/edit-site-ltr.lazy.scss b/storybook/package-styles/edit-site-ltr.lazy.scss
index c704fe9d953..c650798e554 100644
--- a/storybook/package-styles/edit-site-ltr.lazy.scss
+++ b/storybook/package-styles/edit-site-ltr.lazy.scss
@@ -1 +1 @@
-@import "../../packages/edit-site/build-style/style";
+@import "../../packages/edit-site/build-style/style.css";
diff --git a/storybook/package-styles/edit-site-rtl.lazy.scss b/storybook/package-styles/edit-site-rtl.lazy.scss
index ae9ac27d6b5..a1f44ec2f7c 100644
--- a/storybook/package-styles/edit-site-rtl.lazy.scss
+++ b/storybook/package-styles/edit-site-rtl.lazy.scss
@@ -1 +1 @@
-@import "../../packages/edit-site/build-style/style-rtl";
+@import "../../packages/edit-site/build-style/style-rtl.css";

$ npm run storybook:dev

Maybe we need to explicitly specify the extension in the import statement to avoid recompiling the file? Another possible cause might be a conflict between Sass-specific syntax and CSS Media Queries Level 4：

Sass: Breaking Change: Media Queries Level 4: https://sass-lang.com/documentation/breaking-changes/media-logic/

In Storybook, we import the CSS file built here. I'm not sure, but I'm guessing it might be because the CSS files are imported as SCSS files.

That makes sense! Might be a good fix.