argyleink / argyleink/css-color-component
Build Error When Packaging With Webpack
- Dominant language
- TypeScript
- Stars
- 237
- Forks
- 10
- Avg merge
- 1m
- Merged PRs (30d)
- 1
Description
Hi,
I'm trying to package my site using the npm package of hdr-color-input, but it fails when I run a production build with the following error:
```
5282 | const supportsAnchor = (_e = (_d = CSS.supports) == null ? void 0 : _d.call(CSS, "anchor-name: --a")) != null ? _e : false;
| ^
5283 | const DEFAULT_VALUE = "oklch(75% 75% 180)";
5284 | const DEFAULT_SPACE = "oklch";
5285 | const asColorSpace = (value) => COLOR_SPACES.includes(value) ? value : null;
WebpackError: ReferenceError: CSS is not defined
```
My web dev skills aren't enough to decipher this, so forgive me if it's got nothing to do with the color component. Feel free to close in that case.
Figured I'd ask in case this rings a bell.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the production build with the npm package and inspect the bundled code around the shown CSS.supports reference. Trace that reference back to the package source, then verify the build completes without the ReferenceError and rerun the production Webpack build to confirm the fix.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript, webpack
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100