Add support for configuring Shared Sass Resources for using global mixins, variables, etc.

demo/App.tsx

@@ -38,6 +38,7 @@ function App() {
           This text is styled by global configured SASS
         </p>
         <p className="imported-sass">This text is styled by imported SASS</p>
+        <p className="imported-sass-shared-var">This text is styled by imported SASS using a shared mixin and variable</p>
         <p className="bg-yellow-400 font-bold m-5 text-red-500">
           This text is styled by Tailwind CSS
         </p>

demo/assets/_scss/sharedSassResources/color-vars.scss

@@ -0,0 +1 @@
+$limeGreen: #32cd32;

demo/assets/_scss/sharedSassResources/mixins.scss

@@ -0,0 +1,5 @@
+@mixin desktop {
+  @media only screen and (min-width: 900px) {
+    @content;
+  }
+}

demo/assets/_scss/style.scss

@@ -8,4 +8,12 @@ header {
   .imported-sass {
     color: pink;
   }
+
+  .imported-sass-shared-var {
+    color: purple;
+
+    @include desktop {
+      color: $limeGreen;
+    }
+  }
 }

demo/setupTests.js

@@ -7,6 +7,10 @@ jestPreviewConfigure({
   publicFolder: 'demo/public',
   autoPreview: true,
   sassLoadPaths: ['demo/assets/_scss/loadPathsExample'],
+  sharedSassResources: [
+    'demo/assets/_scss/sharedSassResources/color-vars.scss',
+    'demo/assets/_scss/sharedSassResources/mixins.scss',
+  ],
 });
 
 window.matchMedia = (query) => ({

src/configure.ts

@@ -1,7 +1,7 @@
 import path from 'path';
 import fs from 'fs';
 import chalk from 'chalk';
-import { CACHE_FOLDER, SASS_LOAD_PATHS_CONFIG } from './constants';
+import { CACHE_FOLDER, SASS_LOAD_PATHS_CONFIG, SASS_SHARED_RESOURCES_CONCAT } from './constants';
 import { createCacheFolderIfNeeded } from './utils';
 import { debug } from './preview';
 
@@ -13,6 +13,7 @@ interface JestPreviewConfigOptions {
   autoPreview?: boolean;
   publicFolder?: string;
   sassLoadPaths?: string[];
+  sharedSassResources?: string[];
 }
 
 export function jestPreviewConfigure(
@@ -21,6 +22,7 @@ export function jestPreviewConfigure(
     autoPreview = false,
     publicFolder,
     sassLoadPaths,
+    sharedSassResources,
   }: JestPreviewConfigOptions = {
     autoPreview: false,
     sassLoadPaths: [],
@@ -72,6 +74,24 @@ export function jestPreviewConfigure(
       },
     );
   }
+
+  if (sharedSassResources && sharedSassResources.length > 0) {
+    createCacheFolderIfNeeded();
+
+    const resourceFileContents = sharedSassResources.map((sassResourceFile) => {
+      const filenameComment = `// ${sassResourceFile}`;
+      const fileContents = fs.readFileSync(sassResourceFile, "utf-8");
+
+      return `${filenameComment}\n${fileContents}`;
+    });
+
+    const resourceFileContentsConcat = resourceFileContents.join('\n\n');
+
+    fs.writeFileSync(
+      path.join(CACHE_FOLDER, SASS_SHARED_RESOURCES_CONCAT),
+      resourceFileContentsConcat,
+    );
+  }
 }
 
 // Omit only, skip, todo, concurrent, each. Couldn't use Omit. Just redeclare for simplicity

src/constants.ts

@@ -1,2 +1,4 @@
-export const CACHE_FOLDER = './node_modules/.cache/jest-preview';
+export const CACHE_SUB_FOLDER = '.cache/jest-preview';
+export const CACHE_FOLDER = `./node_modules/${CACHE_SUB_FOLDER}`;
 export const SASS_LOAD_PATHS_CONFIG = 'cache-sass-load-paths.config';
+export const SASS_SHARED_RESOURCES_CONCAT = '_sass-resources-concat.scss';

src/transform.ts

@@ -6,7 +6,7 @@ import { pathToFileURL } from 'url';
 import camelcase from 'camelcase';
 import slash from 'slash';
 import { transform } from '@svgr/core';
-import { CACHE_FOLDER, SASS_LOAD_PATHS_CONFIG } from './constants';
+import { CACHE_FOLDER, CACHE_SUB_FOLDER, SASS_LOAD_PATHS_CONFIG, SASS_SHARED_RESOURCES_CONCAT } from './constants';
 import { createCacheFolderIfNeeded } from './utils';
 
 // https://github.com/vitejs/vite/blob/c29613013ca1c6d9c77b97e2253ed1f07e40a544/packages/vite/src/node/plugins/css.ts#L97-L98
@@ -372,6 +372,10 @@ module.exports = ${output.cssModulesExportedTokens || '{}'}`,
   };
 }
 
+type BuildCssOptions = {
+  prependUseShared: boolean;
+};
+
 function processSass(filename: string): string {
   let sass;
 
@@ -397,6 +401,20 @@ function processSass(filename: string): string {
     sassLoadPathsConfig = [];
   }
 
+  // Workaround for ?bug? with sass.compileString that the location of the source file is not automatically included in load paths
+  sassLoadPathsConfig.push(path.parse(filename).dir);
+
+  const sharedSassResourcesPath = path.join(CACHE_FOLDER, SASS_SHARED_RESOURCES_CONCAT);
+  const buildOptions: BuildCssOptions = { prependUseShared: false};
+
+  if (fs.existsSync(sharedSassResourcesPath)) {
+    buildOptions.prependUseShared = true;
+  }
+
+  return buildCssResult(sass, sassLoadPathsConfig, filename, buildOptions);
+}
+
+function buildCssResult(sass: any, sassLoadPathsConfig: string[], filename: string, options: BuildCssOptions): string {
   let cssResult;
 
   // An importer that redirects relative URLs starting with "~" to `node_modules`
@@ -412,17 +430,32 @@ function processSass(filename: string): string {
     );
   };
 
-  if (sass.compile) {
-    cssResult = sass.compile(filename, {
-      loadPaths: sassLoadPathsConfig,
-      importers: [
-        {
-          findFileUrl(url: string) {
-            return tildeImporter(url);
-          },
+  if (options.prependUseShared && !sass.compileString) {
+    console.warn("WARNING: Config specifies sharedSassResources, but your version of Sass doesn't support it - consider updating to v1.45.0 or higher.")
+  }
+
+  const compileOptions = {
+    loadPaths: sassLoadPathsConfig,
+    importers: [
+      {
+        findFileUrl(url: string) {
+          return tildeImporter(url);
         },
-      ],
-    }).css;
+      },
+    ],
+  }
+
+  if (options.prependUseShared && sass.compileString) {
+    // Transform the filename for use in "use" statement
+    const sharedResourcesFilenameForUse = SASS_SHARED_RESOURCES_CONCAT.replace(/^_|\.scss$/g, '');
+    // Prepend a "use" statement so shared sass resources are accessible from all source files
+    const useSharedStatement = `@use '~${CACHE_SUB_FOLDER}/${sharedResourcesFilenameForUse}' as *;`;
+    const sassContent = fs.readFileSync(filename, 'utf8');
+    const sassPrefixedWithSharedResources = `${useSharedStatement}\n\n${sassContent}`;
+
+    cssResult = sass.compileString(sassPrefixedWithSharedResources, compileOptions).css;
+  } else if (sass.compile) {
+    cssResult = sass.compile(filename, compileOptions).css;
   }
   // Because sass.compile is only introduced since sass version 1.45.0
   // For older versions, we have to use the legacy API: renderSync

website/docs/api/jestPreviewConfigure.md

@@ -59,3 +59,9 @@ Default: `false`
 Automatically preview the UI in the external browser when the test fails. You don't need to invoke `preview.debug()` by yourself anymore.
 
 Set to `false` if you experience any error or just want to opt out.
+
+## sharedSassResources: string[]
+
+Default: `undefined`
+
+Optional list of paths to SASS files that define shared resources (e.g. variables, mixins, etc). The paths are relative to the root of the project. Requires SASS v1.45.0 or higher.