From 3aa018f6a4d8802d2a8fe890e3f95c122c812833 Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@matthewphillips.info>
Date: Tue, 24 Jul 2018 15:19:14 -0400
Subject: [PATCH] Prevent tree shaking CSS imports

Importing CSS is always side-effectual, and should not be tree-shaken.
Fixes #1050
---
 lib/graph/treeshake.js             | 12 ++++++++++++
 test/tree_shaking_test.js          |  5 +++++
 test/treeshake/basics/css.js       |  1 +
 test/treeshake/basics/main.js      |  3 +++
 test/treeshake/basics/package.json |  5 ++++-
 test/treeshake/basics/styles.css   |  3 +++
 6 files changed, 28 insertions(+), 1 deletion(-)
 create mode 120000 test/treeshake/basics/css.js
 create mode 100644 test/treeshake/basics/styles.css

diff --git a/lib/graph/treeshake.js b/lib/graph/treeshake.js
index c767ea35..f75260a9 100644
--- a/lib/graph/treeshake.js
+++ b/lib/graph/treeshake.js
@@ -125,6 +125,14 @@ function loadFromGraph(getNode) {
 
 					return code;
 				} else {
+					// Prevent tree shaking modules that are side-effectual like CSS
+					if(sideEffectualModule(node)) {
+						return `
+							export function one() {window.ONE = {}};
+							one();
+						`.trim();
+					}
+
 					return "export default {}";
 				}
 			}
@@ -134,6 +142,10 @@ function loadFromGraph(getNode) {
 	};
 }
 
+function sideEffectualModule(node) {
+	return node && node.load.metadata.buildType === "css";
+}
+
 function transpile(getNode, data) {
 	let loader = data.loader;
 
diff --git a/test/tree_shaking_test.js b/test/tree_shaking_test.js
index fb7cd1de..e7913563 100644
--- a/test/tree_shaking_test.js
+++ b/test/tree_shaking_test.js
@@ -94,6 +94,11 @@ describe("Tree-shaking", function(){
 					assert.equal(browser.window.DEP3_SIDE_EFFECT, true,
 						"Includes a module with needed side effects.");
 				});
+
+				it("Works when the dependency is CSS", function(){
+					var mod = browser.window.steal.loader.get("treeshake@1.0.0#styles.css!treeshake@1.0.0#css");
+					assert.ok(mod, true, "Includes a CSS module");
+				});
 			})
 
 			describe("export *", function(){
diff --git a/test/treeshake/basics/css.js b/test/treeshake/basics/css.js
new file mode 120000
index 00000000..04adb859
--- /dev/null
+++ b/test/treeshake/basics/css.js
@@ -0,0 +1 @@
+../../../node_modules/steal-css/css.js
\ No newline at end of file
diff --git a/test/treeshake/basics/main.js b/test/treeshake/basics/main.js
index e7e020bc..f9ae775e 100644
--- a/test/treeshake/basics/main.js
+++ b/test/treeshake/basics/main.js
@@ -13,6 +13,9 @@ import steal from "@steal";
 // Importing a module for its side effects
 import "dep3";
 
+// CSS
+import "./styles.css";
+
 // Importing a module that itself should be tree-shaken
 import {default as dep4} from "dep4";
 
diff --git a/test/treeshake/basics/package.json b/test/treeshake/basics/package.json
index dda8e0dc..0fb406d2 100644
--- a/test/treeshake/basics/package.json
+++ b/test/treeshake/basics/package.json
@@ -11,7 +11,10 @@
     "dep5": "1.0.0"
   },
   "steal": {
-    "bundle": ["treeshake/bundle-a"]
+    "bundle": ["treeshake/bundle-a"],
+    "ext": {
+      "css": "treeshake/css"
+    }
   },
   "sideEffects": false
 }
diff --git a/test/treeshake/basics/styles.css b/test/treeshake/basics/styles.css
new file mode 100644
index 00000000..f8156954
--- /dev/null
+++ b/test/treeshake/basics/styles.css
@@ -0,0 +1,3 @@
+body {
+	color: green;
+}