diff --git a/.changeset/purple-chefs-yell.md b/.changeset/purple-chefs-yell.md new file mode 100644 index 000000000..8167d6d31 --- /dev/null +++ b/.changeset/purple-chefs-yell.md @@ -0,0 +1,5 @@ +--- +'preact-cli': patch +--- + +Corrects 'build --json' ouput location and 'apple-touch-icon' will respect the publicPath automatically diff --git a/packages/cli/lib/commands/build.js b/packages/cli/lib/commands/build.js index 2b965e552..411b39baa 100644 --- a/packages/cli/lib/commands/build.js +++ b/packages/cli/lib/commands/build.js @@ -107,7 +107,7 @@ async function command(src, argv) { let stats = await runWebpack(argv, false); if (argv.json) { - await runWebpack.writeJsonStats(stats); + await runWebpack.writeJsonStats(cwd, stats); } } diff --git a/packages/cli/lib/lib/webpack/run-webpack.js b/packages/cli/lib/lib/webpack/run-webpack.js index c82de0d72..abc1544f5 100644 --- a/packages/cli/lib/lib/webpack/run-webpack.js +++ b/packages/cli/lib/lib/webpack/run-webpack.js @@ -122,8 +122,8 @@ function showStats(stats, isProd) { return stats; } -function writeJsonStats(stats) { - let outputPath = resolve(process.cwd(), 'stats.json'); +function writeJsonStats(cwd, stats) { + let outputPath = resolve(cwd, 'stats.json'); let jsonStats = stats.toJson({ json: true, chunkModules: true, diff --git a/packages/cli/lib/resources/template.html b/packages/cli/lib/resources/template.html index 770c48b2b..4b33acd6f 100644 --- a/packages/cli/lib/resources/template.html +++ b/packages/cli/lib/resources/template.html @@ -6,7 +6,7 @@ - + <% preact.headEnd %> diff --git a/packages/cli/tests/build.test.js b/packages/cli/tests/build.test.js index fe172d934..a2be5370b 100644 --- a/packages/cli/tests/build.test.js +++ b/packages/cli/tests/build.test.js @@ -1,5 +1,6 @@ const { join } = require('path'); -const { access, readdir, readFile, writeFile } = require('fs').promises; +const { access, mkdir, readdir, readFile, rename, unlink, writeFile } = + require('fs').promises; const looksLike = require('html-looks-like'); const { create, build } = require('./lib/cli'); const { snapshot } = require('./lib/utils'); @@ -46,28 +47,40 @@ function testMatch(received, expected) { } } +/** + * Get build output file as utf-8 string + * @param {string} dir + * @param {RegExp | string} file + * @returns {Promise} + */ +async function getOutputFile(dir, file) { + if (typeof file !== 'string') { + // @ts-ignore + file = (await readdir(join(dir, 'build'))).find(f => file.test(f)); + } + return await readFile(join(dir, 'build', file), 'utf8'); +} + describe('preact build', () => { - it(`builds the 'default' template`, async () => { + it('builds the `default` template', async () => { let dir = await create('default'); await build(dir); - dir = join(dir, 'build'); - let output = await snapshot(dir); + let output = await snapshot(join(dir, 'build')); testMatch(output, images.default); }); - it(`builds the 'default' template with esm`, async () => { + it('builds the `default` template with esm', async () => { let dir = await create('default'); await build(dir, { esm: true }); - dir = join(dir, 'build'); - let output = await snapshot(dir); + let output = await snapshot(join(dir, 'build')); testMatch(output, images['default-esm']); }); - it(`builds the 'typescript' template`, async () => { + it('builds the `typescript` template', async () => { let dir = await create('typescript'); // The tsconfig.json in the template covers the test directory, @@ -77,157 +90,13 @@ describe('preact build', () => { // Remove when https://github.com/preactjs/enzyme-adapter-preact-pure/issues/161 is resolved shell.exec('rm tsconfig.json'); - expect(() => build(dir)).not.toThrow(); - }); - - it('should use SASS styles', async () => { - let dir = await subject('sass'); - await build(dir); - - let body = await getBody(dir); - looksLike(body, images.sass); - }); - - it('should use custom `.babelrc`', async () => { - // app with custom .babelrc enabling async functions - let dir = await subject('custom-babelrc'); - - await build(dir); - - const bundleFile = (await readdir(`${dir}/build`)).find(file => - /bundle\.\w{5}\.js$/.test(file) - ); - const transpiledChunk = await readFile( - `${dir}/build/${bundleFile}`, - 'utf8' - ); - - // when tragetting only last 1 chrome version, babel preserves - // arrow function. So checking for the delay function code from delay function in - // https://github.com/preactjs/preact-cli/blob/master/packages/cli/tests/subjects/custom-babelrc/index.js - expect(transpiledChunk.includes('=>setTimeout')).toBe(true); - }); - - prerenderUrlFiles.forEach(prerenderUrls => { - it(`should prerender the routes provided with '${prerenderUrls}'`, async () => { - let dir = await subject('multiple-prerendering'); - await build(dir, { prerenderUrls }); - - const body1 = await getBody(dir); - looksLike(body1, images.prerender.home); - - const body2 = await getBody(dir, 'route66/index.html'); - looksLike(body2, images.prerender.route); - - const body3 = await getBody(dir, 'custom/index.html'); - looksLike(body3, images.prerender.custom); - - const head1 = await getHead(dir); - expect(head1).toEqual( - expect.stringMatching(getRegExpFromMarkup(images.prerender.heads.home)) - ); - - const head2 = await getHead(dir, 'route66/index.html'); - expect(head2).toEqual( - expect.stringMatching( - getRegExpFromMarkup(images.prerender.heads.route66) - ) - ); - - const head3 = await getHead(dir, 'custom/index.html'); - expect(head3).toEqual( - expect.stringMatching( - getRegExpFromMarkup(images.prerender.heads.custom) - ) - ); - }); - }); - - prerenderUrlFiles.forEach(prerenderUrls => { - it(`should prerender the routes with data provided with '${prerenderUrls}' via provider`, async () => { - let dir = await subject('multiple-prerendering-with-provider'); - await build(dir, { prerenderUrls }); - - const body1 = await getBody(dir); - looksLike(body1, images.prerender.home); - - const body2 = await getBody(dir, 'route66/index.html'); - looksLike(body2, images.prerender.route); - - const body3 = await getBody(dir, 'custom/index.html'); - looksLike(body3, images.prerender.custom); - - const body4 = await getBody(dir, 'customhook/index.html'); - looksLike(body4, images.prerender.customhook); - - const body5 = await getBody(dir, 'htmlsafe/index.html'); - looksLike(body5, images.prerender.htmlSafe); - - const head1 = await getHead(dir); - expect(head1).toEqual( - expect.stringMatching(getRegExpFromMarkup(images.prerender.heads.home)) - ); - - const head2 = await getHead(dir, 'route66/index.html'); - expect(head2).toEqual( - expect.stringMatching( - getRegExpFromMarkup(images.prerender.heads.route66) - ) - ); - - const head3 = await getHead(dir, 'custom/index.html'); - expect(head3).toEqual( - expect.stringMatching( - getRegExpFromMarkup(images.prerender.heads.custom) - ) - ); - }); - }); - - it('should preload correct files', async () => { - let dir = await subject('preload-chunks'); - await build(dir, { preload: true }); - - const head1 = await getHead(dir); - expect(head1).toEqual( - expect.stringMatching(getRegExpFromMarkup(images.preload.head)) - ); - }); - - it('should use custom `preact.config.js`', async () => { - // app with stable output name via preact.config.js - let dir = await subject('custom-webpack'); - await build(dir); - - let stableOutput = join(dir, 'build/bundle.js'); - expect(await access(stableOutput)).toBeUndefined(); - }); - - it('should use custom `template.html`', async () => { - let dir = await subject('custom-template'); - await build(dir); - - let file = join(dir, 'build/index.html'); - let html = await readFile(file, 'utf-8'); - - expect(html).toEqual( - expect.stringMatching(getRegExpFromMarkup(images.template)) - ); + await expect(build(dir)).resolves.not.toThrow(); }); it('should patch global location object', async () => { let dir = await subject('location-patch'); - expect(() => build(dir)).not.toThrow(); - }); - it('should import non-modules CSS even when side effects are false', async () => { - let dir = await subject('side-effect-css'); - await build(dir); - - let head = await getHead(dir); - expect(head).toEqual( - expect.stringMatching(getRegExpFromMarkup(images.sideEffectCss)) - ); + await expect(build(dir)).resolves.not.toThrow(); }); it('should copy resources from static to build directory', async () => { @@ -237,16 +106,6 @@ describe('preact build', () => { expect(await access(file)).toBeUndefined(); }); - it('should error out for invalid CLI argument', async () => { - let dir = await subject('custom-template'); - const mockExit = jest.spyOn(process, 'exit').mockImplementation(() => {}); - await expect(build(dir, { 'service-worker': false })).rejects.toEqual( - new Error('Invalid argument found.') - ); - expect(mockExit).toHaveBeenCalledWith(1); - mockExit.mockRestore(); - }); - describe('Push manifest plugin', () => { it('should produce correct default `push-manifest.json`', async () => { let dir = await create('default'); @@ -326,4 +185,328 @@ describe('preact build', () => { // "Hello World!" should replace 'process.env.PREACT_APP_MY_VARIABLE' expect(transpiledChunk.includes('console.log("Hello World!")')).toBe(true); }); + + it('should respect `publicPath` value', async () => { + let dir = await subject('public-path'); + await build(dir); + const html = await getOutputFile(dir, 'index.html'); + + expect(html).toEqual( + expect.stringMatching(getRegExpFromMarkup(images.publicPath)) + ); + }); + + describe('CLI Options', () => { + it('--src', async () => { + let dir = await subject('minimal'); + + await mkdir(join(dir, 'renamed-src')); + await rename(join(dir, 'index.js'), join(dir, 'renamed-src/index.js')); + await rename(join(dir, 'style.css'), join(dir, 'renamed-src/style.css')); + + await expect(build(dir, { src: 'renamed-src' })).resolves.toBeUndefined(); + }); + + it('--dest', async () => { + let dir = await subject('minimal'); + + await build(dir, { dest: 'renamed-dest' }); + expect(await access(join(dir, 'renamed-dest'))).toBeUndefined(); + }); + + it('--sw', async () => { + let dir = await subject('minimal'); + + const logSpy = jest.spyOn(process.stdout, 'write'); + + await build(dir, { sw: true }); + expect(await access(join(dir, 'build', 'sw.js'))).toBeUndefined(); + expect(logSpy).toHaveBeenCalledWith( + expect.stringContaining('Could not find sw.js') + ); + + await build(dir, { sw: false }); + await expect(access(join(dir, 'build', 'sw.js'))).rejects.toThrow( + 'no such file or directory' + ); + }); + + it('--babelConfig', async () => { + let dir = await subject('custom-babelrc'); + + await build(dir); + let transpiledChunk = await getOutputFile(dir, /bundle\.\w{5}\.js$/); + expect(/=>\s?setTimeout/.test(transpiledChunk)).toBe(true); + + await rename(join(dir, '.babelrc'), join(dir, 'babel.config.json')); + await build(dir, { + babelConfig: 'babel.config.json', + }); + transpiledChunk = await getOutputFile(dir, /bundle\.\w{5}\.js$/); + expect(/=>\s?setTimeout/.test(transpiledChunk)).toBe(true); + }); + + it('--json', async () => { + let dir = await subject('minimal'); + + await build(dir, { json: true }); + expect(await access(join(dir, 'stats.json'))).toBeUndefined(); + // Need to clean up manually as it is placed in project root + await unlink(join(dir, 'stats.json')); + + await build(dir, { json: false }); + await expect(access(join(dir, 'stats.json'))).rejects.toThrow( + 'no such file or directory' + ); + }); + + it('--template', async () => { + let dir = await subject('custom-template'); + + await rename( + join(dir, 'template.html'), + join(dir, 'renamed-template.html') + ); + await build(dir, { template: 'renamed-template.html' }); + + const html = await getOutputFile(dir, 'index.html'); + expect(html).toEqual( + expect.stringMatching(getRegExpFromMarkup(images.template)) + ); + }); + + it('--preload', async () => { + let dir = await subject('preload-chunks'); + + await build(dir, { preload: true }); + let head = await getHead(dir); + expect(head).toEqual( + expect.stringMatching(getRegExpFromMarkup(images.preload.true)) + ); + + await build(dir, { preload: false }); + head = await getHead(dir); + expect(head).toEqual( + expect.stringMatching(getRegExpFromMarkup(images.preload.false)) + ); + }); + + it('--prerender', async () => { + let dir = await subject('minimal'); + + await build(dir, { prerender: true }); + let html = await getOutputFile(dir, 'index.html'); + expect(html).toMatch('

Minimal App

'); + + await build(dir, { prerender: false }); + html = await getOutputFile(dir, 'index.html'); + expect(html).not.toMatch('

Minimal App

'); + }); + + it('--prerenderUrls', async () => { + let dir = await subject('multiple-prerendering'); + + await build(dir, { prerenderUrls: 'prerender-urls.json' }); + expect(await access(join(dir, 'build/index.html'))).toBeUndefined(); + expect( + await access(join(dir, 'build/route66/index.html')) + ).toBeUndefined(); + expect( + await access(join(dir, 'build/custom/index.html')) + ).toBeUndefined(); + + await rename( + join(dir, 'prerender-urls.json'), + join(dir, 'renamed-urls.json') + ); + await build(dir, { prerenderUrls: 'renamed-urls.json' }); + expect(await access(join(dir, 'build/index.html'))).toBeUndefined(); + expect( + await access(join(dir, 'build/route66/index.html')) + ).toBeUndefined(); + expect( + await access(join(dir, 'build/custom/index.html')) + ).toBeUndefined(); + }); + + it('--inline-css', async () => { + let dir = await subject('minimal'); + + await build(dir, { 'inline-css': true }); + let head = await getHead(dir); + expect(head).toMatch(''); + + await build(dir, { 'inline-css': false }); + head = await getOutputFile(dir, 'index.html'); + expect(head).not.toMatch(/'); + }); + + // Issue #1411 + it('should preserve side-effectful CSS imports even if package.json claims no side effects', async () => { + let dir = await subject('css-side-effect'); + await build(dir); + + const builtStylesheet = await getOutputFile(dir, /bundle\.\w{5}\.css$/); + expect(builtStylesheet).toMatch('h1{background:#673ab8}'); + }); + + it('should use SASS styles', async () => { + let dir = await subject('css-sass'); + await build(dir); + + let body = await getBody(dir); + looksLike(body, images.sass); + }); + }); + + describe('prerender', () => { + prerenderUrlFiles.forEach(prerenderUrls => { + it(`should prerender the routes provided with '${prerenderUrls}'`, async () => { + let dir = await subject('multiple-prerendering'); + await build(dir, { prerenderUrls }); + + const body1 = await getBody(dir); + looksLike(body1, images.prerender.home); + + const body2 = await getBody(dir, 'route66/index.html'); + looksLike(body2, images.prerender.route); + + const body3 = await getBody(dir, 'custom/index.html'); + looksLike(body3, images.prerender.custom); + + const head1 = await getHead(dir); + expect(head1).toEqual( + expect.stringMatching( + getRegExpFromMarkup(images.prerender.heads.home) + ) + ); + + const head2 = await getHead(dir, 'route66/index.html'); + expect(head2).toEqual( + expect.stringMatching( + getRegExpFromMarkup(images.prerender.heads.route66) + ) + ); + + const head3 = await getHead(dir, 'custom/index.html'); + expect(head3).toEqual( + expect.stringMatching( + getRegExpFromMarkup(images.prerender.heads.custom) + ) + ); + }); + }); + + prerenderUrlFiles.forEach(prerenderUrls => { + it(`should prerender the routes with data provided with '${prerenderUrls}' via provider`, async () => { + let dir = await subject('multiple-prerendering-with-provider'); + await build(dir, { prerenderUrls }); + + const body1 = await getBody(dir); + looksLike(body1, images.prerender.home); + + const body2 = await getBody(dir, 'route66/index.html'); + looksLike(body2, images.prerender.route); + + const body3 = await getBody(dir, 'custom/index.html'); + looksLike(body3, images.prerender.custom); + + const body4 = await getBody(dir, 'customhook/index.html'); + looksLike(body4, images.prerender.customhook); + + const body5 = await getBody(dir, 'htmlsafe/index.html'); + looksLike(body5, images.prerender.htmlSafe); + + const head1 = await getHead(dir); + expect(head1).toEqual( + expect.stringMatching( + getRegExpFromMarkup(images.prerender.heads.home) + ) + ); + + const head2 = await getHead(dir, 'route66/index.html'); + expect(head2).toEqual( + expect.stringMatching( + getRegExpFromMarkup(images.prerender.heads.route66) + ) + ); + + const head3 = await getHead(dir, 'custom/index.html'); + expect(head3).toEqual( + expect.stringMatching( + getRegExpFromMarkup(images.prerender.heads.custom) + ) + ); + }); + }); + }); }); diff --git a/packages/cli/tests/create.test.js b/packages/cli/tests/create.test.js index 0c13dae8c..35dcece05 100644 --- a/packages/cli/tests/create.test.js +++ b/packages/cli/tests/create.test.js @@ -1,4 +1,4 @@ -const { readFileSync } = require('fs'); +const { readFile } = require('fs').promises; const { relative, resolve } = require('path'); const { create } = require('./lib/cli'); const { expand } = require('./lib/utils'); @@ -19,7 +19,7 @@ describe('preact create', () => { let dir = await create('netlify'); const templateFilePath = resolve(__dirname, dir, 'src', 'template.html'); - const template = readFileSync(templateFilePath).toString('utf8'); + const template = await readFile(templateFilePath, 'utf8'); expect(template.includes('twitter:card')).toEqual(true); }); @@ -28,12 +28,13 @@ describe('preact create', () => { let dir = await create('simple'); const templateFilePath = resolve(__dirname, dir, 'src', 'template.html'); - const template = readFileSync(templateFilePath).toString('utf8'); + const template = await readFile(templateFilePath, 'utf8'); expect(template.includes('apple-touch-icon')).toEqual(true); }); it('should fail given an invalid name', async () => { + // @ts-ignore const exit = jest.spyOn(process, 'exit').mockImplementation(() => {}); await create('simple', '*()@!#!$-Invalid-Name'); diff --git a/packages/cli/tests/images/build.js b/packages/cli/tests/images/build.js index ab4371d7a..6dd3bc987 100644 --- a/packages/cli/tests/images/build.js +++ b/packages/cli/tests/images/build.js @@ -57,23 +57,6 @@ exports.sass = ` `; -exports.sideEffectCss = ` - - - side-effect-css<\\/title> - <meta name="viewport" content="width=device-width,initial-scale=1"> - <meta name="mobile-web-app-capable" content="yes"> - <meta name="apple-mobile-web-app-capable" content="yes"> - <link rel="apple-touch-icon" href=\\"\\/assets\\/icons\\/apple-touch-icon\\.png\\"> - <link rel="manifest" href="\\/manifest\\.json"> - <style>h1{background:#673ab8}<\\/style> - <link href=\\"/bundle.\\w{5}.css\\" rel=\\"stylesheet\\" media=\\"only x\\" onload=\\"this.media='all'\\"> - <noscript> - <link rel=\\"stylesheet\\" href=\\"\\/bundle.\\w{5}.css\\"> - </noscript> -<\\/head> -`; - exports.prerender = {}; exports.prerender.heads = {}; @@ -130,10 +113,10 @@ exports.prerender.heads.custom = ` exports.preload = {}; -exports.preload.head = ` +exports.preload.true = ` <head> <meta charset=\\"utf-8\\"> - <title>preact-prerender<\\/title> + <title>preact-preload-chunks<\\/title> <meta name=\\"viewport\\" content=\\"width=device-width,initial-scale=1\\"> <meta name=\\"mobile-web-app-capable\\" content=\\"yes\\"> <meta name=\\"apple-mobile-web-app-capable\\" content=\\"yes\\"> @@ -150,6 +133,23 @@ exports.preload.head = ` </head> `; +exports.preload.false = ` +<head> + <meta charset=\\"utf-8\\"> + <title>preact-preload-chunks<\\/title> + <meta name=\\"viewport\\" content=\\"width=device-width,initial-scale=1\\"> + <meta name=\\"mobile-web-app-capable\\" content=\\"yes\\"> + <meta name=\\"apple-mobile-web-app-capable\\" content=\\"yes\\"> + <link rel=\\"apple-touch-icon\\" href=\\"\\/assets\\/icons\\/apple-touch-icon\\.png\\"> + <link rel=\\"manifest\\" href=\\"\\/manifest\\.json\\"> + <style>html{padding:0}<\\/style> + <link href=\\"\\/bundle\\.\\w{5}\\.css\\" rel=\\"stylesheet\\" media=\\"only x\\" onload=\\"this.media='all'\\"> + <noscript> + <link rel=\\"stylesheet\\" href=\\"\\/bundle.\\w{5}.css\\"> + </noscript> +</head> +`; + exports.prerender.home = ` <body> <div id="app"> @@ -200,7 +200,7 @@ exports.template = ` <html lang="en"> <head> <meta charset="utf-8"> - <title>preact-webpack + preact-custom-template @@ -308,3 +308,26 @@ exports.pushManifestAlteredFilenames = ` } } `; + +exports.publicPath = ` + + + + + preact-public-path + + + + + + + + + +

Public path test

+ + + + + +`; diff --git a/packages/cli/tests/lib/cli.js b/packages/cli/tests/lib/cli.js index 6e5b2c8a0..226e7cac8 100644 --- a/packages/cli/tests/lib/cli.js +++ b/packages/cli/tests/lib/cli.js @@ -7,10 +7,12 @@ const shell = require('shelljs'); const root = join(__dirname, '../../../..'); async function linkPackage(name, from, to) { - await symlink( - join(from, 'node_modules', name), - join(to, 'node_modules', name) - ); + try { + await symlink( + join(from, 'node_modules', name), + join(to, 'node_modules', name) + ); + } catch {} } const argv = { @@ -23,7 +25,7 @@ const argv = { }; exports.create = async function (template, name) { - let dest = tmpDir(); + let dest = await tmpDir(); name = name || `test-${template}`; await cmd.create(template, dest, { name, cwd: '.' }); @@ -42,7 +44,7 @@ exports.build = async function (cwd, options, installNodeModules = false) { } let opts = Object.assign({}, { cwd }, argv, options); - return await cmd.build(argv.src, opts); + return await cmd.build(opts.src, opts); }; exports.watch = function (cwd, port, host = '127.0.0.1') { diff --git a/packages/cli/tests/lib/output.js b/packages/cli/tests/lib/output.js index bd9c4d3ea..ef06c185b 100644 --- a/packages/cli/tests/lib/output.js +++ b/packages/cli/tests/lib/output.js @@ -1,4 +1,4 @@ -const { existsSync, mkdirSync } = require('fs'); +const { mkdir } = require('fs').promises; const copy = require('ncp'); const { resolve } = require('path'); const { promisify } = require('util'); @@ -6,20 +6,18 @@ const { promisify } = require('util'); const output = resolve(__dirname, '../output'); const subjects = resolve(__dirname, '../subjects'); -function tmpDir() { +async function tmpDir() { let str = Math.random() .toString(36) .replace(/[^a-z]+/g, '') .substr(0, 12); - if (!existsSync(output)) { - mkdirSync(output, { recursive: true }); - } + await mkdir(output, { recursive: true }); return resolve(output, str); } async function subject(name) { let src = resolve(subjects, name); - let dest = tmpDir(); + let dest = await tmpDir(); await promisify(copy)(src, dest); return dest; } diff --git a/packages/cli/tests/subjects/css-auto-modules/components/index.js b/packages/cli/tests/subjects/css-auto-modules/components/index.js new file mode 100644 index 000000000..5a0b70c6f --- /dev/null +++ b/packages/cli/tests/subjects/css-auto-modules/components/index.js @@ -0,0 +1,4 @@ +import { h } from 'preact'; +import styles from './style.css'; + +export default () =>

This is a fancy component!

; diff --git a/packages/cli/tests/subjects/css-auto-modules/components/style.css b/packages/cli/tests/subjects/css-auto-modules/components/style.css new file mode 100644 index 000000000..c275a6d60 --- /dev/null +++ b/packages/cli/tests/subjects/css-auto-modules/components/style.css @@ -0,0 +1,3 @@ +.text { + color: tan; +} diff --git a/packages/cli/tests/subjects/css-auto-modules/global.css b/packages/cli/tests/subjects/css-auto-modules/global.css new file mode 100644 index 000000000..818d40628 --- /dev/null +++ b/packages/cli/tests/subjects/css-auto-modules/global.css @@ -0,0 +1,3 @@ +h1 { + color: red; +} diff --git a/packages/cli/tests/subjects/css-auto-modules/index.js b/packages/cli/tests/subjects/css-auto-modules/index.js new file mode 100644 index 000000000..70410436c --- /dev/null +++ b/packages/cli/tests/subjects/css-auto-modules/index.js @@ -0,0 +1,14 @@ +import { h } from 'preact'; +import Component from './components'; +import Route from './routes'; +import './global.css'; + +export default () => { + return ( +
+

This is an app with some fancy styles!

+ + +
+ ); +}; diff --git a/packages/cli/tests/subjects/css-auto-modules/package.json b/packages/cli/tests/subjects/css-auto-modules/package.json new file mode 100644 index 000000000..5fe5d2619 --- /dev/null +++ b/packages/cli/tests/subjects/css-auto-modules/package.json @@ -0,0 +1,4 @@ +{ + "private": true, + "name": "preact-auto-css-modules" +} diff --git a/packages/cli/tests/subjects/css-auto-modules/routes/index.js b/packages/cli/tests/subjects/css-auto-modules/routes/index.js new file mode 100644 index 000000000..32c34e32d --- /dev/null +++ b/packages/cli/tests/subjects/css-auto-modules/routes/index.js @@ -0,0 +1,4 @@ +import { h } from 'preact'; +import styles from './style.css'; + +export default () =>

This is a fancy route!

; diff --git a/packages/cli/tests/subjects/css-auto-modules/routes/style.css b/packages/cli/tests/subjects/css-auto-modules/routes/style.css new file mode 100644 index 000000000..65c9e2935 --- /dev/null +++ b/packages/cli/tests/subjects/css-auto-modules/routes/style.css @@ -0,0 +1,3 @@ +.text { + color: red; +} diff --git a/packages/cli/tests/subjects/css-imports/index.js b/packages/cli/tests/subjects/css-imports/index.js new file mode 100644 index 000000000..2454b6160 --- /dev/null +++ b/packages/cli/tests/subjects/css-imports/index.js @@ -0,0 +1,2 @@ +import './styles/a.css'; +import './style.css'; diff --git a/packages/cli/tests/subjects/css-imports/package.json b/packages/cli/tests/subjects/css-imports/package.json new file mode 100644 index 000000000..6ccd93518 --- /dev/null +++ b/packages/cli/tests/subjects/css-imports/package.json @@ -0,0 +1,4 @@ +{ + "private": true, + "name": "preact-css-imports" +} diff --git a/packages/cli/tests/subjects/css-imports/style.css b/packages/cli/tests/subjects/css-imports/style.css new file mode 100644 index 000000000..f11fea93a --- /dev/null +++ b/packages/cli/tests/subjects/css-imports/style.css @@ -0,0 +1,5 @@ +@import '~fake-module/style.css'; + +h1 { + background: peachpuff; +} diff --git a/packages/cli/tests/subjects/css-imports/styles/a.css b/packages/cli/tests/subjects/css-imports/styles/a.css new file mode 100644 index 000000000..538ddb935 --- /dev/null +++ b/packages/cli/tests/subjects/css-imports/styles/a.css @@ -0,0 +1,5 @@ +@import 'b.css'; + +body { + background: url('./img.jpg'); +} diff --git a/packages/cli/tests/subjects/css-imports/styles/b.css b/packages/cli/tests/subjects/css-imports/styles/b.css new file mode 100644 index 000000000..b268c778e --- /dev/null +++ b/packages/cli/tests/subjects/css-imports/styles/b.css @@ -0,0 +1,3 @@ +h1 { + color: #f00; +} diff --git a/packages/cli/tests/subjects/css-imports/styles/img.jpg b/packages/cli/tests/subjects/css-imports/styles/img.jpg new file mode 100644 index 000000000..9d59acf06 Binary files /dev/null and b/packages/cli/tests/subjects/css-imports/styles/img.jpg differ diff --git a/packages/cli/tests/subjects/css-inline/index.js b/packages/cli/tests/subjects/css-inline/index.js new file mode 100644 index 000000000..581bd47fe --- /dev/null +++ b/packages/cli/tests/subjects/css-inline/index.js @@ -0,0 +1,5 @@ +import { h } from 'preact'; + +import './style.css'; + +export default () =>

Test CSS inlining

; diff --git a/packages/cli/tests/subjects/css-inline/package.json b/packages/cli/tests/subjects/css-inline/package.json new file mode 100644 index 000000000..a1b73aea6 --- /dev/null +++ b/packages/cli/tests/subjects/css-inline/package.json @@ -0,0 +1,4 @@ +{ + "private": true, + "name": "preact-css-inline" +} diff --git a/packages/cli/tests/subjects/css-inline/style.css b/packages/cli/tests/subjects/css-inline/style.css new file mode 100644 index 000000000..13bed0ddc --- /dev/null +++ b/packages/cli/tests/subjects/css-inline/style.css @@ -0,0 +1,7 @@ +h1 { + color: red; +} + +div { + background: tan; +} diff --git a/packages/cli/tests/subjects/sass/components/app/index.js b/packages/cli/tests/subjects/css-sass/components/app/index.js similarity index 100% rename from packages/cli/tests/subjects/sass/components/app/index.js rename to packages/cli/tests/subjects/css-sass/components/app/index.js diff --git a/packages/cli/tests/subjects/sass/components/app/style.scss b/packages/cli/tests/subjects/css-sass/components/app/style.scss similarity index 100% rename from packages/cli/tests/subjects/sass/components/app/style.scss rename to packages/cli/tests/subjects/css-sass/components/app/style.scss diff --git a/packages/cli/tests/subjects/sass/index.js b/packages/cli/tests/subjects/css-sass/index.js similarity index 100% rename from packages/cli/tests/subjects/sass/index.js rename to packages/cli/tests/subjects/css-sass/index.js diff --git a/packages/cli/tests/subjects/css-sass/package.json b/packages/cli/tests/subjects/css-sass/package.json new file mode 100644 index 000000000..219a2cca7 --- /dev/null +++ b/packages/cli/tests/subjects/css-sass/package.json @@ -0,0 +1,4 @@ +{ + "private": true, + "name": "preact-css-sass" +} diff --git a/packages/cli/tests/subjects/css-side-effect/index.js b/packages/cli/tests/subjects/css-side-effect/index.js new file mode 100644 index 000000000..aa3357bf6 --- /dev/null +++ b/packages/cli/tests/subjects/css-side-effect/index.js @@ -0,0 +1 @@ +import './style.css'; diff --git a/packages/cli/tests/subjects/side-effect-css/package.json b/packages/cli/tests/subjects/css-side-effect/package.json similarity index 51% rename from packages/cli/tests/subjects/side-effect-css/package.json rename to packages/cli/tests/subjects/css-side-effect/package.json index 54dee66f7..a66e868f1 100644 --- a/packages/cli/tests/subjects/side-effect-css/package.json +++ b/packages/cli/tests/subjects/css-side-effect/package.json @@ -1,5 +1,5 @@ { "private": true, - "name": "side-effect-css", + "name": "preact-css-side-effect-import", "sideEffects": false } diff --git a/packages/cli/tests/subjects/side-effect-css/style.css b/packages/cli/tests/subjects/css-side-effect/style.css similarity index 100% rename from packages/cli/tests/subjects/side-effect-css/style.css rename to packages/cli/tests/subjects/css-side-effect/style.css diff --git a/packages/cli/tests/subjects/custom-babelrc/package.json b/packages/cli/tests/subjects/custom-babelrc/package.json index babdc8863..69b15618c 100644 --- a/packages/cli/tests/subjects/custom-babelrc/package.json +++ b/packages/cli/tests/subjects/custom-babelrc/package.json @@ -1,4 +1,4 @@ { "private": true, - "name": "preact-babelrc" + "name": "preact-custom-babelrc" } diff --git a/packages/cli/tests/subjects/custom-template/package.json b/packages/cli/tests/subjects/custom-template/package.json index 94671fbec..3f0525704 100644 --- a/packages/cli/tests/subjects/custom-template/package.json +++ b/packages/cli/tests/subjects/custom-template/package.json @@ -1,4 +1,4 @@ { "private": true, - "name": "preact-webpack" + "name": "preact-custom-template" } diff --git a/packages/cli/tests/subjects/custom-webpack/package.json b/packages/cli/tests/subjects/custom-webpack/package.json index 94671fbec..f765efc28 100644 --- a/packages/cli/tests/subjects/custom-webpack/package.json +++ b/packages/cli/tests/subjects/custom-webpack/package.json @@ -1,4 +1,4 @@ { "private": true, - "name": "preact-webpack" + "name": "preact-custom-webpack" } diff --git a/packages/cli/tests/subjects/minimal/index.js b/packages/cli/tests/subjects/minimal/index.js new file mode 100644 index 000000000..31aba19f0 --- /dev/null +++ b/packages/cli/tests/subjects/minimal/index.js @@ -0,0 +1,4 @@ +import { h } from 'preact'; +import './style.css'; + +export default () =>

Minimal App

; diff --git a/packages/cli/tests/subjects/minimal/package.json b/packages/cli/tests/subjects/minimal/package.json new file mode 100644 index 000000000..b40c254dc --- /dev/null +++ b/packages/cli/tests/subjects/minimal/package.json @@ -0,0 +1,4 @@ +{ + "private": true, + "name": "preact-minimal" +} diff --git a/packages/cli/tests/subjects/minimal/style.css b/packages/cli/tests/subjects/minimal/style.css new file mode 100644 index 000000000..818d40628 --- /dev/null +++ b/packages/cli/tests/subjects/minimal/style.css @@ -0,0 +1,3 @@ +h1 { + color: red; +} diff --git a/packages/cli/tests/subjects/multiple-prerendering-with-provider/package.json b/packages/cli/tests/subjects/multiple-prerendering-with-provider/package.json index 8f8310dad..65d8c9c55 100644 --- a/packages/cli/tests/subjects/multiple-prerendering-with-provider/package.json +++ b/packages/cli/tests/subjects/multiple-prerendering-with-provider/package.json @@ -1,4 +1,4 @@ { "private": true, - "name": "preact-prerender" + "name": "preact-multiple-prerender-with-provider" } diff --git a/packages/cli/tests/subjects/multiple-prerendering/package.json b/packages/cli/tests/subjects/multiple-prerendering/package.json index 8f8310dad..37da750d7 100644 --- a/packages/cli/tests/subjects/multiple-prerendering/package.json +++ b/packages/cli/tests/subjects/multiple-prerendering/package.json @@ -1,4 +1,4 @@ { "private": true, - "name": "preact-prerender" + "name": "preact-multiple-prerender" } diff --git a/packages/cli/tests/subjects/preload-chunks/package.json b/packages/cli/tests/subjects/preload-chunks/package.json index 8f8310dad..e877bc349 100644 --- a/packages/cli/tests/subjects/preload-chunks/package.json +++ b/packages/cli/tests/subjects/preload-chunks/package.json @@ -1,4 +1,4 @@ { "private": true, - "name": "preact-prerender" + "name": "preact-preload-chunks" } diff --git a/packages/cli/tests/subjects/prerendering-hydration/package.json b/packages/cli/tests/subjects/prerendering-hydration/package.json index babdc8863..7a6401ba5 100644 --- a/packages/cli/tests/subjects/prerendering-hydration/package.json +++ b/packages/cli/tests/subjects/prerendering-hydration/package.json @@ -1,4 +1,4 @@ { "private": true, - "name": "preact-babelrc" + "name": "preact-prerendering-hydration" } diff --git a/packages/cli/tests/subjects/progressive-hydration-preact8/package.json b/packages/cli/tests/subjects/progressive-hydration-preact8/package.json index f5ced7f6d..ba6ec7590 100644 --- a/packages/cli/tests/subjects/progressive-hydration-preact8/package.json +++ b/packages/cli/tests/subjects/progressive-hydration-preact8/package.json @@ -1,6 +1,6 @@ { "private": true, - "name": "preact-prerender", + "name": "preact-prerendering-hydration-preact8", "dependencies": { "preact": "8.5.3", "preact-render-to-string": "4.1.0" diff --git a/packages/cli/tests/subjects/public-path/index.js b/packages/cli/tests/subjects/public-path/index.js new file mode 100644 index 000000000..7152cbbe1 --- /dev/null +++ b/packages/cli/tests/subjects/public-path/index.js @@ -0,0 +1,4 @@ +import { h } from 'preact'; +import './style.css'; + +export default () =>

Public path test

; diff --git a/packages/cli/tests/subjects/public-path/package.json b/packages/cli/tests/subjects/public-path/package.json new file mode 100644 index 000000000..e87954cc2 --- /dev/null +++ b/packages/cli/tests/subjects/public-path/package.json @@ -0,0 +1,4 @@ +{ + "private": true, + "name": "preact-public-path" +} diff --git a/packages/cli/tests/subjects/public-path/preact.config.js b/packages/cli/tests/subjects/public-path/preact.config.js new file mode 100644 index 000000000..e882c91b2 --- /dev/null +++ b/packages/cli/tests/subjects/public-path/preact.config.js @@ -0,0 +1,3 @@ +module.exports = function (config) { + config.output.publicPath = '/example-path/'; +}; diff --git a/packages/cli/tests/subjects/public-path/style.css b/packages/cli/tests/subjects/public-path/style.css new file mode 100644 index 000000000..e69de29bb diff --git a/packages/cli/tests/subjects/sass/package.json b/packages/cli/tests/subjects/sass/package.json deleted file mode 100644 index 9d0b0baa8..000000000 --- a/packages/cli/tests/subjects/sass/package.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "private": true, - "name": "preact-sass" -} diff --git a/packages/cli/tests/subjects/side-effect-css/index.js b/packages/cli/tests/subjects/side-effect-css/index.js deleted file mode 100644 index fd48dbdf4..000000000 --- a/packages/cli/tests/subjects/side-effect-css/index.js +++ /dev/null @@ -1,6 +0,0 @@ -import { h } from 'preact'; -import './style.css'; - -export default () => { - return

SideEffect CSS test

; -}; diff --git a/packages/cli/tests/subjects/static-root/package.json b/packages/cli/tests/subjects/static-root/package.json index 2a79fab6c..de041c7eb 100644 --- a/packages/cli/tests/subjects/static-root/package.json +++ b/packages/cli/tests/subjects/static-root/package.json @@ -1,4 +1,4 @@ { "private": true, - "name": "preact-prerender" + "name": "preact-static-root" }