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

polyfill configurations for import maps and attributes #1268

Closed
thescientist13 opened this issue Aug 24, 2024 · 0 comments · Fixed by #1269
Closed

polyfill configurations for import maps and attributes #1268

thescientist13 opened this issue Aug 24, 2024 · 0 comments · Fixed by #1269
Assignees
Labels
alpha.6 breaking CLI documentation Greenwood specific docs feature New feature or request v0.30.0
Milestone

Comments

@thescientist13
Copy link
Member

Summary

Shockingly, it was only just recently learned that import attributes are not baseline across browsers and using the with syntax will just break outright in anything but Chrome at the moment.

import sheet from './card.css' with { type: 'css' };

image
image


It seems that we need to give the ability to backfill this capability especially if we want to promote this capability on the new website, which involve a couple things

  1. Give user's the ability to opt-in to Greenwood doing the polyfilling
    export default {
      polyfills: {
        importAttributes: ['css', 'json']
      }
    }
  2. And then polyfill (technically downgrade to standard ESM)
    // strip the offending syntax
    import sheet from './card.css';
    
    // and have Greenwood return a Constructable Stylesheet for card.css
    const sheet = new CSSStyleSheet();sheet.replaceSync(`p { color: red }`);
    export default sheet;

Details

Interestingly, returning a CSSStyleSheet was our original implementation, but then we in hindsight, mistakingly went all in on the with syntax, not realizing it was not supported yet. 😅

One thing to keep in mind as part of exposing this polyfill configuration is draw a line on what can go behind this, as it should only be a way to bridge the gap for a spec that is not baseline yet. So it should just be based on a matter of when this feature lands, not if it's still in the if stage, otherwise it would be better off as a plugin. Eventually, user's should be able to just disable the polyfill since eventually it will just be in all browsers.


Based on some initial testing, I noticed is that our use of es-module-shims is getting in the way, giving false positives in development since it seems to enable CSS and JSON modules that make these work in development for Safari / FF, which is obviously not desirable, so we should put that behind a flag as well.
Screenshot 2024-08-23 at 3 20 01 PM
Screenshot 2024-08-23 at 3 20 25 PM

So we should also disable import maps by default as well since it's now so widely available having now landing in Safari >= 16.4 now, and instead should probably cancel #1115 and just create a new issue moving it to our polyfills plugin.

@thescientist13 thescientist13 added documentation Greenwood specific docs CLI breaking alpha.6 feature New feature or request v0.30.0 labels Aug 24, 2024
@thescientist13 thescientist13 self-assigned this Aug 24, 2024
@thescientist13 thescientist13 added this to the 1.0 milestone Aug 24, 2024
@thescientist13 thescientist13 linked a pull request Aug 24, 2024 that will close this issue
12 tasks
@thescientist13 thescientist13 moved this from 🏗 In progress to 👀 In review in [Greenwood] Phase 9 - Standards and Conventions Aug 31, 2024
@thescientist13 thescientist13 changed the title polyfills and configuration for import maps and attributes polyfill configuration for import maps and attributes Sep 6, 2024
@thescientist13 thescientist13 changed the title polyfill configuration for import maps and attributes polyfill configurations for import maps and attributes Sep 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
alpha.6 breaking CLI documentation Greenwood specific docs feature New feature or request v0.30.0
Projects
No open projects
Development

Successfully merging a pull request may close this issue.

1 participant