hash and concat multiple classNames to one

[smeijer]

Hey 👋,

Twind currently supports hashing of classNames, thereby something like bg-red-500 font-bold becomes something like tw-wgsX2 tw-hFiJ4.

I thought, wouldn't it be awesome if multiple classnames could get reduced down to a single hashed one?

Turning bg-red-500 font-bold text-sm text-white... into something like tw-efG3p. That would solve a few issues people have with tailwind, or utility based css in general.

1. complaints about long classNames, especially in production
2. smaller production bundles
3. not so obvious that the site uses tailwind

What do you think?

[danielweck]

I think you can use apply this achieve this.

[smeijer]

Would it not be possible to also do this for the shim?

[danielweck]

I assume you mean the JSX VDOM class / className prop handler. That'll depend on what your application environment is. For example in my case I leverage a native "hook" feature in the Preact tree of virtual nodes, which allows me to implement custom props that handle apply, css and of course tw (in addition to the standard class and className props), in both live / dynamic scenarios (i.e. dev mode) as well as static pre-render / production mode.

Twind provides an off-the-shelf Preact / WMR integration based on exactly the same principles:
https://github.com/tw-in-js/use-twind-with/blob/dd3deb8e7e6a9896a3c01edaf1d5a117c7cb327a/packages/preact/index.ts#L55-L68

In my implementation, I have a data-tw-apply prop (which I like to use as it requires no type overloading of standard HTML elements, but alternatively I can use tw-apply if I want strong Typescript checks) which takes (for example) an array of Tailwind / Twind tokens (there can be multiple space-separated tokens per array item). The aforementioned Preact VNode "hook" invokes apply on the array (or alternatively on each array item ... the Twind API is very versatile), and finally tw() to create the resulting CSS class to be set to the className prop.

[danielweck]

I should explain that the above apply example is used for links (a@href) that have a different style depending on their state, for example I add a CSS "wait" cursor when the router is loading an async route (lazy component), and I add a CSS underline + bold font for the link that corresponds to the currently-loaded route. That being said, I have since been using Twind's style() utility which is better-suited for creating variants that depend on a component's state.

I use top-level :global CSS overrides with high-specificity selectors in order to force the use of styles in the entire document / webpage, for example selection, accessible focus outline, etc. I place my css() custom prop on the root <App> JSX node (instead of calling the API somewhere else in my functional components hierarchy, or worse even, in a JS module that has a different lifecycle than VDom, because of static SSR prerender subtleties, or dev-server Hot Module Reload refreshes).

[sastan]

I thought, wouldn't it be awesome if multiple classnames could get reduced down to a single hashed one?

windicss has something called the compilation mode for this use case. This should be possible with the tools we have.

That is something @itsMapleLeaf mentioned as well.

2. smaller production bundles

I'm not so sure about that one.

---

Currently we provide two ways to inject styles

1. calling tw
2. use observe / shim to read and modify class attributes

The gist:

import { tw as _tw, apply } from 'twind'

export const tw = (...tokens: Token[]): string => _tw(apply(...tokens))

And now a possible module implementation:

import type { Token, Configuration, Instance } from "twind";
import { tw as _tw, apply, create as _create } from "twind";

export * from "twind";

export const create = (options?: Configuration): Instance => {
  const { tw, setup } = _create(options);

  return {
    tw: Object.defineProperties(
      (...tokens: Token[]): string => tw(apply(...tokens)),
      Object.getOwnPropertyDescriptors(tw)
    ),
    setup,
  };
};

export const { tw, setup } = create()

Now to point 2:

a new observe module using the above

import type { ShimConfiguration, TwindObserver } from "twind/observe";
import {
  createObserver as _createObserver,
  observe as _observe,
} from "twind/observe";
export { tw as defaultTW } from "the-module-above";

export * from "twind/observe";

export const createObserver = ({
  tw = defaultTW,
}: ShimConfiguration = {}): TwindObserver => _createObserver({ tw });

export function observe(
  this: ShimConfiguration | undefined | void,
  target: Node,
  config: ShimConfiguration | undefined | void = typeof this == "function"
    ? undefined
    : this
): TwindObserver {
  return createObserver(config as ShimConfiguration | undefined).observe(target)
}

Same could be done for twind/shim and twind/shim/server.

I hope that helps.

[sastan]

This is now implemented in twind v1:

• inline apply: styles are generated in order they are declared
  • @(underline font-bold) -> @(underline,font-bold)
  • Link@(underline font-bold) -> Link#12345
• inline shortcut: style are generated as defined by twind — same as if they where used alone
  • ~(underline font-bold) -> ~(underline,font-bold)
  • Link~(underline font-bold) -> Link#abcdef

Please give it a try. Here are some links to get you started:

• The v1 branch
• Reference until the website is ready
• Examples — the CDN example could be a good start

Closing this for now. Feel free to re-open.