feature(tailwindcss-transformer,ui): Scaffold packages

[alexcarpenter]

Description

In this PR we introduce two new private experimental packages.

tailwindcss-transformer

The goal of this package is to enable authoring components using Tailwind CSS and exporting a component with hashed classNames with accompanying stylesheet.

Example

Input:

export function Example({ flag }) {
  let className = cn('absolute inset-0', flag && 'uppercase');
  return <div className={cn('flex items-center text-sm', className)} />;
}

Output:

export function Example({ flag }) {
  let className = cn('cl-7601190e', flag && 'cl-d2cf63c7');
  return <div className={cn('cl-f64ae6a6', className)} />;
}

.cl-7601190e {
  position: absolute;
  inset: 0;
}

.cl-d2cf63c7 {
  text-transform: uppercase;
}

.cl-f64ae6a6 {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}

Utilities

• transform - transforms a React component with TW classes into hashed classNames
• generateStylesheet - generates a single stylesheet based on classNames extracted from transform utility

ui

The ui package is where we will be rebuilding the AIO components. We run the components through tsup with the tailwindcss-transformer as an esbuild plugin.

Checklist

• npm test runs as expected.
• npm run build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

[changeset-bot]

🦋 Changeset detected

Latest commit: 8da7586

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[panteliselef]

Will this be used to move the ui components out of clerk-js, or this is intended for a complete rewrite ?

[kylemac]

@panteliselef no firm decisions on where files will live long term (wasn't sure if that was part of your question or not) - but the plan is to do a complete rebuild using elements under the hood. that said, this is all experimental/poc atm

[BRKalow]

🚢

Most feedback addressed, additional items can be addressed in followup PRs