1 | import {gray} from 'kleur/colors'
|
2 | import path from 'path'
|
3 | import fs from 'fs'
|
4 | import stream from 'stream'
|
5 | import {promisify} from 'util'
|
6 | import postcss from 'postcss'
|
7 | import csso from 'csso'
|
8 | import selectorTokenizer from 'css-selector-tokenizer'
|
9 | import chokidar from 'chokidar'
|
10 | import sqlite3 from 'sqlite3'
|
11 | import shorthandLonghands from './lib/shorthand-longhands.js'
|
12 | import getClassNames from './lib/get-selectors.js'
|
13 | import createGetUniqueID from './lib/create-get-unique-id.js'
|
14 |
|
15 | const finished = promisify(stream.finished)
|
16 | const mkdir = promisify(fs.mkdir)
|
17 | const createWriteStream = fs.createWriteStream
|
18 |
|
19 | const buildData = async (db, node, context = {}) => {
|
20 | if (node.type === 'decl') {
|
21 | const prop = node.prop
|
22 | const value = node.value
|
23 |
|
24 | await db.run(
|
25 | 'INSERT INTO name (name, namespace) VALUES (?, ?) ON CONFLICT (name, namespace) DO NOTHING',
|
26 | context.name,
|
27 | context.namespace
|
28 | )
|
29 |
|
30 | const {nameID} = await db.get(
|
31 | 'SELECT id as nameID FROM name WHERE name = ? AND namespace = ?',
|
32 | context.name,
|
33 | context.namespace
|
34 | )
|
35 |
|
36 | await db.run(
|
37 | 'INSERT INTO decl (atruleID, nameID, pseudo, prop, value) VALUES (?, ?, ?, ?, ?) ON CONFLICT (atruleID, nameID, pseudo, prop) DO UPDATE set value = ?',
|
38 | context.parentAtruleID ?? 0,
|
39 | nameID,
|
40 | context.pseudo ?? '',
|
41 | prop,
|
42 | value,
|
43 | value
|
44 | )
|
45 | } else if (node.type === 'atrule') {
|
46 | const atruleName = `@${node.name} ${node.params}`
|
47 |
|
48 | await db.run(
|
49 | 'INSERT INTO atrule (parentAtruleID, name) VALUES (?, ?) ON CONFLICT (parentAtruleID, name) DO NOTHING',
|
50 | context.parentAtruleID ?? 0,
|
51 | atruleName
|
52 | )
|
53 |
|
54 | const {atruleID} = await db.get(
|
55 | 'SELECT id as atruleID FROM atrule WHERE parentAtruleID = ? AND name = ?',
|
56 | context.parentAtruleID ?? 0,
|
57 | atruleName
|
58 | )
|
59 |
|
60 | await db.run(
|
61 | 'INSERT INTO name (name, namespace) VALUES (?, ?) ON CONFLICT (name, namespace) DO NOTHING',
|
62 | context.name,
|
63 | context.namespace
|
64 | )
|
65 |
|
66 | const {nameID} = await db.get(
|
67 | 'SELECT id as nameID FROM name WHERE name = ? AND namespace = ?',
|
68 | context.name,
|
69 | context.namespace
|
70 | )
|
71 |
|
72 | await db.run(
|
73 | 'INSERT INTO atrulePosition (atruleID, position, nameID) VALUES (?, ?, ?)',
|
74 | atruleID,
|
75 | context.position++,
|
76 | nameID
|
77 | )
|
78 |
|
79 | for (const n of node.nodes) {
|
80 | await buildData(db, n, {
|
81 | ...context,
|
82 | position: 0,
|
83 | parentAtruleID: atruleID
|
84 | })
|
85 | }
|
86 | } else if (node.type === 'rule') {
|
87 | if (context.pseudo) throw Error('nested rule found')
|
88 |
|
89 | const parsed = selectorTokenizer.parse(node.selector)
|
90 |
|
91 | await Promise.all(
|
92 | parsed.nodes.map(async (n) => {
|
93 | for (const nn of n.nodes) {
|
94 | if (nn.type.startsWith('pseudo')) continue
|
95 |
|
96 | throw Error('non-pseudo selector found')
|
97 | }
|
98 |
|
99 | const pseudo = selectorTokenizer.stringify(n).trim()
|
100 |
|
101 | for (const n of node.nodes) {
|
102 | await buildData(db, n, {...context, pseudo})
|
103 | }
|
104 | })
|
105 | )
|
106 | }
|
107 | }
|
108 |
|
109 | const run = async (args, importAndWatch) => {
|
110 | const dbinstance = new sqlite3.Database(':memory:')
|
111 |
|
112 | const db = {
|
113 | exec: promisify(dbinstance.exec.bind(dbinstance)),
|
114 | all: promisify(dbinstance.all.bind(dbinstance)),
|
115 | get: promisify(dbinstance.get.bind(dbinstance)),
|
116 | run: promisify(dbinstance.run.bind(dbinstance))
|
117 | }
|
118 |
|
119 | await db.exec(`
|
120 | CREATE TABLE name (
|
121 | id INTEGER PRIMARY KEY,
|
122 | name TEXT,
|
123 | namespace TEXT
|
124 | );
|
125 |
|
126 | CREATE TABLE decl (
|
127 | id INTEGER PRIMARY KEY,
|
128 | atruleID INTEGER,
|
129 | nameID INTEGER,
|
130 | pseudo TEXT,
|
131 | prop TEXT,
|
132 | value TEXT
|
133 | );
|
134 |
|
135 | CREATE TABLE atrule (
|
136 | id INTEGER PRIMARY KEY,
|
137 | parentAtruleID INTEGER,
|
138 | name TEXT
|
139 | );
|
140 |
|
141 | CREATE TABLE atrulePosition (
|
142 | id INTEGER PRIMARY KEY,
|
143 | atruleID INTEGER,
|
144 | position INTEGER,
|
145 | nameID INTEGER
|
146 | );
|
147 |
|
148 | CREATE INDEX declAtrule ON decl(atruleID);
|
149 | CREATE INDEX atruleAtrule ON atrule(parentAtruleID);
|
150 | CREATE UNIQUE INDEX uniqueName ON name(name, namespace);
|
151 | CREATE UNIQUE INDEX uniqueDecl ON decl(atruleID, nameID, pseudo, prop);
|
152 | CREATE UNIQUE INDEX uniqueAtrule ON atrule(parentAtruleID, name);
|
153 | `)
|
154 |
|
155 | const existingIDs = []
|
156 |
|
157 | const cacheBustedInput = `${args.input}?${Date.now()}`
|
158 |
|
159 | const input = await import(cacheBustedInput)
|
160 |
|
161 | const inputStyles = {}
|
162 |
|
163 | for (const namespace of Object.keys(input)) {
|
164 | if (namespace.startsWith('_')) continue
|
165 |
|
166 | if (typeof input[namespace] === 'function') {
|
167 | inputStyles[namespace] = await input[namespace](importAndWatch)
|
168 | } else {
|
169 | inputStyles[namespace] = input[namespace]
|
170 | }
|
171 | }
|
172 |
|
173 | await mkdir(path.dirname(path.join(process.cwd(), args.output)), {
|
174 | recursive: true
|
175 | })
|
176 |
|
177 | const output = {
|
178 | css: createWriteStream(path.join(process.cwd(), `${args.output}.css`)),
|
179 | js: createWriteStream(path.join(process.cwd(), `${args.output}.js`))
|
180 | }
|
181 |
|
182 | let css = ''
|
183 |
|
184 | const map = {}
|
185 |
|
186 | const addToMap = (namespace, name, id) => {
|
187 | if (map[namespace] == null) {
|
188 | map[namespace] = {}
|
189 | }
|
190 |
|
191 | if (map[namespace][name] == null) {
|
192 | map[namespace][name] = []
|
193 | }
|
194 |
|
195 | map[namespace][name].push(id)
|
196 | }
|
197 |
|
198 | if (input._start) {
|
199 | css += input._start
|
200 |
|
201 | postcss.parse(input._start).walkRules((rule) => {
|
202 | const parsed = selectorTokenizer.parse(rule.selector)
|
203 |
|
204 | existingIDs.push(...getClassNames(parsed))
|
205 | })
|
206 | }
|
207 |
|
208 | if (input._end) {
|
209 | postcss.parse(input._end).walkRules((rule) => {
|
210 | const parsed = selectorTokenizer.parse(rule.selector)
|
211 |
|
212 | existingIDs.push(...getClassNames(parsed))
|
213 | })
|
214 | }
|
215 |
|
216 | const getUniqueID = createGetUniqueID(existingIDs)
|
217 |
|
218 | for (const namespace of Object.keys(inputStyles)) {
|
219 | for (const name of Object.keys(inputStyles[namespace])) {
|
220 | const parsed = postcss.parse(inputStyles[namespace][name])
|
221 |
|
222 | const context = {namespace, name, position: 0}
|
223 |
|
224 | for (const node of parsed.nodes) {
|
225 | await buildData(db, node, context)
|
226 | }
|
227 | }
|
228 | }
|
229 |
|
230 | const atrules = await db.all('SELECT * FROM atrule')
|
231 |
|
232 | const atrulePositionsMultis = await db.all(
|
233 | 'SELECT * FROM atrulePosition WHERE nameID IN (SELECT nameID FROM atrulePosition GROUP BY nameID HAVING COUNT(id) > 1) ORDER BY nameID, position'
|
234 | )
|
235 |
|
236 | const atrulePositionsSingles = await db.all(
|
237 | 'SELECT * FROM atrulePosition WHERE nameID IN (SELECT nameID FROM atrulePosition GROUP BY nameID HAVING COUNT(id) = 1)'
|
238 | )
|
239 |
|
240 | const unorderedAtruleIDs = []
|
241 | const orderedAtruleIDs = []
|
242 | const nameMap = {}
|
243 |
|
244 | for (const {atruleID} of atrulePositionsSingles) {
|
245 | unorderedAtruleIDs.push(atruleID)
|
246 | }
|
247 |
|
248 | let index = 0
|
249 |
|
250 | for (const {atruleID} of atrulePositionsMultis) {
|
251 | const unorderedIndex = unorderedAtruleIDs.indexOf(atruleID)
|
252 |
|
253 | if (~unorderedIndex) {
|
254 | unorderedAtruleIDs.splice(unorderedIndex, 1)
|
255 | }
|
256 |
|
257 | const orderedIndex = orderedAtruleIDs.indexOf(atruleID)
|
258 |
|
259 | if (~orderedIndex) {
|
260 | index = orderedIndex
|
261 | } else {
|
262 | orderedAtruleIDs.splice(++index, 0, atruleID)
|
263 | }
|
264 | }
|
265 |
|
266 | const sortedAtruleIDs = unorderedAtruleIDs.concat(orderedAtruleIDs)
|
267 |
|
268 | atrules.sort(
|
269 | (a, b) => sortedAtruleIDs.indexOf(a.id) - sortedAtruleIDs.indexOf(b.id)
|
270 | )
|
271 |
|
272 | const buildCSS = async (searchID) => {
|
273 | const singles = args['--no-optimize']
|
274 | ? await db.all(
|
275 | 'SELECT * FROM decl LEFT JOIN name ON decl.nameID = name.id WHERE atruleID = ? ORDER BY nameID, pseudo',
|
276 | searchID
|
277 | )
|
278 | : await db.all(
|
279 | 'SELECT *, GROUP_CONCAT(nameID, " ") as nameIDs, GROUP_CONCAT(pseudo) as pseudos FROM decl LEFT JOIN name ON decl.nameID = name.id WHERE atruleID = ? GROUP BY atruleID, prop, value HAVING COUNT(decl.id) = 1 ORDER BY nameIDs, pseudos',
|
280 | searchID
|
281 | )
|
282 |
|
283 | let prevSingle
|
284 |
|
285 | if (singles.length) {
|
286 | let id
|
287 |
|
288 | for (const single of singles) {
|
289 | if (single.nameID !== prevSingle?.nameID) {
|
290 | if (!nameMap[single.nameIDs ?? single.nameID]) {
|
291 | id = getUniqueID()
|
292 |
|
293 | nameMap[single.nameIDs ?? single.nameID] = id
|
294 |
|
295 | addToMap(single.namespace, single.name, id)
|
296 | } else {
|
297 | id = nameMap[single.nameIDs ?? single.nameID]
|
298 | }
|
299 | }
|
300 |
|
301 | if (
|
302 | single.nameID !== prevSingle?.nameID ||
|
303 | single.pseudo !== prevSingle?.pseudo
|
304 | ) {
|
305 | if (prevSingle != null) css += `} `
|
306 |
|
307 | css += `.${id}${single.pseudo} { `
|
308 | }
|
309 |
|
310 | css += `${single.prop}: ${single.value}; `
|
311 |
|
312 | prevSingle = single
|
313 | }
|
314 |
|
315 | css += `} `
|
316 | }
|
317 |
|
318 | const multis = args['--no-optimize']
|
319 | ? []
|
320 | : await db.all(
|
321 | 'SELECT *, GROUP_CONCAT(nameID, " ") as nameIDs, GROUP_CONCAT(pseudo) as pseudos FROM decl WHERE atruleID = ? GROUP BY atruleID, prop, value HAVING COUNT(id) > 1 ORDER BY nameIDs, pseudos',
|
322 | searchID
|
323 | )
|
324 |
|
325 | let prevMulti
|
326 |
|
327 | if (multis.length) {
|
328 | for (const multi of multis) {
|
329 | if (
|
330 | prevMulti?.nameIDs !== multi.nameIDs ||
|
331 | prevMulti?.pseudos !== multi.pseudos
|
332 | ) {
|
333 | const rules = await db.all(
|
334 | 'SELECT namespace, name, pseudo FROM decl LEFT JOIN name ON decl.nameID = name.id WHERE atruleID = ? AND prop = ? AND value = ? ORDER BY pseudo, nameID',
|
335 | multi.atruleID,
|
336 | multi.prop,
|
337 | multi.value
|
338 | )
|
339 |
|
340 | if (prevMulti != null) css += `} `
|
341 |
|
342 | let prevPseudo
|
343 | let id
|
344 | const selectors = []
|
345 |
|
346 | for (const rule of rules) {
|
347 | if (prevPseudo !== rule.pseudo) {
|
348 | id = getUniqueID()
|
349 |
|
350 | selectors.push(`.${id}${rule.pseudo} `)
|
351 | }
|
352 |
|
353 | addToMap(rule.namespace, rule.name, id)
|
354 |
|
355 | prevPseudo = rule.pseudo
|
356 | }
|
357 |
|
358 | css += `${selectors.join(', ')} { `
|
359 | }
|
360 |
|
361 | css += `${multi.prop}: ${multi.value}; `
|
362 |
|
363 | prevMulti = multi
|
364 | }
|
365 |
|
366 | css += `} `
|
367 | }
|
368 |
|
369 | for (let i = 0; i < atrules.length; i++) {
|
370 | const {parentAtruleID, name, id} = atrules[i]
|
371 |
|
372 | if (parentAtruleID === searchID) {
|
373 | css += `${name} { `
|
374 |
|
375 | await buildCSS(id)
|
376 |
|
377 | atrules.splice(i, 1)
|
378 |
|
379 | i--
|
380 |
|
381 | css += '} '
|
382 | }
|
383 | }
|
384 | }
|
385 |
|
386 | await buildCSS(0)
|
387 |
|
388 | await Promise.all(
|
389 | Object.entries(shorthandLonghands).map(async ([shorthand, longhands]) => {
|
390 | const rows = await db.all(
|
391 | `SELECT decl1.nameID as nameIDs, decl2.nameID as nameIDs2, decl1.prop as shortProp, decl2.prop as longProp
|
392 | FROM decl as decl1
|
393 | INNER JOIN decl as decl2 ON nameIDs = nameIDs2
|
394 | WHERE decl1.pseudo = decl2.pseudo
|
395 | AND decl1.prop = ?
|
396 | AND decl2.prop IN (${[...longhands].fill('?').join(', ')})
|
397 | `,
|
398 | shorthand,
|
399 | ...longhands
|
400 | )
|
401 |
|
402 | for (const row of rows) {
|
403 | console.warn(
|
404 | `${row.shortProp} found with ${row.longProp} for ${row.nameIDs}`
|
405 | )
|
406 | }
|
407 | })
|
408 | )
|
409 |
|
410 | css += input._end ?? ''
|
411 |
|
412 | if (!args['--dev']) {
|
413 | css = csso.minify(css, {restructure: false}).css
|
414 | }
|
415 |
|
416 | output.css.end(css)
|
417 |
|
418 | for (const namespace of Object.keys(map)) {
|
419 | for (const name of Object.keys(map[namespace])) {
|
420 | map[namespace][name] = map[namespace][name].join(' ')
|
421 | }
|
422 |
|
423 | const stringifiedMap = JSON.stringify(map[namespace], null, 2)
|
424 |
|
425 | if (args['--dev']) {
|
426 | output.js
|
427 | .write(`export const ${namespace} = new Proxy(${stringifiedMap}, {
|
428 | get(target, prop) {
|
429 | if ({}.hasOwnProperty.call(target, prop)) {
|
430 | return target[prop]
|
431 | }
|
432 |
|
433 | throw Error(\`\${prop} is undefined\`)
|
434 | }
|
435 | })\n`)
|
436 | } else {
|
437 | output.js.write(`export const ${namespace} = ${stringifiedMap}\n`)
|
438 | }
|
439 | }
|
440 |
|
441 | output.js.end('')
|
442 |
|
443 | dbinstance.close()
|
444 |
|
445 | return Promise.all(
|
446 | ['css', 'js'].map((type) =>
|
447 | finished(output[type]).then(() => {
|
448 | process.stdout.write(`${gray('[css]')} saved ${args.output}.${type}\n`)
|
449 | })
|
450 | )
|
451 | )
|
452 | }
|
453 |
|
454 | export default async (args) => {
|
455 | args.input = path.join(process.cwd(), args.input)
|
456 |
|
457 | let importAndWatch = (file) => {
|
458 | return import(path.join(path.dirname(args.input), file))
|
459 | }
|
460 |
|
461 | if (!args['--watch']) {
|
462 | return run(args, importAndWatch)
|
463 | }
|
464 |
|
465 | const watcher = chokidar.watch(args.input, {ignoreInitial: true})
|
466 |
|
467 | const imported = []
|
468 |
|
469 | importAndWatch = (file) => {
|
470 | file = path.join(path.dirname(args.input), file)
|
471 |
|
472 | imported.push(file)
|
473 |
|
474 | watcher.add(file)
|
475 |
|
476 | return import(`${file}?${Date.now()}`)
|
477 | }
|
478 |
|
479 | run(args, importAndWatch)
|
480 |
|
481 | watcher.on('change', () => {
|
482 | watcher.unwatch(imported)
|
483 |
|
484 | imported.splice(0, imported.length)
|
485 |
|
486 | run(args, importAndWatch)
|
487 | })
|
488 | }
|