Add CSS injection, fix portfolio example (#1648)

* Fix portfolio example * Add .pcss extension * Update load ssr opts * Update packages/astro/src/runtime/server/index.ts Co-authored-by: Jonathan Neal <[email protected]> Co-authored-by: Nate Moore <[email protected]> Co-authored-by: Jonathan Neal <[email protected]>
withastro · Oct 25, 2021 · 07f7860 · 07f7860
1 parent 1103cb1
commit 07f7860
Show file tree

Hide file tree

Showing 14 changed files with 204 additions and 94 deletions.
diff --git a/examples/portfolio/src/pages/index.astro b/examples/portfolio/src/pages/index.astro
@@ -190,28 +190,19 @@ const featuredProject = projects[0];
         height="1131"
         class="img"
         src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75"
-        srcSet="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 800w,
-        https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 1200w,
-        https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1600&q=75 1600w,
-        https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=2400&q=75 2400w,"
+        srcSet="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 800w,https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1200&q=75 1200w,https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=1600&q=75 1600w,https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=2400&q=75 2400w"
         sizes="(max-width: 800px) 800px, (max-width: 1200px) 1200px, (max-width: 1600px) 1600px, (max-width: 2400px) 2400px, 1200px"
-      />
-      <div class="gradient" />
-      <div class="gradient2" />
+      >
+      <div class="gradient"></div>
+      <div class="gradient2"></div>
       <div class="overlay">
         <h1 class="title">
           <small class="subtitle">The personal site of </small>Jeanine White
         </h1>
         <div>
-          <span class="role">
-            👩‍💻 Developer <span class="invert">👩‍💻 Developer</span>
-          </span>&nbsp;
-          <span class="role">
-            🎤 Speaker <span class="invert">🎤 Speaker</span>
-          </span>&nbsp;
-          <span class="role">
-            ✏️ Writer <span class="invert">✏️ Writer</span>
-          </span>
+          <span class="role">👩‍💻 Developer <span class="invert">👩‍💻 Developer</span></span>&nbsp;
+          <span class="role">🎤 Speaker <span class="invert">🎤 Speaker</span></span>&nbsp;
+          <span class="role">✏️ Writer <span class="invert">✏️ Writer</span></span>
         </div>
         <p class="desc">Lover of dogs, roadtrips, and poetry.</p>
       </div>
@@ -233,8 +224,7 @@ const featuredProject = projects[0];
             <span>Hello!</span> I’m Jeanine, and this is my website. It was made using{' '}
             <a href="https://github.com/snowpackjs/astro" target="_blank" rel="nofollow">
               Astro
-            </a>
-            , a new way to build static sites. This is just an example template for you to modify.
+            </a>, a new way to build static sites. This is just an example template for you to modify.
           </p>
           <p>
             <a href="/about">Read more</a>

diff --git a/packages/astro/package.json b/packages/astro/package.json
@@ -4,7 +4,6 @@
   "author": "Skypack",
   "license": "MIT",
   "type": "module",
-  "types": "./dist/types/@types/astro-public.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/snowpackjs/astro.git",
@@ -53,7 +52,7 @@
     "test": "mocha --parallel --timeout 15000"
   },
   "dependencies": {
-    "@astrojs/compiler": "^0.2.16",
+    "@astrojs/compiler": "^0.2.17",
     "@astrojs/language-server": "^0.7.16",
     "@astrojs/markdown-remark": "^0.3.1",
     "@astrojs/markdown-support": "0.3.1",
@@ -73,13 +72,14 @@
     "estree-util-value-to-estree": "^1.2.0",
     "fast-xml-parser": "^3.19.0",
     "html-entities": "^2.3.2",
+    "htmlparser2": "^7.1.2",
     "kleur": "^4.1.4",
     "mime": "^2.5.2",
     "morphdom": "^2.6.1",
     "node-fetch": "^2.6.5",
     "path-to-regexp": "^6.2.0",
     "remark-slug": "^7.0.0",
-    "sass": "^1.43.2",
+    "sass": "^1.43.3",
     "semver": "^7.3.5",
     "send": "^0.17.1",
     "shiki": "^0.9.10",

diff --git a/packages/astro/src/@types/astro-public.ts b/packages/astro/src/@types/astro-public.ts
diff --git a/packages/astro/src/core/ssr/css.ts b/packages/astro/src/core/ssr/css.ts
@@ -0,0 +1,64 @@
+import type vite from '../../../vendor/vite';
+
+import path from 'path';
+import htmlparser2 from 'htmlparser2';
+
+// https://vitejs.dev/guide/features.html#css-pre-processors
+export const STYLE_EXTENSIONS = new Set(['.css', '.pcss', '.scss', '.sass', '.styl', '.stylus', '.less']);
+export const PREPROCESSOR_EXTENSIONS = new Set(['.pcss', '.scss', '.sass', '.styl', '.stylus', '.less']);
+
+/** find unloaded styles */
+export function getStylesForID(id: string, viteServer: vite.ViteDevServer): Set<string> {
+  const css = new Set<string>();
+  const { idToModuleMap } = viteServer.moduleGraph;
+  const moduleGraph = idToModuleMap.get(id);
+  if (!moduleGraph) return css;
+
+  // recursively crawl module graph to get all style files imported by parent id
+  function crawlCSS(entryModule: string, scanned = new Set<string>()) {
+    const moduleName = idToModuleMap.get(entryModule);
+    if (!moduleName) return;
+    for (const importedModule of moduleName.importedModules) {
+      if (!importedModule.id || scanned.has(importedModule.id)) return;
+      const ext = path.extname(importedModule.id.toLowerCase());
+
+      if (STYLE_EXTENSIONS.has(ext)) {
+        css.add(importedModule.id); // if style file, add to list
+      } else {
+        crawlCSS(importedModule.id, scanned); // otherwise, crawl file to see if it imports any CSS
+      }
+      scanned.add(importedModule.id);
+    }
+  }
+  crawlCSS(id);
+
+  return css;
+}
+
+/** add CSS <link> tags to HTML */
+export function addLinkTagsToHTML(html: string, styles: Set<string>): string {
+  let output = html;
+
+  try {
+    // get position of </head>
+    let headEndPos = -1;
+    const parser = new htmlparser2.Parser({
+      onclosetag(tagname) {
+        if (tagname === 'head') {
+          headEndPos = parser.startIndex;
+        }
+      },
+    });
+    parser.write(html);
+    parser.end();
+
+    // update html
+    if (headEndPos !== -1) {
+      output = html.substring(0, headEndPos) + [...styles].map((href) => `<link rel="stylesheet" type="text/css" href="${href}">`).join('') + html.substring(headEndPos);
+    }
+  } catch (err) {
+    // on invalid HTML, do nothing
+  }
+
+  return output;
+}
diff --git a/packages/astro/src/core/ssr/index.ts b/packages/astro/src/core/ssr/index.ts
@@ -9,6 +9,7 @@ import fs from 'fs';
 import path from 'path';
 import { renderPage, renderSlot } from '../../runtime/server/index.js';
 import { canonicalURL as getCanonicalURL, codeFrame } from '../util.js';
+import { addLinkTagsToHTML, getStylesForID } from './css.js';
 import { generatePaginateFunction } from './paginate.js';
 import { getParams, validateGetStaticPathsModule, validateGetStaticPathsResult } from './routing.js';
 
@@ -148,18 +149,25 @@ export async function ssr({ astroConfig, filePath, logging, mode, origin, pathna
               ({ default: render } = await import(render));
             }
             const { code } = await render(content, { ...renderOpts, ...(opts ?? {}) });
-            return code
-          }
+            return code;
+          },
         } as unknown as AstroGlobal;
       },
       _metadata: { renderers },
     };
 
     let html = await renderPage(result, Component, pageProps, null);
+
     // run transformIndexHtml() in development to add HMR client to the page.
     if (mode === 'development') {
       html = await viteServer.transformIndexHtml(fileURLToPath(filePath), html, pathname);
     }
+
+    // insert CSS imported from Astro and JS components
+    const styles = getStylesForID(fileURLToPath(filePath), viteServer);
+    const relativeStyles = new Set<string>([...styles].map((url) => url.replace(fileURLToPath(astroConfig.projectRoot), '/')));
+    html = addLinkTagsToHTML(html, relativeStyles);
+
     return html;
   } catch (e: any) {
     viteServer.ssrFixStacktrace(e);

diff --git a/packages/astro/src/runtime/server/index.ts b/packages/astro/src/runtime/server/index.ts
@@ -132,7 +132,7 @@ function extractDirectives(inputProps: Record<string | number, any>): ExtractedP
       }
     } else if (key === 'class:list') {
       // support "class" from an expression passed into a component (#782)
-      extracted.props[key.slice(0, -5)] = serializeListValue(value)
+      extracted.props[key.slice(0, -5)] = serializeListValue(value);
     } else {
       extracted.props[key] = value;
     }
@@ -308,29 +308,32 @@ export function spreadAttributes(values: Record<any, any>) {
 }
 
 function serializeListValue(value: any) {
-  const hash: Record<string, any> = {}
+  const hash: Record<string, any> = {};
 
-  push(value)
+  push(value);
 
   return Object.keys(hash).join(' ');
 
   function push(item: any) {
     // push individual iteratables
-    if (item && typeof item.forEach === 'function') item.forEach(push)
-
+    if (item && typeof item.forEach === 'function') item.forEach(push);
     // otherwise, push object value keys by truthiness
-    else if (item === Object(item)) Object.keys(item).forEach(
-      name => {
-        if (item[name]) push(name)
-      }
-    )
-
+    else if (item === Object(item))
+      Object.keys(item).forEach((name) => {
+        if (item[name]) push(name);
+      });
     // otherwise, push any other values as a string
-    else if (item = item != null && String(item).trim()) item.split(/\s+/).forEach(
-      (name: string) => {
-        hash[name] = true
+    else {
+      // get the item as a string
+      item = item == null ? '' : String(item).trim();
+
+      // add the item if it is filled
+      if (item) {
+        item.split(/\s+/).forEach((name: string) => {
+          hash[name] = true;
+        });
       }
-    )
+    }
   }
 }
 

diff --git a/packages/astro/src/vite-plugin-astro/index.ts b/packages/astro/src/vite-plugin-astro/index.ts
@@ -1,4 +1,5 @@
 import type { TransformResult } from '@astrojs/compiler';
+import type { SourceMapInput } from 'rollup';
 import type vite from '../core/vite';
 import type { AstroConfig } from '../@types/astro-core';
 
@@ -15,6 +16,20 @@ interface AstroPluginOptions {
   devServer?: AstroDevServer;
 }
 
+// https://github.com/vitejs/vite/discussions/5109#discussioncomment-1450726
+function isSSR(options: undefined | boolean | { ssr: boolean }): boolean {
+  if (options === undefined) {
+    return false;
+  }
+  if (typeof options === 'boolean') {
+    return options;
+  }
+  if (typeof options == 'object') {
+    return !!options.ssr;
+  }
+  return false;
+}
+
 /** Transform .astro files for Vite */
 export default function astro({ config, devServer }: AstroPluginOptions): vite.Plugin {
   let viteTransform: TransformHook;
@@ -25,7 +40,7 @@ export default function astro({ config, devServer }: AstroPluginOptions): vite.P
       viteTransform = getViteTransform(resolvedConfig);
     },
     // note: don’t claim .astro files with resolveId() — it prevents Vite from transpiling the final JS (import.meta.globEager, etc.)
-    async load(id) {
+    async load(id, opts) {
       if (!id.endsWith('.astro')) {
         return null;
       }
@@ -47,12 +62,20 @@ export default function astro({ config, devServer }: AstroPluginOptions): vite.P
           internalURL: 'astro/internal',
           preprocessStyle: async (value: string, attrs: Record<string, string>) => {
             if (!attrs || !attrs.lang) return null;
-            const result = await transformWithVite(value, attrs, id, viteTransform);
+            const result = await transformWithVite({ value, attrs, id, transformHook: viteTransform, ssr: isSSR(opts) });
             if (!result) {
               // TODO: compiler supports `null`, but types don't yet
               return result as any;
             }
-            return { code: result.code, map: result.map?.toString() };
+            let map: SourceMapInput | undefined;
+            if (result.map) {
+              if (typeof result.map === 'string') {
+                map = result.map;
+              } else if (result.map.mappings) {
+                map = result.map.toString();
+              }
+            }
+            return { code: result.code, map };
           },
         });
         // Compile `.ts` to `.js`
@@ -63,12 +86,14 @@ export default function astro({ config, devServer }: AstroPluginOptions): vite.P
           map,
         };
       } catch (err: any) {
-        // if esbuild threw the error, find original code source to display
+        // if esbuild threw the error, find original code source to display (if it’s mapped)
         if (err.errors && tsResult?.map) {
           const json = JSON.parse(tsResult.map);
           const mappings = decode(json.mappings);
           const focusMapping = mappings[err.errors[0].location.line + 1];
-          err.sourceLoc = { file: id, line: (focusMapping[0][2] || 0) + 1, column: (focusMapping[0][3] || 0) + 1 };
+          if (Array.isArray(focusMapping) && focusMapping.length) {
+            err.sourceLoc = { file: id, line: (focusMapping[0][2] || 0) + 1, column: (focusMapping[0][3] || 0) + 1 };
+          }
         }
         throw err;
       }

diff --git a/packages/astro/src/vite-plugin-astro/styles.ts b/packages/astro/src/vite-plugin-astro/styles.ts
@@ -1,9 +1,8 @@
 import type vite from '../core/vite';
 
-export type TransformHook = (code: string, id: string, ssr?: boolean) => Promise<vite.TransformResult>;
+import { PREPROCESSOR_EXTENSIONS } from '../core/ssr/css.js';
 
-// https://vitejs.dev/guide/features.html#css-pre-processors
-const SUPPORTED_PREPROCESSORS = new Set(['scss', 'sass', 'styl', 'stylus', 'less']);
+export type TransformHook = (code: string, id: string, ssr?: boolean) => Promise<vite.TransformResult>;
 
 /** Load vite:css’ transform() hook */
 export function getViteTransform(viteConfig: vite.ResolvedConfig): TransformHook {
@@ -13,10 +12,19 @@ export function getViteTransform(viteConfig: vite.ResolvedConfig): TransformHook
   return viteCSSPlugin.transform.bind(null as any) as any;
 }
 
+interface TransformWithViteOptions {
+  value: string;
+  attrs: Record<string, string>;
+  id: string;
+  transformHook: TransformHook;
+  ssr?: boolean;
+}
+
 /** Transform style using Vite hook */
-export async function transformWithVite(value: string, attrs: Record<string, string>, id: string, transformHook: TransformHook): Promise<vite.TransformResult | null> {
-  const lang = (attrs.lang || '').toLowerCase(); // don’t be case-sensitive
-  if (!SUPPORTED_PREPROCESSORS.has(lang)) return null; // only preprocess the above
-  const result = await transformHook(value, id.replace(/\.astro$/, `.${lang}`));
-  return result || null;
+export async function transformWithVite({ value, attrs, transformHook, id, ssr }: TransformWithViteOptions): Promise<vite.TransformResult | null> {
+  const lang = (`.${attrs.lang}` || '').toLowerCase(); // add leading "."; don’t be case-sensitive
+  if (!PREPROCESSOR_EXTENSIONS.has(lang)) {
+    return null; // only preprocess langs supported by Vite
+  }
+  return transformHook(value, id + `?astro&type=style&lang${lang}`, ssr);
 }