diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts index 9248ccb57c..c3a5ed92b9 100644 --- a/packages/cli/src/index.ts +++ b/packages/cli/src/index.ts @@ -82,13 +82,6 @@ export async function build(_options: CliOptions) { const { patterns } = options const ignored = ['**/{.git,node_modules}/**'] - consola.info( - `Watching for changes in ${ - toArray(patterns) - .map(i => cyan(i)) - .join(', ')}`, - ) - const watcher = watch(patterns, { ignoreInitial: true, ignorePermissionErrors: true, @@ -115,6 +108,13 @@ export async function build(_options: CliOptions) { debouncedBuild() }) + + consola.info( + `Watching for changes in ${ + toArray(patterns) + .map(i => cyan(i)) + .join(', ')}`, + ) } await generate(options) diff --git a/test/__snapshots__/cli.test.ts.snap b/test/__snapshots__/cli.test.ts.snap index e4dd63bc9d..b5d70d2137 100644 --- a/test/__snapshots__/cli.test.ts.snap +++ b/test/__snapshots__/cli.test.ts.snap @@ -14,10 +14,3 @@ exports[`cli > supports unocss.config.js 1`] = ` /* layer: shortcuts */ .box{margin-left:auto;margin-right:auto;max-width:80rem;border-radius:0.375rem;--un-bg-opacity:1;background-color:rgba(243,244,246,var(--un-bg-opacity));padding:1rem;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgba(0,0,0,0.05));box-shadow:var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow);}" `; - -exports[`cli > uno.css exclude initialized class after changing file 1`] = ` -"/* layer: preflights */ -*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-pan-x:var(--un-empty,/*!*/ /*!*/);--un-pan-y:var(--un-empty,/*!*/ /*!*/);--un-pinch-zoom:var(--un-empty,/*!*/ /*!*/);--un-touch-action:var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom);--un-scroll-snap-strictness:proximity;--un-ordinal:var(--un-empty,/*!*/ /*!*/);--un-slashed-zero:var(--un-empty,/*!*/ /*!*/);--un-numeric-figure:var(--un-empty,/*!*/ /*!*/);--un-numeric-spacing:var(--un-empty,/*!*/ /*!*/);--un-numeric-fraction:var(--un-empty,/*!*/ /*!*/);--un-font-variant-numeric:var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction);--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 #0000;--un-ring-shadow:0 0 #0000;--un-shadow-inset:var(--un-empty,/*!*/ /*!*/);--un-shadow:0 0 #0000;--un-ring-inset:var(--un-empty,/*!*/ /*!*/);--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);} -/* layer: default */ -.bg-blue{--un-bg-opacity:1;background-color:rgba(96,165,250,var(--un-bg-opacity));}" -`; diff --git a/test/cli.test.ts b/test/cli.test.ts index 0aa52c3424..c0124bbc69 100644 --- a/test/cli.test.ts +++ b/test/cli.test.ts @@ -6,29 +6,6 @@ import { execa } from 'execa' export const tempDir = resolve('.temp') export const cli = resolve(__dirname, '../packages/cli/src/cli.ts') -function createWaiting() { - const loop = () => { } - let $resolve = loop - let $reject = loop - const waiting = new Promise((resolve, reject) => { - $resolve = resolve - $reject = reject - }) - return { - waiting, - $resolve, - $reject, - } -} - -function sleep(time = 300) { - return new Promise((resolve) => { - setTimeout(() => { - resolve() - }, time) - }) -} - beforeAll(async () => { await fs.remove(tempDir) }) @@ -61,11 +38,16 @@ describe('cli', () => { $resolve() }) await waiting + await sleep() await fs.writeFile(absolutePathOfFile, changedContent) - await sleep(2022) + // polling until update + for (let i = 20; i >= 0; i--) { + await sleep(50) + const output = await readUnocssFile(testDir) + if (i === 0 || output.includes('.bg-red')) + expect(output).toContain('.bg-red') + } subProcess.cancel() - const output = await readUnocssFile(testDir) - expect(output).toMatchSnapshot() }) it('supports unocss.config.js', async () => { @@ -83,11 +65,36 @@ export default defineConfig({ }) }) +// ----- Utils ----- + +function createWaiting() { + const loop = () => { } + let $resolve = loop + let $reject = loop + const waiting = new Promise((resolve, reject) => { + $resolve = resolve + $reject = reject + }) + return { + waiting, + $resolve, + $reject, + } +} + +function sleep(time = 300) { + return new Promise((resolve) => { + setTimeout(() => { + resolve() + }, time) + }) +} + function getTestDir() { return resolve(tempDir, Math.round(Math.random() * 100000).toString()) } -function initalOutputFiles(testDir: string, files: Record) { +function initOutputFiles(testDir: string, files: Record) { return Promise.all( Object.entries(files).map(([path, content]) => fs.outputFile(resolve(testDir, path), content, 'utf8'), @@ -109,7 +116,7 @@ function readUnocssFile(testDir: string) { async function runCli(files: Record) { const testDir = getTestDir() - await initalOutputFiles(testDir, files) + await initOutputFiles(testDir, files) const { exitCode, stdout, stderr } = await runAsyncChildProcess(testDir, 'views/**/*')