feat: Support SASS

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
 

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',
   ],
 });

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"

demo/assets/_scss/global-style.scss

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

demo/assets/_scss/partials/_partial-global-style.scss

@@ -0,0 +1,5 @@
+header {
+  .global-configured-sass {
+    text-transform: uppercase;
+  }
+}

demo/assets/_scss/partials/_partial-style.scss

@@ -0,0 +1,5 @@
+header {
+  .imported-sass {
+    text-transform: uppercase;
+  }
+}

demo/assets/_scss/style.scss

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

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(

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'; // Example using @import
+
+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 {
+    text-transform: uppercase;
+  }
+}

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

@@ -0,0 +1,5 @@
+header {
+  .imported-sass {
+    text-transform: uppercase;
+  }
+}

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

@@ -0,0 +1,7 @@
+@use 'partials/partial-style'; // Example using @use
+
+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 />