-
Notifications
You must be signed in to change notification settings - Fork 12
Description
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 passresponse.headers
from PostCSS plugin, but maybe this was intentional for this specific use case?
Metadata
Metadata
Assignees
Labels
Type
Projects
Status