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

supported Import Attributes from node modules are not being externalized based on polyfill configuration settings #1365

Open
thescientist13 opened this issue Dec 28, 2024 · 0 comments
Assignees
Labels
bug Something isn't working CLI SSR v0.31.0

Comments

@thescientist13
Copy link
Member

Type of Change

Bug

Summary

Observed in #1361 that although we are properly handling CSS based import attributes from node_modules, e.g.

import themeSheet from '../../styles/theme.css' with { type: 'css' };
import headerSheet from './header.css' with { type: 'css' };
import SpectrumTypography from '@spectrum-css/typography' with { type: 'css' };

export default class Header extends HTMLElement {
  connectedCallback() {
    if (!this.shadowRoot) {
      // ...
    }

    this.shadowRoot.adoptedStyleSheets = [themeSheet, headerSheet, SpectrumTypography];
  }
}

customElements.define('app-header', Header);

Per this test case in the PR, it looks like the CSS content is by default being automatically inlined, when it should really be doing it based on the setting chosen by the user as per the available configuration option

import r from"/card.YPhf6BPs.css"with{type:"css"};import a from"/card.DD1QRwId.json"with{type:"json"};const c=new CSSStyleSheet;c.replaceSync(".spectrum-Card{--spectrum-card-background-color:var(--spectrum-background-layer-2-color); ...");class d extends HTMLElement{connectedCallback(){if(!this.shadowRoot){const r=this.getAttribute("name")||"World",c=document.createElement("template");c.innerHTML=`\n        <div class="card">\n          <img alt="logo" href="${a.image.url}">\n          <h2>Hello, ${r}!</h2>\n        </div>\n        <hr/>\n      `,this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(c.content.cloneNode(!0))}this.shadowRoot.adoptedStyleSheets=[r,c]}}customElements.define("app-card",d);export{d as default};
//# sourceMappingURL=card.CJ3AAbTO.js.map

Details

It seems to simply be a case that we only instruct Rollup to externalize in one place, when resolving IDs to see if they are in the user's workspace.
https://github.com/ProjectEvergreen/greenwood/blob/v0.31.0-alpha.1/packages/cli/src/config/rollup.config.js#L34

We should probably externalize anything that provides a supported import attribute.

should we also be doing more mergeResponse in rollup.config.js? Had to formally pass response.headers from PostCSS plugin, but maybe this was intentional for this specific use case?

@thescientist13 thescientist13 added bug Something isn't working CLI SSR v0.31.0 labels Dec 28, 2024
@thescientist13 thescientist13 self-assigned this Dec 28, 2024
@thescientist13 thescientist13 changed the title CSS Import Attributes are not being externalized based on polyfill configuration settings supported Import Attributes from node modules are not being externalized based on polyfill configuration settings Dec 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working CLI SSR v0.31.0
Projects
Development

No branches or pull requests

1 participant