From 432977e751de97d17310ff09d95b8ca5ed4cde14 Mon Sep 17 00:00:00 2001 From: Manuel Mujica Date: Mon, 24 Apr 2017 15:17:19 -0600 Subject: [PATCH] Test local css imports in production - Update steal and steal-tools: steal-tools@1.3.2 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. --- package.json | 4 ++-- test/create-builds.js | 6 +++++- test/css-local-import/build.js | 8 ++++++++ test/css-local-import/foo.css | 3 +++ test/css-local-import/main.css | 5 +++++ test/css-local-import/main.js | 12 ++++++++++++ test/css-local-import/prod.html | 22 ++++++++++++++++++++++ test/css-local-import/stealconfig.js | 11 +++++++++++ test/css-paths/folder/main.css | 2 +- test/test.js | 6 +++++- 10 files changed, 74 insertions(+), 5 deletions(-) create mode 100644 test/css-local-import/build.js create mode 100644 test/css-local-import/foo.css create mode 100644 test/css-local-import/main.css create mode 100644 test/css-local-import/main.js create mode 100644 test/css-local-import/prod.html create mode 100644 test/css-local-import/stealconfig.js diff --git a/package.json b/package.json index d8f8cad..5795475 100644 --- 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 index edb9b21..c4925fc 100644 --- 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 new file mode 100644 index 0000000..aeb9e8a --- /dev/null +++ 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 new file mode 100644 index 0000000..92f08e5 --- /dev/null +++ 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 new file mode 100644 index 0000000..3738ceb --- /dev/null +++ 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 new file mode 100644 index 0000000..b507abd --- /dev/null +++ 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 new file mode 100644 index 0000000..19e2436 --- /dev/null +++ b/test/css-local-import/prod.html @@ -0,0 +1,22 @@ + + + + + css local @import + + + +

+ 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. +

+ + + diff --git a/test/css-local-import/stealconfig.js b/test/css-local-import/stealconfig.js new file mode 100644 index 0000000..d56b5ec --- /dev/null +++ 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 index 3763bec..587d995 100644 --- 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"); -} \ No newline at end of file +} diff --git a/test/test.js b/test/test.js index c0d7f47..7f1d0e9 100644 --- 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); });