feat: Support SASS

examples/vite-react/config/jest/setupTests.js

@@ -2,7 +2,7 @@ import '@testing-library/jest-dom/extend-expect';
 import { jestPreviewConfigure } from 'jest-preview';
 
 jestPreviewConfigure({
-  externalCss: ['src/index.css'],
+  externalCss: ['src/index.css', 'src/assets/_scss/global-style.scss'],
 });
 
 window.matchMedia = (query) => ({

examples/vite-react/jest.config.js

@@ -11,7 +11,7 @@ module.exports = {
   modulePaths: ['<rootDir>/src'],
   transform: {
     '^.+\\.(ts|js|tsx|jsx)$': '@swc/jest',
-    '^.+\\.css$': 'jest-preview/transforms/css',
+    '^.+\\.(css|scss|sass)$': 'jest-preview/transforms/css',
     '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)':
       'jest-preview/transforms/file',
   },

examples/vite-react/package.json

@@ -30,6 +30,7 @@
     "jest-watch-typeahead": "^1.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.6.0",
+    "sass": "^1.50.0",
     "typescript": "^4.5.4",
     "vite": "^2.8.0"
   }

examples/vite-react/src/App.tsx

@@ -6,6 +6,7 @@ import logo2 from './assets/images/logo.svg';
 import './App.css';
 import './assets/css/App.css';
 
+import './assets/_scss/style.scss';
 import styles from './style.module.css';
 
 function App() {
@@ -18,7 +19,10 @@ function App() {
         <p>Vite Example</p>
         <StyledText>This text is styled by styled-components</StyledText>
         <p className={styles.green}>This text is styled by CSS Modules</p>
-
+        <p className="global-configured-sass">
+          This text is styled by global configured SASS
+        </p>
+        <p className="imported-sass">This text is styled by imported SASS</p>
         <p>
           <button
             data-testid="increase"

examples/vite-react/src/assets/_scss/global-style.scss

@@ -0,0 +1,7 @@
+@import 'partials/partial-global-style';
+
+header {
+  .global-configured-sass {
+    color: yellow;
+  }
+}

examples/vite-react/src/assets/_scss/partials/_partial-global-style.scss

@@ -0,0 +1,5 @@
+header {
+  .global-configured-sass {
+    font-size: 40px;
+  }
+}

examples/vite-react/src/assets/_scss/partials/_partial-style.scss

@@ -0,0 +1,5 @@
+header {
+  .imported-sass {
+    font-size: 40px;
+  }
+}

examples/vite-react/src/assets/_scss/style.scss

@@ -0,0 +1,7 @@
+@import 'partials/partial-style';
+
+header {
+  .imported-sass {
+    color: pink;
+  }
+}

examples/vite-react/src/main.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-// TODO: Need an option for user to manually input css outside tested components
-import './index.css';
 import App from './App';
 
+import './index.css';
+import './assets/_scss/global-style.scss';
+
 ReactDOM.render(
   <React.StrictMode>
     <App />

package.json

@@ -75,6 +75,7 @@
     "prettier": "^2.6.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "sass": "^1.50.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.70.1",
     "rollup-plugin-terser": "^7.0.2",

src/configure.ts

@@ -1,17 +1,14 @@
 import path from 'path';
 import fs from 'fs';
-
-const CACHE_FOLDER = './node_modules/.cache/jest-preview-dom';
+import { CACHE_FOLDER } from './constants';
 
 interface JestPreviewConfigOptions {
-  externalCss?: string[];
+  externalCss: string[];
   publicFolder?: string;
 }
 
 export async function jestPreviewConfigure(
-  options: JestPreviewConfigOptions = {
-    externalCss: [],
-  },
+  options: JestPreviewConfigOptions = { externalCss: [] },
 ) {
   if (!fs.existsSync('./node_modules/.cache/jest-preview-dom')) {
     fs.mkdirSync('./node_modules/.cache/jest-preview-dom', {
@@ -21,13 +18,41 @@ export async function jestPreviewConfigure(
 
   options.externalCss?.forEach((cssFile) => {
     const basename = path.basename(cssFile);
+
     // Avoid name collision
-    // Add `global` to let `jest-preview` server that we want to cache those files
-    const destinationBasename = `cache-${basename}`;
-    const destinationFile = path.join(
-      './node_modules/.cache/jest-preview-dom',
-      destinationBasename,
-    );
+    // Example: src/common/styles.css => cache-src___common___styles.css
+    const delimiter = '___';
+    const destinationBasename = `cache-${basename.replace('/', delimiter)}`;
+    const destinationFile = path.join(CACHE_FOLDER, destinationBasename);
+
+    // Create cache folder if it doesn't exist
+    if (!fs.existsSync(CACHE_FOLDER)) {
+      fs.mkdirSync(CACHE_FOLDER, {
+        recursive: true,
+      });
+    }
+
+    // If sass file is included, we need to transform it to css
+    if (cssFile.endsWith('.scss') || cssFile.endsWith('.sass')) {
+      const { exec } = require('child_process');
+
+      const cssDestinationFile = destinationFile.replace(
+        /\.(scss|sass)$/,
+        '.css',
+      );
+
+      // Transform sass to css and save to cache folder
+      exec(
+        `./node_modules/.bin/sass ${cssFile} ${cssDestinationFile} --no-source-map`,
+        (err: any) => {
+          if (err) {
+            console.log(err);
+          }
+        },
+      );
+      return;
+    }
+
     // TODO: To move to load file directly instead of cloning them to `.cache`
     // Move together with transform
     // TODO: To cache those files. We cannot cache them by checking if files exists

src/constants.ts

@@ -0,0 +1 @@
+export const CACHE_FOLDER = './node_modules/.cache/jest-preview-dom';