From 6369c6ca0f39de7aa5ad14d3bf83182f2c71ea4b Mon Sep 17 00:00:00 2001 From: Hung Viet Nguyen Date: Sat, 9 Apr 2022 08:34:15 +0700 Subject: [PATCH 01/13] feat: support CSS Modules [wip] --- config/jest/cssModulesTransform.js | 9 ++ config/jest/cssTransform.js | 5 +- demo/App.tsx | 2 + demo/style.module.css | 3 + examples/vite-react/jest.config.js | 1 + examples/vite-react/package-lock.json | 15 +++ examples/vite-react/package.json | 7 +- jest.config.js | 58 ++++++------ package-lock.json | 126 ++++++++++++++++++++++++-- package.json | 3 + src/cssModules.js | 3 + src/index.ts | 15 ++- src/transform.ts | 25 +++++ vite.config.ts | 3 + 14 files changed, 232 insertions(+), 43 deletions(-) create mode 100644 config/jest/cssModulesTransform.js create mode 100644 demo/style.module.css create mode 100644 src/cssModules.js diff --git a/config/jest/cssModulesTransform.js b/config/jest/cssModulesTransform.js new file mode 100644 index 00000000..ef206036 --- /dev/null +++ b/config/jest/cssModulesTransform.js @@ -0,0 +1,9 @@ +'use strict'; +const { processCSSModules } = require('../../dist/index'); + +module.exports = { + async processAsync(src, filename) { + console.log('processAsync', src, filename); + return processCSSModules(src, filename); + }, +}; diff --git a/config/jest/cssTransform.js b/config/jest/cssTransform.js index 7b085415..15273bc9 100644 --- a/config/jest/cssTransform.js +++ b/config/jest/cssTransform.js @@ -1,8 +1,11 @@ 'use strict'; -const { processCss } = require('../../dist/index'); +const { processCss, processCSSModules } = require('../../dist/index'); module.exports = { process(src, filename) { + if (filename.endsWith('.module.css')) { + return await processCSSModules(src, filename); + } return processCss(src, filename); }, }; diff --git a/demo/App.tsx b/demo/App.tsx index b259cc05..73ab5919 100644 --- a/demo/App.tsx +++ b/demo/App.tsx @@ -5,6 +5,7 @@ import logo from './logo.svg'; import logo2 from './assets/images/logo.svg'; import './App.css'; import './assets/css/App.css'; +import { cssModule } from './style.module.css'; function App() { const [count, setCount] = useState(0); @@ -18,6 +19,7 @@ function App() {

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

+

This text is styled by CSS Modules