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

Commits on Nov 1, 2024

  1. Configuration menu
    Copy the full SHA
    0dd2bf9 View commit details
    Browse the repository at this point in the history
  2. yarn upgrade

    [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.
    ADTC committed Nov 1, 2024
    Configuration menu
    Copy the full SHA
    9c34e49 View commit details
    Browse the repository at this point in the history
  3. Use Tailwind to extract actual CSS rules

    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.
    ADTC committed Nov 1, 2024
    Configuration menu
    Copy the full SHA
    4135254 View commit details
    Browse the repository at this point in the history
  4. Switch to server-side API to generate classes

    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.
    ADTC committed Nov 1, 2024
    Configuration menu
    Copy the full SHA
    5f00e9f View commit details
    Browse the repository at this point in the history
  5. Configuration menu
    Copy the full SHA
    2de1ac4 View commit details
    Browse the repository at this point in the history
  6. Configuration menu
    Copy the full SHA
    10f9676 View commit details
    Browse the repository at this point in the history
  7. Set the Tailwind config's preflight CSS to false

    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
    ADTC committed Nov 1, 2024
    Configuration menu
    Copy the full SHA
    c94b5d2 View commit details
    Browse the repository at this point in the history
  8. Format the CSS using cssbeautify

    Also: Avoid processing empty strings. Trim the API result.
    ADTC committed Nov 1, 2024
    Configuration menu
    Copy the full SHA
    84824fc View commit details
    Browse the repository at this point in the history

Commits on Nov 2, 2024

  1. Fix height overflow issue when scrolling

    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.
    ADTC committed Nov 2, 2024
    Configuration menu
    Copy the full SHA
    94023f2 View commit details
    Browse the repository at this point in the history
  2. Extract custom classes into a separate block

    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 committed Nov 2, 2024
    Configuration menu
    Copy the full SHA
    3c2a362 View commit details
    Browse the repository at this point in the history
  3. Configuration menu
    Copy the full SHA
    dc9d562 View commit details
    Browse the repository at this point in the history
  4. Emit errors as text response to the client

    Also: Organize imports and refactor constant object.
    ADTC committed Nov 2, 2024
    Configuration menu
    Copy the full SHA
    e6f11e0 View commit details
    Browse the repository at this point in the history