feat(engine-core): programmatic style injection #3123
Conversation
| @@ -43,6 +44,9 @@ module.exports = function LwcClassTransform(api) { | |||
|
|
|||
| // Validate the usage of LWC decorators. | |||
| validateImportedLwcDecoratorUsage(engineImportSpecifiers); | |||
|
|
|||
| // Add ?scoped=true to *.scoped.css imports | |||
| scopeCssImports(api, path); | |||
There was a problem hiding this comment.
This compiler change is not behind the flag, but I think the impact is very small so it shouldn't matter. Any bundler capable of dealing with ?scoped=true imports from CSS should be able to deal with them from JS as well.
Technically, though, this does allow people to use scoped styles with the template.stylesheets = [...] hack. But people are also able to do this with arbitrary functions anyway. 😛 #3122
rui-rayqiu
force-pushed
the
nolan/programmatic-stylesheets-squashed
branch
from
9c8e2ef to
8e0cdd0
Compare
rui-rayqiu
force-pushed
the
nolan/programmatic-stylesheets-squashed
branch
from
8e0cdd0 to
ae95828
Compare
packages/@lwc/integration-karma/test/rendering/legacy-stylesheet-api/index.spec.js
Outdated
Show resolved
Hide resolved
| document.body.appendChild(elm); | ||
| expect(elm.shadowRoot.querySelector('h1')).toBeTruthy(); // still renders the template correctly | ||
| }); | ||
|
|
There was a problem hiding this comment.
| // TODO [#3122]: Disallow treating arbitrary functions as stylesheet functions |
| export default class extends LightningElement { | ||
| static stylesheets = [ | ||
| () => { | ||
| return null; |
There was a problem hiding this comment.
I'm amazed this doesn't break LWC anywhere. 😅 We should probably have a separate PR to test how users could attempt to break stylesheets in zany ways, e.g. by having a function that returns numbers, undefined, arrays, etc. (Related: #3122)
There was a problem hiding this comment.
I am not allowed to approve my own PR, but overall this LGTM, just a few small suggestions @rui-rayqiu. 👍
Does this pull request introduce a breaking change?
Fixes #2917. Implements most of this RFC.
The implementation is behind a runtime flag:
ENABLE_PROGRAMMATIC_STYLESHEETS.This doesn't implement the full RFC. In particular, it doesn't implement LWC stylesheet modules or #3122. Those are TODOs for later.
Details
Does this pull request introduce an observable change?
Th engine will look for the
static stylesheetsproperty in the component. If that property is an array containing functions, it will attempt to use those functions as stylesheet factories. This seems very unlikely to break anyone, but there is a small chance that someone set an array of functions as thestatic stylesheetsproperty and those functions throw an error when invoked with empty arguments. (Seems very unlikely to me though.)GUS work item
W-10183295
W-10183388