Error parsing css - Githubissues

lexcao commented 1 month ago

Reproduce

Open online generator
Add dependency @shopify/polaris (13.3.0)
Add package export ./build/esm/styles.css

Error message

Error: 
        var(--p-color-bg-surface-secondary) 0% 50%
>     ) 50% / var(--p-space-400) var(--p-space-400);
                                                    ^
    -webkit-user-select:none;

Error parsing https://ga.jspm.io/npm:@shopify/polaris@13.3.0/build/esm/styles.css:5744:51

Possible error css

    --pc-color-picker-checkers:repeating-conic-gradient(
            var(--p-color-bg-surface) 0% 25%,
            var(--p-color-bg-surface-secondary) 0% 50%
    ) 50% / var(--p-space-400) var(--p-space-400);

Screenshots

What's more

Maybe it is related to the unsupported CSS feature in parser of Generator. I found an issue maybe related.

https://github.com/Shopify/polaris/issues/2629

JSPM is an awesome project, I love to use it! Thanks you! I am willing to contribute to fix this if you can guide me.

Investigation

I can see the error comes from analyze https://github.com/jspm/generator/blob/a6e449f77586ad3561f63df6d9f5bb5d5341e964/src/trace/resolver.ts#L943

It seems we should not analyze for CSS or there is a missing case for analyzing CSS?

guybedford commented 1 month ago

Thanks for sharing - this is actually because we don't currently support adding CSS files to the importmap, but we definitely should!

I'm going to track this as a feature, and get to it when I can. Development is a little slow these days, but things are still moving, it's just about when I get to it that's all.

guybedford commented 1 month ago

Just landed support for this in https://github.com/jspm/generator/pull/360 along with Wasm tracing as well. Release and update to the online generator may take another week or so.