|
| 1 | +// cspell:ignore tailwind rgba |
| 2 | +import fs from "fs"; |
| 3 | +import { createRequire } from "module"; |
| 4 | +import { fileURLToPath } from "url"; |
| 5 | + |
| 6 | +const require = createRequire(import.meta.url); |
| 7 | + |
| 8 | +/** @type {typeof import("../../../lib/css/syntax")} */ |
| 9 | +const cssSyntax = require("../../../lib/css/syntax.js"); |
| 10 | + |
| 11 | +const { SourceProcessor } = cssSyntax; |
| 12 | + |
| 13 | +// Printing is the other half of `css-parser-tailwind-unit`: the same walk, but |
| 14 | +// every node also serializes and the input->output source map is resolved. |
| 15 | +// A nested block that grows past the streaming threshold hands its children back |
| 16 | +// as they finish and prints them into the output there; one that stays small is |
| 17 | +// materialized and printed whole. Both paths are covered here, along with the |
| 18 | +// pieces only a streamed block reaches — a declaration a later one overrides |
| 19 | +// (emitted so that it can be taken back, and taken back), and an opener held |
| 20 | +// back so an empty block can still be dropped. |
| 21 | +// |
| 22 | +// Every fixture runs in all three modes the processor has. `walk` is what a |
| 23 | +// build that is not printing pays — parse and walk, no output; `minify` and |
| 24 | +// `beautify` are the same pass with the printer on, the first applying the value |
| 25 | +// and shorthand transforms and the second only re-serializing. No visitors are |
| 26 | +// registered, so `walk` is the floor all three share: `minify - walk` is what |
| 27 | +// printing and the map cost on that shape and `minify - beautify` is what the |
| 28 | +// transforms cost on top of serializing. Visitor cost is |
| 29 | +// `css-parser-tailwind-unit`'s. |
| 30 | + |
| 31 | +// Real-world ~1.9 MiB minified stylesheet (Tailwind), shared with the |
| 32 | +// `css/large` configCase and the parser benchmark. |
| 33 | +const TAILWIND = fs.readFileSync( |
| 34 | + fileURLToPath( |
| 35 | + new URL("../../configCases/css/large/tailwind.min.css", import.meta.url) |
| 36 | + ), |
| 37 | + "utf8" |
| 38 | +); |
| 39 | + |
| 40 | +/** @type {[string, string][]} name, source */ |
| 41 | +const FIXTURES = [ |
| 42 | + ["tailwind", TAILWIND], |
| 43 | + // One block big enough to stream, and many that are not: the same rules |
| 44 | + // either way, so the pair isolates what streaming a block costs against |
| 45 | + // buffering it. |
| 46 | + [ |
| 47 | + "streamed block", |
| 48 | + (() => { |
| 49 | + let s = "@media (min-width:1px){"; |
| 50 | + for (let i = 0; i < 5000; i++) { |
| 51 | + s += `.n-${i}{color:#0000ff;margin:1px 2px 3px 4px;padding:0}`; |
| 52 | + } |
| 53 | + return `${s}}`; |
| 54 | + })() |
| 55 | + ], |
| 56 | + [ |
| 57 | + "buffered blocks", |
| 58 | + (() => { |
| 59 | + let s = ""; |
| 60 | + for (let i = 0; i < 200; i++) { |
| 61 | + s += `@media (min-width:${i}px){`; |
| 62 | + for (let j = 0; j < 25; j++) { |
| 63 | + s += `.b-${i}-${j}{color:#0000ff;margin:1px 2px 3px 4px;padding:0}`; |
| 64 | + } |
| 65 | + s += "}"; |
| 66 | + } |
| 67 | + return s; |
| 68 | + })() |
| 69 | + ], |
| 70 | + // One long run of top-level rules — no block frame at all, so this is the |
| 71 | + // per-rule cost on its own. |
| 72 | + [ |
| 73 | + "flat rules", |
| 74 | + (() => { |
| 75 | + let s = ""; |
| 76 | + for (let i = 0; i < 6000; i++) { |
| 77 | + s += `.f-${i}{color:#0000ff;margin:1px 2px 3px 4px;padding:0}`; |
| 78 | + } |
| 79 | + return s; |
| 80 | + })() |
| 81 | + ], |
| 82 | + // Eight-deep at-rule nesting: one frame per open block, so depth is the axis |
| 83 | + // `flat rules` holds flat. |
| 84 | + [ |
| 85 | + "deep nesting", |
| 86 | + (() => { |
| 87 | + let s = ""; |
| 88 | + for (let i = 0; i < 400; i++) { |
| 89 | + for (let j = 0; j < 8; j++) s += `@media (min-width:${j}px){`; |
| 90 | + s += `.d-${i}{color:red}`; |
| 91 | + s += "}".repeat(8); |
| 92 | + } |
| 93 | + return s; |
| 94 | + })() |
| 95 | + ], |
| 96 | + // CSS nesting: declarations interleaved with nested rules inside one streamed |
| 97 | + // block, so each declaration is emitted so that it can be taken back, and is |
| 98 | + // when a later one overrides it. |
| 99 | + [ |
| 100 | + "retracted declarations", |
| 101 | + (() => { |
| 102 | + let s = ".outer{"; |
| 103 | + for (let i = 0; i < 4000; i++) { |
| 104 | + s += `color:rgb(${i % 256} 0 0);.n-${i}{margin:1px 2px 3px 4px;padding:0}`; |
| 105 | + } |
| 106 | + return `${s}}`; |
| 107 | + })() |
| 108 | + ], |
| 109 | + // Every rule prints to nothing, so a streamed block's held-back opener is |
| 110 | + // dropped rather than flushed — the whole stylesheet serializes to "". |
| 111 | + [ |
| 112 | + "dropped empty blocks", |
| 113 | + (() => { |
| 114 | + let s = "@media (min-width:1px){"; |
| 115 | + for (let i = 0; i < 20000; i++) s += `.e-${i}{}`; |
| 116 | + return `${s}}`; |
| 117 | + })() |
| 118 | + ] |
| 119 | +]; |
| 120 | + |
| 121 | +/** |
| 122 | + * @param {import("tinybench").Bench} bench bench |
| 123 | + * @returns {void} |
| 124 | + */ |
| 125 | +export default (bench) => { |
| 126 | + for (const [name, source] of FIXTURES) { |
| 127 | + bench.add( |
| 128 | + `unit benchmark "css-printer-tailwind-unit", walk (${name})`, |
| 129 | + () => { |
| 130 | + new SourceProcessor().process(source); |
| 131 | + } |
| 132 | + ); |
| 133 | + bench.add( |
| 134 | + `unit benchmark "css-printer-tailwind-unit", beautify (${name})`, |
| 135 | + () => { |
| 136 | + new SourceProcessor().process(source, { |
| 137 | + mode: "beautify", |
| 138 | + source: "in.css" |
| 139 | + }); |
| 140 | + } |
| 141 | + ); |
| 142 | + bench.add( |
| 143 | + `unit benchmark "css-printer-tailwind-unit", minify (${name})`, |
| 144 | + () => { |
| 145 | + new SourceProcessor().process(source, { |
| 146 | + minimize: true, |
| 147 | + source: "in.css" |
| 148 | + }); |
| 149 | + } |
| 150 | + ); |
| 151 | + } |
| 152 | +}; |
0 commit comments