[rollup] Compose class with name not valid as a JS identifier gives `Error: Unexpected token`

[plesiecki]

Describe the bug

Hello, I think I've noticed a bug.

For case like:

/* dep.css */
.foo-bar {
  color: red;
}

/* style.css */
.foo {
  composes: foo-bar from './dep.css';
}
.foo-baz {
  color: red;
}

build fails with an error:

[!] (plugin commonjs--resolver) Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/style.css (1:12)
1: import { foo-bar as fooBar } from "/app/src/dep.css";
               ^
2: const foo = fooBar + " " + "mce45f0dfb_foo"
3: const fooBar1 = "mce45f0dfb_foo-bar"
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (/app/node_modules/rollup/dist/shared/rollup.js:198:30)

Reproduction

https://glitch.com/edit/#!/truth-solstice-gazelle

Run npx rollup -c from terminal to see the build error.

Logs

No response

System Info

## System:
 - OS: Linux 4.4 Ubuntu 16.04.7 LTS (Xenial Xerus)
 - CPU: (3) x64 Intel(R) Xeon(R) Platinum 8259CL CPU @ 2.50GHz
 - Memory: 5.84 GB / 6.00 GB
 - Container: Yes
 - Shell: 4.3.48 - /bin/bash
## Binaries:
 - Node: 14.19.1 - /opt/nvm/versions/node/v14/bin/node
 - npm: 6.14.16 - /opt/nvm/versions/node/v14/bin/npm
## npmPackages:
 - @modular-css/rollup: 28.1.1 => 28.1.1

Severity

annoyance

[tivac]

Thanks for the report @plesiecki. I definitely see this happening in a simple test case and I also see why it's happening.

The one wrinkle is that the files are walked in entry-point reference order which means that if you have this:

/* one.css */
.out {
    composes: foo-bar from "./two.css";
}

/* two.css */
.foo-bar {
    color: salmon;
}

Then one.css is processed before two.css, which makes solving this in a way that will work for all the edge cases take a bit.

[tivac]

This is fixed in @modular-css/rollup@28.1.2! Thanks again for the great bug report ❤️

[plesiecki]

Well, that was quick. Great job, thanks!