fix(ssr-compiler): implement scoped styles and scope tokens #4567
Conversation
| yield \`<\${tagName}\`; | ||
| yield tmplFn.stylesheetScopeTokenHostClass; |
There was a problem hiding this comment.
Scope tokens are associated with templates, not with components. This is the main mistake that the previous code was making. Here I am grabbing the scope token from the tmplFn, and I'm also not passing it into the tmplFn below because the tmplFn should already know what its stylesheets are.
(This is not true for static stylesheets but we'll cross that bridge when we get there.)
| )}` | ||
| ); | ||
| } | ||
|
|
There was a problem hiding this comment.
Just moved this error message from elsewhere to here.
| esTemplate<ExportNamedDeclaration>` | ||
| const stylesheetScopeTokenClassPrefix = hasScopedStylesheets ? (stylesheetScopeToken + ' ') : ''; | ||
| `, | ||
| ]; |
There was a problem hiding this comment.
There is probably a better way to do this, but I like the esTemplate utility and did not find a more succinct way to represent this.
| @@ -24,6 +24,7 @@ export { CustomRendererConfig, CustomRendererElementConfig } from './shared/rend | |||
| export { Config } from './config'; | |||
| export { toPropertyName } from './shared/utils'; | |||
| export { kebabcaseToCamelcase } from './shared/naming'; | |||
| export { generateScopeTokens } from './scopeTokens'; | |||
There was a problem hiding this comment.
We are now exposing this from the template compiler... may the gods forgive us.
| * @param filename - full filename, e.g. `path/to/x/foo/foo.html` | ||
| * @param namespace - namespace, e.g. 'x' for `x/foo/foo.html` | ||
| * @param componentName - component name, e.g. 'foo' for `x/foo/foo.html` | ||
| */ |
There was a problem hiding this comment.
Added a big warning here that this is not stable. I can't imagine why someone would use it, but you never know... 🤷
Details
This reduces the number of test failures in
fixtures.spec.tsfrom 60 to 55. It implements partial support for*.scoped.cssas well as the scope tokens (classes) that are supposed to be applied during HTML rendering, e.g.:💁♂️ Reviewer pro tip! This PR won't make a lick of sense unless you look at the actual
compiled-experimental-ssr.jsfiles from the fixture tests. Here is a diff: 62d123fYou can run also run the fixtures tests yourself:
Does this pull request introduce a breaking change?
Does this pull request introduce an observable change?
GUS work item
W-16782117