refactor(engine): inline styles to support native shadow

fix(engine): integration test

feat(compiler): inline styles to support native shadow (#691)

Add compiler changes required for the shadow DOM injection of the stylesheet.
The CSS transformer now attach to the template an object with 3 properties:
* `hostAttribute` - the attribute to apply to the host element
* `shadowAttribute` - the attribute to apply to the shadow elements
* `factory` - a function accepting a `hostSelector` and a `shadowSelector` to apply to the styles.

Note the difference in naming, `hostAttribute` is the attribute name, while the factory excepts a selector `[attr]`. This changes is necessary to be able to generate at runtime both native and synthetic shadow compatible stylesheets.

Changes:
* Make changes to the CSS transform, it nows accepts 2 parameters a `hostSelector` and a `shadowSelector`.
* Update the compiler produce the new `Stylesheet` format for runtime consumption
* Update references to `styleToken` in the engine code to `styleAttribute` to better match the actual purpose

* [ ] Yes
* [X] No - as long as nobody is invoking the CSS transform manually since it's signature changed

fix: removed file missed during squash

packages/lwc-compiler/src/__tests__/fixtures/expected-dev-mode.js

@@ -1,6 +1,6 @@
 define('x-class_and_template', ['lwc'], function (lwc) {
 
-const style = undefined;
+const stylesheet = undefined;
 
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
@@ -12,15 +12,8 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     }, [])];
 }
 
-if (style) {
-    tmpl.hostToken = 'x-class_and_template_class_and_template-host';
-    tmpl.shadowToken = 'x-class_and_template_class_and_template';
-
-    const style$$1 = document.createElement('style');
-    style$$1.type = 'text/css';
-    style$$1.dataset.token = 'x-class_and_template_class_and_template';
-    style$$1.textContent = style('x-class_and_template_class_and_template');
-    document.head.appendChild(style$$1);
+if (stylesheet) {
+    tmpl.stylesheet = stylesheet;
 }
 
 const Test = 1;

packages/lwc-compiler/src/__tests__/fixtures/expected-node-env-dev.js

@@ -1,18 +1,8 @@
 import { registerTemplate, LightningElement } from 'lwc';
-const style = undefined;
 function tmpl($api, $cmp, $slotset, $ctx) {
     return [];
 }
 var _tmpl = registerTemplate(tmpl);
-if (style) {
-    tmpl.hostToken = 'x-node_env_node_env-host';
-    tmpl.shadowToken = 'x-node_env_node_env';
-    const style$$1 = document.createElement('style');
-    style$$1.type = 'text/css';
-    style$$1.dataset.token = 'x-node_env_node_env';
-    style$$1.textContent = style('x-node_env_node_env');
-    document.head.appendChild(style$$1);
-}
 class ClassAndTemplate extends LightningElement {
     connectedCallback() {
         {

packages/lwc-compiler/src/__tests__/fixtures/expected-node-env-prod.js

@@ -1,18 +1,8 @@
 import { registerTemplate, LightningElement } from 'lwc';
-const style = undefined;
 function tmpl($api, $cmp, $slotset, $ctx) {
     return [];
 }
 var _tmpl = registerTemplate(tmpl);
-if (style) {
-    tmpl.hostToken = 'x-node_env_node_env-host';
-    tmpl.shadowToken = 'x-node_env_node_env';
-    const style$$1 = document.createElement('style');
-    style$$1.type = 'text/css';
-    style$$1.dataset.token = 'x-node_env_node_env';
-    style$$1.textContent = style('x-node_env_node_env');
-    document.head.appendChild(style$$1);
-}
 class ClassAndTemplate extends LightningElement {
     connectedCallback() {
         this.root.querySelector('outsideOfProductionCheck');

packages/lwc-compiler/src/__tests__/fixtures/expected-ns-css.js

@@ -19,14 +19,7 @@ define('namespace/css-local', ['lwc'], function (lwc) {
     }
 
     if (style) {
-        tmpl.hostToken = 'namespace-css-local_css-local-host';
-        tmpl.shadowToken = 'namespace-css-local_css-local';
-
-        const style$$1 = document.createElement('style');
-        style$$1.type = 'text/css';
-        style$$1.dataset.token = 'namespace-css-local_css-local';
-        style$$1.textContent = style('namespace-css-local_css-local');
-        document.head.appendChild(style$$1);
+        tmpl.stylesheet = style;
     }
 
     class App extends lwc.LightningElement {

packages/lwc-compiler/src/__tests__/fixtures/expected-ns-html-local-import.js

@@ -1,6 +1,6 @@
 define('namespace/html-local-import', ['namespace/importedTemplate', 'lwc'], function (_namespaceImportedTemplate, lwc) {
 
-    const style = undefined;
+    const stylesheet = undefined;
 
     function tmpl($api, $cmp, $slotset, $ctx) {
       const {
@@ -17,15 +17,8 @@ define('namespace/html-local-import', ['namespace/importedTemplate', 'lwc'], fun
       }, [])];
     }
 
-    if (style) {
-        tmpl.hostToken = 'namespace-html-local-import_html-local-import-host';
-        tmpl.shadowToken = 'namespace-html-local-import_html-local-import';
-
-        const style$$1 = document.createElement('style');
-        style$$1.type = 'text/css';
-        style$$1.dataset.token = 'namespace-html-local-import_html-local-import';
-        style$$1.textContent = style('namespace-html-local-import_html-local-import');
-        document.head.appendChild(style$$1);
+    if (stylesheet) {
+        tmpl.stylesheet = stylesheet;
     }
 
     class App extends lwc.LightningElement {

packages/lwc-compiler/src/__tests__/fixtures/expected-ns-js-local-import.js

@@ -1,6 +1,6 @@
 define('namespace/js-local-import', ['lwc', 'namespace/utils'], function (lwc, utils) {
 
-    const style = undefined;
+    const stylesheet = undefined;
 
     function tmpl($api, $cmp, $slotset, $ctx) {
       const {
@@ -13,15 +13,8 @@ define('namespace/js-local-import', ['lwc', 'namespace/utils'], function (lwc, u
       }, [api_dynamic($cmp.myname)])];
     }
 
-    if (style) {
-        tmpl.hostToken = 'namespace-js-local-import_js-local-import-host';
-        tmpl.shadowToken = 'namespace-js-local-import_js-local-import';
-
-        const style$$1 = document.createElement('style');
-        style$$1.type = 'text/css';
-        style$$1.dataset.token = 'namespace-js-local-import_js-local-import';
-        style$$1.textContent = style('namespace-js-local-import_js-local-import');
-        document.head.appendChild(style$$1);
+    if (stylesheet) {
+        tmpl.stylesheet = stylesheet;
     }
 
     function method(name) {

packages/lwc-compiler/src/__tests__/fixtures/expected-sources-metadata.js

@@ -2,7 +2,6 @@ import _xBar from 'x/bar';
 import { registerTemplate, LightningElement } from 'lwc';
 import { getTodo } from 'todo';
 import { getHello } from '@schema/foo.bar';
-const style = undefined;
 function tmpl($api, $cmp, $slotset, $ctx) {
     const {
         c: api_custom_element
@@ -12,15 +11,6 @@ function tmpl($api, $cmp, $slotset, $ctx) {
     }, [])];
 }
 var _tmpl = registerTemplate(tmpl);
-if (style) {
-    tmpl.hostToken = 'x-foo_foo-host';
-    tmpl.shadowToken = 'x-foo_foo';
-    const style$$1 = document.createElement('style');
-    style$$1.type = 'text/css';
-    style$$1.dataset.token = 'x-foo_foo';
-    style$$1.textContent = style('x-foo_foo');
-    document.head.appendChild(style$$1);
-}
 class Metadata extends LightningElement {
     constructor(...args) {
         super(...args);

packages/lwc-compiler/src/__tests__/fixtures/expected-styled.js

@@ -1,23 +1,29 @@
 import _xFoo from 'x/foo';
 import { registerTemplate, LightningElement } from 'lwc';
 
-function style(token) {
+function factory(hostSelector, shadowSelector) {
     return `:host {
     color: blue;
 }
 
-[${token}-host] {
+${hostSelector} {
     color: blue;
 }
-div[${token}] {
+div${shadowSelector} {
     color: red;
 }
-x-foo[${token}],[is="x-foo"][${token}] {
+x-foo${shadowSelector},[is="x-foo"]${shadowSelector} {
     color: green;
 }
     `;
 }
 
+var stylesheet = {
+    factory,
+    hostAttribute: 'x-styled_styled-host',
+    shadowAttribute: 'x-styled_styled',
+};
+
 function tmpl($api, $cmp, $slotset, $ctx) {
   const {
     h: api_element,
@@ -30,15 +36,11 @@ function tmpl($api, $cmp, $slotset, $ctx) {
         key: 2
     }, [])];
 }
+
 var _tmpl = registerTemplate(tmpl);
-if (style) {
-    tmpl.hostToken = 'x-styled_styled-host';
-    tmpl.shadowToken = 'x-styled_styled';
-    const style$$1 = document.createElement('style');
-    style$$1.type = 'text/css';
-    style$$1.dataset.token = 'x-styled_styled';
-    style$$1.textContent = style('x-styled_styled');
-    document.head.appendChild(style$$1);
+
+if (stylesheet) {
+    tmpl.stylesheet = stylesheet;
 }
 
 class Styled extends LightningElement {

packages/lwc-compiler/src/compiler/__tests__/result.spec.ts

@@ -235,35 +235,43 @@ export default class Test extends LightningElement {
                 column: 16,
             });
 
-            expect(mainDefMappedToOutputPosition.line).toBe(23);
-            expect(mainDefMappedToOutputPosition.column).toBe(11);
+            expect(mainDefMappedToOutputPosition).toMatchObject({
+                line: 10,
+                column: 11,
+            });
 
             const stringConstantInOutputPosition = sourceMapConsumer.generatedPositionFor({
                 source: 'utils/util.js',
                 line: 2,
                 column: 9,
             });
 
-            expect(stringConstantInOutputPosition.line).toBe(24);
-            expect(stringConstantInOutputPosition.column).toBe(11);
+            expect(stringConstantInOutputPosition).toMatchObject({
+                line: 11,
+                column: 11,
+            });
 
             const myimportDefinitionOutputPosition = sourceMapConsumer.generatedPositionFor({
                 source: 'foo.js',
                 line: 4,
                 column: 6,
             });
 
-            expect(myimportDefinitionOutputPosition.line).toBe(28);
-            expect(myimportDefinitionOutputPosition.column).toBe(8);
+            expect(myimportDefinitionOutputPosition).toMatchObject({
+                line: 15,
+                column: 8,
+            });
 
             const mainInvocationInOutputPosition = sourceMapConsumer.generatedPositionFor({
                 source: 'foo.js',
                 line: 5,
                 column: 11,
             });
 
-            expect(mainInvocationInOutputPosition.line).toBe(29);
-            expect(mainInvocationInOutputPosition.column).toBe(13);
+            expect(mainInvocationInOutputPosition).toMatchObject({
+                line: 16,
+                column: 13,
+            });
         });
     });
 });

packages/lwc-compiler/src/rollup-plugins/__tests__/module-resolver.spec.ts

@@ -33,35 +33,29 @@ describe("module resolver", () => {
         const { success, result } = await compile(noOutputConfig);
 
         expect(success).toBe(true);
-        expect(pretify(result.code)).toMatch(
+        expect(pretify(result.code)).toBe(
             pretify(`define('x/class_and_template', ['lwc'], function (lwc) {
-                const style = undefined;
                 function tmpl($api, $cmp, $slotset, $ctx) {
-                const {
-                t: api_text,
-                h: api_element
-                } = $api;
-                return [api_element(\"p\", {
-                key: 1
-                }, [api_text(\"Manually Imported Template\")])];
+                    const {
+                        t: api_text,
+                        h: api_element
+                    } = $api;
+
+                    return [api_element(\"p\", {
+                        key: 1
+                    }, [api_text(\"Manually Imported Template\")])];
                 }
+
                 var mytemplate = lwc.registerTemplate(tmpl);
-                if (style) {
-                tmpl.hostToken = 'x-class_and_template_class_and_template-host';
-                tmpl.shadowToken = 'x-class_and_template_class_and_template';
-                const style$$1 = document.createElement('style');
-                style$$1.type = 'text/css';
-                style$$1.dataset.token = 'x-class_and_template_class_and_template';
-                style$$1.textContent = style('x-class_and_template_class_and_template');
-                document.head.appendChild(style$$1);
-                }
+
                 class Test extends lwc.LightningElement {
-                render() {
-                return mytemplate;
-                }
+                    render() {
+                        return mytemplate;
+                    }
                 }
+
                 return Test;
-                });`)
+            });`)
         );
     });
     test("compiler should resolve bundle with manually imported template that does not match component name", async () => {
@@ -85,33 +79,27 @@ describe("module resolver", () => {
         expect(success).toBe(true);
         expect(pretify(result.code)).toBe(
             pretify(`define('x/class_and_template', ['lwc'], function (lwc) {
-                const style = undefined;
                 function tmpl($api, $cmp, $slotset, $ctx) {
-                const {
-                t: api_text,
-                h: api_element
-                } = $api;
-                return [api_element(\"p\", {
-                key: 1
-                }, [api_text(\"Another Template\")])];
+                    const {
+                        t: api_text,
+                        h: api_element
+                    } = $api;
+
+                    return [api_element(\"p\", {
+                        key: 1
+                    }, [api_text(\"Another Template\")])];
                 }
+
                 var mytemplate = lwc.registerTemplate(tmpl);
-                if (style) {
-                tmpl.hostToken = 'x-class_and_template_anotherTemplate-host';
-                tmpl.shadowToken = 'x-class_and_template_anotherTemplate';
-                const style$$1 = document.createElement('style');
-                style$$1.type = 'text/css';
-                style$$1.dataset.token = 'x-class_and_template_anotherTemplate';
-                style$$1.textContent = style('x-class_and_template_anotherTemplate');
-                document.head.appendChild(style$$1);
-                }
+
                 class Test extends lwc.LightningElement {
-                render() {
-                return mytemplate;
-                }
+                    render() {
+                        return mytemplate;
+                    }
                 }
+
                 return Test;
-                });`)
+            });`)
         );
     });