fix: fix remote css importing

ije · ije · commit 733cd910f986 · 2021-03-26T20:56:40.000+08:00
diff --git a/compiler/src/resolve.rs b/compiler/src/resolve.rs
@@ -218,10 +218,6 @@ impl Resolver {
       } else {
         if url.starts_with("/") {
           url.into()
-        } else if url.starts_with("@/") {
-          url.trim_start_matches("@").into()
-        } else if url.starts_with("~/") {
-          url.trim_start_matches("~").into()
         } else {
           let mut buf = PathBuf::from(self.specifier.as_str());
           buf.pop();
@@ -337,21 +333,22 @@ impl Resolver {
             resolved_path.set_file_name(filename);
           }
           _ => {
+            let mut filename = resolved_path
+              .file_name()
+              .unwrap()
+              .to_str()
+              .unwrap()
+              .to_owned();
+            if self.bundle_mode && !is_dynamic {
+              filename.push_str(".bundling");
+            }
+            filename.push_str(".js");
             if !is_remote && !self.specifier_is_remote {
-              let mut filename = resolved_path
-                .file_name()
-                .unwrap()
-                .to_str()
-                .unwrap()
-                .to_owned();
-              if self.bundle_mode && !is_dynamic {
-                filename.push_str(".bundling");
-              }
-              filename.push_str(".js#");
+              filename.push('#');
               filename.push_str(fixed_url.as_str());
               filename.push_str("@000000");
-              resolved_path.set_file_name(filename);
             }
+            resolved_path.set_file_name(filename);
           }
         },
         None => {}
@@ -538,6 +535,13 @@ mod tests {
         "/styles/app.css".into()
       )
     );
+    assert_eq!(
+      resolver.resolve("https://esm.sh/tailwindcss/dist/tailwind.min.css", false),
+      (
+        "../-/esm.sh/tailwindcss/dist/tailwind.min.css.js".into(),
+        "https://esm.sh/tailwindcss/dist/tailwind.min.css".into()
+      )
+    );
     assert_eq!(
       resolver.resolve("@/components/logo.tsx", false),
       (
diff --git a/compiler/src/resolve_fold.rs b/compiler/src/resolve_fold.rs
@@ -700,6 +700,7 @@ mod tests {
         return (
           <>
             <head>
+              <link rel="stylesheet" href="https://esm.sh/tailwindcss/dist/tailwind.min.css" />
               <link rel="stylesheet" href="../style/index.css" />
             </head>
             <Logo />
@@ -746,6 +747,8 @@ mod tests {
     assert!(code.contains(
       "import __ALEPH_Stylelink from \"../-/deno.land/x/aleph/framework/react/stylelink.bundling.js\""
     ));
+    assert!(code.contains("import   \"../-/esm.sh/tailwindcss/dist/tailwind.min.css.bundling.js\""));
+    assert!(code.contains("import   \"../style/index.css.bundling.js#/style/index.css@000000\""));
     assert!(code.contains("export const $$star_0 = __ALEPH.pack[\"https://esm.sh/react\"]"));
     assert!(code.contains("export const ReactDom = __ALEPH.pack[\"https://esm.sh/react-dom\"]"));
     assert!(code.contains("export const { render  } = __ALEPH.pack[\"https://esm.sh/react-dom\"]"));
diff --git a/framework/core/style.ts b/framework/core/style.ts
@@ -1,47 +1,67 @@
 import util from '../../shared/util.ts'
 
+export const clientStyles = new Map<string, string>()
 export const serverStyles = new Map<string, string>()
-export const recoverStyles = new Map<string, string>()
 
-export function removeCSS(id: string, recoverable?: boolean) {
+export function removeCSS(url: string, recoverable?: boolean) {
   const { document } = window as any
   Array.from(document.head.children).forEach((el: any) => {
-    if (el.getAttribute('data-module-id') === id) {
+    if (el.getAttribute('data-module-id') === url) {
       if (recoverable) {
-        recoverStyles.set(id, el.innerHTML)
+        const tag = el.tagName.toLowerCase()
+        if (tag === 'style') {
+          clientStyles.set(url, el.innerHTML)
+        } else if (tag === 'link') {
+          clientStyles.set(url, '')
+        }
       }
       document.head.removeChild(el)
     }
   })
 }
 
-export function recoverCSS(id: string) {
-  if (recoverStyles.has(id)) {
-    applyCSS(id, recoverStyles.get(id)!)
+export function recoverCSS(url: string) {
+  if (clientStyles.has(url)) {
+    const css = clientStyles.get(url)!
+    if (css === '' && util.isLikelyHttpURL(url)) {
+      applyCSS(url)
+    } else {
+      applyCSS(url, css)
+    }
   }
 }
 
-export function applyCSS(id: string, css: string) {
+export function applyCSS(url: string, css?: string) {
   if (util.inDeno) {
-    serverStyles.set(id, css)
+    serverStyles.set(url, css || '')
   } else {
     const { document } = window as any
-    const ssrStyle = Array.from<any>(document.head.children).find((el: any) => {
-      return el.getAttribute('data-module-id') === id && el.hasAttribute('ssr')
+    const ssr = Array.from<any>(document.head.children).find((el: any) => {
+      return el.getAttribute('data-module-id') === url && el.hasAttribute('ssr')
     })
-    if (ssrStyle) {
-      ssrStyle.removeAttribute('ssr')
+    if (ssr) {
+      // apply the css at next time
+      ssr.removeAttribute('ssr')
     } else {
-      const prevStyleEls = Array.from(document.head.children).filter((el: any) => {
-        return el.getAttribute('data-module-id') === id
+      const prevEls = Array.from(document.head.children).filter((el: any) => {
+        return el.getAttribute('data-module-id') === url
       })
-      const styleEl = document.createElement('style')
-      styleEl.type = 'text/css'
-      styleEl.appendChild(document.createTextNode(css))
-      styleEl.setAttribute('data-module-id', id)
-      document.head.appendChild(styleEl)
-      if (prevStyleEls.length > 0) {
-        prevStyleEls.forEach(el => document.head.removeChild(el))
+      let el: any
+      if (css !== undefined) {
+        el = document.createElement('style')
+        el.type = 'text/css'
+        el.appendChild(document.createTextNode(css))
+      } else if (util.isLikelyHttpURL(url)) {
+        el = document.createElement('link')
+        el.rel = 'stylesheet'
+        el.href = url
+      } else {
+        throw new Error('applyCSS: missing css')
+      }
+      el.setAttribute('data-module-id', url)
+      document.head.appendChild(el)
+      if (prevEls.length > 0) {
+        prevEls.forEach(el => document.head.removeChild(el))
       }
     }
   }
diff --git a/framework/react/bootstrap.ts b/framework/react/bootstrap.ts
@@ -51,7 +51,12 @@ export default async function bootstrap(options: BootstrapOptions) {
   // remove ssr head elements, set a timmer to avoid the tab title flash
   setTimeout(() => {
     Array.from(document.head.children).forEach((el: any) => {
-      if (el.hasAttribute('ssr') && el.tagName.toLowerCase() !== 'style') {
+      const tag = el.tagName.toLowerCase()
+      if (
+        el.hasAttribute('ssr') &&
+        tag !== 'style' &&
+        !(tag === 'link' && el.getAttribute('rel') === 'stylesheet')
+      ) {
         document.head.removeChild(el)
       }
     })
diff --git a/framework/react/renderer.ts b/framework/react/renderer.ts
@@ -139,7 +139,11 @@ export async function render(
 
   // get styles
   serverStyles.forEach((css, url) => {
-    ret.head.push(`<style type="text/css" data-module-id=${JSON.stringify(url)} ssr>${css}</style>`)
+    if (css) {
+      ret.head.push(`<style type="text/css" data-module-id=${JSON.stringify(url)} ssr>${css}</style>`)
+    } else if (util.isLikelyHttpURL(url)) {
+      ret.head.push(`<link rel="stylesheet" href="${url}" data-module-id=${JSON.stringify(url)} ssr />`)
+    }
   })
 
   defer()
diff --git a/plugins/css.ts b/plugins/css.ts
@@ -7,6 +7,7 @@ import type { LoaderPlugin } from '../types.ts'
 const postcssVersion = '8.2.8'
 const productionOnlyPostcssPlugins = ['autoprefixer']
 const decoder = new TextDecoder()
+const importDecl = 'import { applyCSS } from "https://deno.land/x/aleph/framework/core/style.ts"'
 
 export type AcceptedPlugin = string | [string, any] | Plugin | PluginCreator<any>
 
@@ -26,7 +27,21 @@ export default (options?: Options): LoaderPlugin => {
     type: 'loader',
     test: /\.p?css$/i,
     acceptHMR: true,
+    async resolve(url: string) {
+      if (util.isLikelyHttpURL(url)) {
+        return Promise.resolve(new Uint8Array())
+      }
+      return Deno.readFile(join(Deno.cwd(), url))
+    },
     async transform({ url, content }) {
+      if (util.isLikelyHttpURL(url)) {
+        return {
+          code: [
+            importDecl,
+            `applyCSS(${JSON.stringify(url)})`
+          ].join('\n')
+        }
+      }
       if (isProd === null) {
         isProd = Deno.env.get('BUILD_MODE') === 'production'
       }
@@ -48,7 +63,7 @@ export default (options?: Options): LoaderPlugin => {
       }
       return {
         code: [
-          'import { applyCSS } from "https://deno.land/x/aleph/framework/core/style.ts"',
+          importDecl,
           `applyCSS(${JSON.stringify(url)}, ${JSON.stringify(css)})`
         ].join('\n')
         // todo: generate map
diff --git a/server/app.ts b/server/app.ts
@@ -507,7 +507,7 @@ export class Application implements ServerApplication {
   }
 
   isHMRable(url: string) {
-    if (!this.isDev) {
+    if (!this.isDev || util.isLikelyHttpURL(url)) {
       return false
     }
 

Original file line number	Diff line number	Diff line change
`@@ -507,7 +507,7 @@ export class Application implements ServerApplication {`
`507`	`507`	`}`
`508`	`508`
`509`	`509`	`isHMRable(url: string) {`
`510`		`- if (!this.isDev) {`
	`510`	`+ if (!this.isDev \|\| util.isLikelyHttpURL(url)) {`
`511`	`511`	`return false`
`512`	`512`	`}`
`513`	`513`