Packages: Mark build-styles as side-effectful

[sirreal]

Description

In Automattic/wp-calypso#38554 we observed some styling regressions when importing component styles from @wordpress/components/build-styles. This appears to be a regression introduced in #18911. Styles are side-effectful, and should be declared as such. Packages that include build-styles intended for use from the published package must be marked as such. The webpack docs on tree shaking mention this:

Note that any imported file is subject to tree shaking. This means if you use something like css-loader in your project and import a CSS file, it needs to be added to the side effect list so it will not be unintentionally dropped in production mode:

source

This PR marks build-style/** as having side-effects for packages that were observed to produce a build-style directory and were marked sideEffects: false. An alternative would be to add *.css and *.scss to the list, however.

How has this been tested?

When manually applying the change in this PR to the installed package where the regression was observed, the issue is fixed.

Types of changes

Bug fix (non-breaking change which fixes an issue)

• Fixes a regression published in @wordpress/[email protected] that would prevent some build tools from including styles provided in the packages build-styles directory.

• Fixes a regression published in @wordpress/[email protected] that would prevent some build tools from including styles provided in the packages build-styles directory.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR. .

[ockham]

Here's some concrete testing steps:

• Clone Calypso, git clone [email protected]:Automattic/wp-calypso.git
• Check out the branch for fix(deps): update wordpress monorepo Automattic/wp-calypso#38554, git checkout renovate/wordpress-monorepo
• Apply the following diff:

diff --git a/webpack.config.js b/webpack.config.js
index e4e2ba6505..144b093349 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -150,7 +150,7 @@ const webpackConfig = {
                'entry-login': [ path.join( __dirname, 'client', 'landing', 'login' ) ],
                'entry-gutenboarding': [ path.join( __dirname, 'client', 'landing', 'gutenboarding' ) ],
        },
-       mode: isDevelopment ? 'development' : 'production',
+       mode: 'production',
        devtool: process.env.SOURCEMAP || ( isDevelopment ? '#eval' : false ),
        output: {
                path: path.join( __dirname, 'public', extraPath ),

• npm ci && npm start
• Access calypso.localhost:3000/gutenboarding
• Fill in the two questions ("My site is about", "It's called")
• Look at the domain picker in the header. Its styling is broken (see screenshots below):
  • The dropdown caret (arrow) is misaligned
  • Now click on the domain picker to expand it: its styling is also broken (transparent background)
  • To see what it should look like, check https://wpcalypso.wordpress.com/gutenboarding

• Stop Calypso (Ctr+C in the console where it's running), and open its node_modules/ directory. Modify the package.json files in both @wordpress/block-library and @wordpress/components according to this PR. Restart Calypso (npm start).
• Access calypso.localhost:3000/gutenboarding again, and verify that the header's and domain selector's styling is fixed 🎉

[ockham]

Confirming that this fixes the issue we saw by following these instructions: #19535 (comment)

[gziolo]

Only those 2 packages are affected?

[sirreal]

Only those 2 packages are affected?

I compiled the packages (npm run build:pacakges I believe), then I looked for pacakges that included a build-style directory. Then I checked whether these packages had sideEffects: false and arrived at these two packages. Based on this I believe these are the affected packages.