nvh95 · nvh95 · Jul 2, 2022 · Jun 28, 2022 · Jun 28, 2022 · Jun 28, 2022
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,2 @@
+.env
+.env.*
diff --git a/demo/App.tsx b/demo/App.tsx
@@ -41,7 +41,7 @@ function App() {
             font-size: 24px;
             border-radius: 4px;
             &:hover {
-              color: white;
+              color: blue;
             }
           `}
         >

diff --git a/demo/__tests__/transform.test.tsx b/demo/__tests__/transform.test.tsx
@@ -7,7 +7,7 @@ describe('transform', () => {
     render(<App />);
     // TODO: To refactor this test. It frequently need to be updated.
     expect(document.body.outerHTML).toMatchInlineSnapshot(
-      `"<body><div><div class=\\"App\\"><header class=\\"App-header\\"><img src=\\"/logo.svg\\" class=\\"App-logo\\" alt=\\"logo\\"><img src=\\"/demo/assets/images/logo.svg\\" class=\\"logo2\\" alt=\\"logo2\\"><p>Hello Vite + React!</p><p class=\\"_scssModule_ujx1w_1\\">Styled by SCSS Modules</p><p class=\\"sc-bczRLJ dgihId\\">This text is styled by styled-components</p><p class=\\"global-css\\">This text is styled by global css which is not imported to App.tsx</p><p class=\\"_cssModule_1gc0y_1\\">This text is styled by CSS Modules</p><p class=\\"global-configured-sass\\">This text is styled by global configured SASS</p><p class=\\"imported-sass\\">This text is styled by imported SASS</p><p class=\\"bg-yellow-400 font-bold m-5 text-red-500\\">This text is styled by Tailwind CSS</p><button class=\\"css-s689uo-App\\">Hover to change color.</button><p class=\\"css-2m18qq\\">Styled by Emotion</p><p class=\\"c-gqdJwI\\">Styled by Stiches</p><p class=\\"load-path-sass\\">This text is styled by SASS from load paths</p><p class=\\"animate__animated animate__bounce\\">An animated element style using @use ~</p><div class=\\"animated fadeIn\\"><p>An animated element style using import ~</p><p>Watch me fade in!</p></div><p><button data-testid=\\"increase\\" type=\\"button\\">count is: <div data-testid=\\"count\\">0</div></button></p><p>Edit <code>App.tsx</code> and save to test HMR updates.</p><p><a class=\\"App-link\\" href=\\"https://reactjs.org\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Learn React</a> | <a class=\\"App-link\\" href=\\"https://vitejs.dev/guide/features.html\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Vite Docs</a></p></header></div></div></body>"`,
+      `"<body><div><div class=\\"App\\"><header class=\\"App-header\\"><img src=\\"/logo.svg\\" class=\\"App-logo\\" alt=\\"logo\\"><img src=\\"/demo/assets/images/logo.svg\\" class=\\"logo2\\" alt=\\"logo2\\"><p>Hello Vite + React!</p><p class=\\"_scssModule_ujx1w_1\\">Styled by SCSS Modules</p><p class=\\"sc-bczRLJ dgihId\\">This text is styled by styled-components</p><p class=\\"global-css\\">This text is styled by global css which is not imported to App.tsx</p><p class=\\"_cssModule_1gc0y_1\\">This text is styled by CSS Modules</p><p class=\\"global-configured-sass\\">This text is styled by global configured SASS</p><p class=\\"imported-sass\\">This text is styled by imported SASS</p><p class=\\"bg-yellow-400 font-bold m-5 text-red-500\\">This text is styled by Tailwind CSS</p><button class=\\"css-1b07vmx-App\\">Hover to change color.</button><p class=\\"css-2m18qq\\">Styled by Emotion</p><p class=\\"c-gqdJwI\\">Styled by Stiches</p><p class=\\"load-path-sass\\">This text is styled by SASS from load paths</p><p class=\\"animate__animated animate__bounce\\">An animated element style using @use ~</p><div class=\\"animated fadeIn\\"><p>An animated element style using import ~</p><p>Watch me fade in!</p></div><p><button data-testid=\\"increase\\" type=\\"button\\">count is: <div data-testid=\\"count\\">0</div></button></p><p>Edit <code>App.tsx</code> and save to test HMR updates.</p><p><a class=\\"App-link\\" href=\\"https://reactjs.org\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Learn React</a> | <a class=\\"App-link\\" href=\\"https://vitejs.dev/guide/features.html\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Vite Docs</a></p></header></div></div></body>"`,
     );
   });
 });
diff --git a/examples/create-react-app/.env b/examples/create-react-app/.env
@@ -1,5 +1,5 @@
 <!-- Use SASS_PATH causes CRA throw 1 warning, it looks like this is an issue of CRA
 Reference: https://github.com/facebook/create-react-app/issues/12329 -->
-
-SASS_PATH=src/assets/\_scss/loadPathsExample
+<!-- Warning: Do not add \ before _scss -->
+SASS_PATH=src/assets/_scss/loadPathsExample
 NODE_PATH=node_modules/
diff --git a/src/transform.ts b/src/transform.ts
@@ -240,25 +240,50 @@ function processSass(filename: string): string {
     sassLoadPathsConfig = [];
   }
 
-  const cssResult = sass.compile(filename, {
-    loadPaths: sassLoadPathsConfig,
-    importers: [
-      {
-        // An importer that redirects relative URLs starting with "~" to `node_modules`
-        // Reference: https://sass-lang.com/documentation/js-api/interfaces/FileImporter
-        findFileUrl(url: string) {
-          if (!url.startsWith('~')) return null;
-          return new URL(
-            // TODO: Search in node_modules by require.resolve (monorepo)
-            // E.g: input: ~animate-sass/animate
-            // output: file:/Users/yourname/oss/jest-preview/node_modules/animate-sass/animate
-            // => require.resolve('animate-sass') + animate
-            path.join(pathToFileURL('node_modules').href, url.substring(1)),
-          );
+  let cssResult;
+
+  // An importer that redirects relative URLs starting with "~" to `node_modules`
+  // Reference: https://sass-lang.com/documentation/js-api/interfaces/FileImporter
+  const tildeImporter = (url: string) => {
+    if (!url.startsWith('~')) return null;
+    return new URL(
+      // TODO: Search in node_modules by require.resolve (monorepo)
+      // E.g: input: ~animate-sass/animate
+      // output: file:/Users/yourname/oss/jest-preview/node_modules/animate-sass/animate
+      // => require.resolve('animate-sass') + animate
+      path.join(pathToFileURL('node_modules').href, url.substring(1)),
+    );
+  };
+
+  if (sass.compile) {
+    cssResult = sass.compile(filename, {
+      loadPaths: sassLoadPathsConfig,
+      importers: [
+        {
+          findFileUrl(url: string) {
+            return tildeImporter(url);
+          },
         },
-      },
-    ],
-  }).css;
+      ],
+    }).css;
+  }
+  // Because sass.compile is only introduced since sass version 1.45.0
+  // For older versions, we have to use the legacy API: renderSync
+  else if (sass.renderSync) {
+    cssResult = sass
+      .renderSync({
+        file: filename,
+        includePaths: sassLoadPathsConfig,
+        importer: [
+          function (url: string) {
+            return tildeImporter(url);
+          },
+        ],
+      })
+      .css.toString();
+  } else {
+    throw new Error('Cannot compile sass to css: No compile method is available.');
+  }
 
   return cssResult;
 }