michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

stop building, bundling, and transforming public/ files (#1210)

Browse source 
* stop bundling public/ files

* update www and examples
This commit is contained in:
Fred K. Schott 2021-08-25 11:51:04 -07:00 committed by GitHub
parent c819b3dade
commit affcd04f0f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 246 additions and 191 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
.changeset/young-rice-sort.md Normal file
View file

@ -0,0 +1,9 @@
---
'astro': minor
---
**[BREAKING CHANGE]** stop bundling, building, and processing public files. This fixes an issue where we weren't actually honoring the "do not process" property of the public directory.
If you were using the `public/` directory as expected and not using it to build files for you, then this should not be a breaking change. However, will notice that these files are no longer bundled.
If you were using the `public/` directory to build files (for example, like `public/index.scss`) then you can expect this to no longer work. As per the correct Astro documentation.

0
examples/blog-multiple-authors/public/global.scss → examples/blog-multiple-authors/public/global.css
View file

0
examples/blog/public/blog.scss → examples/blog/public/blog.css
View file

95
examples/blog/public/global.css Normal file
View file

@ -0,0 +1,95 @@
:root {
--font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
--color-green: #17c083;
}
* {
box-sizing: border-box;
margin: 0;
}
html {
display: grid;
width: 100%;
max-width: 100vw;
overflow: hidden;
height: 100%;
background-color: #000014;
}
html,
body {
padding: 0;
font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px);
font-family: var(--font-sans);
font-weight: 400;
background-image: radial-gradient(87.7% 87.7% at 85.6% 18.14%, #111827 0%, #000014 100%);
background-repeat: no-repeat;
color: #f3f4f6;
}
body {
position: relative;
display: grid;
place-items: center;
min-width: 100%;
max-width: 100vw;
min-height: 100vh;
overflow-x: hidden;
}
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
a {
position: relative;
text-decoration: none;
color: var(--color-green);
padding: 0.05em 0.125em;
margin: -0.05em -0.125em;
transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1);
z-index: 0;
display: inline-block;
}
a:hover, a:focus {
color: black;
}
a:hover::before, a:focus::before {
transform: scaleY(1);
background: var(--color-green);
}
a:visited {
color: var(--color-green);
}
a:visited:hover, a:visited:focus {
color: black;
}
a::before {
transform-origin: bottom center;
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
background: var(--color-green);
pointer-events: none;
transform: scaleY(0.05);
transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1);
z-index: -1;
}

93
examples/blog/public/global.scss
View file

@ -1,93 +0,0 @@
:root {
--font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono',
'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
--color-green: #17c083;
}
* {
box-sizing: border-box;
margin: 0;
}
html {
display: grid;
width: 100%;
max-width: 100vw;
overflow: hidden;
height: 100%;
background-color: #000014;
}
html,
body {
padding: 0;
font-size: clamp(14px, calc(1rem + (3vw - 1.2rem)), 20px);
font-family: var(--font-sans);
font-weight: 400;
background-image: radial-gradient(87.7% 87.7% at 85.6% 18.14%, #111827 0%, #000014 100%);
background-repeat: no-repeat;
color: #f3f4f6;
}
body {
position: relative;
display: grid;
place-items: center;
min-width: 100%;
max-width: 100vw;
min-height: 100vh;
overflow-x: hidden;
}
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
a {
position: relative;
text-decoration: none;
color: var(--color-green);
padding: 0.05em 0.125em;
margin: -0.05em -0.125em;
transition: color 120ms cubic-bezier(0.23, 1, 0.32, 1);
z-index: 0;
display: inline-block;
&:hover,
&:focus {
color: rgba(0, 0, 0, 1);
&::before {
transform: scaleY(1);
background: var(--color-green);
}
}
&:visited {
// color: var(--color-green);
color: var(--color-green);
&:hover,
&:focus {
color: rgba(0, 0, 0, 1);
}
}
&::before {
transform-origin: bottom center;
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
background: var(--color-green);
pointer-events: none;
transform: scaleY(0.05);
transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1), background 120ms cubic-bezier(0.23, 1, 0.32, 1);
z-index: -1;
}
}

3
examples/portfolio/src/components/MainHead.astro
View file

@ -6,7 +6,6 @@ const { title = 'Jeanine White: Personal Site' } = Astro.props;
<title>{title}</title> <title>{title}</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/_astro/src/scss/global.css">
<link rel="stylesheet" type="text/css" href="/global.css">
<link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700;900&display=swap" rel="stylesheet">

0
examples/portfolio/public/global.scss → examples/portfolio/src/scss/global.scss
View file

163
examples/with-markdown/public/styles/prism.scss → examples/with-markdown/public/global.css
View file

@ -1,69 +1,69 @@
pre, pre,
code { code {
color: #d4d4d4; color: #d4d4d4;
font-size: 14px; font-size: 14px;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
line-height: 1.5; line-height: 1.5;
direction: ltr; direction: ltr;
white-space: pre; white-space: pre;
text-align: left; text-align: left;
text-shadow: none; text-shadow: none;
word-break: normal; word-break: normal;
word-spacing: normal; word-spacing: normal;
-moz-tab-size: 4; -moz-tab-size: 4;
-o-tab-size: 4; -o-tab-size: 4;
tab-size: 4; tab-size: 4;
-webkit-hyphens: none; -webkit-hyphens: none;
-moz-hyphens: none; -moz-hyphens: none;
-ms-hyphens: none; -ms-hyphens: none;
hyphens: none; hyphens: none;
} }
pre::selection, pre::selection,
code::selection { code::selection {
text-shadow: none; text-shadow: none;
background: #b3d4fc; background: #b3d4fc;
} }
@media print { @media print {
pre, pre,
code { code {
text-shadow: none; text-shadow: none;
} }
} }
pre { pre {
margin: 0.5rem 0 16px; margin: 0.5rem 0 16px;
padding: 0.8rem 1rem 0.9rem; padding: 0.8rem 1rem 0.9rem;
overflow: auto; overflow: auto;
background: #282a36; background: #282a36;
border-radius: 4px; border-radius: 4px;
} }
:not(pre) > code { :not(pre) > code {
padding: 0.1em 0.3em; padding: 0.1em 0.3em;
color: #db4c69; color: #db4c69;
background: #f9f2f4; background: #f9f2f4;
border-radius: 0.3em; border-radius: 0.3em;
white-space: pre-wrap; white-space: pre-wrap;
} }
/********************************************************* /*********************************************************
* Tokens * Tokens
*/ */
.namespace { .namespace {
opacity: 0.7; opacity: 0.7;
} }
.token.comment, .token.comment,
.token.prolog, .token.prolog,
.token.doctype, .token.doctype,
.token.cdata { .token.cdata {
color: #6a9955; color: #6a9955;
} }
.token.punctuation { .token.punctuation {
color: #d4d4d4; color: #d4d4d4;
} }
.token.property, .token.property,
@ -73,7 +73,7 @@ pre {
.token.constant, .token.constant,
.token.symbol, .token.symbol,
.token.deleted { .token.deleted {
color: #b5cea8; color: #b5cea8;
} }
.token.selector, .token.selector,
@ -82,7 +82,7 @@ pre {
.token.char, .token.char,
.token.builtin, .token.builtin,
.token.inserted { .token.inserted {
color: #ce9178; color: #ce9178;
} }
.token.operator, .token.operator,
@ -90,86 +90,86 @@ pre {
.token.url, .token.url,
.language-css .token.string, .language-css .token.string,
.style .token.string { .style .token.string {
color: #d4d4d4; color: #d4d4d4;
background: rgb(45, 55, 72); background: #2d3748;
} }
.token.atrule, .token.atrule,
.token.attr-value, .token.attr-value,
.token.keyword { .token.keyword {
color: #c586c0; color: #c586c0;
} }
.token.function { .token.function {
color: #dcdcaa; color: #dcdcaa;
} }
.token.regex, .token.regex,
.token.important, .token.important,
.token.variable { .token.variable {
color: #d16969; color: #d16969;
} }
.token.important, .token.important,
.token.bold { .token.bold {
font-weight: bold; font-weight: bold;
} }
.token.italic { .token.italic {
font-style: italic; font-style: italic;
} }
.token.constant { .token.constant {
color: #9cdcfe; color: #9cdcfe;
} }
.token.class-name { .token.class-name {
color: #4ec9b0; color: #4ec9b0;
} }
.token.parameter { .token.parameter {
color: #9cdcfe; color: #9cdcfe;
} }
.token.interpolation { .token.interpolation {
color: #9cdcfe; color: #9cdcfe;
} }
.token.punctuation.interpolation-punctuation { .token.punctuation.interpolation-punctuation {
color: #569cd6; color: #569cd6;
} }
.token.boolean { .token.boolean {
color: #569cd6; color: #569cd6;
} }
.token.property { .token.property {
color: #9cdcfe; color: #9cdcfe;
} }
.token.selector { .token.selector {
color: #d7ba7d; color: #d7ba7d;
} }
.token.tag { .token.tag {
color: #569cd6; color: #569cd6;
} }
.token.attr-name { .token.attr-name {
color: #9cdcfe; color: #9cdcfe;
} }
.token.attr-value { .token.attr-value {
color: #ce9178; color: #ce9178;
} }
.token.entity { .token.entity {
color: #4ec9b0; color: #4ec9b0;
cursor: unset; cursor: unset;
} }
.token.namespace { .token.namespace {
color: #4ec9b0; color: #4ec9b0;
} }
/********************************************************* /*********************************************************
@ -177,52 +177,59 @@ pre {
*/ */
pre[class*='language-javascript'], pre[class*='language-javascript'],
code[class*='language-javascript'] { code[class*='language-javascript'] {
color: #4ec9b0; color: #4ec9b0;
} }
pre[class*='language-css'], pre[class*='language-css'],
code[class*='language-css'] { code[class*='language-css'] {
color: #ce9178; color: #ce9178;
} }
pre[class*='language-html'], pre[class*='language-html'],
code[class*='language-html'] { code[class*='language-html'] {
color: #d4d4d4; color: #d4d4d4;
} }
.language-html .token.punctuation { .language-html .token.punctuation {
color: #808080; color: #808080;
} }
/********************************************************* /*********************************************************
* Line highlighting * Line highlighting
*/ */
pre[data-line] { pre[data-line] {
position: relative; position: relative;
} }
pre > code { pre > code {
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.line-highlight { .line-highlight {
position: absolute; position: absolute;
right: 0; right: 0;
left: 0; left: 0;
z-index: 0; z-index: 0;
margin-top: 1em; margin-top: 1em;
padding: inherit 0; padding: inherit 0;
line-height: inherit; line-height: inherit;
white-space: pre; white-space: pre;
background: #f7ebc6; background: #f7ebc6;
box-shadow: inset 5px 0 0 #f7d87c; box-shadow: inset 5px 0 0 #f7d87c;
pointer-events: none; pointer-events: none;
} }
pre[class*='language-bash'] .token.function { pre[class*='language-bash'] .token.function {
color: #d4d4d4; color: #d4d4d4;
} }
.token.comment { .token.comment {
color: #fff7; color: #fff7;
} }
body {
max-width: 900px;
margin: auto;
}

6
examples/with-markdown/public/styles/global.scss
View file

@ -1,6 +0,0 @@
@use "./prism.scss";
body {
max-width: 900px;
margin: auto;
}

2
examples/with-markdown/src/layouts/main.astro
View file

@ -9,7 +9,7 @@ const { content } = Astro.props;
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<title>{content.title}</title> <title>{content.title}</title>
<link rel="stylesheet" href="/styles/global.css"> <link rel="stylesheet" href="/global.css">
</head> </head>
<body> <body>
<slot/> <slot/>

2
packages/astro/src/build.ts
View file

@ -149,7 +149,7 @@ ${stack}
astroRuntime.load(url).then((result) => { astroRuntime.load(url).then((result) => {
if (result.statusCode !== 200) { if (result.statusCode !== 200) {
if (result.statusCode === 404) { if (result.statusCode === 404) {
throw new Error(`${buildState[id].srcPath.href}: could not find "${path.basename(url)}"`); throw new Error(`${buildState[id].srcPath.href}: could not find "${url}"`);
} }
// there shouldn’t be a build error here // there shouldn’t be a build error here
throw (result as any).error || new Error(`unexpected status ${result.statusCode} when loading ${url}`); throw (result as any).error || new Error(`unexpected status ${result.statusCode} when loading ${url}`);

8
packages/astro/src/build/bundle/css.ts
View file

@ -5,7 +5,7 @@ import { performance } from 'perf_hooks';
import shorthash from 'shorthash'; import shorthash from 'shorthash';
import cheerio from 'cheerio'; import cheerio from 'cheerio';
import esbuild from 'esbuild'; import esbuild from 'esbuild';
import { getDistPath, getSrcPath, stopTimer } from '../util.js'; import { getDistPath, getSrcPath, IS_ASTRO_FILE_URL, stopTimer } from '../util.js';
import { debug } from '../../logger.js'; import { debug } from '../../logger.js';
// config // config
@ -46,7 +46,9 @@ export async function bundleCSS({
for (const pageUrl of sortedPages) { for (const pageUrl of sortedPages) {
const { css } = depTree[pageUrl]; const { css } = depTree[pageUrl];
for (const cssUrl of css.keys()) { for (const cssUrl of css.keys()) {
if (cssMap.has(cssUrl)) { if (!IS_ASTRO_FILE_URL.test(cssUrl)) {
// do not add to cssMap, leave as-is.
} else if (cssMap.has(cssUrl)) {
// scenario 1: if multiple URLs require this CSS, upgrade to common chunk // scenario 1: if multiple URLs require this CSS, upgrade to common chunk
cssMap.set(cssUrl, COMMON_URL); cssMap.set(cssUrl, COMMON_URL);
} else { } else {
@ -83,7 +85,7 @@ export async function bundleCSS({
await Promise.all( await Promise.all(
Object.keys(buildState).map(async (id) => { Object.keys(buildState).map(async (id) => {
if (buildState[id].contentType !== 'text/css') return; if (buildState[id].contentType !== 'text/css') return;
const { code } = await esbuild.transform(buildState[id].contents as string, { const { code } = await esbuild.transform(buildState[id].contents.toString(), {
loader: 'css', loader: 'css',
minify: true, minify: true,
}); });

6
packages/astro/src/build/bundle/js.ts
View file

@ -6,6 +6,7 @@ import { fileURLToPath } from 'url';
import { rollup } from 'rollup'; import { rollup } from 'rollup';
import { terser } from 'rollup-plugin-terser'; import { terser } from 'rollup-plugin-terser';
import { createBundleStats, addBundleStats, BundleStatsMap } from '../stats.js'; import { createBundleStats, addBundleStats, BundleStatsMap } from '../stats.js';
import { IS_ASTRO_FILE_URL } from '../util.js';
interface BundleOptions { interface BundleOptions {
dist: URL; dist: URL;
@ -24,12 +25,13 @@ export function collectJSImports(buildState: BuildOutput): Set<string> {
/** Bundle JS action */ /** Bundle JS action */
export async function bundleJS(imports: Set<string>, { astroRuntime, dist }: BundleOptions): Promise<BundleStatsMap> { export async function bundleJS(imports: Set<string>, { astroRuntime, dist }: BundleOptions): Promise<BundleStatsMap> {
const ROOT = 'astro:root'; const ROOT = 'astro:root';
const validImports = [...imports].filter((url) => IS_ASTRO_FILE_URL.test(url));
const root = ` const root = `
${[...imports].map((url) => `import '${url}';`).join('\n')} ${validImports.map((url) => `import '${url}';`).join('\n')}
`; `;
const inputOptions: InputOptions = { const inputOptions: InputOptions = {
input: [...imports], input: validImports,
plugins: [ plugins: [
{ {
name: 'astro:build', name: 'astro:build',

6
packages/astro/src/build/util.ts
View file

@ -5,6 +5,12 @@ import fs from 'fs';
import path from 'path'; import path from 'path';
import { URL } from 'url'; import { URL } from 'url';
/**
* Only Astro-handled imports need bundling. Any other imports are considered
* a part of `public/`, and should not be touched.
*/
export const IS_ASTRO_FILE_URL = /^\/(_astro|_astro_frontend|_snowpack)\//;
/** Normalize URL to its canonical form */ /** Normalize URL to its canonical form */
export function canonicalURL(url: string, base?: string): URL { export function canonicalURL(url: string, base?: string): URL {
let pathname = url.replace(/\/index.html$/, ''); // index.html is not canonical let pathname = url.replace(/\/index.html$/, ''); // index.html is not canonical

2
packages/astro/src/runtime.ts
View file

@ -283,7 +283,7 @@ async function createSnowpack(astroConfig: AstroConfig, options: CreateSnowpackO
}; };
const mountOptions = { const mountOptions = {
...(existsSync(astroConfig.public) ? { [fileURLToPath(astroConfig.public)]: '/' } : {}), ...(existsSync(astroConfig.public) ? { [fileURLToPath(astroConfig.public)]: { url: '/', static: true, resolve: false } } : {}),
[fileURLToPath(frontendPath)]: '/_astro_frontend', [fileURLToPath(frontendPath)]: '/_astro_frontend',
[fileURLToPath(src)]: '/_astro/src', // must be last (greediest) [fileURLToPath(src)]: '/_astro/src', // must be last (greediest)
}; };

21
packages/astro/test/astro-public.test.js Normal file
View file

@ -0,0 +1,21 @@
import { suite } from 'uvu';
import * as assert from 'uvu/assert';
import { setup, setupBuild } from './helpers.js';
const Public = suite('Public');
setup(Public, './fixtures/astro-public');
setupBuild(Public, './fixtures/astro-public');
Public('css and js files do not get bundled', async ({ build, readFile }) => {
await build().catch((err) => {
assert.ok(!err, 'Error during the build');
});
let indexHtml = await readFile('/index.html');
assert.ok(indexHtml.includes('<script src="/example.js"></script>'));
assert.ok(indexHtml.includes('<link href="/example.css" ref="stylesheet">'));
assert.ok(indexHtml.includes('<img src="/images/twitter.png">'));
});
Public.run();

0
packages/astro/test/fixtures/astro-public/public/example.css vendored Normal file
View file

0
packages/astro/test/fixtures/astro-public/public/example.js vendored Normal file
View file

BIN
packages/astro/test/fixtures/astro-public/public/images/twitter.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 457 B

3
packages/astro/test/fixtures/astro-public/snowpack.config.json vendored Normal file
View file

@ -0,0 +1,3 @@
{
"workspaceRoot": "../../../../../"
}

10
packages/astro/test/fixtures/astro-public/src/pages/index.astro vendored Normal file
View file

@ -0,0 +1,10 @@
<html lang="en">
<head>
<title>This Site</title>
<link href="/example.css" ref="stylesheet"/>
<script src="/example.js"></script>
</head>
<body>
<img src="/images/twitter.png" />
</body>
</html>

2
www/src/components/BlogHead.astro
View file

@ -4,4 +4,4 @@ import BaseHead from './BaseHead.astro';
const { title, description, canonicalURL } = Astro.props; const { title, description, canonicalURL } = Astro.props;
--- ---
<BaseHead title={title} description={description} canonicalURL={canonicalURL} /> <BaseHead title={title} description={description} canonicalURL={canonicalURL} />
<link rel="stylesheet" href="/blog.css" /> <link rel="stylesheet" href={Astro.resolve('../../scss/blog.css')} />

2
www/src/pages/blog/index.astro
View file

@ -12,7 +12,7 @@ let lang = 'en';
<html lang={ lang ?? 'en' }> <html lang={ lang ?? 'en' }>
<head> <head>
<BaseHead title={title} description={description} permalink={permalink} /> <BaseHead title={title} description={description} permalink={permalink} />
<link rel="stylesheet" href="/blog.css" /> <link rel="stylesheet" href={Astro.resolve('../../scss/blog.css')} />
<style> <style>
body { body {

2
www/src/pages/blog/introducing-astro.astro
View file

@ -19,7 +19,7 @@ let lang = 'en';
<html lang={ lang ?? 'en' }> <html lang={ lang ?? 'en' }>
<head> <head>
<BaseHead title={title} description={description} permalink={permalink} /> <BaseHead title={title} description={description} permalink={permalink} />
<link rel="stylesheet" href="/blog.css" /> <link rel="stylesheet" href={Astro.resolve('../../scss/blog.css')} />
</head> </head>
<body> <body>

2
www/src/pages/index.astro
View file

@ -18,7 +18,7 @@ let lang = 'en';
<html lang={ lang ?? 'en' }> <html lang={ lang ?? 'en' }>
<head> <head>
<BaseHead title={title} description={description} permalink={permalink} /> <BaseHead title={title} description={description} permalink={permalink} />
<link rel="stylesheet" href="/global.css" /> <link rel="stylesheet" href={Astro.resolve('../scss/global.css')} />
</head> </head>
<body> <body>

0
www/public/blog.scss → www/src/scss/blog.scss
View file

0
www/public/code.scss → www/src/scss/code.scss
View file

0
www/public/global.scss → www/src/scss/global.scss
View file