support CSS bundle explicitly

cometkim · Feb 2, 2023 · 0ab2a4a · 0ab2a4a
1 parent 0f77f98
commit 0ab2a4a
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 55 deletions.
diff --git a/.changeset/silent-sloths-switch.md b/.changeset/silent-sloths-switch.md
@@ -0,0 +1,5 @@
+---
+"nanobundle": minor
+---
+
+Support CSS bundle explicitly
diff --git a/README.md b/README.md
@@ -340,7 +340,7 @@ Conditional entries with Node.js community condition `production` or `developmen
 
 | Build tool           | 0 Config                         | Respect `package.json` | TypeScript `.d.ts` generation | Concurrency | Multiple Entries         | Conditional Exports  | Import Maps            | CSS Support            | Plugins          | Dev(watch) mode  |
 | :------------------- | -------------------------------: | ---------------------: | ----------------------------: | ----------: | -----------------------: | -------------------: | ---------------------: | ---------------------: | ---------------: | ---------------: |
-| **nanobundle**       | ✔️                                | ✔️                      | ✔️                             | ✔️           | ✔️                        | ✔️                    | ✔️                      | ✖️ <br> (planned)       | ✖️ <br> (planned) | ✖️ <br> (planned) |
+| **nanobundle**       | ✔️                                | ✔️                      | ✔️                             | ✔️           | ✔️                        | ✔️                    | ✔️                      | ✔️                      | ✖️ <br> (planned) | ✖️ <br> (planned) |
 | [microbundle]        | ✔️                                | ✔️                      | ✔️                             | ✔️           | ✖️                        | 🟡 <br> (only flat)  | ✖️                      | ✔️                      | ✖️                | ✔️                |
 | [tsup]               | 🟡 <br> (mostly by custom file)  | ✖️                      | ✔️                             | ✔️           | ✔️                        | ✖️                    | 🟡 <br> (with plugin)  | 🟡 <br> (experimental) | ✔️                | ✔️                |
 | [estrella]           | ✖️                                | ✖️                      | ✔️                             | ✔️           | ✖️                        | ✖️                    | ✖️                      | ✖️                      | ✖️                | ✔️                |

diff --git a/src/entry.test.ts b/src/entry.test.ts
@@ -1,4 +1,3 @@
-import * as path from 'node:path';
 import {
   describe,
   test,
@@ -14,8 +13,6 @@ import { parseConfig } from './context';
 import { getEntriesFromContext } from "./entry";
 import * as formatUtils from './formatUtils';
 
-const resolve = (cwd: string, to: string) => path.join(cwd, to);
-
 class ViReporter implements Reporter {
   debug = vi.fn();
   info = vi.fn();
@@ -2151,17 +2148,13 @@ describe('common usecases', () => {
       },
       {
         key: 'exports["./colors.css"]',
-        module: 'commonjs',
+        module: 'css',
         mode: undefined,
         minify: false,
         sourcemap: true,
         platform: 'neutral',
         entryPath: './colors.css',
         sourceFile: [
-          '/project/colors.css.cts',
-          '/project/colors.css.cjs',
-          '/project/colors.css.ts',
-          '/project/colors.css.js',
           '/project/colors.css',
         ],
         outputFile: '/project/colors.css',

diff --git a/src/entry.ts b/src/entry.ts
@@ -14,8 +14,8 @@ export type Entry = {
   minify: boolean;
   mode: undefined | 'development' | 'production';
   sourcemap: boolean;
-  platform: "neutral" | "browser" | "deno" | "node";
-  module: "commonjs" | "esmodule" | "dts" | "file";
+  platform: 'neutral' | 'browser' | 'deno' | 'node';
+  module: 'commonjs' | 'esmodule' | 'css' | 'dts' | 'file';
   sourceFile: string[];
   outputFile: string;
   customConditions: string[],
@@ -60,6 +60,7 @@ export const getEntriesFromContext: GetEntriesFromContext = ({
   const defaultPreferredModule = ({
     commonjs: 'commonjs',
     esmodule: 'esmodule',
+    css: undefined,
     dts: undefined,
     file: undefined,
   } as const)[defaultModule];
@@ -200,6 +201,7 @@ export const getEntriesFromContext: GetEntriesFromContext = ({
           useJsx && useJsSource && sourceFileCandidates.add(resolvedSourceFileWithoutCondition.replace(/\.c?jsx?$/, '.jsx'));
           useJsSource && sourceFileCandidates.add(resolvedSourceFileWithoutCondition.replace(/\.c?jsx?$/, '.js'));
         }
+        useJsSource && sourceFileCandidates.add(resolvedSourceFile);
         break;
       }
       case 'esmodule': {
@@ -218,6 +220,11 @@ export const getEntriesFromContext: GetEntriesFromContext = ({
           useJsx && useJsSource && sourceFileCandidates.add(resolvedSourceFileWithoutCondition.replace(/\.m?jsx?$/, '.jsx'));
           useJsSource && sourceFileCandidates.add(resolvedSourceFileWithoutCondition.replace(/\.m?jsx?$/, '.js'));
         }
+        useJsSource && sourceFileCandidates.add(resolvedSourceFile);
+        break;
+      }
+      case 'css': {
+        sourceFileCandidates.add(resolvedSourceFile);
         break;
       }
       case 'dts': {
@@ -232,14 +239,6 @@ export const getEntriesFromContext: GetEntriesFromContext = ({
         sourceFileCandidates.add(resolvedSourceFile.replace(/\.d\.(m|c)?ts$/, '.ts'));
         break;
       }
-    }
-
-    switch (module) {
-      case 'commonjs':
-      case 'esmodule': {
-        useJsSource && sourceFileCandidates.add(resolvedSourceFile);
-        break;
-      }
       case 'file': {
         if (path.relative(cwd, path.dirname(resolvedOutputFile))) {
           sourceFileCandidates.add(resolvedSourceFile);
@@ -330,7 +329,7 @@ export const getEntriesFromContext: GetEntriesFromContext = ({
           sourcemap,
           platform: defaultPlatform,
           mode: defaultMode,
-          module: "file",
+          module: 'file',
           entryPath,
           customConditions: [],
         });
@@ -549,6 +548,20 @@ export const getEntriesFromContext: GetEntriesFromContext = ({
           });
           break;
         }
+        case '.css': {
+          addEntry({
+            key,
+            parentKey,
+            sourcemap,
+            platform,
+            mode,
+            module: 'css',
+            preferredModule,
+            entryPath,
+            customConditions,
+          });
+          break;
+        }
         case '.jsx': {
           if (!preserveJsx) {
             reporter.warn(Message.NO_NEED_JSX(entryPath));
@@ -866,6 +879,11 @@ export class NanobundleEntryError extends NanobundleError {
 }
 
 export const Message = {
+  INVALID_MAIN_EXTENSION: () => dedent`
+    Only ${formatUtils.path('.js')}, ${formatUtils.path('.cjs')}, ${formatUtils.path('.mjs')}, ${formatUtils.path('.json')}, or ${formatUtils.path('.node')} allowed for ${formatUtils.key('main')} entry.
+
+  `,
+
   INVALID_MODULE_EXTENSION: () => dedent`
     Only ${formatUtils.path('.js')} or ${formatUtils.path('.mjs')} allowed for ${formatUtils.key('module')} entry.
 

diff --git a/src/entryGroup.ts b/src/entryGroup.ts
@@ -3,10 +3,10 @@ import { type OverrideProps } from '@cometjs/core';
 import { type Entry } from './entry';
 
 export type BundleEntry = OverrideProps<Entry, {
-  module: 'esmodule' | 'commonjs',
+  module: 'esmodule' | 'commonjs' | 'css',
 }>;
 export function filterBundleEntry(entry: Entry): entry is BundleEntry {
-  return entry.module === 'esmodule' || entry.module === 'commonjs';
+  return entry.module === 'esmodule' || entry.module === 'commonjs' || entry.module === 'css';
 }
 
 export type TypeEntry = OverrideProps<Entry, {

diff --git a/src/tasks/buildBundleTask.ts b/src/tasks/buildBundleTask.ts
@@ -143,50 +143,54 @@ async function buildBundleGroup({
 
   context.reporter.debug('esbuild entryPoints: %o', entryPoints);
 
-  const esbuildOptions: esbuild.BuildOptions = {
-    // entryPoints,
-    // outdir: baseDir,
+  let esbuildOptions: esbuild.BuildOptions = {
     bundle: true,
-    tsconfig: context.tsconfigPath,
-    jsx: context.jsx,
-    jsxDev: context.jsxDev,
-    jsxFactory: context.jsxFactory,
-    jsxFragment: context.jsxFragment,
-    jsxImportSource: context.jsxImportSource,
-    treeShaking: true,
-    keepNames: true,
     target: context.targets,
-    format: options.module === 'commonjs' ? 'cjs' : 'esm',
     sourcemap: options.sourcemap,
     legalComments: context.legalComments ? 'linked' : 'none',
     minify: options.minify,
-    plugins: [],
-    conditions: options.customConditions,
   };
 
-  if (options.platform === 'deno') {
-    esbuildOptions.platform = 'neutral';
-  } else {
-    esbuildOptions.platform = options.platform;
-  }
-
-  if (options.mode) {
-    esbuildOptions.define = {
-      'process.env.NODE_ENV': JSON.stringify(options.mode),
+  if (options.module === 'commonjs' || options.module === 'esmodule') {
+    esbuildOptions = {
+      ...esbuildOptions,
+      tsconfig: context.tsconfigPath,
+      jsx: context.jsx,
+      jsxDev: context.jsxDev,
+      jsxFactory: context.jsxFactory,
+      jsxFragment: context.jsxFragment,
+      jsxImportSource: context.jsxImportSource,
+      treeShaking: true,
+      keepNames: true,
+      format: options.module === 'commonjs' ? 'cjs' : 'esm',
+      plugins: [],
+      conditions: options.customConditions,
     };
-  }
 
-  const importMaps = normalizeImportMaps(validImportMaps, options);
-  const importMapsPlugin = makeImportMapsPlugin({ context, importMaps });
-  esbuildOptions.plugins?.push(importMapsPlugin);
+    if (options.platform === 'deno') {
+      esbuildOptions.platform = 'neutral';
+    } else {
+      esbuildOptions.platform = options.platform;
+    }
+
+    if (options.mode) {
+      esbuildOptions.define = {
+        'process.env.NODE_ENV': JSON.stringify(options.mode),
+      };
+    }
 
-  const embedPlugin = makeEmbedPlugin({ context });
-  esbuildOptions.plugins?.push(embedPlugin);
+    const importMaps = normalizeImportMaps(validImportMaps, options);
+    const importMapsPlugin = makeImportMapsPlugin({ context, importMaps });
+    esbuildOptions.plugins?.push(importMapsPlugin);
 
-  esbuildOptions.plugins = [
-    ...esbuildOptions.plugins ?? [],
-    ...plugins,
-  ];
+    const embedPlugin = makeEmbedPlugin({ context });
+    esbuildOptions.plugins?.push(embedPlugin);
+
+    esbuildOptions.plugins = [
+      ...esbuildOptions.plugins ?? [],
+      ...plugins,
+    ];
+  }
 
   context.reporter.debug('esbuild build options %o', esbuildOptions);