Merge pull request #101 from nvh95/sass-enhancement

Sass enhancement
nvh95 · May 29, 2022 · b55fe71 · b55fe71
2 parents ca4066d + 5aeae73
commit b55fe71
Show file tree

Hide file tree

Showing 32 changed files with 258 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 0.2.4
+
+## Fixes
+
+- Sass enhancement
+
 # 0.2.3
 
 ## Fixes

diff --git a/config/jest/setupTests.js b/config/jest/setupTests.js
@@ -5,6 +5,7 @@ jestPreviewConfigure({
   externalCss: ['demo/global.css', 'demo/assets/_scss/global-style.scss'],
   publicFolder: 'demo/public',
   autoPreview: true,
+  sassLoadPaths: ['demo/assets/_scss/loadPathsExample'],
 });
 
 window.matchMedia = (query) => ({

diff --git a/demo/App.tsx b/demo/App.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { css } from '@emotion/react';
 import emotionStyled from '@emotion/styled';
 import { styled as stichesStyled } from '@stitches/react';
+import '~animate.css/animate.css';
 
 import logo2 from './assets/images/logo.svg';
 import './App.css';
@@ -46,6 +47,16 @@ function App() {
         {/* Reference: https://developer.chrome.com/blog/css-in-js/ */}
         {/* https://wicg.github.io/construct-stylesheets/ */}
         <StichesP>Styled by Stiches</StichesP>
+        <p className="load-path-sass">
+          This text is styled by SASS from load paths
+        </p>
+        <p className="animate__animated animate__bounce">
+          An animated element style using @use ~
+        </p>
+        <div className="animated fadeIn">
+          <p>An animated element style using import ~</p>
+          <p>Watch me fade in!</p>
+        </div>
         <p>
           <button
             data-testid="increase"

diff --git a/demo/__tests__/transform.test.tsx b/demo/__tests__/transform.test.tsx
@@ -6,7 +6,7 @@ describe('transform', () => {
   it('should generate snapshots correctly in different OS', () => {
     render(<App />);
     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=\\"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_16r0j_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><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><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=\\"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_16r0j_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><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>"`,
     );
   });
 });
diff --git a/demo/assets/_scss/loadPathsExample/load-path.scss b/demo/assets/_scss/loadPathsExample/load-path.scss
@@ -0,0 +1,5 @@
+header {
+  .load-path-sass {
+    color: red;
+  }
+}
diff --git a/demo/assets/_scss/style.scss b/demo/assets/_scss/style.scss
@@ -1,4 +1,8 @@
 @use 'partials/partial-style'; // Example using @use
+@use 'load-path'; // Example of loadPath config
+
+$use-fadeIn: true;
+@import '~animate-sass/animate'; // Example of import ~
 
 header {
   .imported-sass {

diff --git a/examples/create-react-app/.env b/examples/create-react-app/.env
@@ -0,0 +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
+NODE_PATH=node_modules/
diff --git a/examples/create-react-app/package.json b/examples/create-react-app/package.json
@@ -45,7 +45,9 @@
     ]
   },
   "devDependencies": {
+    "animate-sass": "^0.8.2",
     "jest-preview": "file:../..",
-    "npm-run-all": "^4.1.5"
+    "npm-run-all": "^4.1.5",
+    "sass": "^1.50.0"
   }
 }
diff --git a/examples/create-react-app/src/App.tsx b/examples/create-react-app/src/App.tsx
@@ -6,6 +6,7 @@ import styles from './style.module.css';
 
 import './App.css';
 import './assets/css/App.css';
+import './assets/_scss/style.scss';
 
 function App() {
   const [count, setCount] = useState(0);
@@ -17,6 +18,17 @@ function App() {
         <img src={logo2} className="logo2" alt="logo2" />
         <p>Create React App example</p>
         <p className={styles.textOrange}>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 className="load-path-sass">
+          This text is styled by SASS from load paths
+        </p>
+        <div className="animated fadeIn">
+          <p>An animated element style using @import ~</p>
+          <p>Watch me fade in!</p>
+        </div>
         <button
           data-testid="increase"
           type="button"

diff --git a/examples/create-react-app/src/__tests__/transform.test.tsx b/examples/create-react-app/src/__tests__/transform.test.tsx
@@ -7,7 +7,7 @@ describe('transform', () => {
     render(<App />);
 
     expect(document.body.outerHTML).toMatchInlineSnapshot(
-      `"<body><div><div class=\\"App\\"><header class=\\"App-header\\"><svg class=\\"svg-component\\">/src/logo.svg</svg><img src=\\"/src/logo.svg\\" class=\\"App-logo\\" alt=\\"logo\\"><img src=\\"/src/assets/images/logo.svg\\" class=\\"logo2\\" alt=\\"logo2\\"><p>Create React App example</p><p class=\\"_textOrange_1gpw2_1\\">Styled by CSS Modules</p><button data-testid=\\"increase\\" type=\\"button\\">count is: <div data-testid=\\"count\\">0</div></button><a class=\\"App-link\\" href=\\"https://reactjs.org\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Learn React</a></header></div></div></body>"`,
+      `"<body><div><div class=\\"App\\"><header class=\\"App-header\\"><svg class=\\"svg-component\\">/src/logo.svg</svg><img src=\\"/src/logo.svg\\" class=\\"App-logo\\" alt=\\"logo\\"><img src=\\"/src/assets/images/logo.svg\\" class=\\"logo2\\" alt=\\"logo2\\"><p>Create React App example</p><p class=\\"_textOrange_1gpw2_1\\">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=\\"load-path-sass\\">This text is styled by SASS from load paths</p><div class=\\"animated fadeIn\\"><p>An animated element style using @import ~</p><p>Watch me fade in!</p></div><button data-testid=\\"increase\\" type=\\"button\\">count is: <div data-testid=\\"count\\">0</div></button><a class=\\"App-link\\" href=\\"https://reactjs.org\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Learn React</a></header></div></div></body>"`,
     );
   });
 });
diff --git a/examples/create-react-app/src/assets/_scss/global-style.scss b/examples/create-react-app/src/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/examples/create-react-app/src/assets/_scss/loadPathsExample/load-path.scss b/examples/create-react-app/src/assets/_scss/loadPathsExample/load-path.scss
@@ -0,0 +1,5 @@
+header {
+  .load-path-sass {
+    color: red;
+  }
+}
diff --git a/examples/create-react-app/src/assets/_scss/partials/_partial-global-style.scss b/examples/create-react-app/src/assets/_scss/partials/_partial-global-style.scss
@@ -0,0 +1,5 @@
+header {
+  .global-configured-sass {
+    text-transform: uppercase;
+  }
+}
diff --git a/examples/create-react-app/src/assets/_scss/partials/_partial-style.scss b/examples/create-react-app/src/assets/_scss/partials/_partial-style.scss
@@ -0,0 +1,5 @@
+header {
+  .imported-sass {
+    text-transform: uppercase;
+  }
+}
diff --git a/examples/create-react-app/src/assets/_scss/style.scss b/examples/create-react-app/src/assets/_scss/style.scss
@@ -0,0 +1,11 @@
+@use 'partials/partial-style'; // Example using @use
+@use 'load-path'; // Example of loadPath config
+
+$use-fadeIn: true;
+@import '~animate-sass/animate'; // Example of import ~
+
+header {
+  .imported-sass {
+    color: pink;
+  }
+}
diff --git a/examples/create-react-app/src/index.tsx b/examples/create-react-app/src/index.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
+import './assets/_scss/global-style.scss';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
 
 // If you want to start measuring performance in your app, pass a function

diff --git a/examples/create-react-app/src/setupTests.ts b/examples/create-react-app/src/setupTests.ts
@@ -6,7 +6,8 @@ import '@testing-library/jest-dom';
 import { jestPreviewConfigure } from 'jest-preview';
 
 jestPreviewConfigure({
-  externalCss: ['src/index.css'],
+  externalCss: ['src/index.css', 'src/assets/_scss/global-style.scss'],
+  sassLoadPaths: ['src/assets/_scss/loadPathsExample'],
 });
 
 window.matchMedia = (query) => ({

diff --git a/examples/vite-react/config/jest/setupTests.js b/examples/vite-react/config/jest/setupTests.js
@@ -5,6 +5,7 @@ import { jestPreviewConfigure } from 'jest-preview';
 jestPreviewConfigure({
   externalCss: ['src/index.css', 'src/assets/_scss/global-style.scss'],
   autoPreview: true,
+  sassLoadPaths: ['src/assets/_scss/loadPathsExample'],
 });
 
 window.matchMedia = (query) => ({

diff --git a/examples/vite-react/jest.config.js b/examples/vite-react/jest.config.js
@@ -23,6 +23,8 @@ module.exports = {
     '^react-native$': 'react-native-web',
     // Used to dedupe `styled-component` when run `npm link` in development
     '^styled-components$': '<rootDir>/node_modules/styled-components',
+    // Support import ~
+    '^~(.*)': '<rootDir>/node_modules/$1',
   },
   moduleFileExtensions: [
     // Place tsx and ts to beginning as suggestion from Jest team

diff --git a/examples/vite-react/package.json b/examples/vite-react/package.json
@@ -25,6 +25,8 @@
     "@types/react": "^17.0.33",
     "@types/react-dom": "^17.0.10",
     "@vitejs/plugin-react": "^1.0.7",
+    "animate-sass": "^0.8.2",
+    "animate.css": "^4.1.1",
     "jest": "^27.5.1",
     "jest-preview": "file:../..",
     "jest-watch-typeahead": "^1.0.0",

diff --git a/examples/vite-react/src/App.tsx b/examples/vite-react/src/App.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import styled from 'styled-components';
+import '~animate.css/animate.css';
 
 import logo2 from './assets/images/logo.svg';
 
@@ -23,6 +24,16 @@ function App() {
           This text is styled by global configured SASS
         </p>
         <p className="imported-sass">This text is styled by imported SASS</p>
+        <p className="load-path-sass">
+          This text is styled by SASS from load paths
+        </p>
+        <p className="animate__animated animate__bounce">
+          An animated element style using @use ~
+        </p>
+        <div className="animated fadeIn">
+          <p>An animated element style using import ~</p>
+          <p>Watch me fade in!</p>
+        </div>
         <p>
           <button
             data-testid="increase"

diff --git a/examples/vite-react/src/assets/_scss/loadPathsExample/load-path.scss b/examples/vite-react/src/assets/_scss/loadPathsExample/load-path.scss
@@ -0,0 +1,5 @@
+header {
+  .load-path-sass {
+    color: red;
+  }
+}
diff --git a/examples/vite-react/src/assets/_scss/style.scss b/examples/vite-react/src/assets/_scss/style.scss
@@ -1,4 +1,8 @@
 @use 'partials/partial-style'; // Example using @use
+@use 'load-path'; // Example of loadPath config
+
+$use-fadeIn: true;
+@import '~animate-sass/animate'; // Example of import ~
 
 header {
   .imported-sass {

diff --git a/examples/vite-react/vite.config.ts b/examples/vite-react/vite.config.ts
@@ -26,5 +26,22 @@ export default defineConfig(({ mode }) => {
     // If `envWithProcessPrefix` is an empty object, `process.env` will be undefined and the app cannot be loaded
     // Caveat: Cannot access `process.env` in build mode, always use `process.env.VARIABLE_NAME`
     define: envWithProcessPrefix,
+    // Support tilde import
+    resolve: {
+      alias: {
+        '~animate-sass': path.resolve(__dirname, 'node_modules/animate-sass'),
+        '~animate.css': path.resolve(__dirname, 'node_modules/animate.css'),
+      },
+    },
+    // Support loadPaths for scss
+    css: {
+      preprocessorOptions: {
+        scss: {
+          includePaths: [
+            path.resolve(__dirname, 'demo/assets/_scss/loadPathsExample'),
+          ],
+        },
+      },
+    },
   };
 });
diff --git a/jest.config.js b/jest.config.js
@@ -21,6 +21,8 @@ module.exports = {
   modulePaths: ['<rootDir>/demo'],
   moduleNameMapper: {
     '^react-native$': 'react-native-web',
+    // Support import ~
+    '^~(.*)': '<rootDir>/node_modules/$1',
   },
   moduleFileExtensions: [
     // Place tsx and ts to beginning as suggestion from Jest team

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jest-preview",
-  "version": "0.2.3",
+  "version": "0.2.4-alpha.0",
   "description": "Preview your HTML code while using Jest",
   "keywords": [
     "testing",
@@ -78,6 +78,8 @@
     "@types/styled-components": "^5.1.24",
     "@vitejs/plugin-react": "^1.3.0",
     "cross-env": "^7.0.3",
+    "animate-sass": "^0.8.2",
+    "animate.css": "^4.1.1",
     "jest": "^27.5.1",
     "jest-watch-typeahead": "^1.0.0",
     "nodemon": "^2.0.15",