feat: add additonalData feature (#203)

Author: mrmckeb

README.md

@@ -99,8 +99,9 @@ Please note that no options are required. However, depending on your configurati
 
 | Option                     | Default value                      | Description                                                                    |
 | -------------------------- | ---------------------------------- | ------------------------------------------------------------------------------ |
+| `additonalData`            | `undefined`                        | An optional string to append to the top of source files.                       |
 | `allowUnknownClassnames`   | `false`                            | Disables TypeScript warnings on unknown classnames (for default imports only). |
-| `classnameTransform`       | `asIs`                             | See [`classnameTransform`](#classnameTransform) below.                         |
+| `classnameTransform`       | `"asIs"`                           | See [`classnameTransform`](#classnameTransform) below.                         |
 | `customMatcher`            | `"\\.module\\.(c\|le\|sa\|sc)ss$"` | Changes the file extensions that this plugin processes.                        |
 | `customRenderer`           | `false`                            | See [`customRenderer`](#customRenderer) below.                                 |
 | `customTemplate`           | `false`                            | See [`customTemplate`](#customTemplate) below.                                 |

src/helpers/__tests__/getDtsSnapshot.test.ts

@@ -330,4 +330,32 @@ describe('helpers / cssSnapshots', () => {
       expect(dts).toMatchSnapshot();
     });
   });
+
+  describe('with additonalData enabled', () => {
+    const fileName = join(__dirname, 'fixtures', 'test.module.scss');
+    const css = readFileSync(fileName, 'utf8');
+    const options: Options = {
+      additonalData: '.my-data {\n  color: red;\n}\n\n',
+    };
+
+    const cssExports = getCssExports({
+      css,
+      fileName,
+      logger,
+      options,
+      processor,
+      compilerOptions,
+      directory: __dirname,
+    });
+
+    it('should return a dts file that contains additional data', () => {
+      const dts = createDtsExports({
+        cssExports,
+        fileName,
+        logger,
+        options,
+      });
+      expect(dts).toContain('my-data');
+    });
+  });
 });

src/helpers/getCssExports.ts

@@ -52,17 +52,19 @@ export const getCssExports = ({
   compilerOptions: tsModule.CompilerOptions;
   directory: string;
 }): CSSExportsWithSourceMap => {
-  try {
-    const fileType = getFileType(fileName);
-    const rendererOptions = options.rendererOptions ?? {};
+  const rawCss = options.additonalData ? options.additonalData + css : css;
+
+  const fileType = getFileType(fileName);
+  const rendererOptions = options.rendererOptions ?? {};
 
-    let transformedCss = '';
-    let sourceMap: RawSourceMap | undefined;
+  let transformedCss = '';
+  let sourceMap: RawSourceMap | undefined;
 
+  try {
     if (options.customRenderer) {
       // eslint-disable-next-line @typescript-eslint/no-var-requires
       const customRenderer = require(options.customRenderer) as CustomRenderer;
-      transformedCss = customRenderer(css, {
+      transformedCss = customRenderer(rawCss, {
         fileName,
         logger,
         compilerOptions,
@@ -71,7 +73,7 @@ export const getCssExports = ({
       switch (fileType) {
         case FileType.less:
           less.render(
-            css,
+            rawCss,
             {
               syncImport: true,
               filename: fileName,
@@ -122,10 +124,12 @@ export const getCssExports = ({
 
           const importers = [aliasImporter, sassTildeImporter];
 
-          const result = sass.compile(fileName, {
+          const result = sass.compileString(rawCss, {
             importers,
             loadPaths: [filePath, 'node_modules', ...(loadPaths ?? [])],
             sourceMap: true,
+            syntax: fileType === FileType.sass ? 'indented' : 'scss',
+            url: new URL(`file://${fileName}`),
             ...sassOptions,
           });
 
@@ -135,14 +139,14 @@ export const getCssExports = ({
         }
 
         case FileType.styl:
-          transformedCss = stylus(css, {
+          transformedCss = stylus(rawCss, {
             ...(rendererOptions.stylus ?? {}),
             filename: fileName,
           }).render();
           break;
 
         default:
-          transformedCss = css;
+          transformedCss = rawCss;
           break;
       }
     }

src/options.ts

@@ -20,6 +20,7 @@ export interface RendererOptions {
 }
 
 export interface Options {
+  additonalData?: string;
   allowUnknownClassnames?: boolean;
   classnameTransform?: ClassnameTransformOptions;
   customMatcher?: string;