fix: emit block-library-style.css for CTA block frontend styles (#1198)

[danieliser]

Summary

Closes #1198.

Built and confirmed the bug on 1.22.0:

# Before (1.22.0 tag)
dist/packages/block-library.css          # 8.6KB — editor + frontend styles merged, wrong handle
dist/packages/block-library-style.css    # MISSING — 404 for popup-maker-block-library-style

The release registers/enqueues dist/packages/block-library-style.css, but webpack never emitted that file.

Root cause: LimitChunkCountPlugin (maxChunks: 1) prevented splitChunks from separating frontend style.scss into its own CSS artifact. The old MiniCssExtractPlugin filename logic also checked chunk.name.includes('style'), which never matched the unnamed style-split chunks.

Generation fix (already on develop via b920b65):

• Remove LimitChunkCountPlugin
• Add explicit splitChunks.cacheGroups.style for style.scss imports
• Fix MiniCssExtractPlugin / RtlCssPlugin to emit {runtime}-style.css for unnamed style chunks

Verified after fix:

dist/packages/block-library.css          # 1.6KB — editor styles only
dist/packages/block-library-style.css    # 7.0KB — frontend CTA block styles
dist/packages/block-library-style-rtl.css

This PR adds: a root packages/block-library/src/style.scss entry point (per issue recommendation) imported from src/index.ts, consolidating frontend block styles so webpack reliably picks them up for the -style.css split.

Test plan

• NODE_ENV=production npm run build on branch produces dist/packages/block-library-style.css
• block-library-style.css contains frontend CTA selectors (e.g. .wp-block-popup-maker-cta-button__link)
• block-library.css contains editor-only styles (~1.6KB)
• Frontend page with CTA button block loads popup-maker-block-library-style without 404

Summary by CodeRabbit

• Chores
  • Reorganized block library style management and configuration. Updated stylesheet imports and bundling for block components, including CTA button blocks, to ensure styles are properly loaded and applied. These changes improve the organization and consistency of component styling throughout the block library while maintaining full functionality.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: b1e2c311-b051-445e-8a70-44458aa70eb0

📥 Commits

Reviewing files that changed from the base of the PR and between 8000a9a and 7df2996.

📒 Files selected for processing (4)

• packages/block-library/src/index.ts
• packages/block-library/src/lib/cta-button/index.ts
• packages/block-library/src/lib/cta-buttons/index.ts
• packages/block-library/src/style.scss

💤 Files with no reviewable changes (2)

• packages/block-library/src/lib/cta-buttons/index.ts
• packages/block-library/src/lib/cta-button/index.ts

✅ Files skipped from review due to trivial changes (2)

• packages/block-library/src/index.ts
• packages/block-library/src/style.scss

---

Walkthrough

The PR creates a root-level style.scss SCSS entrypoint at packages/block-library/src/style.scss that aggregates styles from nested block libraries, and imports it from the package's main index.ts entry point. Block-level modules switch their imports from style.scss to editor.scss to separate editor-only from frontend styles.

Changes

Block Library Root-Level Style Entrypoint

Layer / File(s)	Summary
Root-level style entrypoint and block-level stylesheet reorganization packages/block-library/src/style.scss, packages/block-library/src/index.ts, packages/block-library/src/lib/cta-button/index.ts, packages/block-library/src/lib/cta-buttons/index.ts	New root-level style.scss imports nested block styles and is loaded from the package entrypoint, triggering webpack's style chunk extraction. Block-level modules are updated to import editor.scss instead of style.scss to separate editor styling from frontend styles.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title clearly summarizes the main change: emitting block-library-style.css for CTA block frontend styles.
Linked Issues check	✅ Passed	The PR addresses all coding objectives from #1198: created root-level style.scss to enable webpack splitChunks extraction of frontend block styles into separate block-library-style.css artifact.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the missing block-library-style.css issue: importing root-level style.scss in index.ts and switching nested imports from style.scss to editor.scss.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-1198-block-library-style

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}