From a375a11b4af85db7d5cf6f304bd5018158a96d23 Mon Sep 17 00:00:00 2001 From: Truong Nguyen Date: Fri, 27 May 2022 22:54:40 +0700 Subject: [PATCH] feat: Add sass example for create react app --- examples/create-react-app/.env | 5 +++++ examples/create-react-app/package.json | 4 +++- examples/create-react-app/src/App.tsx | 12 ++++++++++++ .../src/__tests__/transform.test.tsx | 2 +- .../src/assets/_scss/global-style.scss | 7 +++++++ .../src/assets/_scss/loadPathsExample/load-path.scss | 5 +++++ .../assets/_scss/partials/_partial-global-style.scss | 5 +++++ .../src/assets/_scss/partials/_partial-style.scss | 5 +++++ .../create-react-app/src/assets/_scss/style.scss | 11 +++++++++++ examples/create-react-app/src/index.tsx | 3 ++- examples/create-react-app/src/setupTests.ts | 3 ++- 11 files changed, 58 insertions(+), 4 deletions(-) create mode 100644 examples/create-react-app/.env create mode 100644 examples/create-react-app/src/assets/_scss/global-style.scss create mode 100644 examples/create-react-app/src/assets/_scss/loadPathsExample/load-path.scss create mode 100644 examples/create-react-app/src/assets/_scss/partials/_partial-global-style.scss create mode 100644 examples/create-react-app/src/assets/_scss/partials/_partial-style.scss create mode 100644 examples/create-react-app/src/assets/_scss/style.scss diff --git a/examples/create-react-app/.env b/examples/create-react-app/.env new file mode 100644 index 00000000..9fb38bf9 --- /dev/null +++ b/examples/create-react-app/.env @@ -0,0 +1,5 @@ + + +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 index 2e146148..b51fe525 100644 --- 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 index b1caf790..70036053 100644 --- 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() { logo2

Create React App example

Styled by CSS Modules

+

+ This text is styled by global configured SASS +

+

This text is styled by imported SASS

+

+ This text is styled by SASS from load paths +

+
+

An animated element style using @import ~

+

Watch me fade in!

+
Learn React"`, + `"
/src/logo.svg\\"logo\\"\\"logo2\\"

Create React App example

Styled by CSS Modules

This text is styled by global configured SASS

This text is styled by imported SASS

This text is styled by SASS from load paths

An animated element style using @import ~

Watch me fade in!

Learn React
"`, ); }); }); diff --git a/examples/create-react-app/src/assets/_scss/global-style.scss b/examples/create-react-app/src/assets/_scss/global-style.scss new file mode 100644 index 00000000..ca28b4cd --- /dev/null +++ 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 new file mode 100644 index 00000000..cad1255f --- /dev/null +++ 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 new file mode 100644 index 00000000..294861fc --- /dev/null +++ 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 new file mode 100644 index 00000000..ae22fed5 --- /dev/null +++ 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 new file mode 100644 index 00000000..0db3cdaa --- /dev/null +++ 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 index ef2edf8e..c3229d4c 100644 --- a/examples/create-react-app/src/index.tsx +++ b/examples/create-react-app/src/index.tsx @@ -1,6 +1,7 @@ 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'; @@ -8,7 +9,7 @@ ReactDOM.render( , - 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 index c4eeb3b4..faaab917 100644 --- 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) => ({