feat: add asString option

sxzz · sxzz · commit ef4a0b90cdf7 · 2025-09-13T05:59:55.000+09:00
closes #35
diff --git a/README.md b/README.md
@@ -71,7 +71,7 @@ module.exports = {
 
 <br></details>
 
-## Example
+## Options
 
 ```ts
 import { Features } from 'lightningcss'
@@ -82,6 +82,12 @@ export default {
       options: {
         include: Features.Nesting,
       },
+
+      /**
+       * Whether to export the transformed CSS as a default string export.
+       * @default false
+       */
+      asString: false,
     }),
   ],
 }
diff --git a/src/core/options.ts b/src/core/options.ts
@@ -6,6 +6,11 @@ export type Options = {
   exclude?: FilterPattern
   enforce?: 'pre' | 'post' | undefined
   options?: Omit<TransformOptions<any>, 'code' | 'filename'>
+  /**
+   * Whether to export the transformed CSS as a default string export.
+   * @default false
+   */
+  asString?: boolean
 }
 
 type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U
@@ -21,5 +26,6 @@ export function resolveOption(options: Options): OptionsResolved {
     exclude: options.exclude || [/node_modules/],
     enforce: 'enforce' in options ? options.enforce : 'pre',
     options: options.options || {},
+    asString: options.asString || false,
   }
 }
diff --git a/src/core/transform.ts b/src/core/transform.ts
@@ -11,17 +11,27 @@ export async function transformCss(
   id: string,
   code: string,
   options: Options['options'],
-): Promise<{ code: string; map?: string }> {
+  asString?: boolean,
+): Promise<{ code: string; map?: string; moduleType: 'css' | 'js' }> {
   const filename = cleanUrl(id)
   const { transform } = await import('lightningcss')
-  const res = transform({
+  const result = transform({
     ...options,
     filename,
     code: Buffer.from(code),
   })
+  let resultCode = result.code.toString()
+  if (asString) {
+    resultCode = `export default ${JSON.stringify(resultCode)}`
+  }
   return {
-    code: res.code.toString(),
-    map: 'map' in res ? res.map?.toString() : undefined,
+    code: resultCode,
+    map: asString
+      ? undefined
+      : 'map' in result
+        ? result.map?.toString()
+        : undefined,
+    moduleType: asString ? 'js' : 'css',
   }
 }
 
diff --git a/src/index.ts b/src/index.ts
@@ -29,7 +29,7 @@ const plugin: UnpluginInstance<Options | undefined, false> = createUnplugin(
           },
         },
         handler(code, id) {
-          return transformCss(id, code, options.options)
+          return transformCss(id, code, options.options, options.asString)
         },
       },
 
diff --git a/tests/__snapshots__/transform.test.ts.snap b/tests/__snapshots__/transform.test.ts.snap
@@ -14,7 +14,53 @@ document.body.append(btn);
 "
 `;
 
-exports[`transform > tests/fixtures/basic.css 1`] = `
+exports[`rolldown transform > tests/fixtures/as-string.css 1`] = `
+"// as-string.js
+//#region tests/fixtures/as-string.css
+var as_string_default = ".red{color:red}";
+
+//#endregion
+export { as_string_default as default };"
+`;
+
+exports[`rolldown transform > tests/fixtures/basic.css 1`] = `
+"// basic.css
+.red{color:red}
+
+// basic.js
+"
+`;
+
+exports[`rolldown transform > tests/fixtures/import.css 1`] = `
+"// import.css
+.red{color:red}
+
+
+// import.js
+//#region tests/fixtures/basic.css
+var basic_default = {};
+
+//#endregion"
+`;
+
+exports[`rolldown transform > tests/fixtures/nesting.css 1`] = `
+"// nesting.css
+.a .b{color:red}
+
+// nesting.js
+"
+`;
+
+exports[`rollup transform > tests/fixtures/as-string.css 1`] = `
+"// as-string.js
+
+
+// assets/asset-CRu7KFtz
+export default ".red{color:red}"
+"
+`;
+
+exports[`rollup transform > tests/fixtures/basic.css 1`] = `
 "// assets/asset-CuZ0KhGL
 .red{color:red}
 
@@ -23,7 +69,7 @@ exports[`transform > tests/fixtures/basic.css 1`] = `
 "
 `;
 
-exports[`transform > tests/fixtures/import.css 1`] = `
+exports[`rollup transform > tests/fixtures/import.css 1`] = `
 "// assets/asset-C9cPOTFW
 @import "./basic.css";
 
@@ -32,7 +78,7 @@ exports[`transform > tests/fixtures/import.css 1`] = `
 "
 `;
 
-exports[`transform > tests/fixtures/nesting.css 1`] = `
+exports[`rollup transform > tests/fixtures/nesting.css 1`] = `
 "// assets/asset-B4RRm-s2
 .a .b{color:red}
 
diff --git a/tests/fixtures/as-string.css b/tests/fixtures/as-string.css
@@ -0,0 +1,3 @@
+.red {
+  color: red;
+}
diff --git a/tests/transform.test.ts b/tests/transform.test.ts
@@ -1,24 +1,25 @@
 import { resolve } from 'node:path'
-import { rollupBuild, testFixtures } from '@sxzz/test-utils'
+import { rolldownBuild, rollupBuild, testFixtures } from '@sxzz/test-utils'
 import css from 'rollup-plugin-css-only'
 import { describe, expect, it } from 'vitest'
 import LightningCSS from '../src/rollup'
 
-describe('transform', async () => {
+describe.each(['rollup', 'rolldown'] as const)('%s transform', async (type) => {
   await testFixtures(
     ['tests/fixtures/*.css'],
     async (args, id) =>
       (
-        await rollupBuild(id, [
+        await (type === 'rollup' ? rollupBuild : rolldownBuild)(id, [
           LightningCSS({
             options: {
               minify: true,
               targets: {
                 ie: 11,
               },
             },
+            asString: id.includes('as-string'),
           }),
-          css(),
+          type === 'rollup' && css(),
         ])
       ).snapshot,
     { cwd: resolve(__dirname, '..'), promise: true },

Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,11 @@ export type Options = {`
`6`	`6`	`exclude?: FilterPattern`
`7`	`7`	`enforce?: 'pre' \| 'post' \| undefined`
`8`	`8`	`options?: Omit<TransformOptions<any>, 'code' \| 'filename'>`
	`9`	`+ /**`
	`10`	`+ * Whether to export the transformed CSS as a default string export.`
	`11`	`+ * @default false`
	`12`	`+ */`
	`13`	`+ asString?: boolean`
`9`	`14`	`}`
`10`	`15`
`11`	`16`	`type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U`
`@@ -21,5 +26,6 @@ export function resolveOption(options: Options): OptionsResolved {`
`21`	`26`	`exclude: options.exclude \|\| [/node_modules/],`
`22`	`27`	`enforce: 'enforce' in options ? options.enforce : 'pre',`
`23`	`28`	`options: options.options \|\| {},`
	`29`	`+ asString: options.asString \|\| false,`
`24`	`30`	`}`
`25`	`31`	`}`