custom styleModule

src/index.ts

@@ -1,6 +1,7 @@
 import {OnLoadResult} from 'esbuild'
 import {StringOptions} from 'sass-embedded'
 import {sassPlugin} from './plugin'
+import {CustomStyleModule} from './utils'
 
 export type Type = 'css' | 'style' | 'css-text' | 'lit-css'
 
@@ -11,6 +12,11 @@ export type SassPluginOptions = StringOptions<'async'> & {
    */
   filter?: RegExp
 
+  /**
+   * Custom style module to use when @param type is "style"
+   */
+  customStyleModule?: CustomStyleModule;
+
   /**
    * Function to transform import path. Not just paths by @import
    * directive, but also paths imported by ts code.

src/plugin.ts

@@ -105,7 +105,7 @@ export function sassPlugin(options: SassPluginOptions = {}): Plugin {
                 cssChunks[name] = contents
                 contents = `import '${name}';`
               } else if (type === 'style') {
-                contents = makeModule(String(contents), 'style', nonce)
+                contents = makeModule(String(contents), 'style', options.customStyleModule, nonce);
               } else {
                 return {
                   errors: [{text: `unsupported type '${type}' for postCSS modules`}]
@@ -130,7 +130,7 @@ export function sassPlugin(options: SassPluginOptions = {}): Plugin {
             warnings,
             watchFiles
           } : {
-            contents: makeModule(cssText, type, nonce),
+            contents: makeModule(cssText, type, options.customStyleModule, nonce),
             loader: 'js',
             resolveDir,
             warnings,

src/utils.ts

@@ -116,16 +116,18 @@ document.head
 export {css};
 `
 
-export function makeModule(contents: string, type: Type, nonce?: string) {
+export type CustomStyleModule = (cssText: string, nonce?: string) => string;
+
+export function makeModule(contents: string, type: Type, customStyleModule?: CustomStyleModule, nonce?: string) {
   switch (type) {
     case 'style':
-      return styleModule(contents, nonce)
+      return customStyleModule ? customStyleModule(contents, nonce) : styleModule(contents, nonce);
     case 'lit-css':
-      return cssResultModule(contents)
+      return cssResultModule(contents);
     case 'css-text':
-      return cssTextModule(contents)
+      return cssTextModule(contents);
     default:
-      return contents
+      return contents;
   }
 }