Test local css imports in production

- Update steal and steal-tools: [email protected] includes the fix to make the local css @import test pass. - Update test assertion text: Local css imports are not inlined in production but they should still work.
stealjs · Jun 27, 2017 · 432977e · 432977e
1 parent 10b18c4
commit 432977e
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -33,10 +33,10 @@
     "http-server": "^0.10.0",
     "qunitjs": "~2.1.0",
     "saucelabs": "^1.4.0",
-    "steal": "^1.0.0",
+    "steal": "^1.5.1",
     "steal-qunit": "^1.0.0",
     "steal-test-helpers": "^0.2.0",
-    "steal-tools": "^1.0.0",
+    "steal-tools": "^1.3.3",
     "test-saucelabs": "0.0.1",
     "testee": "^0.5.0",
     "wd": "^1.2.0"

diff --git a/test/create-builds.js b/test/create-builds.js
@@ -10,5 +10,9 @@ Promise.resolve()
 	})
 	.then(function() {
 		console.log("\ncreating build for css-instantiated");
-		return require("./css-instantiated/build.js");
+		return require("./css-instantiated/build");
+	})
+	.then(function() {
+		console.log("\ncreating build for css-local-import");
+		return require("./css-local-import/build");
 	});
diff --git a/test/css-local-import/build.js b/test/css-local-import/build.js
@@ -0,0 +1,8 @@
+var path = require("path");
+var stealTools = require("steal-tools");
+
+module.exports = stealTools.build({
+	main: "main",
+	config: path.join(__dirname, "stealconfig.js")
+}, {
+});
diff --git a/test/css-local-import/foo.css b/test/css-local-import/foo.css
@@ -0,0 +1,3 @@
+p {
+  font-size: 30px;
+}
diff --git a/test/css-local-import/main.css b/test/css-local-import/main.css
@@ -0,0 +1,5 @@
+@import url("foo.css");
+
+body {
+  padding-top: 50px;
+}
diff --git a/test/css-local-import/main.js b/test/css-local-import/main.js
@@ -0,0 +1,12 @@
+require("./main.css");
+
+var p = document.getElementsByTagName("p").item(0);
+var s = getComputedStyle(p);
+
+if (window.assert) {
+	assert.equal(s.fontSize, "30px", "should load the @import");
+	done();
+}
+else {
+	console.log("fontSize: ", s.fontSize);
+}
diff --git a/test/css-local-import/prod.html b/test/css-local-import/prod.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>css local @import</title>
+</head>
+<body>
+	<script>
+		window.done = window.parent.done;
+		window.assert = window.parent.assert;
+	</script>
+	<p>
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.
+		Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at
+		nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec
+		tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget
+		nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
+		per inceptos himenaeos.
+	</p>
+	<script src="./dist/steal.production.js"></script>
+</body>
+</html>
diff --git a/test/css-local-import/stealconfig.js b/test/css-local-import/stealconfig.js
@@ -0,0 +1,11 @@
+steal.config({
+	ext: {
+		"css": "steal-css"
+	},
+	paths: {
+		"steal-css": "../../css.js"
+	},
+	cssOptions: {
+		timeout: '15'
+	}
+});
diff --git a/test/css-paths/folder/main.css b/test/css-paths/folder/main.css
@@ -6,4 +6,4 @@
 }
 #test-relative {
 	background-image: url("locate://bootstrap/other.png");
-}
+}
diff --git a/test/test.js b/test/test.js
@@ -32,5 +32,9 @@ QUnit.test("css files starting with attribute selectors work", function(assert)
 });
 
 QUnit.test("should handle IE8/9 stylesheet limit", function(assert) {
-	makeIframe("ie-stylesheet-limit/dev.html", assert)
+	makeIframe("ie-stylesheet-limit/dev.html", assert);
+});
+
+QUnit.test("local @import should work in production", function(assert) {
+	makeIframe("css-local-import/prod.html", assert);
 });