-
-
Notifications
You must be signed in to change notification settings - Fork 76
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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 |
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think creating an indent here would be better and consistent
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should add this for CRA example
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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