diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..665da455
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,2 @@
+.env
+.env.*
diff --git a/demo/App.tsx b/demo/App.tsx
index c92986aa..27c3c5ec 100644
--- 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
index 77cb2018..92eca901 100644
--- a/demo/__tests__/transform.test.tsx
+++ b/demo/__tests__/transform.test.tsx
@@ -7,7 +7,7 @@ describe('transform', () => {
render();
// TODO: To refactor this test. It frequently need to be updated.
expect(document.body.outerHTML).toMatchInlineSnapshot(
- `""`,
+ `""`,
);
});
});
diff --git a/examples/create-react-app/.env b/examples/create-react-app/.env
index 0ba10db4..eac8b206 100644
--- a/examples/create-react-app/.env
+++ b/examples/create-react-app/.env
@@ -1,5 +1,5 @@
-
-SASS_PATH=src/assets/\_scss/loadPathsExample
+
+SASS_PATH=src/assets/_scss/loadPathsExample
NODE_PATH=node_modules/
diff --git a/src/transform.ts b/src/transform.ts
index c52981b4..0baa0dbb 100644
--- 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;
}
![\\"logo\\"](\\"/logo.svg\\"){kind=logo}
![\\"logo2\\"](\\"/demo/assets/images/logo.svg\\"){kind=logo}