test(ssr): add static stylesheets fixtures (#4572)

packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets-dynamic-render/expected.html

@@ -0,0 +1,19 @@
+<x-stylish class="lwc-72njdrv8nr1-host">
+ <template shadowrootmode="open">
+ <style class="lwc-72njdrv8nr1" type="text/css">
+ h1 {border: 1px solid goldenrod;}
+ </style>
+ <style class="lwc-72njdrv8nr1" type="text/css">
+ h1.lwc-72njdrv8nr1 {outline: 2px solid chartreuse;}
+ </style>
+ <style class="lwc-72njdrv8nr1" type="text/css">
+ h1 {background: royalblue;}
+ </style>
+ <style class="lwc-72njdrv8nr1" type="text/css">
+ h1.lwc-72njdrv8nr1 {color: cornsilk;}
+ </style>
+ <h1 class="lwc-72njdrv8nr1">
+ hello
+ </h1>
+ </template>
+</x-stylish>

packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets-dynamic-render/index.js

@@ -0,0 +1,3 @@
+export const tagName = 'x-stylish';
+export { default } from 'x/stylish';
+export * from 'x/stylish';

packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets-dynamic-render/modules/x/stylish/dazzling.css

@@ -0,0 +1,3 @@
+h1 {
+ border: 1px solid goldenrod;
+}

packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets-dynamic-render/modules/x/stylish/dazzling.html

@@ -0,0 +1,3 @@
+<template>
+ <h1>hello</h1>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets-dynamic-render/modules/x/stylish/dazzling.scoped.css

@@ -0,0 +1,3 @@
+h1 {
+ outline: 2px solid chartreuse;
+}

packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets-dynamic-render/modules/x/stylish/glamorous.css

@@ -0,0 +1,3 @@
+h1 {
+ background: royalblue;
+}

packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets-dynamic-render/modules/x/stylish/snazzy.scoped.css

@@ -0,0 +1,3 @@
+h1 {
+ color: cornsilk;
+}

packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets-dynamic-render/modules/x/stylish/stylish.js

@@ -0,0 +1,12 @@
+import { LightningElement } from 'lwc';
+import glamorous from './glamorous.css'
+import snazzy from './snazzy.scoped.css'
+import dazzling from './dazzling.html'
+
+export default class extends LightningElement {
+ static stylesheets = [glamorous, snazzy]
+
+ render() {
+ return dazzling;
+ }
+}

packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/expected.html

@@ -0,0 +1,13 @@
+<x-stylish class="lwc-1l667kdb4s5-host">
+ <template shadowrootmode="open">
+ <style class="lwc-1l667kdb4s5" type="text/css">
+ h1 {background: royalblue;}
+ </style>
+ <style class="lwc-1l667kdb4s5" type="text/css">
+ h1.lwc-1l667kdb4s5 {color: cornsilk;}
+ </style>
+ <h1 class="lwc-1l667kdb4s5">
+ hello
+ </h1>
+ </template>
+</x-stylish>

packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/index.js

@@ -0,0 +1,3 @@
+export const tagName = 'x-stylish';
+export { default } from 'x/stylish';
+export * from 'x/stylish';

packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/modules/x/stylish/glamorous.css

@@ -0,0 +1,3 @@
+h1 {
+ background: royalblue;
+}

packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/modules/x/stylish/snazzy.scoped.css

@@ -0,0 +1,3 @@
+h1 {
+ color: cornsilk;
+}

packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/modules/x/stylish/stylish.html

@@ -0,0 +1,3 @@
+<template>
+ <h1>hello</h1>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/static-stylesheets/modules/x/stylish/stylish.js

@@ -0,0 +1,7 @@
+import { LightningElement } from 'lwc';
+import glamorous from './glamorous.css'
+import snazzy from './snazzy.scoped.css'
+
+export default class extends LightningElement {
+ static stylesheets = [glamorous, snazzy]
+}