Fix: Error that could occur when loading compiled CSS.

[jorgefilipecosta]

During the package upgrade #96470 after rebasing the PR we start getting the following error:

[@automattic/verbum-block-editor]: [build:app] ERROR in ./src/editor/editor-style.scss
[@automattic/verbum-block-editor]: [build:app] Module build failed (from ../../node_modules/mini-css-extract-plugin/dist/loader.js):
[@automattic/verbum-block-editor]: [build:app] ModuleBuildError: Module build failed (from ../../node_modules/sass-loader/dist/cjs.js):
[@automattic/verbum-block-editor]: [build:app] SassError: expected "{".
[@automattic/verbum-block-editor]: [build:app]     ╷
[@automattic/verbum-block-editor]: [build:app] 117 │ @media not (prefers-reduced-motion) {
[@automattic/verbum-block-editor]: [build:app]     │            ^
[@automattic/verbum-block-editor]: [build:app]     ╵
[@automattic/verbum-block-editor]: [build:app]   

This is similar to the error in Gutenberg that affected the storybook and was fixed at WordPress/gutenberg#68526.

We were importing some built styles without the CSS prefix, these caused the files to be interpreted as scss which causes the built error.

Proposed Changes

We apply the same change done at WordPress/gutenberg#68526 and added the CSS prefix to the imports causing the error.

Testing Instructions

Verify yarn and yarn start work as expected.
More testing instructions will be included.

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-131004

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-131004&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-131004&env=a8c-for-agencies

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/error-that-occur-when-loading-compiled-CSS on your sandbox.

[oandregal]

I'm not sure how to test the verbum-editor itself, but importing directly the CSS files is a no-risk change (I've built Gutenberg locally and checked the imported CSS files do exist).

This is what I've done for testing:

• created a branch based on this
• squashed merged chore(deps): update wordpress monorepo #96470 into it
• rebased trunk
• yarn && yarn start

The yarn.lock file was created successfully, fixing the issue we ran into.

However, the app runs out of memory and won't start:

Compiling assets... Wait until you see Ready! and then try http://calypso.localhost:3000/ again.
09:51:44.365Z  INFO calypso: request closed (reqId=3491b840-5c1a-46ca-84bc-55b07df73e96, url=/favicon.ico, env=development, userAgent="Chrome 131", path=/favicon.ico, method=GET, status=200, duration=5447.938, httpVersion=1.1, remoteAddr=::1, referrer=http://calypso.localhost:3000/)
    rawUserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
09:51:44.365Z  INFO calypso: long request duration (reqId=3491b840-5c1a-46ca-84bc-55b07df73e96, url=/favicon.ico, env=development, userAgent="Chrome 131", path=/favicon.ico, performanceMarks={}, didTimeout=false, duration=5447.938)

<--- Last few GCs --->

[10452:0x148008000]    81996 ms: Scavenge (reduce) (interleaved) 3464.5 (3745.4) -> 3463.9 (3745.4) MB, pooled: 0 MB, 7.33 / 0.00 ms  (average mu = 0.181, current mu = 0.159) task; 
[10452:0x148008000]    82802 ms: Mark-Compact (reduce) 3464.4 (3745.4) -> 3463.8 (3734.9) MB, pooled: 0 MB, 65.08 / 0.00 ms  (+ 749.7 ms in 0 steps since start of marking, biggest step 0.0 ms, walltime since start of marking 856 ms) (average mu = 0.177, c

<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
----- Native stack trace -----

 1: 0x1043de57c node::OOMErrorHandler(char const*, v8::OOMDetails const&) [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
 2: 0x1045bb768 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, v8::OOMDetails const&) [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
 3: 0x104791480 v8::internal::Heap::stack() [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
 4: 0x1047a5614 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags)::$_7::operator()() const [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
 5: 0x1047a4ecc void heap::base::Stack::SetMarkerAndCallbackImpl<v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags)::$_7>(heap::base::Stack*, void*, void const*) [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
 6: 0x104ed7044 PushAllRegistersAndIterateStack [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
 7: 0x10478f844 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
 8: 0x104790fa4 v8::internal::Heap::ReportExternalMemoryPressure() [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
 9: 0x1045e11ac v8::Isolate::AdjustAmountOfExternalAllocatedMemory(long long) [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
10: 0x10460e9e0 v8::internal::(anonymous namespace)::ConstructBuffer(v8::internal::Isolate*, v8::internal::Handle<v8::internal::JSFunction>, v8::internal::Handle<v8::internal::JSReceiver>, v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>, v8::internal::InitializedFlag) [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
11: 0x10460e1a8 v8::internal::Builtin_ArrayBufferConstructor(int, unsigned long*, v8::internal::Isolate*) [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
12: 0x104fd5a14 Builtins_CEntry_Return1_ArgvOnStack_BuiltinExit [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
13: 0x104f3dfbc Builtins_JSBuiltinsConstructStub [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
14: 0x10507c240 Builtins_CreateTypedArray [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
15: 0x10bcb04a4 
16: 0x104f3ddc8 construct_stub_create_deopt_addr [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
17: 0x10bbc8878 
18: 0x10ce64df4 
19: 0x10babac80 
20: 0x104f40ef0 Builtins_InterpreterEntryTrampoline [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
21: 0x10c675e58 
22: 0x10c6760e4 
23: 0x10cda9f0c 
24: 0x10c26f7bc 
25: 0x104f3ec0c Builtins_JSEntryTrampoline [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
26: 0x104f3e8f4 Builtins_JSEntry [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
27: 0x1046eabd4 v8::internal::(anonymous namespace)::Invoke(v8::internal::Isolate*, v8::internal::(anonymous namespace)::InvokeParams const&) [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
28: 0x1046ea14c v8::internal::Execution::Call(v8::internal::Isolate*, v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>, int, v8::internal::Handle<v8::internal::Object>*) [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
29: 0x1045d18a4 v8::Function::Call(v8::Local<v8::Context>, v8::Local<v8::Value>, int, v8::Local<v8::Value>*) [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
30: 0x1042fdcc0 node::InternalMakeCallback(node::Environment*, v8::Local<v8::Object>, v8::Local<v8::Object>, v8::Local<v8::Function>, int, v8::Local<v8::Value>*, node::async_context, v8::Local<v8::Value>) [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
31: 0x1042fdffc node::InternalMakeCallback(v8::Isolate*, v8::Local<v8::Object>, v8::Local<v8::Function>, int, v8::Local<v8::Value>*, node::async_context, v8::Local<v8::Value>) [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
32: 0x10437bea0 node::Environment::CheckImmediate(uv_check_s*) [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
33: 0x104f26cb4 uv__run_check [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
34: 0x104f206e0 uv_run [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
35: 0x1042fe46c node::SpinEventLoopInternal(node::Environment*) [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
36: 0x10442310c node::NodeMainInstance::Run(node::ExitCode*, node::Environment*) [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
37: 0x104422ea4 node::NodeMainInstance::Run() [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
38: 0x1043a40b0 node::Start(int, char**) [/Users/andre/.nvm/versions/node/v22.9.0/bin/node]
39: 0x18adc8274 start [/usr/lib/dyld]

[jorgefilipecosta]

Closing this PR as the fix was merged as part of the package upgrade PR.