Skip to content
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

Use Tailwind to extract actual CSS rules (deletes the cheatsheet!) #48

Open
wants to merge 12 commits into
base: main
Choose a base branch
from

Conversation

ADTC
Copy link

@ADTC ADTC commented Nov 1, 2024

Demo: https://tailwind-to-css-three.vercel.app/

This uses an API route to instantly process the given Tailwind classes and return the actual CSS generated by Tailwind.

Advantages:

  • No need of any cheatsheet. Completely removes the dependency on cheat sheets.
  • Will work automatically for any class thrown at it, as long as Tailwind can interpret it.
    • No need to keep fixing a cheat sheet for missing random classes that should work!
  • Will work correctly for all classes with arbitrary values inserted in square brackets.
    • This is something we have to keep updating the cheat sheet for as we discover new ones.
  • Will give the exact CSS generated by Tailwind for the given set of class names.
  • Fixes an insane amount of reported issues because we no longer need to fix the cheat sheet.
  • The rules are wrapped by blocks with the .generated class name (including pseudo-stuff like .generated:hover) so you can easily replace it with your own class name.

Caveats:

Note: We could provide some UI options to do post-processing of the CSS to overcome the first two caveats. This will be a separate task outside the scope of this PR.

  • Tailwind automatically adds variables for certain things like color and content. You'll have to manually fix them if needed.
  • Tailwind uses rgb notation for colors instead of hex values. You'll have to manually change to hex if needed.
  • Processing will fail if there are non-Tailwind classes in the input. We can fix this later in a separate PR. Fixed!
  • There's a small delay of waiting for server response. This is normal and expected.

Issues:

Closes #14 (no longer relevant)
Closes #30 (no longer relevant)
Fixes #31
Fixes #32
Fixes #38
Fixes #39
Fixes #42
Fixes #43
Fixes #45
Fixes #46
Fixes #47

Previously closed issues which also benefit from this:
Resolves #9
Resolves #16
Resolves #22

[1/4] 🔍  Resolving packages...
warning [email protected]: This version is no longer supported. Please see https://eslint.org/version-support for other options.
warning eslint > @humanwhocodes/[email protected]: Use @eslint/config-array instead
warning eslint > file-entry-cache > flat-cache > [email protected]: Rimraf versions prior to v4 are no longer supported
warning eslint > file-entry-cache > flat-cache > rimraf > [email protected]: Glob versions prior to v9 are no longer supported
warning eslint > @humanwhocodes/config-array > @humanwhocodes/[email protected]: Use @eslint/object-schema instead
warning eslint > file-entry-cache > flat-cache > rimraf > glob > [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
warning eslint-config-next > @next/eslint-plugin-next > [email protected]: Glob versions prior to v9 are no longer supported
warning eslint-config-next > @next/eslint-plugin-next > glob > [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > [email protected]" has incorrect peer dependency "react@^18.2.0".
warning " > [email protected]" has incorrect peer dependency "react-dom@^18.2.0".
[4/4] 🔨  Rebuilding all packages...

success Saved lockfile.
success Saved 266 new dependencies.
info Direct dependencies
├─ @heroicons/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨  Done in 16.26s.
Based on the code in Devzstudio#47

Caveat: By configuring a maximally broad safeList, all CSS classes from Tailwind will be included. This can make compilation and deployment slow, and there will be a large CSS file to download when loading the website. This is unavoidable for this new technique to work.

Also:
- Make the JSON output pretty.
- Delay processing by 1 second when typing the input, otherwise the text box is slow to show what you're typing.
This will dynamically generate the Tailwind result CSS, ensuring the class to CSS rule conversion is complete, including arbitrary values in square brackets.

This also reverts the safeList changes. We will no longer need to spend a lot of time deploying, or downloading a giant list of classes. Yay, Performance Restored!!!

This is based on the new code in Devzstudio#47.

Also: Trim the CSS result when copying.
This resolves the problem:
Error: ENOENT: no such file or directory, open '/var/task/node_modules/tailwindcss/lib/css/preflight.css'

Also we will grab everything that comes after the first instance of .generated, so this will include things like hover, after, etc. as well.

See https://stackoverflow.com/a/78399488/1134080
Also: Avoid processing empty strings. Trim the API result.
@ADTC
Copy link
Author

ADTC commented Nov 2, 2024

Hi @PJijin I polished up the description a bit, with some added content.

What are your thoughts about this overhaul?

If this is accepted, we can further improve it by making this a full-fledged tool with more options. We can focus on improving the UI and adding features instead of fixing problems in a cheatsheet.

Thanks ~ fellow Keralite btw :)

@PJijin
Copy link
Member

PJijin commented Nov 2, 2024

Hey,

Thanks for contributing @ADTC 🎉
Looks great to me! 👍

We can merge this pull request. By the way, have you been able to resolve this issue?

Processing will fail if there are non-Tailwind classes in the input. 

Issue: If the content is too long, we can't see the last few lines, as it's below the viewport and can't be reached.
This is done by checking the error repeatedly for custom classes and moving them to another array until no more error is presented.

Also: Refactor API code to simplify some constants and to remove unneeded parts like @tailwind directives and finding `.generated` text.
@ADTC
Copy link
Author

ADTC commented Nov 2, 2024

@PJijin I was planning to tackle that later, but since you deemed it important enough to ask, I went ahead and tackled it in commit 3c2a362. It was easier to solve than I thought it would be.

I have also fixed a couple of additional minor issues. If all good, please go ahead to merge. (I suggest creating a merge commit as usual, so we can preserve history. Avoid squashing.)

Also: Organize imports and refactor constant object.
@ADTC
Copy link
Author

ADTC commented Nov 2, 2024

@PJijin Okay I'm done. My hands are off the keyboard! 😆

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment