search

parcel-bundler / parcel

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

Using CSS modules with HTML makes Parcel crash #9027

Open Moxinilian opened 1 year ago

Moxinilian commented 1 year ago

🐛 bug report

When using CSS modules with Parcel 2.8.3, importing a CSS file from an HTML file causes hitting an unsatisfied assertion.

🎛 Configuration (.babelrc, package.json, cli command)

I managed to create a minimal reproducing example.

package.json

{
  "name": "testparcel",
  "version": "1.0.0",
  "license": "MIT",
  "private": true,
  "devDependencies": {
    "parcel": "^2.8.3"
  },
  "@parcel/transformer-css": {
    "cssModules": true
  }
}

test.html

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="test.css">
</head>

test.css

body {
    height: 100%;
}

Running yarn parcel build test.html triggers the issue.

🤔 Expected Behavior

When running yarn parcel build test.html, Parcel should generate both test.html and test.hash.css files, with tree shaking and all the nice features of CSS modules applied to the CSS file.

😯 Current Behavior

Parcel crashes.

theodegioanni@theodesktop:/tmp/testparcel$ yarn parcel build test.html
yarn run v1.22.19
$ /tmp/testparcel/node_modules/.bin/parcel build test.html
🚨 Build failed.

@parcel/bundler-default: The expression evaluated to a falsy value:

  (0, _assert().default)(assets.length === 1)

  AssertionError [ERR_ASSERTION]: The expression evaluated to a falsy value:

    (0, _assert().default)(assets.length === 1)

      at /tmp/testparcel/node_modules/@parcel/bundler-default/lib/DefaultBundler.js:562:35
      at /tmp/testparcel/node_modules/@parcel/graph/lib/Graph.js:425:16
      at /tmp/testparcel/node_modules/@parcel/graph/lib/Graph.js:425:16
      at walk (/tmp/testparcel/node_modules/@parcel/graph/lib/Graph.js:280:26)
      at walk (/tmp/testparcel/node_modules/@parcel/graph/lib/Graph.js:302:22)
      at ContentGraph.dfs (/tmp/testparcel/node_modules/@parcel/graph/lib/Graph.js:328:12)
      at ContentGraph.traverse (/tmp/testparcel/node_modules/@parcel/graph/lib/Graph.js:231:17)
      at ContentGraph.filteredTraverse (/tmp/testparcel/node_modules/@parcel/graph/lib/Graph.js:239:17)
      at BundleGraph.traverse (/tmp/testparcel/node_modules/@parcel/core/lib/BundleGraph.js:963:24)
      at MutableBundleGraph.traverse (/tmp/testparcel/node_modules/@parcel/core/lib/public/BundleGraph.js:202:24)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I tried removing the assertion out of curiosity, but naturally I only got further errors.

🔦 Context

I was trying to use CSS modules to have tree shaking on my CSS files which tend to be quite unnecessarily large, notably because I include bulma in them.

🌍 Your Environment

Software Version(s)
Parcel 2.8.3
Node 20.2.0
npm/Yarn yarn 1.22.19
Operating System Arch Linux
mischnic commented 1 year ago

Please try the nightly version yarn add parcel@nightly. This is probably already fixed

Moxinilian commented 1 year ago

Unfortunately I could reproduce even using nightly.

{
  "name": "testparcel",
  "version": "1.0.0",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "parcel": "^2.8.4-nightly.0"
  },
  "@parcel/transformer-css": {
    "cssModules": true
  }
}
mischnic commented 1 year ago

The problem is that test.css will also become a CSS module, and that then breaks with the <link>. You should instead remove the global setting and then choose whether specific CSS files should be modules by calling them test.module.css or test.css.

Moxinilian commented 1 year ago

I'm not sure I understand. What is the proper way to use a CSS module? Simply renaming the CSS file to test.module.css and removing the global setting yields the same result.

mischnic commented 1 year ago

You cannot use CSS modules in HTML (so <link rel="stylesheet" href="test.css">).

Instead, remove the global setting and then do <link rel="stylesheet" href="test.css"> from HTML for non-module CSS and import * as styles from "./my-component.module.css"; from JS for CSS modules

Moxinilian commented 1 year ago

Right, I see. What is the proper way to do CSS tree shaking when using CSS directly from HTML? I have no CSS-related JavaScript in my projects.

mischnic commented 1 year ago

Parcel doesn't have such functionality builtin A PostCSS plugin like https://purgecss.com/plugins/postcss.html might work

Moxinilian commented 1 year ago

Ah I see! Thank you. I think this is still a bug though, as Parcel should at least not crash but emit an error.

Moxinilian commented 7 months ago

Maybe it's been fixed, I'll try to get some time to check.