1 |
|
2 | "use strict";
|
3 |
|
4 | describe("basic tests", function() {
|
5 | var path = require("path");
|
6 |
|
7 | var utils = require("./utils"),
|
8 | runCompilerTest = utils.runCompilerTest;
|
9 |
|
10 | var fs;
|
11 |
|
12 | var requiredCss = ".required { color: blue }",
|
13 | requiredCssTwo = ".requiredTwo { color: cyan }",
|
14 | localScopedCss = ":local(.className) { background: red; }",
|
15 | requiredStyle = `<style type="text/css">${requiredCss}</style>`,
|
16 | existingStyle = "<style>.existing { color: yellow }</style>",
|
17 | checkValue = '<div class="check">check</div>',
|
18 | rootDir = path.resolve(__dirname + "/../") + "/",
|
19 | jsdomHtml = [
|
20 | "<html>",
|
21 | "<head>",
|
22 | existingStyle,
|
23 | "</head>",
|
24 | "<body>",
|
25 | "<div class='target'>",
|
26 | checkValue,
|
27 | "</div>",
|
28 | "</body>",
|
29 | "</html>"
|
30 | ].join("\n");
|
31 |
|
32 | var styleLoaderOptions = {};
|
33 | var cssRule = {};
|
34 |
|
35 | var defaultCssRule = {
|
36 | test: /\.css?$/,
|
37 | use: [
|
38 | {
|
39 | loader: "style-loader",
|
40 | options: styleLoaderOptions
|
41 | },
|
42 | "css-loader"
|
43 | ]
|
44 | };
|
45 |
|
46 | var webpackConfig = {
|
47 | entry: "./main.js",
|
48 | output: {
|
49 | filename: "bundle.js"
|
50 | },
|
51 | module: {
|
52 | rules: [cssRule]
|
53 | }
|
54 | };
|
55 |
|
56 | beforeEach(function() {
|
57 |
|
58 | for (var member in styleLoaderOptions) {
|
59 | delete styleLoaderOptions[member];
|
60 | }
|
61 |
|
62 | for (var member in defaultCssRule) {
|
63 | cssRule[member] = defaultCssRule[member];
|
64 | }
|
65 |
|
66 | fs = utils.setup(webpackConfig, jsdomHtml);
|
67 |
|
68 |
|
69 | fs.mkdirpSync(rootDir);
|
70 | fs.writeFileSync(rootDir + "main.js", "var css = require('./style.css');");
|
71 | fs.writeFileSync(rootDir + "style.css", requiredCss);
|
72 | fs.writeFileSync(rootDir + "styleTwo.css", requiredCssTwo);
|
73 | fs.writeFileSync(rootDir + "localScoped.css", localScopedCss);
|
74 | });
|
75 |
|
76 | it("insert at bottom", function(done) {
|
77 | let expected = [existingStyle, requiredStyle].join("\n");
|
78 |
|
79 | runCompilerTest(expected, done);
|
80 | });
|
81 |
|
82 | it("insert at top", function(done) {
|
83 | styleLoaderOptions.insertAt = "top";
|
84 |
|
85 | let expected = [requiredStyle, existingStyle].join("\n");
|
86 |
|
87 | runCompilerTest(expected, done);
|
88 | });
|
89 |
|
90 | it("insert into", function(done) {
|
91 | let selector = "div.target";
|
92 | styleLoaderOptions.insertInto = selector;
|
93 |
|
94 | let expected = [checkValue, requiredStyle].join("\n");
|
95 |
|
96 | runCompilerTest(expected, done, undefined, selector);
|
97 | });
|
98 |
|
99 | it("singleton", function(done) {
|
100 |
|
101 | styleLoaderOptions.singleton = true;
|
102 |
|
103 | fs.writeFileSync(
|
104 | rootDir + "main.js",
|
105 | [
|
106 | "var a = require('./style.css');",
|
107 | "var b = require('./styleTwo.css');"
|
108 | ].join("\n")
|
109 | );
|
110 |
|
111 |
|
112 | let expected = [
|
113 | existingStyle,
|
114 | `<style type="text/css">${requiredCss}${requiredCssTwo}</style>`
|
115 | ].join("\n");
|
116 |
|
117 | runCompilerTest(expected, done);
|
118 | });
|
119 |
|
120 | it("attrs", function(done) {
|
121 |
|
122 | styleLoaderOptions.attrs = {id: 'style-tag-id'};
|
123 |
|
124 | fs.writeFileSync(
|
125 | rootDir + "main.js",
|
126 | [
|
127 | "var a = require('./style.css');"
|
128 | ].join("\n")
|
129 | );
|
130 |
|
131 |
|
132 | let expected = [
|
133 | existingStyle,
|
134 | `<style id="${styleLoaderOptions.attrs.id}" type="text/css">${requiredCss}</style>`
|
135 | ].join("\n");
|
136 |
|
137 | runCompilerTest(expected, done);
|
138 | });
|
139 |
|
140 | it("url", function(done) {
|
141 | cssRule.use = [
|
142 | {
|
143 | loader: "style-loader/url",
|
144 | options: {}
|
145 | },
|
146 | "file-loader"
|
147 | ];
|
148 |
|
149 |
|
150 | let expected = [
|
151 | existingStyle,
|
152 | '<link rel="stylesheet" type="text/css" href="ec9d4f4f24028c3d51bf1e7728e632ff.css">'
|
153 | ].join("\n");
|
154 |
|
155 | runCompilerTest(expected, done);
|
156 | });
|
157 |
|
158 | it("useable", function(done) {
|
159 | cssRule.use = [
|
160 | {
|
161 | loader: "style-loader/useable"
|
162 | },
|
163 | "css-loader"
|
164 | ];
|
165 |
|
166 | fs.writeFileSync(
|
167 | rootDir + "main.js",
|
168 | [
|
169 | "var css = require('./style.css');",
|
170 | "var cssTwo = require('./styleTwo.css');",
|
171 | "css.use();",
|
172 | "cssTwo.use();",
|
173 | "css.unuse();"
|
174 | ].join("\n")
|
175 | );
|
176 |
|
177 |
|
178 | let expected = [
|
179 | existingStyle,
|
180 | `<style type="text/css">${requiredCssTwo}</style>`
|
181 | ].join("\n");
|
182 |
|
183 | runCompilerTest(expected, done);
|
184 | });
|
185 |
|
186 | it("local scope", function(done) {
|
187 | cssRule.use = [
|
188 | {
|
189 | loader: "style-loader"
|
190 | },
|
191 | {
|
192 | loader: "css-loader",
|
193 | options: {
|
194 | localIdentName: '[name].[local]_[hash:base64:7]'
|
195 | }
|
196 | }
|
197 | ];
|
198 |
|
199 | fs.writeFileSync(
|
200 | rootDir + "main.js",
|
201 | [
|
202 | "css = require('./localScoped.css');"
|
203 | ].join("\n")
|
204 | );
|
205 |
|
206 | let expected = 'localScoped-className_3dIU6Uf';
|
207 | runCompilerTest(expected, done, function() { return this.css.className; });
|
208 | });
|
209 |
|
210 | it("local scope, useable", function(done) {
|
211 | cssRule.use = [
|
212 | {
|
213 | loader: "style-loader/useable"
|
214 | },
|
215 | {
|
216 | loader: "css-loader",
|
217 | options: {
|
218 | localIdentName: '[name].[local]_[hash:base64:7]'
|
219 | }
|
220 | }
|
221 | ];
|
222 |
|
223 | fs.writeFileSync(
|
224 | rootDir + "main.js",
|
225 | [
|
226 | "css = require('./localScoped.css');"
|
227 | ].join("\n")
|
228 | );
|
229 |
|
230 | let expected = 'localScoped-className_3dIU6Uf';
|
231 | runCompilerTest(expected, done, function() { return this.css.locals.className; });
|
232 | });
|
233 |
|
234 | });
|