From d91c75f809ef002039e72f0882c98be57b021f39 Mon Sep 17 00:00:00 2001 From: Truong Nguyen Date: Tue, 3 May 2022 19:42:02 +0700 Subject: [PATCH 01/10] feat: Support scss load paths, tilde import --- config/jest/setupTests.js | 1 + demo/App.tsx | 11 +++++++ .../_scss/loadPathsExample/load-path.scss | 5 +++ demo/assets/_scss/style.scss | 4 +++ jest.config.js | 2 ++ package-lock.json | 12 +++++++ package.json | 2 ++ src/configure.ts | 33 +++++++++++++++++-- src/constants.ts | 1 + src/transform.ts | 33 ++++++++++++++++++- vite.config.ts | 17 ++++++++++ 11 files changed, 117 insertions(+), 4 deletions(-) create mode 100644 demo/assets/_scss/loadPathsExample/load-path.scss diff --git a/config/jest/setupTests.js b/config/jest/setupTests.js index 543acf21..8e50f555 100644 --- 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 index d6112c6a..0c0e81ce 100644 --- 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/ */} Styled by Stiches +

+ This text is styled by SASS from load paths +

+

+ An animated element style using @use ~ +

+
+

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) => ({ From 7240c1411c9535b9c27a1af4b036a6c6a9b1036f Mon Sep 17 00:00:00 2001 From: Truong Nguyen Date: Fri, 27 May 2022 23:01:34 +0700 Subject: [PATCH 07/10] test: Fix snapshot after adding sass example --- demo/__tests__/transform.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/__tests__/transform.test.tsx b/demo/__tests__/transform.test.tsx index dea7b636..cf7a64be 100644 --- 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(); expect(document.body.outerHTML).toMatchInlineSnapshot( - `"
\\"logo\\"\\"logo2\\"

Hello Vite + React!

This text is styled by styled-components

This text is styled by global css which is not imported to App.tsx

This text is styled by CSS Modules

This text is styled by global configured SASS

This text is styled by imported SASS

Styled by Emotion

Styled by Stiches

Edit App.tsx and save to test HMR updates.

Learn React | Vite Docs

"`, + `"
\\"logo\\"\\"logo2\\"

Hello Vite + React!

This text is styled by styled-components

This text is styled by global css which is not imported to App.tsx

This text is styled by CSS Modules

This text is styled by global configured SASS

This text is styled by imported SASS

Styled by Emotion

Styled by Stiches

This text is styled by SASS from load paths

An animated element style using @use ~

An animated element style using import ~

Watch me fade in!

Edit App.tsx and save to test HMR updates.

Learn React | Vite Docs

"`, ); }); }); From 4d88d27d4cf344d1d8000eb8e1c7bb14c34f3b67 Mon Sep 17 00:00:00 2001 From: Truong Nguyen Date: Fri, 27 May 2022 23:20:59 +0700 Subject: [PATCH 08/10] feat: Add docs for sassLoadPaths config --- website/docs/api/jestPreviewConfigure.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/website/docs/api/jestPreviewConfigure.md b/website/docs/api/jestPreviewConfigure.md index afec6bc2..96872519 100644 --- a/website/docs/api/jestPreviewConfigure.md +++ b/website/docs/api/jestPreviewConfigure.md @@ -39,6 +39,20 @@ jestPreviewConfigure({ ], ``` +## sassLoadPaths: string[] + +Default: `[]` + +Paths in which to look for stylesheets loaded by rules like `@use` and `@import` in sass files should be configured via `sassLoadPaths` option. They should be path from root of your project. For example: + +```js +jestPreviewConfigure({ + // Configure Sass load paths + sassLoadPaths: [ + 'demo/assets/_scss/loadPathsExample', + ], +``` + ## publicFolder: string Default: `undefined`. From 8cc30a589939f8a0868305610ab69821aeb7d233 Mon Sep 17 00:00:00 2001 From: Truong Nguyen Date: Fri, 27 May 2022 23:25:11 +0700 Subject: [PATCH 09/10] fix: Update a typo in the comment --- examples/create-react-app/.env | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/create-react-app/.env b/examples/create-react-app/.env index 9fb38bf9..0ba10db4 100644 --- a/examples/create-react-app/.env +++ b/examples/create-react-app/.env @@ -1,4 +1,4 @@ - SASS_PATH=src/assets/\_scss/loadPathsExample From 5aeae738110cdfc36609c640542dde824c2e6420 Mon Sep 17 00:00:00 2001 From: Hung Viet Nguyen Date: Sat, 28 May 2022 01:03:12 +0700 Subject: [PATCH 10/10] chore: release v0.2.4-alpha.0 --- CHANGELOG.md | 6 ++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a5b61fa1..3d9e1705 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +# 0.2.4 + +## Fixes + +- Sass enhancement + # 0.2.3 ## Fixes diff --git a/package-lock.json b/package-lock.json index 0f07101f..9f184ace 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "jest-preview", - "version": "0.2.3", + "version": "0.2.4-alpha.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "jest-preview", - "version": "0.2.3", + "version": "0.2.4-alpha.0", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index ae3ae142..194dff79 100644 --- 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",