From 0a097d8fb9d54d8f28c87ccfb16093dd740c37fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonas=20Lide=CC=81n?= <jonas.liden@codemill.se>
Date: Mon, 24 Feb 2025 10:32:57 +0100
Subject: [PATCH] feat: added option to allow alternative postcss file
 extensions

---
 src/esbuild/index.ts                |  1 +
 src/esbuild/postcss.ts              |  6 +++--
 src/options.ts                      |  5 ++++
 test/__snapshots__/css.test.ts.snap |  5 ++++
 test/css.test.ts                    | 36 ++++++++++++++++++++++++++++-
 5 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/src/esbuild/index.ts b/src/esbuild/index.ts
index 9b07f24e..e9d83d1c 100644
--- a/src/esbuild/index.ts
+++ b/src/esbuild/index.ts
@@ -144,6 +144,7 @@ export async function runEsbuild(
       css,
       inject: options.injectStyle,
       cssLoader: loader['.css'],
+      fileExtensions: options.postcssFileExtensions
     }),
     sveltePlugin({ css }),
     ...(options.esbuildPlugins || []),
diff --git a/src/esbuild/postcss.ts b/src/esbuild/postcss.ts
index fa8772aa..7aa08ffb 100644
--- a/src/esbuild/postcss.ts
+++ b/src/esbuild/postcss.ts
@@ -7,10 +7,12 @@ export const postcssPlugin = ({
   css,
   inject,
   cssLoader,
+  fileExtensions = ["css"]
 }: {
   css?: Map<string, string>
   inject?: boolean | ((css: string, fileId: string) => string | Promise<string>)
-  cssLoader?: Loader
+  cssLoader?: Loader,
+  fileExtensions?: string[]
 }): Plugin => {
   return {
     name: 'postcss',
@@ -77,7 +79,7 @@ export const postcssPlugin = ({
         },
       )
 
-      build.onLoad({ filter: /\.css$/ }, async (args) => {
+      build.onLoad({ filter: new RegExp(fileExtensions.map(ext => `\\.${ext}$`).join("|")) }, async (args) => {
         let contents: string
 
         if (css && args.path.endsWith('.svelte.css')) {
diff --git a/src/options.ts b/src/options.ts
index 827790d4..97555a77 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -219,6 +219,11 @@ export type Options = {
   injectStyle?:
     | boolean
     | ((css: string, fileId: string) => string | Promise<string>)
+  /**
+   * Allowed postcss file extensions
+   * @default ["css"]
+   */
+  postcssFileExtensions?: string[]
   /**
    * Inject cjs and esm shims if needed
    * @default false
diff --git a/test/__snapshots__/css.test.ts.snap b/test/__snapshots__/css.test.ts.snap
index 98d077eb..6cc39482 100644
--- a/test/__snapshots__/css.test.ts.snap
+++ b/test/__snapshots__/css.test.ts.snap
@@ -10,6 +10,11 @@ exports[`import css in --dts 1`] = `
 "
 `;
 
+exports[`support alternative postcss file extension 1`] = `
+""use strict";
+"
+`;
+
 exports[`support tailwindcss postcss plugin 1`] = `
 ""use strict";
 "
diff --git a/test/css.test.ts b/test/css.test.ts
index 69e2f0be..7199dd56 100644
--- a/test/css.test.ts
+++ b/test/css.test.ts
@@ -2,7 +2,7 @@ import { expect, test } from 'vitest'
 import { getTestName, run } from './utils'
 
 test('import css', async () => {
-  const { output, outFiles } = await run(getTestName(), {
+  const { output, outFiles, getFileContent } = await run(getTestName(), {
     'input.ts': `
     import './foo.css'
     `,
@@ -21,6 +21,40 @@ test('import css', async () => {
   })
 
   expect(output, `""`).toMatchSnapshot()
+  expect(await getFileContent("dist/input.css")).not.toContain("$color")
+  expect(outFiles).toEqual(['input.css', 'input.js'])
+})
+
+test('support alternative postcss file extension', async () => {
+  const { output, outFiles, getFileContent } = await run(getTestName(), {
+    'input.ts': `
+    import './foo.postcss'
+    `,
+    'postcss.config.js': `
+    module.exports = {
+      plugins: [require('postcss-simple-vars')()]
+    }
+    `,
+    'foo.postcss': `
+  $color: blue;
+
+  .foo {
+    color: $color;
+  }
+    `,
+    'tsup.config.ts': `
+      export default {
+        loader: {
+          '.postcss': 'css'
+        },
+        postcssFileExtensions: ['postcss']
+      }
+      `,
+  })
+  
+
+  expect(output, `""`).toMatchSnapshot()
+  expect(await getFileContent("dist/input.css")).not.toContain("$color")
   expect(outFiles).toEqual(['input.css', 'input.js'])
 })