argyleink / argyleink/css-color-component

Build Error When Packaging With Webpack

Open
#67 1 comment 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.