feat: support bundling of css @import rules

packages/nuekit/src/builder.js

@@ -1,8 +1,8 @@
 
 /* Builders for CSS, JS, and TS */
-
-import { Features, transform } from 'lightningcss'
-import { join, extname } from 'node:path'
+import { promises as fs } from 'node:fs'
+import { Features, bundleAsync } from 'lightningcss'
+import { join } from 'node:path'
 import { resolve } from 'import-meta-resolve'
 
 
@@ -75,17 +75,16 @@ export function parseError(buildResult) {
 
 }
 
-export async function lightningCSS(css, minify, opts={}) {
+export async function lightningCSS(filename, minify, opts={}) {
   let include = Features.Colors
   if (opts.native_css_nesting) include |= Features.Nesting
 
   try {
-    return transform({ code: Buffer.from(css), include, minify }).code?.toString()
-
-  } catch({ source, loc, data}) {
+    return (await bundleAsync({ filename, include, minify })).code?.toString()
+  } catch({ fileName, loc, data }) {
     throw {
       title: 'CSS syntax error',
-      lineText: source.split(/\r\n|\r|\n/)[loc.line -1],
+      lineText: (await fs.readFile(fileName, 'utf-8')).split(/\r\n|\r|\n/)[loc.line - 1],
       text: data.type,
       ...loc
     }

packages/nuekit/src/nuekit.js

@@ -163,9 +163,10 @@ export async function createKit(args) {
   }
 
   async function processCSS({ path, base, dir}) {
-    const raw = await read(path)
     const data = await site.getData()
-    const css = data.lightning_css === false ? raw : await lightningCSS(raw, is_prod, data)
+    const css = data.lightning_css === false ?
+      await read(path) :
+      await lightningCSS(join(root, path), is_prod, data)
     await write(css, dir, base)
     return { css }
   }

packages/nuekit/test/misc.test.js

@@ -8,32 +8,56 @@ import { getArgs } from '../src/cli.js'
 import { toMatchPath } from './match-path.js'
 
 import { promises as fs } from 'node:fs'
+import { join } from 'node:path'
 
 expect.extend({ toMatchPath })
 
 // temporary directory
 const root = '_test'
 
 // setup and teardown
-beforeAll(async () => {
+beforeEach(async () => {
   await fs.rm(root, { recursive: true, force: true })
   await fs.mkdir(root, { recursive: true })
 })
 
-afterAll(async () => await fs.rm(root, { recursive: true, force: true }))
+afterEach(async () => await fs.rm(root, { recursive: true, force: true }))
+
+async function write(filename, code) {
+  const file = join(root, filename)
+  await fs.writeFile(file, code)
+  return file
+}
+
 
 test('Lightning CSS errors', async () => {
+  const code = 'body margin: 0 }'
+  const filepath = await write('lcss.css', code)
+
   try {
-    await lightningCSS('body margin: 0 }', true)
+    await lightningCSS(filepath, true)
   } catch (e) {
-    expect(e.lineText).toBe('body margin: 0 }')
+    expect(e.lineText).toBe(code)
     expect(e.line).toBe(1)
   }
 })
 
+test('Lightning CSS @import bundling', async () => {
+  const code = 'body { margin: 0 }'
+  const filename = 'cssimport.css'
+  await write(filename, code)
+  const filepath = await write('lcss.css', `@import "${filename}"`)
+
+  const css = await lightningCSS(filepath, true)
+  expect(css).toBe(code.replace(/\s/g, ''))
+})
+
 test('Lightning CSS', async () => {
-  const css = await lightningCSS('body { margin: 0 }', true)
-  expect(css).toBe('body{margin:0}')
+  const code = 'body { margin: 0 }'
+  const filepath = await write('lcss.css', code)
+
+  const css = await lightningCSS(filepath, true)
+  expect(css).toBe(code.replace(/\s/g, ''))
 })
 
 test('CLI args', () => {