Support CSS Modules's jest code transformation #40
Conversation
|
Getting blocked since we cannot write async logic in jest code transformation if we are using CommonJS. Reference: |
|
We can try a different approach. We can move code to transform |
nvh95
changed the title
|
Successfully support CSS Modules.
The solution is to use https://github.com/schiehll/postcss-modules-sync.
P.S: This is frustrating to support CSS Modules but after solving it. It's rewarding!!!!!!! |
|
Published CSS Modules support in https://www.npmjs.com/package/jest-preview/v/0.1.1-alpha.0 |
src/transform.ts
Outdated
| const postcss = require('postcss'); | ||
| const CSSModulesSync = require('postcss-modules-sync').default; | ||
| const cssSrc = ${JSON.stringify(src)}; | ||
|
|
||
| let exportedTokens = {}; | ||
|
|
||
| const result = postcss( | ||
| CSSModulesSync({ | ||
| getJSON: (tokens) => { | ||
| exportedTokens = tokens; | ||
| }, | ||
| }), | ||
| ) | ||
| .process(cssSrc, { from: ${JSON.stringify(filename)} }) | ||
|
|
||
| const style = document.createElement('style'); | ||
| style.type = 'text/css'; | ||
| style.appendChild(document.createTextNode(result.css)); | ||
| document.body.appendChild(style); | ||
|
|
||
| module.exports = exportedTokens`; |
There was a problem hiding this comment.
I think creating an indent here would be better and consistent
There was a problem hiding this comment.
This is intentional since transformed code shouldn't have an indentation at every line.
(However, in the first line we there is a redundant blank line, I will remove this)
There was a problem hiding this comment.
We don't have consistency across transform functions. Let me make them consistent. Thanks
| @@ -16,6 +18,7 @@ function App() { | |||
| <img src={logo2} className="logo2" alt="logo2" /> | |||
| <p>Vite Example</p> | |||
| <StyledText>This text is styled by styled-components</StyledText> | |||
| <p className={styles.green}>This text is styled by CSS Modules</p> | |||
There was a problem hiding this comment.
We should add this for CRA example
There was a problem hiding this comment.
@ntt261298 Sure. Actually. I'm working on #41 and I was about to integrate it into this PR as well. But I think we can just update CRA example and put it to another PR. Will update CRA example.
There was a problem hiding this comment.
Update: I couldn't find a way to configure jest in package.json to work with CSS Modules. I think we can just leave it there, and wait for #41 to resolve this problem
Features