1 | "use strict"
|
---|
2 | // builtin tooling
|
---|
3 | const path = require("path")
|
---|
4 |
|
---|
5 | // internal tooling
|
---|
6 | const joinMedia = require("./lib/join-media")
|
---|
7 | const resolveId = require("./lib/resolve-id")
|
---|
8 | const loadContent = require("./lib/load-content")
|
---|
9 | const processContent = require("./lib/process-content")
|
---|
10 | const parseStatements = require("./lib/parse-statements")
|
---|
11 |
|
---|
12 | function AtImport(options) {
|
---|
13 | options = {
|
---|
14 | root: process.cwd(),
|
---|
15 | path: [],
|
---|
16 | skipDuplicates: true,
|
---|
17 | resolve: resolveId,
|
---|
18 | load: loadContent,
|
---|
19 | plugins: [],
|
---|
20 | addModulesDirectories: [],
|
---|
21 | ...options,
|
---|
22 | }
|
---|
23 |
|
---|
24 | options.root = path.resolve(options.root)
|
---|
25 |
|
---|
26 | // convert string to an array of a single element
|
---|
27 | if (typeof options.path === "string") options.path = [options.path]
|
---|
28 |
|
---|
29 | if (!Array.isArray(options.path)) options.path = []
|
---|
30 |
|
---|
31 | options.path = options.path.map(p => path.resolve(options.root, p))
|
---|
32 |
|
---|
33 | return {
|
---|
34 | postcssPlugin: "postcss-import",
|
---|
35 | Once(styles, { result, atRule, postcss }) {
|
---|
36 | const state = {
|
---|
37 | importedFiles: {},
|
---|
38 | hashFiles: {},
|
---|
39 | }
|
---|
40 |
|
---|
41 | if (styles.source && styles.source.input && styles.source.input.file) {
|
---|
42 | state.importedFiles[styles.source.input.file] = {}
|
---|
43 | }
|
---|
44 |
|
---|
45 | if (options.plugins && !Array.isArray(options.plugins)) {
|
---|
46 | throw new Error("plugins option must be an array")
|
---|
47 | }
|
---|
48 |
|
---|
49 | return parseStyles(result, styles, options, state, []).then(bundle => {
|
---|
50 | applyRaws(bundle)
|
---|
51 | applyMedia(bundle)
|
---|
52 | applyStyles(bundle, styles)
|
---|
53 | })
|
---|
54 |
|
---|
55 | function applyRaws(bundle) {
|
---|
56 | bundle.forEach((stmt, index) => {
|
---|
57 | if (index === 0) return
|
---|
58 |
|
---|
59 | if (stmt.parent) {
|
---|
60 | const { before } = stmt.parent.node.raws
|
---|
61 | if (stmt.type === "nodes") stmt.nodes[0].raws.before = before
|
---|
62 | else stmt.node.raws.before = before
|
---|
63 | } else if (stmt.type === "nodes") {
|
---|
64 | stmt.nodes[0].raws.before = stmt.nodes[0].raws.before || "\n"
|
---|
65 | }
|
---|
66 | })
|
---|
67 | }
|
---|
68 |
|
---|
69 | function applyMedia(bundle) {
|
---|
70 | bundle.forEach(stmt => {
|
---|
71 | if (!stmt.media.length || stmt.type === "charset") return
|
---|
72 | if (stmt.type === "import") {
|
---|
73 | stmt.node.params = `${stmt.fullUri} ${stmt.media.join(", ")}`
|
---|
74 | } else if (stmt.type === "media")
|
---|
75 | stmt.node.params = stmt.media.join(", ")
|
---|
76 | else {
|
---|
77 | const { nodes } = stmt
|
---|
78 | const { parent } = nodes[0]
|
---|
79 | const mediaNode = atRule({
|
---|
80 | name: "media",
|
---|
81 | params: stmt.media.join(", "),
|
---|
82 | source: parent.source,
|
---|
83 | })
|
---|
84 |
|
---|
85 | parent.insertBefore(nodes[0], mediaNode)
|
---|
86 |
|
---|
87 | // remove nodes
|
---|
88 | nodes.forEach(node => {
|
---|
89 | node.parent = undefined
|
---|
90 | })
|
---|
91 |
|
---|
92 | // better output
|
---|
93 | nodes[0].raws.before = nodes[0].raws.before || "\n"
|
---|
94 |
|
---|
95 | // wrap new rules with media query
|
---|
96 | mediaNode.append(nodes)
|
---|
97 |
|
---|
98 | stmt.type = "media"
|
---|
99 | stmt.node = mediaNode
|
---|
100 | delete stmt.nodes
|
---|
101 | }
|
---|
102 | })
|
---|
103 | }
|
---|
104 |
|
---|
105 | function applyStyles(bundle, styles) {
|
---|
106 | styles.nodes = []
|
---|
107 |
|
---|
108 | // Strip additional statements.
|
---|
109 | bundle.forEach(stmt => {
|
---|
110 | if (["charset", "import", "media"].includes(stmt.type)) {
|
---|
111 | stmt.node.parent = undefined
|
---|
112 | styles.append(stmt.node)
|
---|
113 | } else if (stmt.type === "nodes") {
|
---|
114 | stmt.nodes.forEach(node => {
|
---|
115 | node.parent = undefined
|
---|
116 | styles.append(node)
|
---|
117 | })
|
---|
118 | }
|
---|
119 | })
|
---|
120 | }
|
---|
121 |
|
---|
122 | function parseStyles(result, styles, options, state, media) {
|
---|
123 | const statements = parseStatements(result, styles)
|
---|
124 |
|
---|
125 | return Promise.resolve(statements)
|
---|
126 | .then(stmts => {
|
---|
127 | // process each statement in series
|
---|
128 | return stmts.reduce((promise, stmt) => {
|
---|
129 | return promise.then(() => {
|
---|
130 | stmt.media = joinMedia(media, stmt.media || [])
|
---|
131 |
|
---|
132 | // skip protocol base uri (protocol://url) or protocol-relative
|
---|
133 | if (
|
---|
134 | stmt.type !== "import" ||
|
---|
135 | /^(?:[a-z]+:)?\/\//i.test(stmt.uri)
|
---|
136 | ) {
|
---|
137 | return
|
---|
138 | }
|
---|
139 |
|
---|
140 | if (options.filter && !options.filter(stmt.uri)) {
|
---|
141 | // rejected by filter
|
---|
142 | return
|
---|
143 | }
|
---|
144 |
|
---|
145 | return resolveImportId(result, stmt, options, state)
|
---|
146 | })
|
---|
147 | }, Promise.resolve())
|
---|
148 | })
|
---|
149 | .then(() => {
|
---|
150 | let charset
|
---|
151 | const imports = []
|
---|
152 | const bundle = []
|
---|
153 |
|
---|
154 | function handleCharset(stmt) {
|
---|
155 | if (!charset) charset = stmt
|
---|
156 | // charsets aren't case-sensitive, so convert to lower case to compare
|
---|
157 | else if (
|
---|
158 | stmt.node.params.toLowerCase() !==
|
---|
159 | charset.node.params.toLowerCase()
|
---|
160 | ) {
|
---|
161 | throw new Error(
|
---|
162 | `Incompatable @charset statements:
|
---|
163 | ${stmt.node.params} specified in ${stmt.node.source.input.file}
|
---|
164 | ${charset.node.params} specified in ${charset.node.source.input.file}`
|
---|
165 | )
|
---|
166 | }
|
---|
167 | }
|
---|
168 |
|
---|
169 | // squash statements and their children
|
---|
170 | statements.forEach(stmt => {
|
---|
171 | if (stmt.type === "charset") handleCharset(stmt)
|
---|
172 | else if (stmt.type === "import") {
|
---|
173 | if (stmt.children) {
|
---|
174 | stmt.children.forEach((child, index) => {
|
---|
175 | if (child.type === "import") imports.push(child)
|
---|
176 | else if (child.type === "charset") handleCharset(child)
|
---|
177 | else bundle.push(child)
|
---|
178 | // For better output
|
---|
179 | if (index === 0) child.parent = stmt
|
---|
180 | })
|
---|
181 | } else imports.push(stmt)
|
---|
182 | } else if (stmt.type === "media" || stmt.type === "nodes") {
|
---|
183 | bundle.push(stmt)
|
---|
184 | }
|
---|
185 | })
|
---|
186 |
|
---|
187 | return charset
|
---|
188 | ? [charset, ...imports.concat(bundle)]
|
---|
189 | : imports.concat(bundle)
|
---|
190 | })
|
---|
191 | }
|
---|
192 |
|
---|
193 | function resolveImportId(result, stmt, options, state) {
|
---|
194 | const atRule = stmt.node
|
---|
195 | let sourceFile
|
---|
196 | if (atRule.source && atRule.source.input && atRule.source.input.file) {
|
---|
197 | sourceFile = atRule.source.input.file
|
---|
198 | }
|
---|
199 | const base = sourceFile
|
---|
200 | ? path.dirname(atRule.source.input.file)
|
---|
201 | : options.root
|
---|
202 |
|
---|
203 | return Promise.resolve(options.resolve(stmt.uri, base, options))
|
---|
204 | .then(paths => {
|
---|
205 | if (!Array.isArray(paths)) paths = [paths]
|
---|
206 | // Ensure that each path is absolute:
|
---|
207 | return Promise.all(
|
---|
208 | paths.map(file => {
|
---|
209 | return !path.isAbsolute(file)
|
---|
210 | ? resolveId(file, base, options)
|
---|
211 | : file
|
---|
212 | })
|
---|
213 | )
|
---|
214 | })
|
---|
215 | .then(resolved => {
|
---|
216 | // Add dependency messages:
|
---|
217 | resolved.forEach(file => {
|
---|
218 | result.messages.push({
|
---|
219 | type: "dependency",
|
---|
220 | plugin: "postcss-import",
|
---|
221 | file,
|
---|
222 | parent: sourceFile,
|
---|
223 | })
|
---|
224 | })
|
---|
225 |
|
---|
226 | return Promise.all(
|
---|
227 | resolved.map(file => {
|
---|
228 | return loadImportContent(result, stmt, file, options, state)
|
---|
229 | })
|
---|
230 | )
|
---|
231 | })
|
---|
232 | .then(result => {
|
---|
233 | // Merge loaded statements
|
---|
234 | stmt.children = result.reduce((result, statements) => {
|
---|
235 | return statements ? result.concat(statements) : result
|
---|
236 | }, [])
|
---|
237 | })
|
---|
238 | }
|
---|
239 |
|
---|
240 | function loadImportContent(result, stmt, filename, options, state) {
|
---|
241 | const atRule = stmt.node
|
---|
242 | const { media } = stmt
|
---|
243 | if (options.skipDuplicates) {
|
---|
244 | // skip files already imported at the same scope
|
---|
245 | if (
|
---|
246 | state.importedFiles[filename] &&
|
---|
247 | state.importedFiles[filename][media]
|
---|
248 | ) {
|
---|
249 | return
|
---|
250 | }
|
---|
251 |
|
---|
252 | // save imported files to skip them next time
|
---|
253 | if (!state.importedFiles[filename]) state.importedFiles[filename] = {}
|
---|
254 | state.importedFiles[filename][media] = true
|
---|
255 | }
|
---|
256 |
|
---|
257 | return Promise.resolve(options.load(filename, options)).then(
|
---|
258 | content => {
|
---|
259 | if (content.trim() === "") {
|
---|
260 | result.warn(`${filename} is empty`, { node: atRule })
|
---|
261 | return
|
---|
262 | }
|
---|
263 |
|
---|
264 | // skip previous imported files not containing @import rules
|
---|
265 | if (state.hashFiles[content] && state.hashFiles[content][media])
|
---|
266 | return
|
---|
267 |
|
---|
268 | return processContent(
|
---|
269 | result,
|
---|
270 | content,
|
---|
271 | filename,
|
---|
272 | options,
|
---|
273 | postcss
|
---|
274 | ).then(importedResult => {
|
---|
275 | const styles = importedResult.root
|
---|
276 | result.messages = result.messages.concat(importedResult.messages)
|
---|
277 |
|
---|
278 | if (options.skipDuplicates) {
|
---|
279 | const hasImport = styles.some(child => {
|
---|
280 | return child.type === "atrule" && child.name === "import"
|
---|
281 | })
|
---|
282 | if (!hasImport) {
|
---|
283 | // save hash files to skip them next time
|
---|
284 | if (!state.hashFiles[content]) state.hashFiles[content] = {}
|
---|
285 | state.hashFiles[content][media] = true
|
---|
286 | }
|
---|
287 | }
|
---|
288 |
|
---|
289 | // recursion: import @import from imported file
|
---|
290 | return parseStyles(result, styles, options, state, media)
|
---|
291 | })
|
---|
292 | }
|
---|
293 | )
|
---|
294 | }
|
---|
295 | },
|
---|
296 | }
|
---|
297 | }
|
---|
298 |
|
---|
299 | AtImport.postcss = true
|
---|
300 |
|
---|
301 | module.exports = AtImport
|
---|