Skip to content

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

@thescientist13

Description

@thescientist13

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?

Metadata

Metadata

Labels

CLISSRbugSomething isn't working

Type

Projects

Status

🔖 Ready

Relationships

None yet

Development

No branches or pull requests

Issue actions