Conversation
…erated This ensures that browsers can automatically locate the corresponding .map file, improving debugging capabilities in development mode.
…n dev/build BROKEN Migrate CSS pipeline to LightningCSS bundleAsync to properly resolve @import and generate accurate source maps. This is a conceptual shift away from transform().⚠️ CURRENT STATUS: BROKEN⚠️ - npm run dev: ❌ fails - npm run build: ❌ fails Reason: follow-up work is required to integrate config-driven custom-media preload (_custom-media.css) without violating CSS @import ordering. Until resolved, the parser may throw errors and DevTools may still reference the top-level importer. Next steps: 1) Ensure @import ordering is preserved across all files. 2) Insert custom-media after the top-level import block (or use a virtual import solution). 3) Keep sourceMap + sourceMapIncludeSources; append sourceMappingURL at the end of CSS. Note: This commit intentionally isolates the architectural change so that subsequent fixes can be reviewed independently.
…rcemaps Use LightningCSS bundler with a virtual import (virtual:preload.css) that concatenates all files listed in dev.styles.importFrom. This ensures that custom media, properties, etc. are injected once at the correct position without breaking @import ordering. Also: - Replace hardcoded _custom-media.css handling - Keep strict dev guard to detect late @import usage - Emit source maps with explicit sourceMappingURL comment
The old name "importFrom" was a leftover from PostCSS times and is now deprecated. Use the clearer "preload" key instead. For backwards compatibility, "importFrom" is still supported but will emit a warning.
Drop leftover console.log of sourcemap sources that was only useful during debugging. Now only warnings are emitted on parse failure or empty sources.
|
@robruiz ChatGPT was very helpful to me here. I believe there is still room for improvement in the code. A large part of the complexity seems to come from preloading _custom-media.css. Is this actually necessary? I vaguely remember that Custom Media Queries have some special role, but I can’t recall exactly what it was or why. If preloading is not required, we might want to consider simply importing _custom-media.css where it’s needed. That could potentially simplify the code quite a bit. I also find the non-minified *.min.css files and the separate maps a bit confusing, even though I’m sure there were good reasons for this setup. I wonder if it might make sense to make that configurable. |
6089dab to
210aee2
Compare
|
While dogfooding my own PR, I noticed that it worked fine for a long time, but then suddenly got out of step and started linking incorrectly. In this case, deleting the |
# Conflicts: # package-lock.json # package.json
Description
Addresses issue #919
Sourcemaps for compiled CSS pointed to the top-level importer instead of the actual source files. In DevTools this made it hard to jump to the rule’s true origin. Additionally, configuration-driven preloads (custom media, etc.) had to be injected without breaking
@importordering.What this PR does
bundleAsync()so@importtrees are resolved correctly and sourcemaps retain original sources.@importblock. This preserves CSS ordering while keeping the preloads effective.targetsfrom the project Browserslist (env-aware viaBROWSERSLIST_ENV), ensuring output matches the supported browsers.dev.styles.importFrom→dev.styles.preload(clearer naming); keeps backward compatibility by still honoringimportFromwith a deprecation warning.themeConfigso overrides fromconfig.json/config.local.jsonare respected.Why this works
@importviolations while still applying project preloads consistently.List of changes
Detailed changes
transform()tobundleAsync()to preserve file identity in sourcemaps._custom-media.css) appear correctly without breaking@importorder.dev.styles.preloadin config. OldimportFromstill works but triggers a deprecation warning.How to test
Build assets
assets/css/*.min.cssandassets/css/editor/*.min.cssare generated..mapfile and ends with a/*# sourceMappingURL=... */comment.Verify sourcemaps in DevTools
npm run devand open the site in a browser.global.css)._typography.css,_elements.css, etc.), not the top-level importer.Check preload handling
_custom-media.cssis available in compiled outputs. Maybe check also, that the preload-config works with other files as well.Check Browserslist targets
min-widthvs.width>=), flexbox/grid prefixes, etc.dev.styles.importFrominconfig.local.json(instead ofpreload).⚠️ dev.styles.importFrom is deprecated, please use dev.styles.preload instead.Checklist: