diff --git a/src/build.ts b/src/build.ts index e9836f706..57e983c3d 100644 --- a/src/build.ts +++ b/src/build.ts @@ -108,6 +108,7 @@ export async function build( // Generate the client bundles (JavaScript and styles). TODO Use a content // hash, or perhaps the Framework version number for built-in modules. + const localStylesheets = new Set(); if (addPublic) { for (const path of globalImports) { if (path.startsWith("/_observablehq/") && path.endsWith(".js")) { @@ -138,14 +139,16 @@ export async function build( const sourcePath = await populateNpmCache(root, path); // TODO effects await effects.copyFile(sourcePath, path); } else if (!/^\w+:/.test(specifier)) { - const sourcePath = join(root, specifier); - effects.output.write(`${faint("build")} ${sourcePath} ${faint("→")} `); - const contents = await bundleStyles({path: sourcePath, minify: true}); - const hash = createHash("sha256").update(contents).digest("hex").slice(0, 8); - const ext = extname(specifier); - const alias = `/${join("_import", dirname(specifier), `${basename(specifier, ext)}.${hash}${ext}`)}`; - aliases.set(resolveStylesheetPath(root, specifier), alias); - await effects.writeFile(alias, contents); + localStylesheets.add(specifier); + await bundleStyles({ + path: join(root, specifier), + resolve(args) { + if (args.path.endsWith(".css") || args.path.match(/^[#?]/) || args.path.match(/^\w+:/)) return; + files.add(args.path); + loaders.resolveFilePath(args.path); + return {path: "(pending)", external: true}; + } + }); } } } @@ -176,6 +179,27 @@ export async function build( await effects.writeFile(alias, contents); } + // Write local stylesheets. + if (addPublic) { + for (const specifier of localStylesheets) { + const sourcePath = join(root, specifier); + effects.output.write(`${faint("build")} ${sourcePath} ${faint("→")} `); + const contents = await bundleStyles({ + path: sourcePath, + minify: true, + resolve(args) { + if (args.path.endsWith(".css") || args.path.match(/^[#?]/) || args.path.match(/^\w+:/)) return; + return {path: join("..", aliases.get(loaders.resolveFilePath(args.path))!), external: true}; + } + }); + const hash = createHash("sha256").update(contents).digest("hex").slice(0, 8); + const ext = extname(specifier); + const alias = `/${join("_import", dirname(specifier), `${basename(specifier, ext)}.${hash}${ext}`)}`; + aliases.set(resolveStylesheetPath(root, specifier), alias); + await effects.writeFile(alias, contents); + } + } + // Download npm imports. TODO It might be nice to use content hashes for // these, too, but it would involve rewriting the files since populateNpmCache // doesn’t let you pass in a resolver. diff --git a/src/preview.ts b/src/preview.ts index 336834fd0..8afbf97a8 100644 --- a/src/preview.ts +++ b/src/preview.ts @@ -140,7 +140,19 @@ export class PreviewServer { try { if (pathname.endsWith(".css")) { await access(filepath, constants.R_OK); - end(req, res, await bundleStyles({path: filepath}), "text/css"); + end( + req, + res, + await bundleStyles({ + path: filepath, + resolve(args) { + if (args.path.endsWith(".css") || args.path.match(/^[#?]/) || args.path.match(/^\w+:/)) return; + const path = loaders.resolveFilePath(args.path); + return {path, external: true}; + } + }), + "text/css" + ); return; } else if (pathname.endsWith(".js")) { const input = await readJavaScript(join(root, path)); diff --git a/src/rollup.ts b/src/rollup.ts index 4a6544509..8bf08a2a6 100644 --- a/src/rollup.ts +++ b/src/rollup.ts @@ -36,16 +36,27 @@ function rewriteInputsNamespace(code: string) { export async function bundleStyles({ minify = false, path, - theme + theme, + resolve }: { minify?: boolean; path?: string; theme?: string[]; + resolve?: ({path}: {path: string}) => {path: string; external: true} | undefined; }): Promise { const result = await build({ bundle: true, ...(path ? {entryPoints: [path]} : {stdin: {contents: renderTheme(theme!), loader: "css"}}), write: false, + plugins: [ + { + name: "resolve CSS assets", + setup(build) { + build.onResolve({filter: /^\w+:\/\//}, ({path}) => ({path, external: true})); + if (resolve) build.onResolve({filter: /./}, resolve); + } + } + ], minify, alias: STYLE_MODULES }); diff --git a/test/input/build/css-public/atkinson.css b/test/input/build/css-public/atkinson.css new file mode 100644 index 000000000..beb03f1fa --- /dev/null +++ b/test/input/build/css-public/atkinson.css @@ -0,0 +1,9 @@ +@font-face { + font-family: "Atkinson Hyperlegible"; + src: url(https://fonts.gstatic.com/s/atkinsonhyperlegible/v11/9Bt23C1KxNDXMspQ1lPyU89-1h6ONRlW45G04pIoWQeCbA.woff2) + format("woff2"); +} + +:root { + --serif: "Atkinson Hyperlegible"; +} diff --git a/test/input/build/css-public/horse.jpg b/test/input/build/css-public/horse.jpg new file mode 100644 index 000000000..016b4a1cb Binary files /dev/null and b/test/input/build/css-public/horse.jpg differ diff --git a/test/input/build/css-public/index.md b/test/input/build/css-public/index.md new file mode 100644 index 000000000..2b352bccd --- /dev/null +++ b/test/input/build/css-public/index.md @@ -0,0 +1,12 @@ +--- +style: style.css +--- + +# CSS assets + +Atkinson Hyperlegible font is named after Braille Institute founder, J. Robert Atkinson. What makes it different from traditional typography design is that it focuses on letterform distinction to increase character recognition, ultimately improving readability. [We are making it free for anyone to use!](https://brailleinstitute.org/freefont) + +
+
+
This image is set with CSS.
+
diff --git a/test/input/build/css-public/style.css b/test/input/build/css-public/style.css new file mode 100644 index 000000000..66596b33f --- /dev/null +++ b/test/input/build/css-public/style.css @@ -0,0 +1,11 @@ +@import url("observablehq:default.css"); +@import url("observablehq:theme-air.css"); +@import url("atkinson.css"); + +div.bg { + background-image: url("horse.jpg"); +} + +div.dont-break-hashes { + offset-path: url(#path); +} diff --git a/test/output/build/css-public/_file/horse.2d33a223.jpg b/test/output/build/css-public/_file/horse.2d33a223.jpg new file mode 100644 index 000000000..016b4a1cb Binary files /dev/null and b/test/output/build/css-public/_file/horse.2d33a223.jpg differ diff --git a/test/output/build/css-public/_import/style.538adc61.css b/test/output/build/css-public/_import/style.538adc61.css new file mode 100644 index 000000000..bc063fdf3 --- /dev/null +++ b/test/output/build/css-public/_import/style.538adc61.css @@ -0,0 +1 @@ +:root{--monospace: Menlo, Consolas, monospace;--monospace-font: 14px/1.5 var(--monospace);--serif: "Source Serif Pro", "Iowan Old Style", "Apple Garamond", "Palatino Linotype", "Times New Roman", "Droid Serif", Times, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--sans-serif: -apple-system, BlinkMacSystemFont, "avenir next", avenir, helvetica, "helvetica neue", ubuntu, roboto, noto, "segoe ui", arial, sans-serif;--theme-blue: #4269d0;--theme-green: #3ca951;--theme-red: #ff725c;--theme-yellow: #efb118}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--theme-background);color:var(--theme-foreground)}body{font:17px/1.5 var(--serif);margin:0}a[href]{color:var(--theme-foreground-focus)}h1,h2,h3,h4,h5,h6{color:var(--theme-foreground-alt);font-weight:700;line-height:1.15;margin-top:0;margin-bottom:.25rem;scroll-margin-top:1rem;text-wrap:balance}h2+p,h3+p,h4+p,h2+table,h3+table,h4+table{margin-top:0}h1+h2{color:var(--theme-foreground);font-size:20px;font-style:italic;font-weight:400;margin-bottom:1rem}a[href]{text-decoration:none}a[href]:hover,a[href]:focus{text-decoration:underline}h1 code,h2 code,h3 code,h4 code,h5 code,h6 code{font-size:90%}pre{line-height:1.5}pre,code,tt{font-family:var(--monospace);font-size:14px}img{max-width:calc(100vw - 28px)}p,table,figure,figcaption,h1,h2,h3,h4,h5,h6,.katex-display{max-width:640px}blockquote,ol,ul{max-width:600px}blockquote{margin:1rem 1.5rem}ul ol{padding-left:28px}hr{height:1px;margin:1rem 0;padding:1rem 0;border:none;background:no-repeat center/100% 1px linear-gradient(to right,var(--theme-foreground-faintest),var(--theme-foreground-faintest))}pre{background-color:var(--theme-background-alt);border-radius:4px;margin:1rem -1rem;max-width:960px;min-height:1.5em;padding:.5rem 1rem;overflow-x:auto;box-sizing:border-box}input:not([type]),input[type=email],input[type=number],input[type=password],input[type=range],input[type=search],input[type=tel],input[type=text],input[type=url]{width:240px}input,canvas,button{vertical-align:middle}button,input,textarea{accent-color:var(--theme-blue)}table{width:100%;border-collapse:collapse;font:13px/1.2 var(--sans-serif)}table pre,table code,table tt{font-size:inherit;line-height:inherit}th>pre:only-child,td>pre:only-child{margin:0;padding:0}th{color:var(--theme-foreground);text-align:left;vertical-align:bottom}td{color:var(--theme-foreground-alt);vertical-align:top}th,td{padding:3px 6.5px 3px 0}th:last-child,td:last-child{padding-right:0}tr:not(:last-child){border-bottom:solid 1px var(--theme-foreground-faintest)}thead tr{border-bottom:solid 1px var(--theme-foreground-fainter)}figure,table{margin:1rem 0}figure img{max-width:100%}figure>h2,figure>h3{font-family:var(--sans-serif)}figure>h2{font-size:20px}figure>h3{font-size:16px;font-weight:400}figcaption{font:small var(--sans-serif);color:var(--theme-foreground-muted)}a[href].observablehq-header-anchor{color:inherit}:root{--font-big: 700 32px/1 var(--sans-serif);--font-small: 14px var(--sans-serif)}.big{font:var(--font-big)}.small{font:var(--font-small)}.red{color:var(--theme-red)}.yellow{color:var(--theme-yellow)}.green{color:var(--theme-green)}.blue{color:var(--theme-blue)}.muted{color:var(--theme-foreground-muted)}.observablehq--draft>h1:first-of-type:after{content:" [DRAFT]";color:var(--theme-foreground-muted)}:root{--theme-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 7L8.125 9.5L11.25 7' stroke='black' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");--theme-toggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m10.5,11 2.5-3-2.5-3 M6,8h7' fill='none' stroke='black' stroke-width='2'/%3E%3Crect x='2' y='2' fill='currentColor' height='12' rx='0.5' width='2'/%3E%3C/svg%3E");--theme-magnifier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath stroke='currentColor' stroke-width='2' fill='none' d='M15,15L10.5,10.5a3,3 0 1,0 -6 -6a3,3 0 1,0 6 6'%3E%3C/path%3E%3C/svg%3E")}#observablehq-main,#observablehq-header,#observablehq-footer{margin:1rem auto;max-width:1152px}#observablehq-main{min-height:calc(100vh - 20rem);position:relative;z-index:0}#observablehq-footer{display:block;margin-top:10rem;font:12px var(--sans-serif);color:var(--theme-foreground-faint)}#observablehq-footer nav{display:grid;max-width:640px;grid-template-columns:1fr 1fr;column-gap:1rem;margin-bottom:1rem}#observablehq-footer nav a{display:flex;flex-direction:column;border:1px solid var(--theme-foreground-fainter);border-radius:8px;padding:1rem;line-height:1rem;text-decoration:none}#observablehq-footer nav a span{font-size:14px}#observablehq-footer nav a:hover span{text-decoration:underline}#observablehq-footer nav a:hover{border-color:var(--theme-foreground-focus)}#observablehq-footer nav a[rel=prev]{grid-column:1;align-items:start}#observablehq-footer nav a[rel=next]{grid-column:2;align-items:end}#observablehq-footer nav a:before{color:var(--theme-foreground-faint)}#observablehq-footer nav a[rel=prev]:before{content:"Previous page"}#observablehq-footer nav a[rel=next]:before{content:"Next page"}#observablehq-center{margin:1rem 2rem}#observablehq-sidebar{position:fixed;background:var(--theme-background-alt);color:var(--theme-foreground-muted);font:14px var(--sans-serif);visibility:hidden;font-weight:500;width:272px;z-index:2;top:0;bottom:0;left:-272px;box-sizing:border-box;padding:0 .5rem 1rem;overflow-y:auto}#observablehq-sidebar ol,#observablehq-toc ol{list-style:none;margin:0;padding:0}#observablehq-sidebar>ol,#observablehq-sidebar>details,#observablehq-sidebar>section{position:relative;padding-bottom:.5rem;margin:.5rem 0;border-bottom:solid 1px var(--theme-foreground-faintest)}#observablehq-sidebar>ol:first-child{position:sticky;top:0;z-index:1;background:var(--theme-background-alt);font-size:16px;font-weight:700;padding-top:1rem;padding-left:.5rem;margin:0;margin-left:-.5rem;color:var(--theme-foreground)}#observablehq-sidebar>ol:last-child,#observablehq-sidebar>details:last-child,#observablehq-sidebar>section:last-child{border-bottom:none}#observablehq-sidebar summary{font-weight:700;color:var(--theme-foreground);cursor:default}#observablehq-sidebar summary::-webkit-details-marker,#observablehq-sidebar summary::marker{display:none}#observablehq-sidebar details summary:after{position:absolute;right:.5rem;width:1rem;height:1rem;background:var(--theme-foreground-muted);content:"";-webkit-mask:var(--theme-caret);mask:var(--theme-caret);transition:transform .25s ease;transform:rotate(-90deg);transform-origin:50% 50%}#observablehq-sidebar details summary:hover:after{color:var(--theme-foreground)}#observablehq-sidebar details[open] summary:after{transform:rotate(0)}#observablehq-sidebar-toggle{position:fixed;appearance:none;background:none;top:0;left:0;height:100%;width:2rem;display:flex;align-items:center;justify-content:center;cursor:e-resize;margin:0;color:var(--theme-foreground-muted);z-index:1}#observablehq-sidebar-close{position:absolute;top:1rem;right:0;width:2rem;height:2.2rem;display:flex;align-items:center;justify-content:center;color:var(--theme-foreground-muted);cursor:w-resize;z-index:2}#observablehq-sidebar-toggle:before,#observablehq-sidebar-close:before{content:"";width:1rem;height:1rem;background:currentColor;-webkit-mask:var(--theme-toggle);mask:var(--theme-toggle)}#observablehq-sidebar-close:before{transform:scaleX(-1)}#observablehq-sidebar summary,.observablehq-link a{display:flex;padding:.5rem 1rem .5rem 1.5rem;margin-left:-.5rem;align-items:center}#observablehq-sidebar details summary:hover,.observablehq-link-active a,.observablehq-link a:hover{background:var(--theme-background)}.observablehq-link a:hover{color:var(--theme-foreground-focus)}#observablehq-toc{display:none;position:fixed;color:var(--theme-foreground-muted);font:400 14px var(--sans-serif);z-index:1;top:0;right:0;bottom:0;overflow-y:auto}#observablehq-toc nav{width:192px;margin:2rem 0;padding:0 1rem;box-sizing:border-box;border-left:solid 1px var(--theme-foreground-faintest)}#observablehq-toc div{font-weight:700;color:var(--theme-foreground);margin-bottom:.5rem}.observablehq-secondary-link a{display:block;padding:.25rem 0}.observablehq-link:not(.observablehq-link-active) a[href]:not(:hover),.observablehq-secondary-link:not(.observablehq-secondary-link-active) a[href]:not(:hover){color:inherit}.observablehq-link-active,.observablehq-secondary-link-active{position:relative}.observablehq-link-active:before,.observablehq-secondary-link-highlight{content:"";position:absolute;width:3px;background:var(--theme-foreground-focus)}.observablehq-link-active:before{top:0;bottom:0;left:-.5rem}.observablehq-secondary-link-highlight{left:1px;top:2rem;height:0;transition:top .15s ease,height .15s ease}#observablehq-sidebar{transition:visibility .15s 0ms,left .15s 0ms ease}#observablehq-sidebar:focus-within,#observablehq-sidebar-toggle:checked~#observablehq-sidebar{left:0;visibility:initial;box-shadow:0 0 8px 4px #0000001a;transition:visibility 0ms 0ms,left .15s 0ms ease}#observablehq-sidebar-backdrop{display:none;position:fixed;inset:0;z-index:2}#observablehq-sidebar-backdrop:has(~#observablehq-sidebar:focus-within),#observablehq-sidebar-toggle:checked~#observablehq-sidebar-backdrop{display:initial}@media (prefers-color-scheme: dark){#observablehq-sidebar:focus-within,#observablehq-sidebar-toggle:checked~#observablehq-sidebar{box-shadow:0 0 8px 4px #00000080}}@media (min-width: calc(912px + 6rem)){#observablehq-sidebar{transition:none!important}#observablehq-sidebar-toggle:checked~#observablehq-sidebar-backdrop{display:none}#observablehq-sidebar-toggle:checked~#observablehq-sidebar,#observablehq-sidebar-toggle:indeterminate~#observablehq-sidebar{left:0;visibility:initial;box-shadow:none;border-right:solid 1px var(--theme-foreground-faintest)}#observablehq-sidebar-toggle:checked~#observablehq-center,#observablehq-sidebar-toggle:indeterminate~#observablehq-center{padding-left:calc(272px + 1rem);padding-right:1rem}}@media (min-width: calc(832px + 6rem)){#observablehq-toc~#observablehq-center{padding-right:calc(192px + 1rem)}#observablehq-toc{display:block}}@media (min-width: calc(912px + 6rem)){#observablehq-sidebar-toggle:checked~#observablehq-toc,#observablehq-sidebar-toggle:indeterminate~#observablehq-toc{display:none}}@media (min-width: calc(1104px + 6rem)){#observablehq-sidebar-toggle:checked~#observablehq-toc,#observablehq-sidebar-toggle:indeterminate~#observablehq-toc,#observablehq-toc{display:block}#observablehq-sidebar-toggle:checked~#observablehq-toc~#observablehq-center,#observablehq-sidebar-toggle:indeterminate~#observablehq-toc~#observablehq-center,#observablehq-toc~#observablehq-center{padding-right:calc(192px + 1rem)}}.observablehq-pre-container{position:relative;margin:1rem -1rem;max-width:960px}.observablehq-pre-container:after{position:absolute;top:0;right:0;height:21px;font:12px var(--sans-serif);color:var(--theme-foreground-muted);background:linear-gradient(to right,transparent,var(--theme-background-alt) 40%);padding:.5rem .5rem .5rem 1.5rem}.observablehq-pre-container[data-language]:after{content:attr(data-language)}.observablehq-pre-container pre{padding-right:4rem;margin:0;max-width:none}.observablehq-pre-copy{position:absolute;top:0;right:0;background:none;color:transparent;border:none;border-radius:4px;padding:0 8px;margin:4px;height:29px;cursor:pointer;z-index:1;display:flex;align-items:center}.observablehq-pre-copied:before{content:"Copied!";position:absolute;right:calc(100% + .25rem);background:linear-gradient(to right,transparent,var(--theme-background-alt) 10%);color:var(--theme-green);font:var(--font-small);padding:4px 8px 4px 16px;pointer-events:none;animation-name:observablehq-pre-copied;animation-duration:.25s;animation-direction:alternate;animation-iteration-count:2}@keyframes observablehq-pre-copied{0%{opacity:0;transform:translate(.5rem)}50%{opacity:1}to{transform:translate(0)}}.observablehq-pre-container[data-copy] .observablehq-pre-copy,.observablehq-pre-container:hover .observablehq-pre-copy,.observablehq-pre-container .observablehq-pre-copy:focus{background:var(--theme-background-alt);color:var(--theme-foreground-faint)}.observablehq-pre-container .observablehq-pre-copy:hover{color:var(--theme-foreground-muted)}.observablehq-pre-container .observablehq-pre-copy:active{color:var(--theme-foreground);background:var(--theme-foreground-faintest)}#observablehq-sidebar.observablehq-search-results>ol:not(:first-child),#observablehq-sidebar.observablehq-search-results>details,#observablehq-sidebar.observablehq-search-results>section{display:none}#observablehq-search{position:relative;padding:.5rem 0 0;display:flex;align-items:center}#observablehq-search input{padding:6px 4px 6px 2.2em;width:100%;border:none;border-radius:4px;background-color:var(--theme-background);font-size:13.3px;height:28px}#observablehq-search input::placeholder{color:var(--theme-foreground-faint)}#observablehq-search:before{position:absolute;left:.5rem;content:"";width:1rem;height:1rem;background:currentColor;-webkit-mask:var(--theme-magnifier);mask:var(--theme-magnifier);pointer-events:none}#observablehq-search:after{position:absolute;right:6px;content:attr(data-shortcut);pointer-events:none}#observablehq-search:focus-within:after{content:""}#observablehq-search-results{--relevance-width: 32px;position:absolute;overflow-y:auto;top:6.5rem;left:0;right:.5rem;bottom:0}#observablehq-search-results a span{max-width:184px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#observablehq-search-results div{text-align:right;font-size:10px;margin:.5em}#observablehq-search-results li{position:relative;display:flex;align-items:center}#observablehq-search-results a{flex-grow:1}#observablehq-search-results li:after,#observablehq-search-results a:after{content:"";width:var(--relevance-width);height:4px;position:absolute;right:.5em;border-radius:2px;background:var(--theme-foreground-muted)}#observablehq-search-results li.observablehq-link-active:after{background:var(--theme-foreground-focus)}#observablehq-search-results a:after{background:var(--theme-foreground-faintest)}#observablehq-search-results li[data-score="0"]:after{width:calc(var(--relevance-width) * .125)}#observablehq-search-results li[data-score="1"]:after{width:calc(var(--relevance-width) * .25)}#observablehq-search-results li[data-score="2"]:after{width:calc(var(--relevance-width) * .4375)}#observablehq-search-results li[data-score="3"]:after{width:calc(var(--relevance-width) * .625)}#observablehq-search-results li[data-score="4"]:after{width:calc(var(--relevance-width) * .8125)}@media print{#observablehq-center{padding-left:1em!important}#observablehq-sidebar,#observablehq-footer{display:none!important}}#observablehq-center{container-type:inline-size}.grid{margin:1rem 0;display:grid;gap:1rem;grid-auto-rows:1fr}.grid svg{overflow:visible}.grid figure{margin:0}.grid>*>p:first-child{margin-top:0}.grid>*>p:last-child{margin-bottom:0}@container (min-width: 640px){.grid-cols-2,.grid-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-2 .grid-colspan-2,.grid-cols-2 .grid-colspan-3,.grid-cols-2 .grid-colspan-4,.grid-cols-4 .grid-colspan-2,.grid-cols-4 .grid-colspan-3,.grid-cols-4 .grid-colspan-4{grid-column:span 2}}@container (min-width: 720px){.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-3 .grid-colspan-2{grid-column:span 2}.grid-cols-3 .grid-colspan-3{grid-column:span 3}}@container (min-width: 1080px){.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-4 .grid-colspan-3{grid-column:span 3}.grid-cols-4 .grid-colspan-4{grid-column:span 4}}.grid-rowspan-2{grid-row:span 2}.grid-rowspan-3{grid-row:span 3}.grid-rowspan-4{grid-row:span 4}.note,.tip,.warning,.caution{border-left:solid 1px;border-radius:0 4px 4px 0;padding:1rem 2rem;margin:1rem 0;box-sizing:border-box;max-width:640px}.note:before,.tip:before,.warning:before,.caution:before{display:block;margin-bottom:1rem;font-weight:700}.note{border-left-color:var(--theme-foreground-fainter);background-color:var(--theme-background-alt)}.note:before{content:"Note";color:var(--theme-foreground-muted)}.tip{border-left-color:var(--theme-green);background-color:color-mix(in srgb,var(--theme-green),var(--theme-background) 90%)}.tip:before{content:"Tip";color:var(--theme-green)}.warning{border-left-color:var(--theme-yellow);background-color:color-mix(in srgb,var(--theme-yellow),var(--theme-background) 90%)}.warning:before{content:"Warning";color:var(--theme-yellow)}.caution{border-left-color:var(--theme-red);background-color:color-mix(in srgb,var(--theme-red),var(--theme-background) 90%)}.caution:before{content:"Caution";color:var(--theme-red)}.note[label]:before,.tip[label]:before,.warning[label]:before,.caution[label]:before{content:attr(label)}.note>:first-child,.tip>:first-child,.warning>:first-child,.caution>:first-child{margin-top:0}.note>:last-child,.tip>:last-child,.warning>:last-child,.caution>:last-child{margin-bottom:0}.card{background:var(--theme-background-alt);border:solid 1px var(--theme-foreground-faintest);border-radius:.75rem;padding:1rem;margin:1rem 0;font:14px var(--sans-serif)}.grid>.card,.card figure{margin:0}.card h2,.card h3{font-size:inherit}.card h2{font-weight:500;font-size:15px}.card h3{font-weight:400;color:var(--theme-foreground-muted)}.card h2~svg,.card h3~svg,.card h2~p,.card h3~p{margin-top:1rem}.observablehq--block:empty{margin:0}@keyframes observablehq-loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.observablehq-loading{font:var(--monospace-font);color:var(--theme-foreground-muted);display:inline-block;transform-origin:.32em 55%;animation-name:observablehq-loading;animation-timing-function:linear;animation-duration:1s;animation-iteration-count:infinite}.observablehq-loading:before{content:"\21bb"}.observablehq--block .observablehq-loading{display:block}.observablehq--block{margin:1rem 0}.observablehq--block .observablehq,.observablehq--block .observablehq--inspect{display:block}.observablehq--collapsed,.observablehq--expanded.observablehq--inspect a{cursor:pointer}.observablehq--caret{margin-right:4px;vertical-align:baseline}.observablehq--field{text-indent:-1rem;margin-left:1rem}.observablehq--inspect{font:var(--monospace-font);overflow-x:auto;white-space:pre}.observablehq--inspect.observablehq--import{white-space:normal}.observablehq--inspect::-webkit-scrollbar{display:none}.observablehq--error .observablehq--inspect{word-break:break-all;white-space:pre-wrap}.observablehq--string-expand{margin-left:6px;padding:2px 6px;border-radius:2px;font-size:80%;background:var(--theme-background-alt);cursor:pointer;vertical-align:middle}.observablehq--keyword,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:var(--syntax-keyword)}.observablehq--symbol,.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:var(--syntax-entity)}.observablehq--index,.observablehq--key,.hljs-attr,.hljs-attribute,.hljs-meta,.hljs-operator,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id{color:var(--syntax-constant)}.observablehq--regexp,.observablehq--string,.hljs-regexp,.hljs-string,.hljs-meta .hljs-string{color:var(--syntax-string)}.observablehq--null,.observablehq--undefined,.hljs-built_in,.hljs-literal,.hljs-symbol{color:var(--syntax-variable)}.observablehq--prototype-key,.observablehq--empty,.hljs-comment,.hljs-formula{color:var(--syntax-comment)}.observablehq--bigint,.observablehq--boolean,.observablehq--date,.observablehq--forbidden,.observablehq--number,.hljs-name,.hljs-number,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo{color:var(--syntax-entity-tag)}.hljs-subst{color:var(--syntax-storage-modifier-import)}.hljs-section{color:var(--syntax-markup-heading);font-weight:700}.hljs-bullet{color:var(--syntax-markup-list)}.hljs-emphasis{color:var(--syntax-markup-italic);font-style:italic}.hljs-strong{color:var(--syntax-markup-bold);font-weight:700}.hljs-addition{color:var(--syntax-markup-inserted);background-color:var(--syntax-markup-inserted-background)}.hljs-deletion{color:var(--syntax-markup-deleted);background-color:var(--syntax-markup-deleted-background)}.observablehq--empty{font-style:oblique}.observablehq--error{color:var(--syntax-keyword)}.plot-d6a7b5{--plot-background: var(--theme-background)}p .plot-d6a7b5{display:inline-block}:root{--syntax-keyword: #d73a49;--syntax-entity: #6f42c1;--syntax-constant: #005cc5;--syntax-string: #032f62;--syntax-variable: #e36209;--syntax-comment: var(--theme-foreground-muted);--syntax-entity-tag: #22863a;--syntax-storage-modifier-import: #24292e;--syntax-markup-heading: #005cc5;--syntax-markup-list: #735c0f;--syntax-markup-italic: #24292e;--syntax-markup-bold: #24292e;--syntax-markup-inserted: #22863a;--syntax-markup-inserted-background: #f0fff4;--syntax-markup-deleted: #b31d28;--syntax-markup-deleted-background: #ffeef0}:root{--theme-background-b: color-mix(in srgb, var(--theme-foreground) 4%, var(--theme-background-a));--theme-background: var(--theme-background-a);--theme-background-alt: var(--theme-background-b);--theme-foreground-alt: color-mix(in srgb, var(--theme-foreground) 90%, var(--theme-background-a));--theme-foreground-muted: color-mix(in srgb, var(--theme-foreground) 60%, var(--theme-background-a));--theme-foreground-faint: color-mix(in srgb, var(--theme-foreground) 50%, var(--theme-background-a));--theme-foreground-fainter: color-mix(in srgb, var(--theme-foreground) 30%, var(--theme-background-a));--theme-foreground-faintest: color-mix(in srgb, var(--theme-foreground) 14%, var(--theme-background-a));color-scheme:light}:root{--theme-foreground: #1b1e23;--theme-foreground-focus: #3b5fc0;--theme-background-a: #ffffff}@font-face{font-family:Atkinson Hyperlegible;src:url(https://fonts.gstatic.com/s/atkinsonhyperlegible/v11/9Bt23C1KxNDXMspQ1lPyU89-1h6ONRlW45G04pIoWQeCbA.woff2) format("woff2")}:root{--serif: "Atkinson Hyperlegible"}div.bg{background-image:url(../_file/horse.2d33a223.jpg)}div.dont-break-hashes{offset-path:url(#path)} diff --git a/test/output/build/css-public/_observablehq/client.js b/test/output/build/css-public/_observablehq/client.js new file mode 100644 index 000000000..e69de29bb diff --git a/test/output/build/css-public/_observablehq/runtime.js b/test/output/build/css-public/_observablehq/runtime.js new file mode 100644 index 000000000..e69de29bb diff --git a/test/output/build/css-public/_observablehq/stdlib.js b/test/output/build/css-public/_observablehq/stdlib.js new file mode 100644 index 000000000..e69de29bb diff --git a/test/output/build/css-public/index.html b/test/output/build/css-public/index.html new file mode 100644 index 000000000..e97784e8d --- /dev/null +++ b/test/output/build/css-public/index.html @@ -0,0 +1,34 @@ + + + +CSS assets + + + + + + + + + + +
+
+

CSS assets

+

Atkinson Hyperlegible font is named after Braille Institute founder, J. Robert Atkinson. What makes it different from traditional typography design is that it focuses on letterform distinction to increase character recognition, ultimately improving readability. We are making it free for anyone to use!

+
+
+
This image is set with CSS.
+
+
+ +