Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
plesiecki opened this issue May 23, 2022 · 3 comments · Fixed by #847
Closed
Labels

Comments

@plesiecki
Copy link
Contributor

plesiecki commented May 23, 2022

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

@plesiecki plesiecki added the bug label May 23, 2022
@plesiecki plesiecki changed the title [rollup] Compose class with names not valid as a JS identifier gives Error: Unexpected token [rollup] Compose class with name not valid as a JS identifier gives Error: Unexpected token May 23, 2022
@tivac
Copy link
Owner

tivac commented May 24, 2022

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 added a commit that referenced this issue May 25, 2022
If the ESM export is always tidied up (it is) then we can always apply the same tidying to the import.

Fixes #846
@tivac
Copy link
Owner

tivac commented May 25, 2022

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

@plesiecki
Copy link
Contributor Author

Well, that was quick. Great job, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants