* Create the Tailwind CSS compiler * * This handles loading imports, plugins, configs, etc… * * This does **not** imply that the CSS is actually built. That happens in the * `build` function and is a separate scheduled task.
()
| 58 | * `build` function and is a separate scheduled task. |
| 59 | */ |
| 60 | async function createCompiler() { |
| 61 | I.start(`Create compiler`) |
| 62 | I.start('Reading Stylesheets') |
| 63 | |
| 64 | // The stylesheets may have changed causing a full rebuild so we'll need to |
| 65 | // gather the latest list of stylesheets. |
| 66 | let stylesheets: Iterable<HTMLStyleElement> = document.querySelectorAll( |
| 67 | `style[type="${STYLE_TYPE}"]`, |
| 68 | ) |
| 69 | |
| 70 | let css = '' |
| 71 | for (let sheet of stylesheets) { |
| 72 | observeSheet(sheet) |
| 73 | css += sheet.textContent + '\n' |
| 74 | } |
| 75 | |
| 76 | // The user might have no stylesheets, or a some stylesheets without `@import` |
| 77 | // because they want to customize their theme so we'll inject the main import |
| 78 | // for them. However, if they start using `@import` we'll let them control |
| 79 | // the build completely. |
| 80 | if (!css.includes('@import')) { |
| 81 | css = `@import "tailwindcss";${css}` |
| 82 | } |
| 83 | |
| 84 | I.end('Reading Stylesheets', { |
| 85 | size: css.length, |
| 86 | changed: lastCss !== css, |
| 87 | }) |
| 88 | |
| 89 | // The input CSS did not change so the compiler does not need to be recreated |
| 90 | if (lastCss === css) return |
| 91 | |
| 92 | lastCss = css |
| 93 | |
| 94 | I.start('Compile CSS') |
| 95 | try { |
| 96 | compiler = await tailwindcss.compile(css, { |
| 97 | base: '/', |
| 98 | loadStylesheet, |
| 99 | loadModule, |
| 100 | }) |
| 101 | } finally { |
| 102 | I.end('Compile CSS') |
| 103 | I.end(`Create compiler`) |
| 104 | } |
| 105 | |
| 106 | classes.clear() |
| 107 | } |
| 108 | |
| 109 | async function loadStylesheet(id: string, base: string) { |
| 110 | function load() { |
no test coverage detected