Barak/css in js bootstrap (#323)

* Fix bootstrap to inject styles before entry is evaluated
wix · May 24, 2018 · 655bd98 · 655bd98
1 parent 6a0170c
commit 655bd98
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/packages/stylable-webpack-plugin/src/StylableBootstrapModule.js b/packages/stylable-webpack-plugin/src/StylableBootstrapModule.js
@@ -51,16 +51,18 @@ class StylableBootstrapModule extends Module {
     this.entryReplacement = entryReplacement;
   }
   source(m, runtimeTemplate) {
-    const imports = this.dependencies.map(dependency => {
+    const entry = [];
+    const imports = [];
+    this.dependencies.forEach(dependency => {
       const id = runtimeTemplate.moduleId({
         module: dependency.module,
         request: dependency.request
       });
       if (dependency.module === this.entryReplacement) {
         const moduleExports = `${this.moduleArgument}.${this.exportsArgument}`;
-        return `${moduleExports} = __webpack_require__(${id});`;
+        entry.push(`${moduleExports} = __webpack_require__(${id});`);
       } else {
-        return `__webpack_require__(${id});`;
+        imports.push(`__webpack_require__(${id});`);
       }
     });
 
@@ -82,6 +84,9 @@ class StylableBootstrapModule extends Module {
       if (this.options.autoInit) {
         renderingCode.push(`${RENDERER_SYMBOL}.init(window);`);
       }
+      if(entry.length){
+        renderingCode.push(...entry);
+      }
 
       this.__source = new RawSource(renderingCode.join(EOL));
     } else {

diff --git a/packages/stylable-webpack-plugin/test/e2e/helpers/puppeteer-helpers.js b/packages/stylable-webpack-plugin/test/e2e/helpers/puppeteer-helpers.js
@@ -19,7 +19,7 @@ function getStyleElementsMetadata(getCss) {
       data.theme = true;
     }
     if (getCss) {
-      data.css = styleEl.textContent;
+      data.css = styleEl.textContent.replace(/\r?\n/g, '\n');
     }
     return data;
   });

diff --git a/packages/stylable-webpack-plugin/test/e2e/projects/simplest-project/src/index.js b/packages/stylable-webpack-plugin/test/e2e/projects/simplest-project/src/index.js
@@ -1,3 +1,4 @@
 import index from "./index.st.css";
 
 document.documentElement.classList.add(index.root);
+window.backgroundColorAtLoadTime = getComputedStyle(document.documentElement).backgroundColor;
diff --git a/packages/stylable-webpack-plugin/test/e2e/simplest-project.spec.js b/packages/stylable-webpack-plugin/test/e2e/simplest-project.spec.js
@@ -31,6 +31,15 @@ describe("(simplest-project)", () => {
     expect(styleElements).to.eql([{ id: "./src/index.st.css", depth: "1" }]);
   });
 
+  it("css is injected before entry running", async () => {
+    const { page } = await projectRunner.openInBrowser();
+    const backgroundColor = await page.evaluate(() => {
+      return window.backgroundColorAtLoadTime;
+    });
+
+    expect(backgroundColor).to.eql("rgb(255, 0, 0)");
+  });
+
   it("css is working", async () => {
     const { page } = await projectRunner.openInBrowser();
     const backgroundColor = await page.evaluate(() => {