From 186147d8ff782655a0a0ebdf62d13bbdc4eae69e Mon Sep 17 00:00:00 2001
From: Truong Nguyen <ntt261298@gmail.com>
Date: Sat, 16 Apr 2022 23:36:52 +0700
Subject: [PATCH 01/19] feat: (In Progress) Support SASS

- Todo: Support @use, @import for SASS
---
 examples/vite-react/config/jest/setupTests.js |  2 +-
 .../config/jest/setupTestsBeforeEnv.js        |  6 ++
 examples/vite-react/jest.config.js            |  3 +-
 examples/vite-react/package-lock.json         | 81 +++++++++++++++++++
 examples/vite-react/package.json              |  1 +
 examples/vite-react/src/App.tsx               |  6 +-
 examples/vite-react/src/assets/css/style.scss |  5 ++
 examples/vite-react/src/global-style.scss     |  5 ++
 examples/vite-react/src/main.tsx              |  1 +
 package-lock.json                             | 17 ++++
 package.json                                  |  1 +
 src/configure.ts                              | 48 +++++++++--
 src/constants.ts                              |  2 +
 src/transform.ts                              | 28 +++++++
 14 files changed, 198 insertions(+), 8 deletions(-)
 create mode 100644 examples/vite-react/config/jest/setupTestsBeforeEnv.js
 create mode 100644 examples/vite-react/src/assets/css/style.scss
 create mode 100644 examples/vite-react/src/global-style.scss
 create mode 100644 src/constants.ts

diff --git a/examples/vite-react/config/jest/setupTests.js b/examples/vite-react/config/jest/setupTests.js
index 5c6233a3..27aad66f 100644
--- a/examples/vite-react/config/jest/setupTests.js
+++ b/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/global-style.scss'],
 });
 
 window.matchMedia = (query) => ({
diff --git a/examples/vite-react/config/jest/setupTestsBeforeEnv.js b/examples/vite-react/config/jest/setupTestsBeforeEnv.js
new file mode 100644
index 00000000..650e87fd
--- /dev/null
+++ b/examples/vite-react/config/jest/setupTestsBeforeEnv.js
@@ -0,0 +1,6 @@
+import { jestPreviewConfigure } from 'jest-preview';
+
+jestPreviewConfigure({
+  externalCss: ['src/index.css', 'src/global-style.scss'],
+  sassLoadPaths: ['src'], // Root for @use, @import
+});
diff --git a/examples/vite-react/jest.config.js b/examples/vite-react/jest.config.js
index dd4ddfe3..5a23724f 100644
--- a/examples/vite-react/jest.config.js
+++ b/examples/vite-react/jest.config.js
@@ -6,12 +6,13 @@ module.exports = {
     '!src/mocks/**',
   ],
   coveragePathIgnorePatterns: [],
+  setupFiles: ['./config/jest/setupTestsBeforeEnv.js'],
   setupFilesAfterEnv: ['./config/jest/setupTests.js'],
   testEnvironment: 'jsdom',
   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',
   },
diff --git a/examples/vite-react/package-lock.json b/examples/vite-react/package-lock.json
index a8135d37..ce6ed1a1 100644
--- a/examples/vite-react/package-lock.json
+++ b/examples/vite-react/package-lock.json
@@ -1332,6 +1332,12 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1434,6 +1440,22 @@
       "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
       "dev": true
     },
+    "chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      }
+    },
     "ci-info": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
@@ -2125,6 +2147,15 @@
         "path-is-absolute": "^1.0.0"
       }
     },
+    "glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -2244,6 +2275,12 @@
         "safer-buffer": ">= 2.1.2 < 3"
       }
     },
+    "immutable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==",
+      "dev": true
+    },
     "import-local": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
@@ -2308,6 +2345,15 @@
         "has-bigints": "^1.0.1"
       }
     },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
     "is-boolean-object": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
@@ -2342,6 +2388,12 @@
         "has-tostringtag": "^1.0.0"
       }
     },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
+    },
     "is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -2354,6 +2406,15 @@
       "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
       "dev": true
     },
+    "is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
     "is-negative-zero": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
@@ -9128,6 +9189,15 @@
         "path-type": "^3.0.0"
       }
     },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
     "redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -9212,6 +9282,17 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass": {
+      "version": "1.50.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.50.0.tgz",
+      "integrity": "sha512-cLsD6MEZ5URXHStxApajEh7gW189kkjn4Rc8DQweMyF+o5HF5nfEz8QYLMlPsTOD88DknatTmBWkOcw5/LnJLQ==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "saxes": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
diff --git a/examples/vite-react/package.json b/examples/vite-react/package.json
index d205071b..69971af3 100644
--- a/examples/vite-react/package.json
+++ b/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"
   }
diff --git a/examples/vite-react/src/App.tsx b/examples/vite-react/src/App.tsx
index 5c417ffb..a4a5367e 100644
--- a/examples/vite-react/src/App.tsx
+++ b/examples/vite-react/src/App.tsx
@@ -7,6 +7,7 @@ import logo2 from './assets/images/logo.svg';
 import './App.css';
 import './assets/css/App.css';
 
+import './assets/css/style.scss';
 import styles from './style.module.css';
 
 function App() {
@@ -19,7 +20,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"
diff --git a/examples/vite-react/src/assets/css/style.scss b/examples/vite-react/src/assets/css/style.scss
new file mode 100644
index 00000000..8035aa38
--- /dev/null
+++ b/examples/vite-react/src/assets/css/style.scss
@@ -0,0 +1,5 @@
+header {
+  .imported-sass {
+    color: pink;
+  }
+}
diff --git a/examples/vite-react/src/global-style.scss b/examples/vite-react/src/global-style.scss
new file mode 100644
index 00000000..d4dab16b
--- /dev/null
+++ b/examples/vite-react/src/global-style.scss
@@ -0,0 +1,5 @@
+header {
+  .global-configured-sass {
+    color: yellow;
+  }
+}
diff --git a/examples/vite-react/src/main.tsx b/examples/vite-react/src/main.tsx
index c2efc0d5..ea874ad4 100644
--- a/examples/vite-react/src/main.tsx
+++ b/examples/vite-react/src/main.tsx
@@ -2,6 +2,7 @@ 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 './style.scss';
 import App from './App';
 
 ReactDOM.render(
diff --git a/package-lock.json b/package-lock.json
index 4733b2bc..38327d04 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3002,6 +3002,12 @@
       "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
       "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0="
     },
+    "immutable": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
+      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==",
+      "dev": true
+    },
     "import-local": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz",
@@ -5732,6 +5738,17 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass": {
+      "version": "1.50.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.50.0.tgz",
+      "integrity": "sha512-cLsD6MEZ5URXHStxApajEh7gW189kkjn4Rc8DQweMyF+o5HF5nfEz8QYLMlPsTOD88DknatTmBWkOcw5/LnJLQ==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "saxes": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
diff --git a/package.json b/package.json
index 7a3d55da..4d9650ad 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
     "prettier": "^2.6.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "sass": "^1.50.0",
     "styled-components": "^5.3.5",
     "typescript": "^4.6.3",
     "vite": "^2.9.1"
diff --git a/src/configure.ts b/src/configure.ts
index 716ad8f5..5687d41b 100644
--- a/src/configure.ts
+++ b/src/configure.ts
@@ -1,12 +1,14 @@
 import path from 'path';
 import fs from 'fs';
+import { CACHE_FOLDER, SASS_LOAD_PATHS_CONFIG } from './constants';
 
 interface JestPreviewConfigOptions {
   externalCss: string[];
+  sassLoadPaths: string[];
 }
 
 export function jestPreviewConfigure(
-  options: JestPreviewConfigOptions = { externalCss: [] },
+  options: JestPreviewConfigOptions = { externalCss: [], sassLoadPaths: [] },
 ) {
   if (!fs.existsSync('./node_modules/.cache/jest-preview-dom')) {
     fs.mkdirSync('./node_modules/.cache/jest-preview-dom', {
@@ -16,13 +18,49 @@ export 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,
-    );
+    const destinationFile = path.join(CACHE_FOLDER, destinationBasename);
+
+    // If sass file is passed, we need to transform it to css
+    if (cssFile.endsWith('.scss') || cssFile.endsWith('.sass')) {
+      const sass = require('sass');
+
+      // Create cache folder if it doesn't exist
+      if (!fs.existsSync(CACHE_FOLDER)) {
+        fs.mkdirSync(CACHE_FOLDER, {
+          recursive: true,
+        });
+      }
+
+      let sassLoadPaths: string[] = [];
+      // Save sassLoadPaths to cache, so we can use it in the transformer
+      if (options.sassLoadPaths) {
+        sassLoadPaths = options.sassLoadPaths.map(
+          (path) => `${process.cwd()}/${path}`,
+        );
+
+        fs.writeFileSync(
+          path.join(CACHE_FOLDER, SASS_LOAD_PATHS_CONFIG),
+          JSON.stringify(sassLoadPaths),
+        );
+      }
+
+      // Transform sass to css
+      const sassDestinationFile = destinationFile.replace(
+        /\.(scss|sass)$/,
+        '.css',
+      );
+      const sassFile = fs.readFileSync(cssFile, 'utf8');
+      const sassResult = sass.compileString(sassFile, {
+        loadPaths: sassLoadPaths,
+      });
+      fs.writeFileSync(sassDestinationFile, sassResult.css);
+      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
diff --git a/src/constants.ts b/src/constants.ts
new file mode 100644
index 00000000..2f1090db
--- /dev/null
+++ b/src/constants.ts
@@ -0,0 +1,2 @@
+export const CACHE_FOLDER = './node_modules/.cache/jest-preview-dom';
+export const SASS_LOAD_PATHS_CONFIG = 'cache-sass-load-paths.config';
diff --git a/src/transform.ts b/src/transform.ts
index ffefc2f6..bf59eefd 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -1,5 +1,7 @@
+import fs from 'fs';
 import path from 'path';
 import camelcase from 'camelcase';
+import { CACHE_FOLDER, SASS_LOAD_PATHS_CONFIG } from './constants';
 
 function getRelativeFilename(filename: string): string {
   return filename.split(process.cwd())[1];
@@ -46,6 +48,9 @@ export function processCss(src: string, filename: string): string {
   if (filename.endsWith('.module.css')) {
     return processCSSModules(src, filename);
   }
+  if (filename.endsWith('.scss') || filename.endsWith('.sass')) {
+    return processSass(src);
+  }
 
   const relativeFilename = getRelativeFilename(filename);
   // Transform to a javascript module that load a <link rel="stylesheet"> tag to the page.
@@ -105,3 +110,26 @@ document.body.appendChild(style);
 
 module.exports = exportedTokens`;
 }
+
+function processSass(src: string): string {
+  let sassLoadPaths: string;
+  try {
+    sassLoadPaths = fs
+      .readFileSync(path.join(CACHE_FOLDER, SASS_LOAD_PATHS_CONFIG), 'utf8')
+      .trim();
+  } catch {
+    // File doesn't exist
+    sassLoadPaths = JSON.stringify([]);
+  }
+
+  return `const sass = require('sass');
+const sassSrc = ${JSON.stringify(src)};
+
+const result = sass.compileString(sassSrc, {
+  loadPaths: ${sassLoadPaths},
+});
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(result.css));
+document.body.appendChild(style);
+module.exports = {}`;
+}

From e52d4a147343f89a4cb11724bd6ac46cf714d6d2 Mon Sep 17 00:00:00 2001
From: Truong Nguyen <ntt261298@gmail.com>
Date: Sat, 16 Apr 2022 23:40:31 +0700
Subject: [PATCH 02/19] refactor: Remove jest preview configure in setupTests

---
 examples/vite-react/config/jest/setupTests.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/examples/vite-react/config/jest/setupTests.js b/examples/vite-react/config/jest/setupTests.js
index 27aad66f..b7c69f7f 100644
--- a/examples/vite-react/config/jest/setupTests.js
+++ b/examples/vite-react/config/jest/setupTests.js
@@ -1,9 +1,4 @@
 import '@testing-library/jest-dom/extend-expect';
-import { jestPreviewConfigure } from 'jest-preview';
-
-jestPreviewConfigure({
-  externalCss: ['src/index.css', 'src/global-style.scss'],
-});
 
 window.matchMedia = (query) => ({
   matches: false,

From 6108ec887a7b3f4c9507046ad6063f0e12143c54 Mon Sep 17 00:00:00 2001
From: Truong Nguyen <ntt261298@gmail.com>
Date: Sun, 17 Apr 2022 00:16:43 +0700
Subject: [PATCH 03/19] refactor: Add partial scss style

---
 examples/vite-react/src/assets/css/_partial-style.scss | 5 +++++
 examples/vite-react/src/assets/css/style.scss          | 2 ++
 examples/vite-react/src/main.tsx                       | 1 -
 3 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 examples/vite-react/src/assets/css/_partial-style.scss

diff --git a/examples/vite-react/src/assets/css/_partial-style.scss b/examples/vite-react/src/assets/css/_partial-style.scss
new file mode 100644
index 00000000..5b269d87
--- /dev/null
+++ b/examples/vite-react/src/assets/css/_partial-style.scss
@@ -0,0 +1,5 @@
+header {
+  .imported-sass {
+    font-size: 40px;
+  }
+}
diff --git a/examples/vite-react/src/assets/css/style.scss b/examples/vite-react/src/assets/css/style.scss
index 8035aa38..1a2f270b 100644
--- a/examples/vite-react/src/assets/css/style.scss
+++ b/examples/vite-react/src/assets/css/style.scss
@@ -1,3 +1,5 @@
+@import './partial-style';
+
 header {
   .imported-sass {
     color: pink;
diff --git a/examples/vite-react/src/main.tsx b/examples/vite-react/src/main.tsx
index ea874ad4..c2efc0d5 100644
--- a/examples/vite-react/src/main.tsx
+++ b/examples/vite-react/src/main.tsx
@@ -2,7 +2,6 @@ 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 './style.scss';
 import App from './App';
 
 ReactDOM.render(

From f515658a0f287cdc1d95d0c076cd64f207924cd4 Mon Sep 17 00:00:00 2001
From: Truong Nguyen <ntt261298@gmail.com>
Date: Sun, 17 Apr 2022 08:57:13 +0700
Subject: [PATCH 04/19] fix: Move config jest-preview to setupFilesAfterEnv

---
 examples/vite-react/config/jest/setupTests.js          | 6 ++++++
 examples/vite-react/config/jest/setupTestsBeforeEnv.js | 6 ------
 examples/vite-react/jest.config.js                     | 1 -
 3 files changed, 6 insertions(+), 7 deletions(-)
 delete mode 100644 examples/vite-react/config/jest/setupTestsBeforeEnv.js

diff --git a/examples/vite-react/config/jest/setupTests.js b/examples/vite-react/config/jest/setupTests.js
index b7c69f7f..fe26a0d2 100644
--- a/examples/vite-react/config/jest/setupTests.js
+++ b/examples/vite-react/config/jest/setupTests.js
@@ -1,4 +1,10 @@
 import '@testing-library/jest-dom/extend-expect';
+import { jestPreviewConfigure } from 'jest-preview';
+
+jestPreviewConfigure({
+  externalCss: ['src/index.css', 'src/global-style.scss'],
+  sassLoadPaths: ['src/assets/_scss/'], // Root for @use, @import
+});
 
 window.matchMedia = (query) => ({
   matches: false,
diff --git a/examples/vite-react/config/jest/setupTestsBeforeEnv.js b/examples/vite-react/config/jest/setupTestsBeforeEnv.js
deleted file mode 100644
index 650e87fd..00000000
--- a/examples/vite-react/config/jest/setupTestsBeforeEnv.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { jestPreviewConfigure } from 'jest-preview';
-
-jestPreviewConfigure({
-  externalCss: ['src/index.css', 'src/global-style.scss'],
-  sassLoadPaths: ['src'], // Root for @use, @import
-});
diff --git a/examples/vite-react/jest.config.js b/examples/vite-react/jest.config.js
index 5a23724f..cd879837 100644
--- a/examples/vite-react/jest.config.js
+++ b/examples/vite-react/jest.config.js
@@ -6,7 +6,6 @@ module.exports = {
     '!src/mocks/**',
   ],
   coveragePathIgnorePatterns: [],
-  setupFiles: ['./config/jest/setupTestsBeforeEnv.js'],
   setupFilesAfterEnv: ['./config/jest/setupTests.js'],
   testEnvironment: 'jsdom',
   modulePaths: ['<rootDir>/src'],

From 76e7d3ff26905a0ffc4de1ee8b776ab9a601a0ea Mon Sep 17 00:00:00 2001
From: Truong Nguyen <ntt261298@gmail.com>
Date: Sun, 17 Apr 2022 09:19:10 +0700
Subject: [PATCH 05/19] fix: Use fs.existsSync to check if
 sassLoadPathsConfigPath exists

---
 src/transform.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/transform.ts b/src/transform.ts
index bf59eefd..a7563b6d 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -112,13 +112,17 @@ module.exports = exportedTokens`;
 }
 
 function processSass(src: string): string {
+  const sassLoadPathsConfigPath = path.join(
+    CACHE_FOLDER,
+    SASS_LOAD_PATHS_CONFIG,
+  );
   let sassLoadPaths: string;
-  try {
+
+  if (fs.existsSync(sassLoadPathsConfigPath)) {
     sassLoadPaths = fs
       .readFileSync(path.join(CACHE_FOLDER, SASS_LOAD_PATHS_CONFIG), 'utf8')
       .trim();
-  } catch {
-    // File doesn't exist
+  } else {
     sassLoadPaths = JSON.stringify([]);
   }
 

From c8b853d0778f29b93be5a385cdc58d813c0ef023 Mon Sep 17 00:00:00 2001
From: Truong Nguyen <ntt261298@gmail.com>
Date: Sun, 17 Apr 2022 09:50:49 +0700
Subject: [PATCH 06/19] fix: Move sass compile out of of run time phase

---
 src/transform.ts | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/transform.ts b/src/transform.ts
index a7563b6d..7ec49754 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -112,28 +112,29 @@ module.exports = exportedTokens`;
 }
 
 function processSass(src: string): string {
+  const sass = require('sass');
+
   const sassLoadPathsConfigPath = path.join(
     CACHE_FOLDER,
     SASS_LOAD_PATHS_CONFIG,
   );
-  let sassLoadPaths: string;
+  let sassLoadPaths: string[];
 
   if (fs.existsSync(sassLoadPathsConfigPath)) {
-    sassLoadPaths = fs
+    const sassLoadPathsString = fs
       .readFileSync(path.join(CACHE_FOLDER, SASS_LOAD_PATHS_CONFIG), 'utf8')
       .trim();
+    sassLoadPaths = JSON.parse(sassLoadPathsString);
   } else {
-    sassLoadPaths = JSON.stringify([]);
+    sassLoadPaths = [];
   }
 
-  return `const sass = require('sass');
-const sassSrc = ${JSON.stringify(src)};
+  const cssResult = sass.compileString(src, {
+    loadPaths: sassLoadPaths,
+  }).css;
 
-const result = sass.compileString(sassSrc, {
-  loadPaths: ${sassLoadPaths},
-});
-const style = document.createElement('style');
-style.appendChild(document.createTextNode(result.css));
+  return `const style = document.createElement('style');
+style.appendChild(document.createTextNode(${JSON.stringify(cssResult)}));
 document.body.appendChild(style);
 module.exports = {}`;
 }

From 290b8e4e9c2cb30e810a3416cea088ee83228293 Mon Sep 17 00:00:00 2001
From: Truong Nguyen <ntt261298@gmail.com>
Date: Sun, 17 Apr 2022 09:51:34 +0700
Subject: [PATCH 07/19] fix: Update code style for sass configure

---
 src/configure.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/configure.ts b/src/configure.ts
index 5687d41b..058bfa4b 100644
--- a/src/configure.ts
+++ b/src/configure.ts
@@ -48,16 +48,16 @@ export function jestPreviewConfigure(
         );
       }
 
+      const sassFile = fs.readFileSync(cssFile, 'utf8');
       // Transform sass to css
-      const sassDestinationFile = destinationFile.replace(
+      const cssResult = sass.compileString(sassFile, {
+        loadPaths: sassLoadPaths,
+      }).css;
+      const cssDestinationFile = destinationFile.replace(
         /\.(scss|sass)$/,
         '.css',
       );
-      const sassFile = fs.readFileSync(cssFile, 'utf8');
-      const sassResult = sass.compileString(sassFile, {
-        loadPaths: sassLoadPaths,
-      });
-      fs.writeFileSync(sassDestinationFile, sassResult.css);
+      fs.writeFileSync(cssDestinationFile, cssResult);
       return;
     }
 

From 0571ef6e8770bd000b62e9ee966831d7460b3f0f Mon Sep 17 00:00:00 2001
From: Truong Nguyen <ntt261298@gmail.com>
Date: Sun, 17 Apr 2022 09:52:40 +0700
Subject: [PATCH 08/19] feat: Add example for pre-configured sass file issue

---
 examples/vite-react/src/App.tsx                           | 2 +-
 .../assets/{css => _scss/partials}/_partial-style.scss    | 0
 examples/vite-react/src/assets/_scss/style.scss           | 8 ++++++++
 examples/vite-react/src/assets/css/style.scss             | 7 -------
 examples/vite-react/src/global-style.scss                 | 3 +++
 5 files changed, 12 insertions(+), 8 deletions(-)
 rename examples/vite-react/src/assets/{css => _scss/partials}/_partial-style.scss (100%)
 create mode 100644 examples/vite-react/src/assets/_scss/style.scss
 delete mode 100644 examples/vite-react/src/assets/css/style.scss

diff --git a/examples/vite-react/src/App.tsx b/examples/vite-react/src/App.tsx
index a4a5367e..83e1a139 100644
--- a/examples/vite-react/src/App.tsx
+++ b/examples/vite-react/src/App.tsx
@@ -7,7 +7,7 @@ import logo2 from './assets/images/logo.svg';
 import './App.css';
 import './assets/css/App.css';
 
-import './assets/css/style.scss';
+import './assets/_scss/style.scss';
 import styles from './style.module.css';
 
 function App() {
diff --git a/examples/vite-react/src/assets/css/_partial-style.scss b/examples/vite-react/src/assets/_scss/partials/_partial-style.scss
similarity index 100%
rename from examples/vite-react/src/assets/css/_partial-style.scss
rename to examples/vite-react/src/assets/_scss/partials/_partial-style.scss
diff --git a/examples/vite-react/src/assets/_scss/style.scss b/examples/vite-react/src/assets/_scss/style.scss
new file mode 100644
index 00000000..a7d0732e
--- /dev/null
+++ b/examples/vite-react/src/assets/_scss/style.scss
@@ -0,0 +1,8 @@
+// This partial import works fine through the transformer (we can uncomment to see the result - the font-size is 40px)
+// @import 'partials/partial-style';
+
+header {
+  .imported-sass {
+    color: pink;
+  }
+}
diff --git a/examples/vite-react/src/assets/css/style.scss b/examples/vite-react/src/assets/css/style.scss
deleted file mode 100644
index 1a2f270b..00000000
--- a/examples/vite-react/src/assets/css/style.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@import './partial-style';
-
-header {
-  .imported-sass {
-    color: pink;
-  }
-}
diff --git a/examples/vite-react/src/global-style.scss b/examples/vite-react/src/global-style.scss
index d4dab16b..fe9649fe 100644
--- a/examples/vite-react/src/global-style.scss
+++ b/examples/vite-react/src/global-style.scss
@@ -1,3 +1,6 @@
+// Todo: Should support this kind of import (It still works fine through the transformer)
+@import 'partials/partial-style';
+
 header {
   .global-configured-sass {
     color: yellow;

From 0ab3b65955944464686d47c7a49888e0ec22702d Mon Sep 17 00:00:00 2001
From: Hung Viet Nguyen <nguyenviethunghl00@gmail.com>
Date: Sun, 17 Apr 2022 12:56:26 +0700
Subject: [PATCH 09/19] chore: Add global scss style to main app

---
 examples/vite-react/config/jest/setupTests.js                | 2 +-
 examples/vite-react/src/{ => assets/_scss}/global-style.scss | 2 +-
 .../src/assets/_scss/partials/_partial-global-style.scss     | 5 +++++
 examples/vite-react/src/assets/_scss/style.scss              | 2 +-
 examples/vite-react/src/main.tsx                             | 5 +++--
 5 files changed, 11 insertions(+), 5 deletions(-)
 rename examples/vite-react/src/{ => assets/_scss}/global-style.scss (80%)
 create mode 100644 examples/vite-react/src/assets/_scss/partials/_partial-global-style.scss

diff --git a/examples/vite-react/config/jest/setupTests.js b/examples/vite-react/config/jest/setupTests.js
index fe26a0d2..2977bb8e 100644
--- a/examples/vite-react/config/jest/setupTests.js
+++ b/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', 'src/global-style.scss'],
+  externalCss: ['src/index.css', 'src/assets/_scss/global-style.scss'],
   sassLoadPaths: ['src/assets/_scss/'], // Root for @use, @import
 });
 
diff --git a/examples/vite-react/src/global-style.scss b/examples/vite-react/src/assets/_scss/global-style.scss
similarity index 80%
rename from examples/vite-react/src/global-style.scss
rename to examples/vite-react/src/assets/_scss/global-style.scss
index fe9649fe..222cfe9c 100644
--- a/examples/vite-react/src/global-style.scss
+++ b/examples/vite-react/src/assets/_scss/global-style.scss
@@ -1,5 +1,5 @@
 // Todo: Should support this kind of import (It still works fine through the transformer)
-@import 'partials/partial-style';
+// @import 'partials/partial-style';
 
 header {
   .global-configured-sass {
diff --git a/examples/vite-react/src/assets/_scss/partials/_partial-global-style.scss b/examples/vite-react/src/assets/_scss/partials/_partial-global-style.scss
new file mode 100644
index 00000000..d45ffab7
--- /dev/null
+++ b/examples/vite-react/src/assets/_scss/partials/_partial-global-style.scss
@@ -0,0 +1,5 @@
+header {
+  .global-configured-sass {
+    font-size: 40px;
+  }
+}
diff --git a/examples/vite-react/src/assets/_scss/style.scss b/examples/vite-react/src/assets/_scss/style.scss
index a7d0732e..779b6124 100644
--- a/examples/vite-react/src/assets/_scss/style.scss
+++ b/examples/vite-react/src/assets/_scss/style.scss
@@ -1,5 +1,5 @@
 // This partial import works fine through the transformer (we can uncomment to see the result - the font-size is 40px)
-// @import 'partials/partial-style';
+@import 'partials/partial-style';
 
 header {
   .imported-sass {
diff --git a/examples/vite-react/src/main.tsx b/examples/vite-react/src/main.tsx
index c2efc0d5..c0b7a230 100644
--- a/examples/vite-react/src/main.tsx
+++ b/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 />

From 54e34280205dc6c11dc6ec4d5818bf59874701fa Mon Sep 17 00:00:00 2001
From: Hung Viet Nguyen <nguyenviethunghl00@gmail.com>
Date: Mon, 18 Apr 2022 22:50:43 +0700
Subject: [PATCH 10/19] chore: Update partial name for global scss

---
 examples/vite-react/src/assets/_scss/global-style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/vite-react/src/assets/_scss/global-style.scss b/examples/vite-react/src/assets/_scss/global-style.scss
index 222cfe9c..70603416 100644
--- a/examples/vite-react/src/assets/_scss/global-style.scss
+++ b/examples/vite-react/src/assets/_scss/global-style.scss
@@ -1,5 +1,5 @@
 // Todo: Should support this kind of import (It still works fine through the transformer)
-// @import 'partials/partial-style';
+// @import 'partials/partial-global-style';
 
 header {
   .global-configured-sass {

From 99de46e348fe978115f968754b5b3c03f7bbdd5c Mon Sep 17 00:00:00 2001
From: Hung Viet Nguyen <nguyenviethunghl00@gmail.com>
Date: Mon, 18 Apr 2022 22:52:37 +0700
Subject: [PATCH 11/19] chore: use sass.compile instead of sass.compileString

---
 src/configure.ts | 12 +++++++++---
 src/transform.ts |  9 ++++-----
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/configure.ts b/src/configure.ts
index 058bfa4b..faeedc84 100644
--- a/src/configure.ts
+++ b/src/configure.ts
@@ -47,12 +47,18 @@ export function jestPreviewConfigure(
           JSON.stringify(sassLoadPaths),
         );
       }
-
       const sassFile = fs.readFileSync(cssFile, 'utf8');
       // Transform sass to css
-      const cssResult = sass.compileString(sassFile, {
-        loadPaths: sassLoadPaths,
+      const cssFileFullPath = path.join(process.cwd(), cssFile);
+      console.log('cssFileFullPath', cssFileFullPath);
+      // TODO: Jest hang there, output
+      // TypeError: Cannot read property '_location' of null
+      // at Window.get location [as location] (node_modules/jsdom/lib/jsdom/browser/Window.js:375:79)
+      // I suspect there is something different regarding environment in `configure.ts` and `transform.ts`
+      const cssResult = sass.compile(cssFileFullPath, {
+        // loadPaths: sassLoadPaths,
       }).css;
+      console.log('cssResult', cssResult);
       const cssDestinationFile = destinationFile.replace(
         /\.(scss|sass)$/,
         '.css',
diff --git a/src/transform.ts b/src/transform.ts
index 7ec49754..fb97e0e8 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -49,7 +49,7 @@ export function processCss(src: string, filename: string): string {
     return processCSSModules(src, filename);
   }
   if (filename.endsWith('.scss') || filename.endsWith('.sass')) {
-    return processSass(src);
+    return processSass(src, filename);
   }
 
   const relativeFilename = getRelativeFilename(filename);
@@ -111,7 +111,7 @@ document.body.appendChild(style);
 module.exports = exportedTokens`;
 }
 
-function processSass(src: string): string {
+function processSass(src: string, filename: string): string {
   const sass = require('sass');
 
   const sassLoadPathsConfigPath = path.join(
@@ -128,9 +128,8 @@ function processSass(src: string): string {
   } else {
     sassLoadPaths = [];
   }
-
-  const cssResult = sass.compileString(src, {
-    loadPaths: sassLoadPaths,
+  const cssResult = sass.compile(filename, {
+    // loadPaths: sassLoadPaths,
   }).css;
 
   return `const style = document.createElement('style');

From 32862e01dfa2d0bd70d749228f1a9fcd2f5be936 Mon Sep 17 00:00:00 2001
From: Truong Nguyen <ntt261298@gmail.com>
Date: Tue, 19 Apr 2022 01:32:54 +0700
Subject: [PATCH 12/19] feat: Use CLI to transform sass in configure.ts,
 compile to transform sass in transform.ts

---
 src/configure.ts | 63 ++++++++++++++++++------------------------------
 src/constants.ts |  1 -
 src/transform.ts | 28 +++++++--------------
 3 files changed, 33 insertions(+), 59 deletions(-)

diff --git a/src/configure.ts b/src/configure.ts
index dd09dbe0..d785c1a6 100644
--- a/src/configure.ts
+++ b/src/configure.ts
@@ -1,15 +1,14 @@
 import path from 'path';
 import fs from 'fs';
-import { CACHE_FOLDER, SASS_LOAD_PATHS_CONFIG } from './constants';
+import { CACHE_FOLDER } from './constants';
 
 interface JestPreviewConfigOptions {
   externalCss: string[];
-  sassLoadPaths: string[];
   publicFolder?: string;
 }
 
 export async function jestPreviewConfigure(
-  options: JestPreviewConfigOptions = { externalCss: [], sassLoadPaths: [] },
+  options: JestPreviewConfigOptions = { externalCss: [] },
 ) {
   if (!fs.existsSync('./node_modules/.cache/jest-preview-dom')) {
     fs.mkdirSync('./node_modules/.cache/jest-preview-dom', {
@@ -21,50 +20,36 @@ export async function jestPreviewConfigure(
     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}`;
+    // 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);
 
-    // If sass file is passed, we need to transform it to css
-    if (cssFile.endsWith('.scss') || cssFile.endsWith('.sass')) {
-      const sass = require('sass');
-
-      // Create cache folder if it doesn't exist
-      if (!fs.existsSync(CACHE_FOLDER)) {
-        fs.mkdirSync(CACHE_FOLDER, {
-          recursive: true,
-        });
-      }
+    // Create cache folder if it doesn't exist
+    if (!fs.existsSync(CACHE_FOLDER)) {
+      fs.mkdirSync(CACHE_FOLDER, {
+        recursive: true,
+      });
+    }
 
-      let sassLoadPaths: string[] = [];
-      // Save sassLoadPaths to cache, so we can use it in the transformer
-      if (options.sassLoadPaths) {
-        sassLoadPaths = options.sassLoadPaths.map(
-          (path) => `${process.cwd()}/${path}`,
-        );
+    // If sass file is included, we need to transform it to css
+    if (cssFile.endsWith('.scss') || cssFile.endsWith('.sass')) {
+      const { exec } = require('child_process');
 
-        fs.writeFileSync(
-          path.join(CACHE_FOLDER, SASS_LOAD_PATHS_CONFIG),
-          JSON.stringify(sassLoadPaths),
-        );
-      }
-      const sassFile = fs.readFileSync(cssFile, 'utf8');
-      // Transform sass to css
-      const cssFileFullPath = path.join(process.cwd(), cssFile);
-      console.log('cssFileFullPath', cssFileFullPath);
-      // TODO: Jest hang there, output
-      // TypeError: Cannot read property '_location' of null
-      // at Window.get location [as location] (node_modules/jsdom/lib/jsdom/browser/Window.js:375:79)
-      // I suspect there is something different regarding environment in `configure.ts` and `transform.ts`
-      const cssResult = sass.compile(cssFileFullPath, {
-        // loadPaths: sassLoadPaths,
-      }).css;
-      console.log('cssResult', cssResult);
       const cssDestinationFile = destinationFile.replace(
         /\.(scss|sass)$/,
         '.css',
       );
-      fs.writeFileSync(cssDestinationFile, cssResult);
+
+      // 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;
     }
 
diff --git a/src/constants.ts b/src/constants.ts
index 2f1090db..f1801c92 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,2 +1 @@
 export const CACHE_FOLDER = './node_modules/.cache/jest-preview-dom';
-export const SASS_LOAD_PATHS_CONFIG = 'cache-sass-load-paths.config';
diff --git a/src/transform.ts b/src/transform.ts
index dd90f408..06ca92dd 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -1,7 +1,6 @@
 import fs from 'fs';
 import path from 'path';
 import camelcase from 'camelcase';
-import { CACHE_FOLDER, SASS_LOAD_PATHS_CONFIG } from './constants';
 
 function getRelativeFilename(filename: string): string {
   return filename.split(process.cwd())[1];
@@ -121,25 +120,16 @@ module.exports = exportedTokens;`;
 }
 
 function processSass(src: string, filename: string): string {
-  const sass = require('sass');
-
-  const sassLoadPathsConfigPath = path.join(
-    CACHE_FOLDER,
-    SASS_LOAD_PATHS_CONFIG,
-  );
-  let sassLoadPaths: string[];
-
-  if (fs.existsSync(sassLoadPathsConfigPath)) {
-    const sassLoadPathsString = fs
-      .readFileSync(path.join(CACHE_FOLDER, SASS_LOAD_PATHS_CONFIG), 'utf8')
-      .trim();
-    sassLoadPaths = JSON.parse(sassLoadPathsString);
-  } else {
-    sassLoadPaths = [];
+  let sass;
+
+  try {
+    sass = require('sass');
+  } catch (err) {
+    console.log(err);
+    return `module.exports = ${JSON.stringify(src)};`;
   }
-  const cssResult = sass.compile(filename, {
-    // loadPaths: sassLoadPaths,
-  }).css;
+
+  const cssResult = sass.compile(filename).css;
 
   return `const style = document.createElement('style');
 style.appendChild(document.createTextNode(${JSON.stringify(cssResult)}));

From 0b2d56ec97623e528ead89fa5d00a8aa6fc9f50a Mon Sep 17 00:00:00 2001
From: Truong Nguyen <ntt261298@gmail.com>
Date: Tue, 19 Apr 2022 01:33:39 +0700
Subject: [PATCH 13/19] refactor: Update vite-react example to support global
 scss

---
 examples/vite-react/config/jest/setupTests.js          | 1 -
 examples/vite-react/src/assets/_scss/global-style.scss | 3 +--
 examples/vite-react/src/assets/_scss/style.scss        | 1 -
 3 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/examples/vite-react/config/jest/setupTests.js b/examples/vite-react/config/jest/setupTests.js
index 2977bb8e..1c57fe85 100644
--- a/examples/vite-react/config/jest/setupTests.js
+++ b/examples/vite-react/config/jest/setupTests.js
@@ -3,7 +3,6 @@ import { jestPreviewConfigure } from 'jest-preview';
 
 jestPreviewConfigure({
   externalCss: ['src/index.css', 'src/assets/_scss/global-style.scss'],
-  sassLoadPaths: ['src/assets/_scss/'], // Root for @use, @import
 });
 
 window.matchMedia = (query) => ({
diff --git a/examples/vite-react/src/assets/_scss/global-style.scss b/examples/vite-react/src/assets/_scss/global-style.scss
index 70603416..1e220b6e 100644
--- a/examples/vite-react/src/assets/_scss/global-style.scss
+++ b/examples/vite-react/src/assets/_scss/global-style.scss
@@ -1,5 +1,4 @@
-// Todo: Should support this kind of import (It still works fine through the transformer)
-// @import 'partials/partial-global-style';
+@import 'partials/partial-global-style';
 
 header {
   .global-configured-sass {
diff --git a/examples/vite-react/src/assets/_scss/style.scss b/examples/vite-react/src/assets/_scss/style.scss
index 779b6124..cbe2ceb0 100644
--- a/examples/vite-react/src/assets/_scss/style.scss
+++ b/examples/vite-react/src/assets/_scss/style.scss
@@ -1,4 +1,3 @@
-// This partial import works fine through the transformer (we can uncomment to see the result - the font-size is 40px)
 @import 'partials/partial-style';
 
 header {

From 0a4aae1a2702b6da00f71f2f8dda585947347836 Mon Sep 17 00:00:00 2001
From: Hung Viet Nguyen <nguyenviethunghl00@gmail.com>
Date: Tue, 19 Apr 2022 21:47:53 +0700
Subject: [PATCH 14/19] docs: Update docs for sass

---
 README.md | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 1bfc9b2a..685a70ab 100644
--- a/README.md
+++ b/README.md
@@ -42,7 +42,7 @@ When writing tests using Jest, we usually debug by reading the HTML code. Someti
   - ✅ [Styled-components](https://styled-components.com/)
   - ✅ [External CSS](#4-optional-configure-external-css)
   - ✅ [CSS Modules](https://github.com/css-modules/css-modules)
-  - 🚧 [Sass](https://sass-lang.com/)
+  - ✅ [Sass](https://sass-lang.com/)
 - 🌄 Support viewing images.
 
 ## How to use `jest-preview` in 2 lines of code
@@ -77,13 +77,15 @@ pnpm install --dev jest-preview
 
 ### 2. Configure jest's transform to transform CSS and files
 
-`jest-preview` comes with pre-configured transformations to intercept CSS and files. This is a recommended way to configure. However, you can configure it yourself using exported transform functions as well. See [Advanced configurations](#advanced-configurations) for more.
+`jest-preview` comes with pre-configured transformations to handle CSS and files. This is a recommended way to configure. However, you can configure it yourself using exported transform functions as well. See [Advanced configurations](#advanced-configurations) for more.
+
+If you use [Sass](https://sass-lang.com/) in your project, make sure [sass](https://www.npmjs.com/package/sass) is already installed. Note that [Node Sass](https://www.npmjs.com/package/node-sass) and [LibSass](https://sass-lang.com/libsass) are [not supported](https://sass-lang.com/blog/libsass-is-deprecated).
 
 Update `jest.config.js`:
 
 ```js
 transform: {
-  "^.+\\.css$": "jest-preview/transforms/css",
+  "^.+\\.(css|scss|sass)$": "jest-preview/transforms/css",
   "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "jest-preview/transforms/file",
 }
 ```
@@ -123,7 +125,8 @@ import { jestPreviewConfigure } from 'jest-preview';
 jestPreviewConfigure({
   externalCss: [
     'demo/global.css',
-    'node_modules/@your-design-system/css/dist/index.min.css',
+    'demo/global.scss', // Sass
+    'node_modules/@your-design-system/css/dist/index.min.css', // css from node_modules
     'node_modules/bootstrap/dist/css/bootstrap.min.css',
   ],
 });

From e7668b5ca8041764fea2cc9e698ab7a68cd199b1 Mon Sep 17 00:00:00 2001
From: Truong Nguyen <ntt261298@gmail.com>
Date: Tue, 19 Apr 2022 13:30:03 +0700
Subject: [PATCH 15/19] fix: Correct css cache filenames

---
 src/configure.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/configure.ts b/src/configure.ts
index d785c1a6..8ac60915 100644
--- a/src/configure.ts
+++ b/src/configure.ts
@@ -1,5 +1,7 @@
 import path from 'path';
 import fs from 'fs';
+import { exec } from 'child_process';
+
 import { CACHE_FOLDER } from './constants';
 
 interface JestPreviewConfigOptions {
@@ -17,12 +19,10 @@ export async function jestPreviewConfigure(
   }
 
   options.externalCss?.forEach((cssFile) => {
-    const basename = path.basename(cssFile);
-
     // Avoid name collision
     // Example: src/common/styles.css => cache-src___common___styles.css
     const delimiter = '___';
-    const destinationBasename = `cache-${basename.replace('/', delimiter)}`;
+    const destinationBasename = `cache-${cssFile.replace(/\//g, delimiter)}`;
     const destinationFile = path.join(CACHE_FOLDER, destinationBasename);
 
     // Create cache folder if it doesn't exist
@@ -34,8 +34,6 @@ export async function jestPreviewConfigure(
 
     // 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',

From 47618993cd513c08111a00b782fb97a1af1160c0 Mon Sep 17 00:00:00 2001
From: Truong Nguyen <ntt261298@gmail.com>
Date: Tue, 19 Apr 2022 13:30:30 +0700
Subject: [PATCH 16/19] refactor: Use filename as the fallback for scss
 transformer

---
 src/transform.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/transform.ts b/src/transform.ts
index 06ca92dd..11021fa2 100644
--- a/src/transform.ts
+++ b/src/transform.ts
@@ -126,7 +126,7 @@ function processSass(src: string, filename: string): string {
     sass = require('sass');
   } catch (err) {
     console.log(err);
-    return `module.exports = ${JSON.stringify(src)};`;
+    return `module.exports = ${JSON.stringify(filename)};`;
   }
 
   const cssResult = sass.compile(filename).css;

From baab8a5a15b1511c866511d75c296bf06aac1424 Mon Sep 17 00:00:00 2001
From: Truong Nguyen <ntt261298@gmail.com>
Date: Tue, 19 Apr 2022 22:02:14 +0700
Subject: [PATCH 17/19] fix: Add createCacheFolderIfNeeded util, add comment to
 clarify exec function

---
 src/configure.ts | 18 +++++++-----------
 src/utils.ts     | 11 +++++++++++
 2 files changed, 18 insertions(+), 11 deletions(-)
 create mode 100644 src/utils.ts

diff --git a/src/configure.ts b/src/configure.ts
index 8ac60915..7692c5db 100644
--- a/src/configure.ts
+++ b/src/configure.ts
@@ -3,6 +3,7 @@ import fs from 'fs';
 import { exec } from 'child_process';
 
 import { CACHE_FOLDER } from './constants';
+import { createCacheFolderIfNeeded } from './utils';
 
 interface JestPreviewConfigOptions {
   externalCss: string[];
@@ -25,12 +26,7 @@ export async function jestPreviewConfigure(
     const destinationBasename = `cache-${cssFile.replace(/\//g, 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,
-      });
-    }
+    createCacheFolderIfNeeded();
 
     // If sass file is included, we need to transform it to css
     if (cssFile.endsWith('.scss') || cssFile.endsWith('.sass')) {
@@ -40,6 +36,10 @@ export async function jestPreviewConfigure(
       );
 
       // Transform sass to css and save to cache folder
+      // We use exec instead of sass.compile because running sass.compile in jsdom environment cause unexpected behavior
+      // What we encountered is that filename is automatically added `http://localhost` as the prefix
+      // Example: style.scss => http://localhost/style.scss
+      // As a result, sass.compile cannot find the file
       exec(
         `./node_modules/.bin/sass ${cssFile} ${cssDestinationFile} --no-source-map`,
         (err: any) => {
@@ -66,11 +66,7 @@ export async function jestPreviewConfigure(
   });
 
   if (options.publicFolder) {
-    if (!fs.existsSync(CACHE_FOLDER)) {
-      fs.mkdirSync(CACHE_FOLDER, {
-        recursive: true,
-      });
-    }
+    createCacheFolderIfNeeded();
     fs.writeFileSync(
       path.join(CACHE_FOLDER, 'cache-public.config'),
       options.publicFolder,
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 00000000..7f5e0637
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,11 @@
+import fs from 'fs';
+import { CACHE_FOLDER } from './constants';
+
+// Create cache folder if it doesn't exist
+export function createCacheFolderIfNeeded() {
+  if (!fs.existsSync(CACHE_FOLDER)) {
+    fs.mkdirSync(CACHE_FOLDER, {
+      recursive: true,
+    });
+  }
+}

From 1d4892cd1a2090f664e850084b6acdef57ce1e06 Mon Sep 17 00:00:00 2001
From: Truong Nguyen <ntt261298@gmail.com>
Date: Tue, 19 Apr 2022 22:02:53 +0700
Subject: [PATCH 18/19] refactor: Update demo, vite example

---
 demo/App.tsx                                               | 5 +++++
 demo/assets/_scss/global-style.scss                        | 7 +++++++
 demo/assets/_scss/partials/_partial-global-style.scss      | 5 +++++
 demo/assets/_scss/partials/_partial-style.scss             | 5 +++++
 demo/assets/_scss/style.scss                               | 7 +++++++
 demo/main.tsx                                              | 1 +
 examples/vite-react/src/assets/_scss/global-style.scss     | 2 +-
 .../src/assets/_scss/partials/_partial-global-style.scss   | 2 +-
 .../src/assets/_scss/partials/_partial-style.scss          | 2 +-
 examples/vite-react/src/assets/_scss/style.scss            | 2 +-
 10 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 demo/assets/_scss/global-style.scss
 create mode 100644 demo/assets/_scss/partials/_partial-global-style.scss
 create mode 100644 demo/assets/_scss/partials/_partial-style.scss
 create mode 100644 demo/assets/_scss/style.scss

diff --git a/demo/App.tsx b/demo/App.tsx
index 12221057..e88e178c 100644
--- a/demo/App.tsx
+++ b/demo/App.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import logo2 from './assets/images/logo.svg';
 import './App.css';
 import './assets/css/App.css';
+import './assets/_scss/style.scss';
 import { cssModule } from './style.module.css';
 
 function App() {
@@ -19,6 +20,10 @@ function App() {
           This text is styled by global css which is not imported to App.tsx
         </p>
         <p className={cssModule}>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"
diff --git a/demo/assets/_scss/global-style.scss b/demo/assets/_scss/global-style.scss
new file mode 100644
index 00000000..ca28b4cd
--- /dev/null
+++ b/demo/assets/_scss/global-style.scss
@@ -0,0 +1,7 @@
+@import 'partials/partial-global-style'; // Example using @import
+
+header {
+  .global-configured-sass {
+    color: yellow;
+  }
+}
diff --git a/demo/assets/_scss/partials/_partial-global-style.scss b/demo/assets/_scss/partials/_partial-global-style.scss
new file mode 100644
index 00000000..294861fc
--- /dev/null
+++ b/demo/assets/_scss/partials/_partial-global-style.scss
@@ -0,0 +1,5 @@
+header {
+  .global-configured-sass {
+    text-transform: uppercase;
+  }
+}
diff --git a/demo/assets/_scss/partials/_partial-style.scss b/demo/assets/_scss/partials/_partial-style.scss
new file mode 100644
index 00000000..ae22fed5
--- /dev/null
+++ b/demo/assets/_scss/partials/_partial-style.scss
@@ -0,0 +1,5 @@
+header {
+  .imported-sass {
+    text-transform: uppercase;
+  }
+}
diff --git a/demo/assets/_scss/style.scss b/demo/assets/_scss/style.scss
new file mode 100644
index 00000000..7aec78df
--- /dev/null
+++ b/demo/assets/_scss/style.scss
@@ -0,0 +1,7 @@
+@use 'partials/partial-style'; // Example using @use
+
+header {
+  .imported-sass {
+    color: pink;
+  }
+}
diff --git a/demo/main.tsx b/demo/main.tsx
index d7b6ac09..fecaa579 100644
--- a/demo/main.tsx
+++ b/demo/main.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import './global.css';
+import './assets/_scss/global-style.scss';
 import App from './App';
 
 ReactDOM.render(
diff --git a/examples/vite-react/src/assets/_scss/global-style.scss b/examples/vite-react/src/assets/_scss/global-style.scss
index 1e220b6e..ca28b4cd 100644
--- a/examples/vite-react/src/assets/_scss/global-style.scss
+++ b/examples/vite-react/src/assets/_scss/global-style.scss
@@ -1,4 +1,4 @@
-@import 'partials/partial-global-style';
+@import 'partials/partial-global-style'; // Example using @import
 
 header {
   .global-configured-sass {
diff --git a/examples/vite-react/src/assets/_scss/partials/_partial-global-style.scss b/examples/vite-react/src/assets/_scss/partials/_partial-global-style.scss
index d45ffab7..294861fc 100644
--- a/examples/vite-react/src/assets/_scss/partials/_partial-global-style.scss
+++ b/examples/vite-react/src/assets/_scss/partials/_partial-global-style.scss
@@ -1,5 +1,5 @@
 header {
   .global-configured-sass {
-    font-size: 40px;
+    text-transform: uppercase;
   }
 }
diff --git a/examples/vite-react/src/assets/_scss/partials/_partial-style.scss b/examples/vite-react/src/assets/_scss/partials/_partial-style.scss
index 5b269d87..ae22fed5 100644
--- a/examples/vite-react/src/assets/_scss/partials/_partial-style.scss
+++ b/examples/vite-react/src/assets/_scss/partials/_partial-style.scss
@@ -1,5 +1,5 @@
 header {
   .imported-sass {
-    font-size: 40px;
+    text-transform: uppercase;
   }
 }
diff --git a/examples/vite-react/src/assets/_scss/style.scss b/examples/vite-react/src/assets/_scss/style.scss
index cbe2ceb0..7aec78df 100644
--- a/examples/vite-react/src/assets/_scss/style.scss
+++ b/examples/vite-react/src/assets/_scss/style.scss
@@ -1,4 +1,4 @@
-@import 'partials/partial-style';
+@use 'partials/partial-style'; // Example using @use
 
 header {
   .imported-sass {

From 9d44c67bc0ea5d9cc9a8ee1037bfcfda186d040f Mon Sep 17 00:00:00 2001
From: Hung Viet Nguyen <nguyenviethunghl00@gmail.com>
Date: Tue, 19 Apr 2022 22:38:26 +0700
Subject: [PATCH 19/19] chore: release 0.1.5-alpha.0

---
 CHANGELOG.md      | 6 ++++++
 package-lock.json | 2 +-
 package.json      | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b788e646..d836dae4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+# 0.1.5
+
+- Support non-english characters and responsive design.
+- Support Sass.
+
 # 0.1.4
 
 ## Fixes
@@ -20,6 +25,7 @@
 ## Chores
 
 - Export `debug` as named also.
+- Handle CSS Modules asynchronously.
 
 # 0.1.2
 
diff --git a/package-lock.json b/package-lock.json
index 63d1c556..ea69475f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "jest-preview",
-  "version": "0.1.4",
+  "version": "0.1.5-alpha.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index c8269f32..5ee79522 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jest-preview",
-  "version": "0.1.4",
+  "version": "0.1.5-alpha.0",
   "description": "Preview your HTML code while using Jest",
   "keywords": [
     "testing",