🧪 Support Tailwindcss #127
Conversation
✅ Deploy Preview for jest-preview-library canceled.
|
| .then((result) => { | ||
| const style = document.createElement("style"); | ||
| style.type = "text/css"; | ||
| style.appendChild(document.createTextNode(result.css.replace(/\\\\/g, ''))); |
There was a problem hiding this comment.
This part result.css.replace(/\\\\/g, '') is hard to read even more regex is already complex.
It is parsed as result.css.replace(/\\/g, '')) on runtime.
Tailwindcss has CSS classes like .hover:text-red-500 {}. It will be compiled as .hover\:text-red-500 {}. But JSDom can't parse it so we have to remove that escaping character.
| @tailwind components; | ||
| @tailwind utilities; | ||
|
|
||
| /* TODO: Redundant. Tailwind css inserts own reset css. */ |
There was a problem hiding this comment.
about Tailwinds' reset.css https://tailwindcss.com/docs/preflight
| return {code: ` | ||
| const postcss = require("postcss"); | ||
| const cssSrc = ${JSON.stringify(src)}; | ||
| postcss([require("tailwindcss")(), require("autoprefixer")()]) |
There was a problem hiding this comment.
Actually, I want to use postcss-load-config but it can't because it seems that this code template will run on the browser environment so the module gives us itself as ESModule that Jest can't parse.
|
@sundaycrafts Thank you for your efforts in trying to make https://github.com/nvh95/jest-preview/runs/6636161961?check_suite_focus=true |
|
Ok sure! |
|
@nvh95 and @sundaycrafts, both thank you for your work. @nvh95 What is the update? I'm also highly interested by the Tailwind CSS support. |
|
Hi @ixartz. Thanks for your kind words. Supporting TailwindCSS is currently one of our goals in the next release. To support it well, we even need to rearchitect our internal a little bit (#133). Unfortunately, I am busy at the moment for at least the next 10 days. I will get to you once we have significant progress. In the meantime, you can absolutely use TailwindCSS in your tests by this workaround:
npx tailwindcss -i ./src/index.css -o ./src/tailwind-output.cssNote: We are pretending @tailwind base;
@tailwind components;
@tailwind utilities;
// src/setupTests.js
import './tailwind-output.css';This solution is not optimal since you need to re-generate Thank you. Please let me know if the above solution helps you. |
|
Hi @sundaycrafts, To support TailwindCSS, I need to adjust the architecture of CSS Code Transformation. So, after consideration, I decided the best solution is to include TailwindCSS in #133, to avoid conflicts and reduce the workload and time. But no worries, I already cherry-picked your commit from this PR to #133 (5412539). You will get full credit for the efforts you spend on this PR. I will not forget to welcome you to contributors either. I hope you understand. I will keep this PR open until the support for TailwindCSS gets stable. If you have anything want to discuss, please let me know. Thank you very much. |
|
Hi @nvh95 , thank you for informing me that. I'm proud to contribute to you guys project and very happy that you respect it! I will continue to contribute to this project. |
|
@sundaycrafts Wonderful! Don't hesitate to contact me on GitHub or via Twitter or Discord Channel if you need more in-depth discussion. Thank you again. |
|
@sundaycrafts @ixartz @hsheikhali1 Don't forget to import your global CSS file to jest setup file, for example: Please let me know if you guys spot any bugs. Thanks. |
|
Included in #133 |
|
Thank you very much @sundaycrafts for your help. Your PR is so awesome. But to reduce the code conflicts, I decided to cherry-pick your commit to #133. Enjoy React Summit 😉! |
|
@all-contributors please add @sundaycrafts for code |
|
I've put up a pull request to add @sundaycrafts! 🎉 |
Features
Fixes
Nothing
Chores
Nothing
Note
Context of this pull request.
#100 (comment)