feat(tailwind/hooks): useTailwind() hook that allows to straight up g…

…enerate styles for class names
resend · gabrielmfern · Oct 7, 2024 · Mar 28, 2024 · Mar 29, 2024 · Mar 14, 2024
commit 2a82fa96026cc432a6d355555eaab05be8b7ff4b
diff --git a/packages/tailwind/src/hooks/__snapshots__/use-tailwind.spec.ts.snap b/packages/tailwind/src/hooks/__snapshots__/use-tailwind.spec.ts.snap
@@ -0,0 +1,16 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`useTailwind() 1`] = `
+".text-red-500 {
+    color: rgb(239 68 68 / 1)
+}
+  @media (min-width: 640px) {
+    .sm\\\\:bg-blue-300 {
+        background-color: rgb(147 197 253 / 1)
+    }
+}
+  .bg-slate-900 {
+    background-color: rgb(15 23 42 / 1)
+}
+"
+`;
diff --git a/packages/tailwind/src/hooks/use-tailwind.spec.ts b/packages/tailwind/src/hooks/use-tailwind.spec.ts
@@ -0,0 +1,15 @@
+import { useTailwind } from "./use-tailwind";
+
+test("useTailwind()", () => {
+  const tailwind = useTailwind({});
+
+  expect(
+    tailwind
+      .generateRootForClasses([
+        "text-red-500",
+        "sm:bg-blue-300",
+        "bg-slate-900",
+      ])
+      .toString(),
+  ).toMatchSnapshot();
+});
diff --git a/packages/tailwind/src/hooks/use-tailwind.ts b/packages/tailwind/src/hooks/use-tailwind.ts
@@ -0,0 +1,52 @@
+import type { Rule } from "postcss";
+import postcssCssVariables from "postcss-css-variables";
+import postcss from "postcss";
+import evaluateTailwindFunctions from "tailwindcss/lib/lib/evaluateTailwindFunctions";
+import expandApplyAtRules from "tailwindcss/lib/lib/expandApplyAtRules";
+import resolveDefaultsAtRules from "tailwindcss/lib/lib/resolveDefaultsAtRules";
+import { generateRules as rawGenerateRules } from "tailwindcss/lib/lib/generateRules";
+import expandTailwindAtRules from "tailwindcss/lib/lib/expandTailwindAtRules";
+import partitionApplyAtRules from "tailwindcss/lib/lib/partitionApplyAtRules";
+import substituteScreenAtRules from "tailwindcss/lib/lib/substituteScreenAtRules";
+import { setupTailwindContext } from "../utils/tailwindcss/setup-tailwind-context";
+import type { TailwindConfig } from "../tailwind";
+
+const tailwindAtRulesRoot = postcss
+  .parse(
+    `
+  @tailwind base;
+  @tailwind components;
+`,
+  )
+  .root();
+
+const postcssVariablesProcessor = postcss([
+  postcssCssVariables() as postcss.Plugin,
+]);
+
+export function useTailwind(config: TailwindConfig) {
+  const tailwindContext = setupTailwindContext(config);
+
+  return {
+    // inspired by the tailwind LSP server
+    generateRootForClasses: (classes: string[]) => {
+      const bigIntRuleTuples: [bigint, Rule][] = rawGenerateRules(
+        new Set(classes),
+        tailwindContext,
+      );
+
+      const root = tailwindAtRulesRoot
+        .clone()
+        .append(...bigIntRuleTuples.map(([, rule]) => rule));
+      partitionApplyAtRules()(root);
+      expandTailwindAtRules(tailwindContext)(root);
+      expandApplyAtRules(tailwindContext)(root);
+      evaluateTailwindFunctions(tailwindContext)(root);
+      substituteScreenAtRules(tailwindContext)(root);
+      resolveDefaultsAtRules(tailwindContext)(root);
+
+      return postcssVariablesProcessor.process(root.toString()).sync()
+        .root as postcss.Root;
+    },
+  };
+}
diff --git a/packages/tailwind/src/utils/tailwindcss/setup-tailwind-context.ts b/packages/tailwind/src/utils/tailwindcss/setup-tailwind-context.ts
@@ -0,0 +1,15 @@
+import { createContext } from "tailwindcss/lib/lib/setupContextUtils";
+import resolveConfig from "tailwindcss/resolveConfig";
+import type { TailwindConfig } from "../../tailwind";
+
+export const setupTailwindContext = (config: TailwindConfig) => {
+  return createContext(
+    resolveConfig({
+      ...config,
+      content: [],
+      corePlugins: {
+        preflight: false,
+      },
+    }),
+  );
+};
diff --git a/packages/tailwind/src/utils/tailwindcss/tailwind-internals.d.ts b/packages/tailwind/src/utils/tailwindcss/tailwind-internals.d.ts
@@ -0,0 +1,108 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+declare module "tailwindcss/lib/lib/evaluateTailwindFunctions" {
+  import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
+  import type { Root } from "postcss";
+
+  export default function evaluateTailwindFunctions(
+    context: JITContext,
+  ): (root: Root) => void;
+}
+
+declare module "tailwindcss/lib/lib/resolveDefaultsAtRules" {
+  import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
+  import type { Root } from "postcss";
+
+  export default function expandApplyAtRules(
+    context: JITContext,
+  ): (root: Root) => void;
+}
+
+declare module "tailwindcss/lib/lib/partitionApplyAtRules" {
+  import type { Root } from "postcss";
+
+  export default function partitionApplyAtRules(): (root: Root) => void;
+}
+
+declare module "tailwindcss/lib/lib/substituteScreenAtRules" {
+  import type { Root } from "postcss";
+
+  export default function substituteScreenAtRules(
+    context: JITContext,
+  ): (root: Root) => void;
+}
+
+declare module "tailwindcss/lib/lib/resolveDefaultsAtRules" {
+  import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
+  import type { Root } from "postcss";
+
+  export default function expandApplyAtRules(
+    context: JITContext,
+  ): (root: Root) => void;
+}
+
+declare module "tailwindcss/lib/lib/expandApplyAtRules" {
+  import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
+  import type { Root } from "postcss";
+
+  export default function expandApplyAtRules(
+    context: JITContext,
+  ): (root: Root) => void;
+}
+
+declare module "tailwindcss/lib/lib/expandTailwindAtRules" {
+  import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
+  import type { Root } from "postcss";
+
+  export default function expandTailwindAtRules(
+    context: JITContext,
+  ): (root: Root) => void;
+}
+
+declare module "tailwindcss/lib/lib/generateRules" {
+  import type { JitContext } from "tailwindcss/lib/lib/setupContextUtils";
+  import type { Rule } from "postcss";
+
+  export function generateRules(
+    classNames: Set<string>,
+    context: JITContext,
+  ): [bigint, Rule][];
+}
+
+// taken from https://github.com/vinicoder/tw-to-css/blob/main/types.d.ts
+// thanks vinicoder!
+declare module "tailwindcss/lib/lib/setupContextUtils" {
+  import type { Container, Node } from "postcss";
+  import type { Config } from "tailwindcss";
+  import type resolveConfig from "tailwindcss/resolveConfig";
+
+  interface ChangedContent {
+    content: string;
+    extension?: string;
+  }
+
+  interface Api {
+    container: Container;
+    separator: string;
+    format: (def: string) => void;
+    wrap: (rule: Container) => void;
+  }
+
+  type VariantPreview = string;
+
+  type VariantFn = [number, (api: Api) => VariantPreview | undefined];
+
+  type VariantName = string;
+
+  export interface JitContext {
+    changedContent: ChangedContent[];
+    getClassList: () => string[];
+    tailwindConfig: TailwindConfig;
+    variantMap: Map<VariantName, VariantFn[]>;
+  }
+
+  export function createContext(
+    config: ReturnType<typeof resolveConfig>,
+    changedContent?: ChangedContent[],
+  ): JitContext;
+}