feat: light DOM scoped styles

[nolanlawson]

Details

Rough implementation of this RFC. Adds a *.scoped.css file for light DOM components that results in CSS that is scoped to that component.

Does this PR introduce breaking changes?

• ✅ No, it does not introduce breaking changes.

GUS work item

W-8844642

[nolanlawson]

Assuming nothing changes in the RFC, this PR is ready for review.

[pmdartus]

We might want to change the name of this function to something more representative. I was originally called this way to encapsulate the fallback logic when the LWC engine is not running with native shadow DOM.

[nolanlawson]

Hm, maybe setStyleTokensAndObserve? That seems to be what it's doing, for both synthetic shadow and light DOM scoped styles.

Or I could move the light DOM style scoping to a new hook.

[nolanlawson]

This PR is ready for a second look. The changes are:

1. It works for shadow DOM components too.
2. The scope token is applied client-side rather than server-side.

[pmdartus]

Added a couple of nitpicks otherwise the code looks good.

[pmdartus]

The NormalizedTransformOptions interface should be updated to avoid the type guard.

[nolanlawson]

Done.

[nolanlawson]

Actually, I can't seem to get this to work. TypeScript keeps throwing errors during the build, and I don't understand the problem. Let's address it in a future PR.

[pmdartus]

It is strange that we have to load scoped styles manually from within the plugin while the rest of the files aren't. I understand why this is needed here. However, I am wondering rollup provides a better way to handle this?

[pmdartus]

Disclaimer I haven't tried this approach. But could we, for example, parse the query string in the resolveId, shelve the query string key/value in the file meta. This would avoid having to add custom logic in the load. The meta can then be retrieved in the transform hook to invoke the compiler correctly.

[nolanlawson]

This sounds plausible to me; let's handle in another PR? It would need some experimentation.

[banderson5144]

@nolanlawson I am seeing an issue when trying to run a LWR/LWC site. I need to remove ?scoped=true from this line:

https://github.com/salesforce/lwc/blob/master/packages/@lwc/compiler/src/transformers/template.ts#L74

in order to have my LWR/LWC code to function correctly. Is there anything I need to change in my lwr.config.json to make it function correctly:

{
    "lwc": {
        "modules": [
            {
                "dir": "$rootDir/src/modules"
            },
            {
                "npm": "lightning-base-components"
            }
        ]
    },
    "bundleConfig": { "exclude": ["lwc", "@lwc/synthetic-shadow"] },
    "routes": [
        {
            "id": "Home",
            "path": "/",
            "rootComponent": "my/app",
            "layoutTemplate": "$layoutsDir/main_layout.njk",
            "bootstrap": {
                "syntheticShadow": true
            }
        },
        {
            "id": "Foo",
            "path": "/foo",
            "rootComponent": "my/foo",
            "layoutTemplate": "$layoutsDir/main_layout.njk",
            "bootstrap": {
                "syntheticShadow": true
            }
        }
    ]
}