Extract Astro styles to external stylesheets (#43)
* Extract Astro styles to external stylesheets * Require relative URLs in Markdown layouts
This commit is contained in:
Drew Powers
GitHub
parent
a3b20a9aff
commit
3fa6396a7b
54 changed files with 201 additions and 164 deletions
|
|
@ -3,12 +3,15 @@ module.exports = {
|
|||
extends: ['plugin:@typescript-eslint/recommended', 'prettier'],
|
||||
plugins: ['@typescript-eslint', 'prettier'],
|
||||
rules: {
|
||||
'@typescript-eslint/ban-ts-comment': 'warn',
|
||||
'@typescript-eslint/camelcase': 'off',
|
||||
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
||||
'@typescript-eslint/no-use-before-define': 'off',
|
||||
'@typescript-eslint/no-var-requires': 'off',
|
||||
'no-shadow': 'warn',
|
||||
'prettier/prettier': 'error',
|
||||
'prefer-const': 'off',
|
||||
'prefer-rest-params': 'off',
|
||||
'require-jsdoc': 'warn',
|
||||
},
|
||||
};
|
||||
|
|
|
|||
7
.github/workflows/nodejs.yml
vendored
7
.github/workflows/nodejs.yml
vendored
|
|
@ -27,3 +27,10 @@ jobs:
|
|||
npm test
|
||||
env:
|
||||
CI: true
|
||||
lint:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v1
|
||||
- uses: actions/setup-node@v1
|
||||
- run: npm ci
|
||||
- run: npm run lint
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: The Build Pipeline
|
||||
description: Snowpack Build creates a production-ready website with or without a bundler
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: The Dev Server
|
||||
description: Snowpack's dev server is fast because it only rebuilds the files you change. Powered by ESM (ES modules).
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: HMR + Fast Refresh
|
||||
description: Snowpack's ESM-powered unbundled development means near-instant single file builds that only take 10-25ms to load and update in the browser.
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: How Snowpack Works
|
||||
description: Snowpack serves your application unbundled during development. Each file is built only once and is cached until it changes.
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: 'Babel'
|
||||
tags: communityGuide
|
||||
published: true
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: The Snowpack Guide to connecting your favorite tools
|
||||
description: 'How do you use your favorite tools in Snowpack? This Guide will help you get started'
|
||||
published: true
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: Hot Module Replacement (HMR)
|
||||
description: Enable Snowpack's Hot Module Replacement (HMR) on your development server.
|
||||
published: false
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: SSL Certificates
|
||||
description: How to use HTTPs during development and generate SSL certifcates for your Snowpack build.
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: 'Jest'
|
||||
tags: communityGuide
|
||||
img: '/img/logos/jest.svg'
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: Optimize & Bundle for Production
|
||||
published: true
|
||||
description: How to optimize your Snowpack build for production, with or without a bundler.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: Creating Your Own Plugin
|
||||
description: Learn the basics of our Plugin API through working examples.
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: 'PostCSS'
|
||||
tags: communityGuide
|
||||
published: true
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: Preact
|
||||
tags: communityGuide
|
||||
img: '/img/logos/preact.svg'
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: React + babel-plugin-import-global
|
||||
published: false
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: React + Loadable Components
|
||||
published: false
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: Routing
|
||||
published: true
|
||||
description: This guide will walk you through some common routing scenarios and how to configure the routes option to support them in development.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: 'Sass'
|
||||
tags: communityGuide
|
||||
published: true
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: Server-Side Rendering (SSR)
|
||||
description: This guide will walk you through three different options for setting up Snowpack with your own custom server.
|
||||
published: true
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: Streaming Imports
|
||||
published: true
|
||||
stream: Fetch your npm dependencies on-demand from a remote ESM CDN.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: 'Tailwind CSS'
|
||||
tags: communityGuide
|
||||
published: true
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: Testing
|
||||
published: true
|
||||
description: How to choose and use a JavaScript test runner for your Snowpack site.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: Snowpack Upgrade Guide
|
||||
published: true
|
||||
description: How to upgrade to Snowpack v3 from older versions of Snowpack.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: Vue
|
||||
tags: communityGuide
|
||||
img: '/img/logos/vue.png'
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: 'WASM'
|
||||
tags: communityGuide
|
||||
published: true
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: '@web/test-runner'
|
||||
tags: communityGuide
|
||||
img: '/img/logos/modern-web.svg'
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: 'Web Workers'
|
||||
tags: communityGuide
|
||||
published: true
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: Workbox
|
||||
tags: communityGuide
|
||||
description: The Workbox CLI integrates well with Snowpack.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/post.astro
|
||||
layout: ../../layouts/post.astro
|
||||
bannerVideo: '/img/extra-space-4.mp4'
|
||||
permalink: '/posts/2020-05-26-snowpack-2-0-release/'
|
||||
title: Snowpack v2.0
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/post.astro
|
||||
layout: ../../layouts/post.astro
|
||||
title: Snowpack 2.7
|
||||
description: 'A new plugin API plus smaller, faster production builds.'
|
||||
tagline: v2.7.0 release post
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/post.astro
|
||||
layout: ../../layouts/post.astro
|
||||
title: 'Snowpack v3.0 Release Candidate'
|
||||
tagline: New features to change the way you build for the web.
|
||||
description: 'New features to change the way you build for the web. Snowpack v3.0 will release on January 6th, 2021 (the one-year anniversary of its original launch post). This is our biggest release yet with some serious new features, including a new way to load npm packages on-demand that lets you skip the `npm install` step entirely.'
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/post.astro
|
||||
layout: ../../layouts/post.astro
|
||||
title: 'Snowpack v3.0'
|
||||
description: Snowpack v3.0 is here! Our biggest release yet with some serious new features, including pre-bundled streaming imports, built-in bundling & optimizations, new JavaScript APIs, and more.'
|
||||
date: 2021-01-13
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: Command Line API
|
||||
description: The Snowpack Command Line tool's API, commands, and flags.
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: Common Error Details
|
||||
description: How to troubleshoot common issues and error messagesm, plus our resources for getting help.
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: snowpack.config.js
|
||||
description: The Snowpack configuration API reference.
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: Environment Variables
|
||||
description: Using environment variables with Snowpack
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: Hot Module Replacement (HMR) API
|
||||
description: Snowpack implements HMR via the esm-hmr spec, an attempted standard for ESM-based Hot Module Replacement (HMR).
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: JavaScript API
|
||||
description: Snowpack's JavaScript API is for anyone who wants to integrate with some custom build pipeline or server-side rendering engine.
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: Plugin API
|
||||
description: The Snowpack Plugin API and how to use it.
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: Supported Files
|
||||
description: Snowpack ships with built-in support for many file types including json, js, ts, jsx, css, css modules, and images.
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: 'Starting a New Project'
|
||||
description: This guide shows you how to set up Snowpack from scratch in a Node.js project. Along the way learn key concepts of Snowpack and unbundled development.
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../../layouts/content.astro
|
||||
title: Quick Start
|
||||
description: A very basic guide for developers who want to run Snowpack as quickly as possible.
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content-with-cover.astro
|
||||
layout: ../../layouts/content-with-cover.astro
|
||||
title: 'Getting Started with React'
|
||||
description: 'Get started with this in-depth tutorial on how to build React applications and websites with Snowpack and developer tools like React Fast Refresh'
|
||||
date: 2020-12-01
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content-with-cover.astro
|
||||
layout: ../../layouts/content-with-cover.astro
|
||||
title: 'Getting Started with Svelte'
|
||||
description: 'Get started with this in-depth tutorial on how to build Svelte applications and websites with Snowpack'
|
||||
date: 2020-12-01
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ module.exports = function (snowpackConfig, { resolve, extensions, astroConfig }
|
|||
knownEntrypoints: ['deepmerge'],
|
||||
resolve: {
|
||||
input: ['.astro', '.md'],
|
||||
output: ['.js'],
|
||||
output: ['.js', '.css'],
|
||||
},
|
||||
async load({ filePath }) {
|
||||
const { compileComponent } = await transformPromise;
|
||||
|
|
@ -21,7 +21,11 @@ module.exports = function (snowpackConfig, { resolve, extensions, astroConfig }
|
|||
extensions,
|
||||
};
|
||||
const result = await compileComponent(contents, { compileOptions, filename: filePath, projectRoot });
|
||||
return result.contents;
|
||||
const output = {
|
||||
'.js': result.contents,
|
||||
};
|
||||
if (result.css) output['.css'] = result.css;
|
||||
return output;
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -25,9 +25,11 @@ export interface TransformResult {
|
|||
script: string;
|
||||
imports: string[];
|
||||
items: JsxItem[];
|
||||
css?: string;
|
||||
}
|
||||
|
||||
export interface CompileResult {
|
||||
result: TransformResult;
|
||||
contents: string;
|
||||
css?: string;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ interface Attribute {
|
|||
end: number;
|
||||
type: 'Attribute';
|
||||
name: string;
|
||||
value: any;
|
||||
value: TemplateNode[] | boolean;
|
||||
}
|
||||
|
||||
interface CodeGenOptions {
|
||||
|
|
@ -41,7 +41,8 @@ function getAttributes(attrs: Attribute[]): Record<string, string> {
|
|||
result[attr.name] = JSON.stringify(attr.value);
|
||||
continue;
|
||||
}
|
||||
if (attr.value === false) {
|
||||
if (attr.value === false || attr.value === undefined) {
|
||||
// note: attr.value shouldn’t be `undefined`, but a bad transform would cause a compile error here, so prevent that
|
||||
continue;
|
||||
}
|
||||
if (attr.value.length > 1) {
|
||||
|
|
@ -59,7 +60,7 @@ function getAttributes(attrs: Attribute[]): Record<string, string> {
|
|||
')';
|
||||
continue;
|
||||
}
|
||||
const val: TemplateNode = attr.value[0];
|
||||
const val = attr.value[0];
|
||||
if (!val) {
|
||||
result[attr.name] = '(' + val + ')';
|
||||
continue;
|
||||
|
|
@ -72,7 +73,7 @@ function getAttributes(attrs: Attribute[]): Record<string, string> {
|
|||
result[attr.name] = JSON.stringify(getTextFromAttribute(val));
|
||||
continue;
|
||||
default:
|
||||
throw new Error('UNKNOWN V');
|
||||
throw new Error(`UNKNOWN: ${val.type}`);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
|
|
@ -253,7 +254,7 @@ async function acquireDynamicComponentImports(plugins: Set<ValidExtensionPlugins
|
|||
return importMap;
|
||||
}
|
||||
|
||||
export async function codegen(ast: Ast, { compileOptions, filename }: CodeGenOptions): Promise<TransformResult> {
|
||||
export async function codegen(ast: Ast, { compileOptions, filename, fileID }: CodeGenOptions): Promise<TransformResult> {
|
||||
const { extensions = defaultExtensions, astroConfig } = compileOptions;
|
||||
await eslexer.init;
|
||||
|
||||
|
|
@ -334,6 +335,21 @@ export async function codegen(ast: Ast, { compileOptions, filename }: CodeGenOpt
|
|||
let collectionItem: JsxItem | undefined;
|
||||
let currentItemName: string | undefined;
|
||||
let currentDepth = 0;
|
||||
let css: string[] = [];
|
||||
|
||||
walk(ast.css, {
|
||||
enter(node: TemplateNode) {
|
||||
if (node.type === 'Style') {
|
||||
css.push(node.content.styles); // if multiple <style> tags, combine together
|
||||
this.skip();
|
||||
}
|
||||
},
|
||||
leave(node: TemplateNode) {
|
||||
if (node.type === 'Style') {
|
||||
this.remove(); // this will be optimized in a global CSS file; remove so it‘s not accidentally inlined
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
walk(ast.html, {
|
||||
enter(node: TemplateNode) {
|
||||
|
|
@ -419,9 +435,9 @@ export async function codegen(ast: Ast, { compileOptions, filename }: CodeGenOpt
|
|||
return;
|
||||
}
|
||||
case 'Style': {
|
||||
const attributes = getAttributes(node.attributes);
|
||||
items.push({ name: 'style', jsx: `h("style", ${attributes ? generateAttributes(attributes) : 'null'}, ${JSON.stringify(node.content.styles)})` });
|
||||
break;
|
||||
css.push(node.content.styles); // if multiple <style> tags, combine together
|
||||
this.skip();
|
||||
return;
|
||||
}
|
||||
case 'Text': {
|
||||
const text = getTextFromAttribute(node);
|
||||
|
|
@ -469,6 +485,7 @@ export async function codegen(ast: Ast, { compileOptions, filename }: CodeGenOpt
|
|||
}
|
||||
return;
|
||||
case 'Style': {
|
||||
this.remove(); // this will be optimized in a global CSS file; remove so it‘s not accidentally inlined
|
||||
return;
|
||||
}
|
||||
default:
|
||||
|
|
@ -481,5 +498,6 @@ export async function codegen(ast: Ast, { compileOptions, filename }: CodeGenOpt
|
|||
script: script,
|
||||
imports: Array.from(importExportStatements),
|
||||
items,
|
||||
css: css.length ? css.join('\n\n') : undefined,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ import { CompileResult, TransformResult } from '../@types/astro';
|
|||
import { parse } from '../parser/index.js';
|
||||
import { createMarkdownHeadersCollector } from '../micromark-collect-headers.js';
|
||||
import { encodeMarkdown } from '../micromark-encode.js';
|
||||
import { defaultLogOptions } from '../logger.js';
|
||||
import { optimize } from './optimize/index.js';
|
||||
import { codegen } from './codegen.js';
|
||||
|
||||
|
|
@ -75,14 +74,14 @@ async function convertMdToJsx(
|
|||
|
||||
const raw = `---
|
||||
${imports}
|
||||
${frontmatterData.layout ? `export const __layout = ${JSON.stringify(frontmatterData.layout)};` : ''}
|
||||
${frontmatterData.layout ? `import {__renderPage as __layout} from '${frontmatterData.layout}';` : 'const __layout = undefined;'}
|
||||
export const __content = ${stringifiedSetupContext};
|
||||
---
|
||||
<section>${mdHtml}</section>`;
|
||||
|
||||
const convertOptions = { compileOptions, filename, fileID };
|
||||
|
||||
return convertAstroToJsx(raw, convertOptions);
|
||||
return await convertAstroToJsx(raw, convertOptions);
|
||||
}
|
||||
|
||||
type SupportedExtensions = '.astro' | '.md';
|
||||
|
|
@ -94,9 +93,9 @@ async function transformFromSource(
|
|||
const fileID = path.relative(projectRoot, filename);
|
||||
switch (path.extname(filename) as SupportedExtensions) {
|
||||
case '.astro':
|
||||
return convertAstroToJsx(contents, { compileOptions, filename, fileID });
|
||||
return await convertAstroToJsx(contents, { compileOptions, filename, fileID });
|
||||
case '.md':
|
||||
return convertMdToJsx(contents, { compileOptions, filename, fileID });
|
||||
return await convertMdToJsx(contents, { compileOptions, filename, fileID });
|
||||
default:
|
||||
throw new Error('Not Supported!');
|
||||
}
|
||||
|
|
@ -108,8 +107,6 @@ export async function compileComponent(
|
|||
): Promise<CompileResult> {
|
||||
const sourceJsx = await transformFromSource(source, { compileOptions, filename, projectRoot });
|
||||
const isPage = path.extname(filename) === '.md' || sourceJsx.items.some((item) => item.name === 'html');
|
||||
// sort <style> tags first
|
||||
sourceJsx.items.sort((a, b) => (a.name === 'style' && b.name !== 'style' ? -1 : 0));
|
||||
|
||||
// return template
|
||||
let modJsx = `
|
||||
|
|
@ -144,8 +141,7 @@ export async function __renderPage({request, children, props}) {
|
|||
|
||||
// find layout, if one was given.
|
||||
if (currentChild.layout) {
|
||||
const layoutComponent = (await import('/_astro/layouts/' + currentChild.layout.replace(/.*layouts\\//, "").replace(/\.astro$/, '.js')));
|
||||
return layoutComponent.__renderPage({
|
||||
return currentChild.layout({
|
||||
request,
|
||||
props: {content: currentChild.content},
|
||||
children: [childBodyResult],
|
||||
|
|
@ -162,5 +158,6 @@ export async function __renderPage() { throw new Error("No <html> page element f
|
|||
return {
|
||||
result: sourceJsx,
|
||||
contents: modJsx,
|
||||
css: sourceJsx.css,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ const getStyleType: Map<string, StyleType> = new Map([
|
|||
]);
|
||||
|
||||
const SASS_OPTIONS: Partial<sass.Options> = {
|
||||
outputStyle: 'compressed',
|
||||
outputStyle: process.env.NODE_ENV === 'production' ? 'compressed' : undefined,
|
||||
};
|
||||
/** HTML tags that should never get scoped classes */
|
||||
const NEVER_SCOPED_TAGS = new Set<string>(['html', 'head', 'body', 'script', 'style', 'link', 'meta']);
|
||||
|
|
@ -95,11 +95,10 @@ async function transformStyle(code: string, { type, filename, scopedClass }: { t
|
|||
return { css, type: styleType };
|
||||
}
|
||||
|
||||
/** Style optimizer */
|
||||
export default function ({ filename, fileID }: { filename: string; fileID: string }): Optimizer {
|
||||
const styleNodes: TemplateNode[] = []; // <style> tags to be updated
|
||||
const styleTransformPromises: Promise<StyleTransformResult>[] = []; // async style transform results to be finished in finalize();
|
||||
let rootNode: TemplateNode; // root node which needs <style> tags
|
||||
|
||||
const scopedClass = `astro-${hashFromFilename(fileID)}`; // this *should* generate same hash from fileID every time
|
||||
|
||||
return {
|
||||
|
|
@ -124,15 +123,7 @@ export default function ({ filename, fileID }: { filename: string; fileID: strin
|
|||
return;
|
||||
}
|
||||
|
||||
// 2. find the root node to inject the <style> tag in later
|
||||
// TODO: remove this when we are injecting <link> tags into <head>
|
||||
if (node.name === 'head') {
|
||||
rootNode = node; // If this is <head>, this is what we want. Always take this if found. However, this may not always exist (it won’t for Component subtrees).
|
||||
} else if (!rootNode) {
|
||||
rootNode = node; // If no <head> (yet), then take the first element we come to and assume it‘s the “root” (but if we find a <head> later, then override this per the above)
|
||||
}
|
||||
|
||||
// 3. add scoped HTML classes
|
||||
// 2. add scoped HTML classes
|
||||
if (NEVER_SCOPED_TAGS.has(node.name)) return; // only continue if this is NOT a <script> tag, etc.
|
||||
// Note: currently we _do_ scope web components/custom elements. This seems correct?
|
||||
|
||||
|
|
@ -175,10 +166,6 @@ export default function ({ filename, fileID }: { filename: string; fileID: strin
|
|||
scopedClass,
|
||||
})
|
||||
);
|
||||
|
||||
// TODO: we should delete the old untransformed <style> node after we’re done.
|
||||
// However, the svelte parser left it in ast.css, not ast.html. At the final step, this just gets ignored, so it will be deleted, in a sense.
|
||||
// If we ever end up scanning ast.css for something else, then we’ll need to actually delete the node (or transform it to the processed version)
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -186,14 +173,9 @@ export default function ({ filename, fileID }: { filename: string; fileID: strin
|
|||
async finalize() {
|
||||
const styleTransforms = await Promise.all(styleTransformPromises);
|
||||
|
||||
if (!rootNode) {
|
||||
throw new Error(`No root node found`); // TODO: remove this eventually; we should always find it, but for now alert if there’s a bug in our code
|
||||
}
|
||||
|
||||
// 1. transform <style> tags
|
||||
styleTransforms.forEach((result, n) => {
|
||||
if (styleNodes[n].attributes) {
|
||||
// 1b. Inject final CSS
|
||||
// 1. Replace with final CSS
|
||||
const isHeadStyle = !styleNodes[n].content;
|
||||
if (isHeadStyle) {
|
||||
// Note: <style> tags in <head> have different attributes/rules, because of the parser. Unknown why
|
||||
|
|
@ -202,22 +184,22 @@ export default function ({ filename, fileID }: { filename: string; fileID: strin
|
|||
styleNodes[n].content.styles = result.css;
|
||||
}
|
||||
|
||||
// 3b. Update <style> attributes
|
||||
// 2. Update <style> attributes
|
||||
const styleTypeIndex = styleNodes[n].attributes.findIndex(({ name }: any) => name === 'type');
|
||||
// add type="text/css"
|
||||
if (styleTypeIndex !== -1) {
|
||||
styleNodes[n].attributes[styleTypeIndex].value[0].raw = 'text/css';
|
||||
styleNodes[n].attributes[styleTypeIndex].value[0].data = 'text/css';
|
||||
} else {
|
||||
styleNodes[n].attributes.push({ name: 'type', type: 'Attribute', value: [{ type: 'Text', raw: 'text/css', data: 'text/css' }] });
|
||||
}
|
||||
// remove lang="*"
|
||||
const styleLangIndex = styleNodes[n].attributes.findIndex(({ name }: any) => name === 'lang');
|
||||
if (styleLangIndex !== -1) styleNodes[n].attributes.splice(styleLangIndex, 1);
|
||||
// TODO: add data-astro for later
|
||||
// styleNodes[n].attributes.push({ name: 'data-astro', type: 'Attribute', value: true });
|
||||
}
|
||||
});
|
||||
|
||||
// 2. inject finished <style> tags into root node
|
||||
// TODO: pull out into <link> tags for deduping
|
||||
rootNode.children = [...styleNodes, ...(rootNode.children || [])];
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ export interface Parser {
|
|||
html: Node;
|
||||
css: Node;
|
||||
js: Node;
|
||||
meta_tags: {};
|
||||
meta_tags: Map<string, string>;
|
||||
}
|
||||
|
||||
export interface Script extends BaseNode {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import type { SnowpackDevServer, ServerRuntime as SnowpackServerRuntime, LoadResult as SnowpackLoadResult, SnowpackConfig } from 'snowpack';
|
||||
import type { SnowpackDevServer, ServerRuntime as SnowpackServerRuntime, SnowpackConfig } from 'snowpack';
|
||||
import type { AstroConfig } from './@types/astro';
|
||||
import type { LogOptions } from './logger';
|
||||
import type { CompileError } from './parser/utils/error.js';
|
||||
import { info } from './logger.js';
|
||||
import { debug, info } from './logger.js';
|
||||
|
||||
import { existsSync } from 'fs';
|
||||
import { loadConfiguration, logger as snowpackLogger, startServer as startSnowpackServer } from 'snowpack';
|
||||
|
|
@ -39,7 +39,6 @@ async function load(config: RuntimeConfig, rawPathname: string | undefined): Pro
|
|||
|
||||
const selectedPageLoc = new URL(`./pages/${selectedPage}.astro`, astroRoot);
|
||||
const selectedPageMdLoc = new URL(`./pages/${selectedPage}.md`, astroRoot);
|
||||
const selectedPageUrl = `/_astro/pages/${selectedPage}.js`;
|
||||
|
||||
// Non-Astro pages (file resources)
|
||||
if (!existsSync(selectedPageLoc) && !existsSync(selectedPageMdLoc)) {
|
||||
|
|
@ -62,8 +61,10 @@ async function load(config: RuntimeConfig, rawPathname: string | undefined): Pro
|
|||
}
|
||||
}
|
||||
|
||||
for (const url of [`/_astro/pages/${selectedPage}.astro.js`, `/_astro/pages/${selectedPage}.md.js`]) {
|
||||
try {
|
||||
const mod = await snowpackRuntime.importModule(selectedPageUrl);
|
||||
const mod = await snowpackRuntime.importModule(url);
|
||||
debug(logging, 'resolve', `${reqPath} -> ${url}`);
|
||||
let html = (await mod.exports.__renderPage({
|
||||
request: {
|
||||
host: fullurl.hostname,
|
||||
|
|
@ -76,7 +77,7 @@ async function load(config: RuntimeConfig, rawPathname: string | undefined): Pro
|
|||
|
||||
// inject styles
|
||||
// TODO: handle this in compiler
|
||||
const styleTags = Array.isArray(mod.css) && mod.css.length ? mod.css.reduce((markup, url) => `${markup}\n<link rel="stylesheet" type="text/css" href="${url}" />`, '') : ``;
|
||||
const styleTags = Array.isArray(mod.css) && mod.css.length ? mod.css.reduce((markup, href) => `${markup}\n<link rel="stylesheet" type="text/css" href="${href}" />`, '') : ``;
|
||||
if (html.indexOf('</head>') !== -1) {
|
||||
html = html.replace('</head>', `${styleTags}</head>`);
|
||||
} else {
|
||||
|
|
@ -88,15 +89,19 @@ async function load(config: RuntimeConfig, rawPathname: string | undefined): Pro
|
|||
contents: html,
|
||||
};
|
||||
} catch (err) {
|
||||
switch (err.code) {
|
||||
case 'parse-error': {
|
||||
// if this is a 404, try the next URL (will be caught at the end)
|
||||
const notFoundError = err.toString().startsWith('Error: Not Found');
|
||||
if (notFoundError) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (err.code === 'parse-error') {
|
||||
return {
|
||||
statusCode: 500,
|
||||
type: 'parse-error',
|
||||
error: err,
|
||||
};
|
||||
}
|
||||
default: {
|
||||
return {
|
||||
statusCode: 500,
|
||||
type: 'unknown',
|
||||
|
|
@ -104,7 +109,13 @@ async function load(config: RuntimeConfig, rawPathname: string | undefined): Pro
|
|||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// couldn‘t find match; 404
|
||||
return {
|
||||
statusCode: 404,
|
||||
type: 'unknown',
|
||||
error: new Error(`Could not locate ${selectedPage}`),
|
||||
};
|
||||
}
|
||||
|
||||
export interface AstroRuntime {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,16 @@ const StylesSSR = suite('Styles SSR');
|
|||
|
||||
let runtime;
|
||||
|
||||
/** Basic CSS minification; removes some flakiness in testing CSS */
|
||||
function cssMinify(css) {
|
||||
return css
|
||||
.trim() // remove whitespace
|
||||
.replace(/\n\s*/g, '') // collapse lines
|
||||
.replace(/\s*\{/g, '{') // collapse selectors
|
||||
.replace(/:\s*/g, ':') // collapse attributes
|
||||
.replace(/;}/g, '}'); // collapse block
|
||||
}
|
||||
|
||||
StylesSSR.before(async () => {
|
||||
const astroConfig = await loadConfig(new URL('./fixtures/astro-styles-ssr', import.meta.url).pathname);
|
||||
|
||||
|
|
@ -54,12 +64,15 @@ StylesSSR('CSS Module support in .astro', async () => {
|
|||
let scopedClass;
|
||||
|
||||
// test 1: <style> tag in <head> is transformed
|
||||
const css = $('style')
|
||||
const css = cssMinify(
|
||||
$('style')
|
||||
.html()
|
||||
.replace(/\.astro-[A-Za-z0-9-]+/, (match) => {
|
||||
scopedClass = match;
|
||||
scopedClass = match; // get class hash from result
|
||||
return match;
|
||||
}); // remove class hash (should be deterministic / the same every time, but even still don‘t cause this test to flake)
|
||||
})
|
||||
);
|
||||
|
||||
assert.equal(css, `.wrapper${scopedClass}{margin-left:auto;margin-right:auto;max-width:1200px}`);
|
||||
|
||||
// test 2: element received .astro-XXXXXX class (this selector will succeed if transformed correctly)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: layouts/content.astro
|
||||
layout: ../layouts/content.astro
|
||||
title: My Blog Post
|
||||
description: This is a post about some stuff.
|
||||
import:
|
||||
|
|
|
|||
Loading…
Reference in a new issue