Merge pull request #169 from Gomah/feat/transformer-aliases

feat(transformer): support custom aliases

README.md

@@ -85,14 +85,33 @@ you need to add the Tailwind Variants `wrapper` to your TailwindCSS config file
 // tailwind.config.js
 
 const { withTV } = require('tailwind-variants/transformer')
-
+
+/** @type {import('tailwindcss').Config} */
+module.exports = withTV({
+  content:  ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+})
+```
+
+If you're using a custom path to import Tailwind variants, such as creating a custom tv instance with `createTV`, it's recommended to include this path in the transformer configuration:
+
+```js
+// tailwind.config.js
+
+const { withTV } = require('tailwind-variants/transformer')
+
 /** @type {import('tailwindcss').Config} */
 module.exports = withTV({
   content:  ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {},
   },
   plugins: [],
+}, {
+  aliases: ["@/lib/tv"]
 })
 ```
 

src/__tests__/transformer.test.ts

@@ -435,6 +435,44 @@ describe("Responsive Variants", () => {
     expect(result).toBe(expectedContent(sourceCode, transformedContent));
   });
 
+  test("should return a transformed content (with custom aliases)", () => {
+    const sourceCode = `
+      import {tv} from "@/lib/tv";
+
+      const button = tv(
+        {
+          variants: {
+            color: {
+              primary: "text-blue-50 bg-blue-600 rounded"
+            }
+          }
+        },
+        {
+          responsiveVariants: true
+        }
+      );
+    `;
+
+    const result = tvTransformer(sourceCode, defaultScreens, {aliases: ["@/lib/tv"]});
+
+    const transformedContent = [
+      {
+        color: {
+          primary: {
+            original: "text-blue-50 bg-blue-600 rounded",
+            sm: "sm:text-blue-50 sm:bg-blue-600 sm:rounded",
+            md: "md:text-blue-50 md:bg-blue-600 md:rounded",
+            lg: "lg:text-blue-50 lg:bg-blue-600 lg:rounded",
+            xl: "xl:text-blue-50 xl:bg-blue-600 xl:rounded",
+            "2xl": "2xl:text-blue-50 2xl:bg-blue-600 2xl:rounded",
+          },
+        },
+      },
+    ];
+
+    expect(result).toBe(expectedContent(sourceCode, transformedContent));
+  });
+
   test("should return tailwind config with built-in transformer (withTV content array)", () => {
     const expectedResult = {
       content: {

src/__tests__/tv.test.ts

@@ -350,7 +350,6 @@ describe("Tailwind Variants (TV) - Default", () => {
     expect(h1({bool: undefined})).toHaveClass(["text-3xl", "truncate"]);
   });
 
-
   test("should support false only variant -- default variant", () => {
     const h1 = tv({
       base: "text-3xl",

src/transformer.d.ts

@@ -9,8 +9,18 @@ export type WithTV = {
 
 export declare const withTV: WithTV;
 
+export type TVTransformerConfig = {
+  /**
+   * Optional array of custom aliases where Tailwind Variants might be resolved.
+   * This can be useful if you're using a custom path to import Tailwind Variants.
+   *
+   * @example ["@/lib/tv"]
+   */
+  aliases?: string[];
+};
+
 export type TVTransformer = {
-  (content: string, screens?: string[] | DefaultScreens[]): string;
+  (content: string, screens?: string[] | DefaultScreens[], config?: TVTransformerConfig): string;
 };
 
 export declare const tvTransformer: TVTransformer;

src/transformer.js

@@ -205,10 +205,16 @@ const transformContent = ({options, config}, screens) => {
   }
 };
 
-export const tvTransformer = (content, screens) => {
+export const tvTransformer = (content, screens, config) => {
   try {
-    // TODO: support package alias
-    if (!content.includes("tailwind-variants")) return content;
+    const defaultImportPaths = ["tailwind-variants"];
+
+    const importPaths = isArray(config?.aliases)
+      ? [...config.aliases, ...defaultImportPaths]
+      : defaultImportPaths;
+    const containsImportPath = importPaths.some((path) => content.includes(path));
+
+    if (!containsImportPath) return content;
 
     const tvs = getTVObjects(content);
 
@@ -250,7 +256,7 @@ const getExtensions = (files) => {
   return Array.from(new Set(extensions)).filter((ext) => ext !== "html");
 };
 
-export const withTV = (tailwindConfig) => {
+export const withTV = (tailwindConfig, transformerConfig) => {
   let config = resolveConfig(tailwindConfig);
 
   // generate types
@@ -261,7 +267,7 @@ export const withTV = (tailwindConfig) => {
 
   // with tailwind configured screens
   const transformer = (content) => {
-    return tvTransformer(content, Object.keys(config.theme?.screens ?? {}));
+    return tvTransformer(content, Object.keys(config.theme?.screens ?? {}), transformerConfig);
   };
 
   // custom transform