feat: Update vite-react example to support load paths, import ~ sass

nvh95 · May 27, 2022 · f6d20a7 · f6d20a7
1 parent d91c75f
commit f6d20a7
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 0 deletions.
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'),
+          ],
+        },
+      },
+    },
   };
 });