search

parcel-bundler / parcel

The zero configuration build tool for the web. 📦🚀
https://parceljs.org
MIT License
43.37k stars 2.27k forks source link

CSS modules in HTML #4480

Open jakearchibald opened 4 years ago

jakearchibald commented 4 years ago

🙋 feature request

import { whatever } from './styles.module.css';

It seems like this works if postcss-modules is installed, but that doesn't appear to be documented.

<!doctype html>
<link rel="stylesheet" href="styles.module.css">
<div class="whatever"></div>

The above fails to build, with error @parcel/packager-html: HTML bundles must only contain one asset.

For completeness, here's styles.module.css:

.whatever {
  border: 1px solid red;
}

🤔 Expected Behavior

When importing from CSS, it seems to be working as expected.

When importing in HTML, I'd expect the class name in <div class="whatever"></div> to be renamed to match the module CSS.

🔦 Context

Using CSS modules as part of a project.

💻 Examples

See above.

devongovett commented 4 years ago

I'm not sure how this could work. CSS modules need to be imported from JS in order to use the class mapping they generate. I don't think we could reliably replace class names in HTML, because there's no way to reference which module you're referring to. If you had multiple <link rel="stylesheet"> tags pointing to different CSS modules, there's no way to know if <div class="whatever"> refers to the whatever class in the first or second CSS file.

How would you expect it should behave? Do any other tools you know of support this?

jakearchibald commented 4 years ago

Yeah, that's fair. I guess you'd need a system where you namespace the CSS tag, and reference that somehow:

<!doctype html>
<link rel="stylesheet" href="styles.module.css" parcel-module-prefix="main">
<div class="main.whatever"></div>

But, if no one wants that, that's fine.

Happy for this to be closed if the weird error is gone, which seems to be the case.

jakearchibald commented 4 years ago

Updated tooling.report test https://github.com/GoogleChromeLabs/tooling.report/tree/parcel-updates/tests/non-js-resources/subtests/css/subtests/module/parcel