Skip to content

Color swatches missing from mask-* utilities #1295

Open
@thecrypticace

Description

@thecrypticace

This is an intentional omission in IntelliSense at the moment. I noticed some perf problems related to what's required to calculate color swatches.

Some notes:

  • We compile all classes inside getClassList() up front to calculate color swatches
  • Compiling all 19k classes takes like 600ms+ plus additional overhead for parsing and computing the color swatches themselves
  • The 60% of that compile time is related to PostCSS
  • Making color computation lazy so it only happens when completions are requested increases the time it takes to 1.5s for v4.0.17 and ~3s for v4.1.
  • This happens even if the setup is identical (making color a getter + using lazy(…) to back it)
  • This basically means that calling the lazy getters inside the completion provider is 3–5x slower than if you called it after design system creation (this doesn't make sense and I have no idea why this happens)

In the short term I've set up some regex matches against class names to disable color swatch calculation which prevents classes from being compiled. All mask-* utilities are currently a part of this.

Ideas:

  • Remove postcss.parse from the compile(…) path
  • Add a candidatesToAst method to core so we can use the internal CSS ast representation directly
    • I don't really want to do this until we've shipped source maps in v4 though because the AST won't be externally stable until then
  • Duplicate the getColor() code such that it can operate on the Tailwind CSS core AST

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions