preactjs/wmr

CSS relative imports are not updated after build

Open

#254 opened on Dec 15, 2020

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (4,903 stars) (114 forks)batch import
bugenhancementhelp wanted

Description

CSS relative imports are currently not updated after build. If the CSS file listed in my index.html say imports a additional.css, while the style.css gets copied to dist/assets.style.<hash>.css, additional.css will not, and style.<hash>.css will have the same import, as if they were still in the same directory.

Apologies if that's word-soup, here's an example repo with a build pushed: https://github.com/rschristian/wmr-css-imports

(non-relevant files omitted)

➜  ~/Projects/css-imports tree public
public
├── additional.css
└── style.css

style.css uses @import 'additional.css'; and this works fine in dev.

➜  ~/Projects/css-imports tree dist
dist
├── additional.css
├── assets
│   └── style.6c21df40.css

While the asset path changed (no longer in the same directory), the processed path has not.

Contributor guide

Tech stack
javascriptcss
Domain
build systemfrontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
CSS '@import' syntaxunderstanding of build pipelines
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
Examine the build pipeline in wmr to understand how CSS assets are processed and paths are rewritten. The example repository at https://github.com/rschristian/wmr css imports provides a minimal reproduction. Focus on the code responsible for updating import paths in CSS files after hashing and moving assets. Look into the CSS plugin or bundler configuration to ensure relative imports are resolved relative to the new output location.