Storybook SCSS ?inline dual-mode loading — Build Verification

2026-02-23-storybook-scss-inline.md

Storybook SCSS ?inline dual-mode loading — Build Verification

2026-02-23T19:04:07Z by Showboat 0.6.1

30 SCSS imports now use ?inline suffix. webpack.config.js uses shared loader module. Verifying production build still works.

npm run typecheck --prefix packages/client 2>&1

> @qs/cds-cpq-client@0.1.0 typecheck
> tsc -p tsconfig.spec.json --noEmit

cd packages/client && npm run build 2>&1 | tail -40

[SvgIconJsonPlugin] Processed: chart-column-big
[SvgIconJsonPlugin] Processed: calendar
[SvgIconJsonPlugin] Processed: calendar-days
[SvgIconJsonPlugin] Processed: calculator
[SvgIconJsonPlugin] Processed: brick-wall
[SvgIconJsonPlugin] Processed: ban
[SvgIconJsonPlugin] Processed: attachment
[SvgIconJsonPlugin] Processed: arrow-up
[SvgIconJsonPlugin] Processed: arrow-right
[SvgIconJsonPlugin] Processed: arrow-left
[SvgIconJsonPlugin] Processed: arrow-down
[SvgIconJsonPlugin] Successfully processed 58 icons
[SvgIconJsonPlugin] Writing to: assets/icons-spritemap.json
(node:56725) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
	Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
	Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(Use `node --trace-deprecation ...` to show where the warning was created)
assets by path �[1m�[32massets/*.css�[39m�[22m 500 KiB
  asset �[1m�[32massets/radio.css�[39m�[22m 49.7 KiB �[1m�[33m[compared for emit]�[39m�[22m [from: node_modules/@webbloqs/elements/lib/radio/radio.css] �[1m�[32m[copied]�[39m�[22m
  asset �[1m�[32massets/text-field.css�[39m�[22m 40.2 KiB �[1m�[33m[compared for emit]�[39m�[22m [from: node_modules/@webbloqs/elements/lib/text-field/text-field.css] �[1m�[32m[copied]�[39m�[22m
  asset �[1m�[32massets/checkbox-field.css�[39m�[22m 39.4 KiB �[1m�[33m[compared for emit]�[39m�[22m [from: node_modules/@webbloqs/elements/lib/checkbox-field/checkbox-field.css] �[1m�[32m[copied]�[39m�[22m
  asset �[1m�[32massets/radio-field.css�[39m�[22m 38.8 KiB �[1m�[33m[compared for emit]�[39m�[22m [from: node_modules/@webbloqs/elements/lib/radio-field/radio-field.css] �[1m�[32m[copied]�[39m�[22m
  asset �[1m�[32massets/upload-field.css�[39m�[22m 38.4 KiB �[1m�[33m[compared for emit]�[39m�[22m [from: node_modules/@webbloqs/elements/lib/upload-field/upload-field.css] �[1m�[32m[copied]�[39m�[22m
  asset �[1m�[32massets/richtext.css�[39m�[22m 38.1 KiB �[1m�[33m[compared for emit]�[39m�[22m [from: node_modules/@webbloqs/elements/lib/richtext/richtext.css] �[1m�[32m[copied]�[39m�[22m
  asset �[1m�[32massets/dropdown-field.css�[39m�[22m 38 KiB �[1m�[33m[compared for emit]�[39m�[22m [from: node_modules/@webbloqs/elements/lib/dropdown-field/dropdown-field.css] �[1m�[32m[copied]�[39m�[22m
  asset �[1m�[32massets/html.css�[39m�[22m 35.8 KiB �[1m�[33m[compared for emit]�[39m�[22m [from: node_modules/@webbloqs/elements/lib/html/html.css] �[1m�[32m[copied]�[39m�[22m
  asset �[1m�[32massets/checkbox.css�[39m�[22m 33.8 KiB �[1m�[33m[compared for emit]�[39m�[22m [from: node_modules/@webbloqs/elements/lib/checkbox/checkbox.css] �[1m�[32m[copied]�[39m�[22m
  + 24 assets
assets by chunk 20.1 KiB (name: theme)
  asset �[1m�[32mtheme.css�[39m�[22m 19.1 KiB �[1m�[33m[compared for emit]�[39m�[22m (name: theme) 1 related asset
  asset �[1m�[32mtheme.js�[39m�[22m 1.01 KiB �[1m�[33m[compared for emit]�[39m�[22m (name: theme) 1 related asset
asset �[1m�[32massets/icons-spritemap.json�[39m�[22m 26.8 KiB �[1m�[33m[compared for emit]�[39m�[22m
Entrypoint �[1mtheme�[39m�[22m 20.1 KiB (43.3 KiB) = �[1m�[32mtheme.css�[39m�[22m 19.1 KiB �[1m�[32mtheme.js�[39m�[22m 1.01 KiB 2 auxiliary assets
orphan modules 65.3 KiB (javascript) 937 bytes (runtime) �[1m�[33m[orphan]�[39m�[22m 7 modules
runtime modules 274 bytes 1 module
cacheable modules 50 bytes (javascript) 17.7 KiB (css/mini-extract)
  �[1m./src/design/snow-white.scss�[39m�[22m 50 bytes �[1m�[33m[built]�[39m�[22m �[1m�[33m[code generated]�[39m�[22m
  css ../../node_modules/.pnpm/css-loader@7.1.2_webpack@5.99.7/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!../../node_modules/.pnpm/postcss-loader@8.1.1_postcss@8.5.3_typescript@5.8.3_webpack@5.99.7/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!../../node_modules/.pnpm/sass-loader@16.0.5_sass@1.85.1_webpack@5.99.7/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!�[1m./src/design/snow-white.scss�[39m�[22m 17.7 KiB �[1m�[33m[built]�[39m�[22m �[1m�[33m[code generated]�[39m�[22m
webpack 5.99.7 compiled �[1m�[32msuccessfully�[39m�[22m in 6459 ms

ls -lh packages/client/dist/*.js packages/client/dist/*.css 2>&1 | head -20

-rw-r--r--@ 1 ma  staff    19K Feb 23 15:02 packages/client/dist/theme.css
-rw-r--r--@ 1 ma  staff   1.0K Feb 23 15:02 packages/client/dist/theme.js

cd packages/demo-app && npm run build 2>&1 | tail -50

✅ All translations are valid


> @qs/cds-cpq-demo-app@0.1.0 build
> webpack --color

Loaded provider config: immosoerf
Loaded de config translations for immosoerf
No de service translations found for immosoerf
Loaded en config translations for immosoerf
No en service translations found for immosoerf
Loaded 4 service definitions
Using index template: /Users/ma/CODE/CDS/cpq-cds/packages/demo-app/src/providers/immosoerf/index.html
Using portal template: /Users/ma/CODE/CDS/cpq-cds/packages/demo-app/src/providers/immosoerf/portal.html
Generating HTML files with default locale: de
  (Set MULTI_LOCALE_BUILD=true to generate files for all locales)
Browserslist: browsers data (caniuse-lite) is 12 months old. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
assets by path �[1m�[32massets/�[39m�[22m 1.07 MiB
  assets by path �[1m�[32massets/immosoerf/�[39m�[22m 708 KiB 11 assets
  asset �[1m�[32massets/BonaNova-Regular.ttf�[39m�[22m 382 KiB �[1m�[33m[compared for emit]�[39m�[22m [from: src/providers/immosoerf/fonts/BonaNova-Regular.ttf] �[1m�[32m[copied]�[39m�[22m
  asset �[1m�[32massets/favicon.ico�[39m�[22m 4.19 KiB �[1m�[33m[compared for emit]�[39m�[22m [from: src/assets/favicon.ico] �[1m�[32m[copied]�[39m�[22m
assets by path �[1m�[32mcomponents/�[39m�[22m 159 KiB 12 assets
assets by status 105 KiB �[1m�[32m[emitted]�[39m�[22m
  asset �[1m�[32mindex.html�[39m�[22m 45 KiB �[1m�[32m[emitted]�[39m�[22m �[1m�[33m[compared for emit]�[39m�[22m
  asset �[1m�[32mplayground.html�[39m�[22m 22 KiB �[1m�[32m[emitted]�[39m�[22m �[1m�[33m[compared for emit]�[39m�[22m
  asset �[1m�[32mportal.html�[39m�[22m 18.2 KiB �[1m�[32m[emitted]�[39m�[22m �[1m�[33m[compared for emit]�[39m�[22m
  + 2 assets
assets by path �[1m�[32m*.js�[39m�[22m 3.7 MiB
  asset �[1m�[32mdemo-app.js�[39m�[22m 2.65 MiB �[1m�[33m[compared for emit]�[39m�[22m (name: demo-app) 1 related asset
  asset �[1m�[32mintro-components.js�[39m�[22m 1.04 MiB �[1m�[33m[compared for emit]�[39m�[22m (name: intro-components) 1 related asset
  asset �[1m�[32mtheme.js�[39m�[22m 1020 bytes �[1m�[33m[compared for emit]�[39m�[22m (name: theme) 1 related asset
asset �[1m�[32mtheme.css�[39m�[22m 31.6 KiB �[1m�[33m[compared for emit]�[39m�[22m (name: theme) 1 related asset
Entrypoint �[1mdemo-app�[39m�[22m 2.65 MiB (2.64 MiB) = �[1m�[32mdemo-app.js�[39m�[22m 1 auxiliary asset
Entrypoint �[1mintro-components�[39m�[22m 1.04 MiB (1.2 MiB) = �[1m�[32mintro-components.js�[39m�[22m 1 auxiliary asset
Entrypoint �[1mtheme�[39m�[22m 32.6 KiB (53.5 KiB) = �[1m�[32mtheme.css�[39m�[22m 31.6 KiB �[1m�[32mtheme.js�[39m�[22m 1020 bytes 2 auxiliary assets
runtime modules 3.72 KiB 18 modules
orphan modules 90 KiB �[1m�[33m[orphan]�[39m�[22m 7 modules
modules by path �[1m../../node_modules/.pnpm/�[39m�[22m 1.62 MiB
  javascript modules 1.62 MiB 314 modules
  json modules 2.54 KiB 2 modules
modules by path �[1m../shared/src/�[39m�[22m 281 KiB
  modules by path �[1m../shared/src/domain/�[39m�[22m 277 KiB 168 modules
  + 3 modules
modules by path �[1m./src/�[39m�[22m 153 KiB (javascript) 30.2 KiB (css/mini-extract)
  modules by path �[1m./src/components/�[39m�[22m 147 KiB 9 modules
  modules by path �[1m./src/apps/*.ts�[39m�[22m 6.53 KiB 4 modules
  modules by path �[1m./src/theme/*.scss�[39m�[22m 50 bytes (javascript) 30.2 KiB (css/mini-extract) 2 modules
webpack 5.99.7 compiled �[1m�[32msuccessfully�[39m�[22m in 2352 ms

cd packages/client && npx jest --no-coverage --passWithNoTests 2>&1 | tail -20

PASS src/components/parameter-field/TextInputField.spec.tsx
PASS src/components/parameter-field/RangeInputField.spec.tsx
PASS src/hooks/useServiceDefinitionTemplates.spec.ts
PASS src/components/service-definition-playground/sample-filter-section/SampleFilterSection.spec.tsx
PASS src/components/parameter-field/BooleanInputField.spec.tsx
PASS src/components/quote-editor/QuoteEditor.spec.tsx
PASS src/components/service-definition-playground/service-definition-preview/ServiceDefinitionPreviewView.spec.tsx
PASS src/components/details-card/DetailsCard.spec.tsx
PASS src/components/service-definition-playground/responsive-split-view/ResponsiveSplitView.spec.tsx
PASS src/components/service-order-form/ServiceOrderParameter.spec.tsx
PASS src/components/service-order-form/ServiceOrderStep.spec.tsx
PASS src/components/service-definition-playground/ServiceDefinitionPlayground.spec.tsx (14.802 s)
PASS src/components/contact-teaser/ContactTeaser.spec.tsx (14.94 s)
PASS src/components/service-definition-playground/ServiceDefinitionPlayground.integration.spec.tsx (18.061 s)

Test Suites: 55 passed, 55 total
Tests:       513 passed, 513 total
Snapshots:   44 passed, 44 total
Time:        19.232 s
Ran all test suites.

\![Snackbar story — styled with dark background and white text](docs/demos/2026-02-23-storybook-scss-inline-snackbar.png)

\![Order Details page story — full Shadow DOM styles via ?inline SCSS](docs/demos/2026-02-23-storybook-scss-inline-orderdetails.png)

Build artifact identity check

Verified that production build output is byte-identical before and after the ?inline import changes. Baseline: commit 025b2bf5 (before ?inline), HEAD: commit cfef761b.

Method: checkout baseline versions of production files (webpack.config.js, components/index.ts, 4 touchpoint files, types/scss.d.ts), build, capture SHA-256 digests, restore HEAD, build again, compare.

client build (theme entry point)

File	SHA-256	Match
theme.css	072948f0325444c167073bb59677c35e06eeb92e8ac3b8ac1f7d2a1654a54d1c	identical
theme.js	3cba0eab3351ce0bc1c90bdc62794ef580a9a5100af5c134ec25dde15969c9ea	identical
theme.css.map	86dd5d30ff63ff03f820bd0778368bfa5bcffb3b29fee5a5fbac7a7c386c0850	identical
theme.js.map	942598ce02e222dd7ce54bc7f2426824936cb242bb05de5b7e199b92cbacb765	identical
assets/ (34 files)	all match	identical

demo-app build (bundles touchpoint code with SCSS imports)

File	SHA-256	Match
demo-app.js (2.65 MB)	1b4390e48b736b79e36d926275a7fc1840a32028c5ff027c7816ca10caa53f80	identical
intro-components.js (1.04 MB)	def816242e1b6bd162a2d7f0355ee8d3dc0481059e1b10e52cc0239f6ebcdd0f	identical
theme.css	d81cffe06fdaf5d6d6631cb653a4c722cb4fac7058611af2c247f63fb7c67aa1	identical
theme.js	e28aa6c9a5022b370c06fdd604feee1821a294e00b5c12d0de4a7bdd39fa9d46	identical

43 common files compared, 0 differences. The ?inline suffix is a no-op for the production build — demo-app's webpack.config.js already had resourceQuery: /inline/ matching component SCSS by directory path, so adding ?inline to imports changes nothing in that build context.

---

All checks pass: TypeScript clean, client build OK, demo-app build OK, 513/513 tests pass, build artifacts byte-identical. Both Storybook stories (component + Shadow DOM page) render correctly with styles.