feat(plugin): css loader loads inline styles

Author: ije

plugins/css.ts

@@ -56,14 +56,19 @@ export default (options?: Options): LoaderPlugin => {
         await loading
       }
       const pcss = (await postcss!.process((new TextDecoder).decode(content)).async()).content
-      const mini = Deno.env.get('BUILD_MODE') === 'production'
-      const css = mini ? cleanCSS.minify(pcss).styles : pcss
-      const js = [
-        'import { applyCSS } from "https://deno.land/x/aleph/framework/core/style.ts"',
-        `applyCSS(${JSON.stringify(url)}, ${JSON.stringify(css)})`
-      ].join('\n')
+      const css = Deno.env.get('BUILD_MODE') === 'production' ? cleanCSS.minify(pcss).styles : pcss
+      if (url.startsWith('#inline-style-')) {
+        return {
+          code: css,
+          type: 'css',
+          map: undefined
+        }
+      }
       return {
-        code: js,
+        code: [
+          'import { applyCSS } from "https://deno.land/x/aleph/framework/core/style.ts"',
+          `applyCSS(${JSON.stringify(url)}, ${JSON.stringify(css)})`
+        ].join('\n'),
         map: undefined // todo: generate map
       }
     }

plugins/css_test.ts

@@ -13,6 +13,16 @@ Deno.test('css loader', async () => {
   assertEquals(code, 'import { applyCSS } from "https://deno.land/x/aleph/framework/core/style.ts"\napplyCSS("/test.css", "h1 { font-size: 18px; }")')
 })
 
+Deno.test('css loader for inline style', async () => {
+  const loader = cssLoader()
+  const { code, type } = await loader.transform({
+    url: '#inline-style-{}',
+    content: (new TextEncoder).encode('h1 { font-size: 18px; }'),
+  })
+  assertEquals(code, 'h1 { font-size: 18px; }')
+  assertEquals(type, 'css')
+})
+
 Deno.test('css loader in production mode', async () => {
   Deno.env.set('BUILD_MODE', 'production')