@udixio/tailwind 0.5.2 → 1.0.0

package/src/plugins-tailwind/state.ts

@@ -0,0 +1,75 @@
+import plugin, { PluginAPI } from 'tailwindcss/plugin';
+
+export type StateOptions = {
+  colorKeys: string[];
+};
+
+type Components = Record<string, Record<string, object>>;
+
+const defaultConfig = {
+  statePrefix: 'state',
+  disabledStyles: {
+    textOpacity: 0.38,
+    backgroundOpacity: 0.12,
+  },
+  transition: {
+    duration: 150,
+  },
+};
+
+export const state = plugin.withOptions(({ colorKeys }: StateOptions) => {
+  const resolved = {
+    ...defaultConfig,
+    disabledStyles: {
+      ...defaultConfig.disabledStyles,
+      ...{},
+    },
+    transition: {
+      ...defaultConfig.transition,
+      ...{},
+    },
+  };
+
+  return ({ addComponents }: PluginAPI) => {
+    const newComponents: Components = {};
+
+    for (const isGroup of [false, true]) {
+      const group = isGroup ? 'group-' : '';
+      for (const colorName of colorKeys) {
+        const className = `.${group}${resolved.statePrefix}-${colorName}`;
+        newComponents[className] = {
+          [`@apply ${group}hover:bg-${colorName}/[0.08]`]: {},
+          [`@apply ${group}active:bg-${colorName}/[0.12]`]: {},
+          [`@apply ${group}focus-visible:bg-${colorName}/[0.12]`]: {},
+          [`@apply transition-colors`]: {},
+          [`@apply duration-${resolved.transition.duration}`]: {},
+          [`@apply ${group}disabled:text-on-surface/[${resolved.disabledStyles.textOpacity}]`]:
+            {},
+          [`@apply ${group}disabled:bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]:
+            {},
+        };
+      }
+    }
+
+    for (const colorName of colorKeys) {
+      for (const stateName of ['hover', 'active', 'focus', 'disabled']) {
+        const className = `.${stateName}-${resolved.statePrefix}-${colorName}`;
+        if (stateName === 'disabled') {
+          newComponents[className] = {
+            [`@apply text-on-surface/[${resolved.disabledStyles.textOpacity}]`]:
+              {},
+            [`@apply bg-on-surface/[${resolved.disabledStyles.backgroundOpacity}]`]:
+              {},
+          };
+        } else {
+          const opacity = stateName === 'hover' ? 0.08 : 0.12;
+          newComponents[className] = {
+            [`@apply bg-${colorName}/[${opacity}]`]: {},
+          };
+        }
+      }
+    }
+
+    addComponents(newComponents);
+  };
+});

package/src/tailwind.plugin.ts

@@ -0,0 +1,130 @@
+import {
+  createOrUpdateFile,
+  findTailwindCssFile,
+  getFileContent,
+  replaceFileContent,
+} from './file';
+import path from 'path';
+import { FontPlugin, PluginAbstract, PluginImplAbstract } from '@udixio/theme';
+import { ConfigCss } from './main';
+
+interface TailwindPluginOptions {
+  // darkMode?: 'class' | 'media';
+  responsiveBreakPoints?: Record<string, number>;
+  styleFilePath?: string;
+  // subThemes?: Record<string, string>;
+}
+
+export class TailwindPlugin extends PluginAbstract<
+  TailwindImplPlugin,
+  TailwindPluginOptions
+> {
+  public dependencies = [FontPlugin];
+  public name = 'tailwind';
+  pluginClass = TailwindImplPlugin;
+}
+
+class TailwindImplPlugin extends PluginImplAbstract<TailwindPluginOptions> {
+  onInit() {
+    this.options.responsiveBreakPoints ??= {
+      lg: 1.125,
+    };
+  }
+
+  onLoad() {
+    const searchKeyword = "@import 'tailwindcss';";
+
+    const tailwindCssPath =
+      this.options.styleFilePath ??
+      findTailwindCssFile(process.cwd(), searchKeyword);
+    if (!tailwindCssPath) {
+      throw new Error('The style file containing tailwind was not found.');
+    }
+    const searchPattern = /@import ["']tailwindcss["'];/;
+    const replacement = `@import 'tailwindcss';\n@import "./udixio.css";`;
+
+    if (!getFileContent(tailwindCssPath, /@import\s+"\.\/udixio\.css";/)) {
+      replaceFileContent(tailwindCssPath, searchPattern, replacement);
+    }
+
+    const cssFilePath = path.dirname(tailwindCssPath);
+
+    const colors: Record<
+      string,
+      {
+        light: string;
+        dark: string;
+      }
+    > = {};
+
+    for (const isDark of [false, true]) {
+      this.api.themes.update({ isDark: isDark });
+      for (const [key, value] of this.api.colors.getColors().entries()) {
+        const newKey = key
+          .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2')
+          .toLowerCase();
+        colors[newKey] ??= { light: '', dark: '' };
+        colors[newKey][isDark ? 'dark' : 'light'] = value.getHex();
+      }
+    }
+
+    const { fontStyles, fontFamily } = this.api.plugins
+      .getPlugin(FontPlugin)
+      .getInstance()
+      .getFonts();
+
+    const configCss: ConfigCss = {
+      colorKeys: Object.keys(colors).join(', '),
+      fontStyles: Object.entries(fontStyles)
+        .map(([fontRole, fontStyle]) =>
+          Object.entries(fontStyle)
+            .map(
+              ([fontSize, fontStyle]) =>
+                `${fontRole}-${fontSize} ${Object.entries(fontStyle)
+                  .map(([name, value]) => `${name}[${value}]`)
+                  .join(' ')}`,
+            )
+            .join(', '),
+        )
+        .join(', '),
+      responsiveBreakPoints: Object.entries(
+        this.options.responsiveBreakPoints ?? {},
+      )
+        .map(([key, value]) => `${key} ${value}`)
+        .join(', '),
+    };
+
+    createOrUpdateFile(
+      path.join(cssFilePath, 'udixio.css'),
+      `
+@plugin "@udixio/tailwind" {
+  colorKeys: ${configCss.colorKeys};
+  fontStyles: ${configCss.fontStyles};
+  responsiveBreakPoints: ${configCss.responsiveBreakPoints};
+}
+@custom-variant dark (&:where(.dark, .dark *));
+@theme {
+  --color-*: initial;
+  ${Object.entries(colors)
+    .map(([key, value]) => `--color-${key}: ${value.light};`)
+    .join('\n  ')}
+}
+@layer theme {
+  .dark {
+  ${Object.entries(colors)
+    .map(([key, value]) => `--color-${key}: ${value.dark};`)
+    .join('\n  ')}
+  }
+}
+@theme {
+  ${Object.entries(fontFamily)
+    .map(
+      ([key, values]) =>
+        `--font-${key}: ${values.map((value) => `"${value}"`).join(', ')};`,
+    )
+    .join('\n  ')}
+}
+`,
+    );
+  }
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "../theme"
+    },
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,37 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "src",
+    "outDir": "dist",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
+    "emitDeclarationOnly": true,
+    "forceConsistentCasingInFileNames": true,
+    "types": [
+      "node",
+      "vite/client"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "references": [
+    {
+      "path": "../theme/tsconfig.lib.json"
+    }
+  ],
+  "exclude": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ]
+}

package/tsconfig.spec.json

@@ -0,0 +1,36 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/vitest",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ],
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,54 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/packages/tailwind',
+  plugins: [
+    dts({
+      entryRoot: 'src',
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+    }),
+  ],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: './dist',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    ssr: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: '@udixio/tailwind',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es' as const, 'cjs' as const],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['tailwindcss', '@udixio/theme'],
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'node',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: './test-output/vitest/coverage',
+      provider: 'v8' as const,
+    },
+  },
+}));

package/src/file.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"file.d.ts","sourceRoot":"","sources":["../../../../packages/tailwind/src/file.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,kBAAkB,GAAI,UAAU,MAAM,EAAE,SAAS,MAAM,KAAG,IAmBtE,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,UAAU,MAAM,EAChB,gBAAgB,MAAM,GAAG,MAAM,KAC9B,MAAM,GAAG,KAAK,GAAG,IA4CnB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,UAAU,MAAM,EAChB,eAAe,MAAM,GAAG,MAAM,EAC9B,aAAa,MAAM,KAClB,IAkBF,CAAC;AACF,eAAO,MAAM,mBAAmB,GAC9B,UAAU,MAAM,EAChB,eAAe,MAAM,KACpB,MAAM,GAAG,IAyBX,CAAC"}

package/src/index.d.ts

@@ -1,6 +0,0 @@
-import { createTheme } from './main';
-export * from './main';
-export * from './plugins-tailwind';
-export * from './tailwind.plugin';
-export default createTheme;
-//# sourceMappingURL=index.d.ts.map

package/src/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../packages/tailwind/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAErC,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,eAAe,WAAW,CAAC"}

package/src/main.d.ts

@@ -1,3 +0,0 @@
-import { default as plugin } from 'tailwindcss/plugin';
-export declare const createTheme: () => Promise<ReturnType<typeof plugin.withOptions>>;
-//# sourceMappingURL=main.d.ts.map

package/src/main.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../packages/tailwind/src/main.ts"],"names":[],"mappings":"AAEA,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC,eAAO,MAAM,WAAW,EAAE,MAAM,OAAO,CACrC,UAAU,CAAC,OAAO,MAAM,CAAC,WAAW,CAAC,CAKtC,CAAC"}

package/src/plugins-tailwind/font.d.ts

@@ -1,4 +0,0 @@
-import { FontRole, FontSize, FontStyle } from '@udixio/theme';
-import { default as plugin } from 'tailwindcss/plugin';
-export declare const font: (fontStyles: Record<FontRole, Record<FontSize, FontStyle>>, responsiveBreakPoints: Record<string, number>) => ReturnType<typeof plugin>;
-//# sourceMappingURL=font.d.ts.map

package/src/plugins-tailwind/font.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"font.d.ts","sourceRoot":"","sources":["../../../../../packages/tailwind/src/plugins-tailwind/font.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,MAAqB,MAAM,oBAAoB,CAAC;AAEvD,eAAO,MAAM,IAAI,EAAE,CACjB,UAAU,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,EACzD,qBAAqB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAC1C,UAAU,CAAC,OAAO,MAAM,CA2D5B,CAAC"}

package/src/plugins-tailwind/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/tailwind/src/plugins-tailwind/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}

package/src/plugins-tailwind/state.d.ts

@@ -1,3 +0,0 @@
-import { default as plugin } from 'tailwindcss/plugin';
-export declare const state: (colorKeys: string[]) => ReturnType<typeof plugin>;
-//# sourceMappingURL=state.d.ts.map

package/src/plugins-tailwind/state.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../../../../packages/tailwind/src/plugins-tailwind/state.ts"],"names":[],"mappings":"AACA,OAAO,MAAqB,MAAM,oBAAoB,CAAC;AAevD,eAAO,MAAM,KAAK,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,UAAU,CAAC,OAAO,MAAM,CAkB7D,CAAC"}

package/src/tailwind.plugin.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tailwind.plugin.d.ts","sourceRoot":"","sources":["../../../../packages/tailwind/src/tailwind.plugin.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAUxC,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAE/E,UAAU,qBAAqB;IAE7B,qBAAqB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;CAExB;AAED,qBAAa,cAAe,SAAQ,cAAc,CAChD,kBAAkB,EAClB,qBAAqB,CACtB;IACQ,YAAY,wBAAgB;IAC5B,IAAI,SAAc;IACzB,WAAW,4BAAsB;CAClC;AAED,cAAM,kBAAmB,SAAQ,kBAAkB,CAAC,qBAAqB,CAAC;IACxE,MAAM;IAMN,IAAI,IAAI,UAAU,CAAC,OAAO,MAAM,CAAC,WAAW,CAAC;CAwF9C"}