Skip to content

Commit

Permalink
Tailwind class compilation (#6401)
Browse files Browse the repository at this point in the history
<img width="2551" alt="image"
src="https://github.com/user-attachments/assets/c8180213-1a0b-4b63-b6eb-851b913f6054">


## [Example
project](https://utopia.fish/p/5c03b0e5-glorious-coconut/?branch_name=feature-tailwind-class-compilation&Tailwind=true)

## Description

This PR removes twind (as it's not maintained anymore), and replaces it
with https://github.com/mhsdesign/jit-browser-tailwindcss/, which builds
on tailwindcss to compile tailwind classes.

### Details
- The code wrapping `twind` is removed
- Wrapper code is added for
https://github.com/mhsdesign/jit-browser-tailwindcss/
(`useTailwindCompilation`)
- A Karma test is added to check whether some tailwind classes are
compiled correctly (`tailwind.spec.browser2.tsx`). The test is
intentionally coarse-grained, because exhaustively testing every
tailwind feature is out of scope, and the example store heavily uses
tailwind anyway
- Generating the tailwind styles depends on whether the project has a
tailwind.config.js file or not. Down the line we'll change this to
checking in a flag in the `"utopia"` section of `package.json`, the
current implementation is there to keep the PR self-contained
- `isTailwindEnabled` and `TAILWIND_INSTANCE.current`:
`isTailwindEnabled` should be a pure function of `projectContents`.
However, that implementation caused a lot of re-renders, so instead I
mirrored the original implementation that checked whether a
module-private variable was set or not
- Stubbed `@mhsdesign/jit-browser-tailwindcss` in Jest
  • Loading branch information
bkrmendy authored Sep 30, 2024
1 parent f7d6be2 commit 9ba600d
Show file tree
Hide file tree
Showing 13 changed files with 602 additions and 455 deletions.
2 changes: 2 additions & 0 deletions editor/jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,8 @@ module.exports = {
'react-dnd-html5-backend': '<rootDir>/test/jest/__mocks__/react-dnd-html5-backend.js',
'^react$': '<rootDir>/node_modules/react/index.js',
'^react-dom$': '<rootDir>/node_modules/react-dom/index.js',
'^@mhsdesign/jit-browser-tailwindcss$':
'<rootDir>/src/utils/__mocks__/jit-browser-tailwindcss.js',
'\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
'<rootDir>/test/jest/__mocks__/styleMock.js',
},
Expand Down
4 changes: 1 addition & 3 deletions editor/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,7 @@
"@liveblocks/react": "1.10.0",
"@liveblocks/react-comments": "1.10.0",
"@liveblocks/yjs": "1.10.0",
"@mhsdesign/jit-browser-tailwindcss": "0.4.1",
"@popperjs/core": "2.4.4",
"@radix-ui/react-dropdown-menu": "2.1.1",
"@radix-ui/react-select": "2.1.1",
Expand All @@ -164,9 +165,6 @@
"@svgr/plugin-jsx": "5.5.0",
"@testing-library/user-event": "14.5.2",
"@tippyjs/react": "4.1.0",
"@twind/core": "1.1.3",
"@twind/preset-autoprefix": "1.0.7",
"@twind/preset-tailwind": "1.1.4",
"@types/fontfaceobserver": "0.0.6",
"@types/lodash.findlastindex": "4.6.7",
"@types/react-syntax-highlighter": "11.0.4",
Expand Down
Loading

0 comments on commit 9ba600d

Please sign in to comment.