refactor(utils): move extract-theme to a separate package

maiieul · maiieul · commit 19a637d8478a · 2025-03-08T20:28:39.000+01:00
diff --git a/apps/website/src/components/copy-css-config/copy-css-config.tsx b/apps/website/src/components/copy-css-config/copy-css-config.tsx
@@ -1,7 +1,7 @@
 import { component$, useSignal } from '@builder.io/qwik';
 import { Modal } from '@qwik-ui/headless';
 import { Button } from '~/components/ui';
-import { extractThemeCSS } from '@qwik-ui/utils';
+import { extractThemeCSS } from '@qwik-ui/extract-theme';
 import { LuX } from '@qwikest/icons/lucide';
 import { useTheme } from '@qwik-ui/themes';
 import globalCSS from '~/global.css?raw';
diff --git a/apps/website/src/components/make-it-yours/make-it-yours.tsx b/apps/website/src/components/make-it-yours/make-it-yours.tsx
@@ -7,8 +7,8 @@ import {
   ThemeModes,
   ThemePrimaryColors,
   ThemeStyles,
-  cn,
-} from '@qwik-ui/utils';
+} from '@qwik-ui/extract-theme';
+import { cn } from '@qwik-ui/utils';
 import { LuSlidersHorizontal, LuX } from '@qwikest/icons/lucide';
 import { useTheme } from '@qwik-ui/themes';
 
diff --git a/apps/website/src/root.tsx b/apps/website/src/root.tsx
@@ -15,7 +15,7 @@ import {
   ThemeModes,
   ThemePrimaryColors,
   ThemeStyles,
-} from '@qwik-ui/utils';
+} from '@qwik-ui/extract-theme';
 import { ModulePreload } from './components/module-preload/module-preload';
 
 export default component$(() => {
diff --git a/packages/cli/bin/index.ts b/packages/cli/bin/index.ts
@@ -27,7 +27,7 @@ import {
   ThemePrimaryColors,
   ThemeStyle,
   ThemeStyles,
-} from '@qwik-ui/utils';
+} from '@qwik-ui/extract-theme';
 import { bgRgb, bold, cyan, green, red } from 'ansis';
 import { execSync } from 'child_process';
 import { existsSync, readFileSync, writeFileSync } from 'fs';
diff --git a/packages/cli/src/generators/setup-tailwind/schema.d.ts b/packages/cli/src/generators/setup-tailwind/schema.d.ts
@@ -1,4 +1,4 @@
-import type { ThemeConfig } from '@qwik-ui/utils';
+import type { ThemeConfig } from '@qwik-ui/extract-theme';
 
 export interface SetupTailwindGeneratorSchema extends ThemeConfig {
   projectRoot?: string;
diff --git a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
@@ -1,5 +1,9 @@
 import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
-import { ThemeBorderRadiuses, ThemePrimaryColors, ThemeStyles } from '@qwik-ui/utils';
+import {
+  ThemeBorderRadiuses,
+  ThemePrimaryColors,
+  ThemeStyles,
+} from '@qwik-ui/extract-theme';
 import { SetupTailwindGeneratorSchema } from './schema';
 import { setupTailwindGenerator } from './setup-tailwind-generator';
 
diff --git a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.ts b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.ts
@@ -7,7 +7,7 @@ import {
   extractBetweenComments,
   extractThemeCSS,
   type ThemeConfig,
-} from '@qwik-ui/utils';
+} from '@qwik-ui/extract-theme';
 import { readFileSync } from 'fs';
 import { join } from 'path';
 import { getKitRoot } from '../../_shared/get-kit-root';
diff --git a/packages/extract-theme/.eslintrc.json b/packages/extract-theme/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}
diff --git a/packages/extract-theme/CHANGELOG.md b/packages/extract-theme/CHANGELOG.md
@@ -0,0 +1,42 @@
+# Changelog
+
+## 0.3.1
+
+### Patch Changes
+
+- ✨ new inline component utilities (by [@thejackshelton](https://github.com/thejackshelton) in [#937](https://github.com/qwikifiers/qwik-ui/pull/937))
+
+## 0.3.0
+
+### Minor Changes
+
+- Changed enums to const maps in utils (by [@shairez](https://github.com/shairez) in [#914](https://github.com/qwikifiers/qwik-ui/pull/914))
+
+## 0.2.1
+
+### Patch Changes
+
+- ✨ added `extractThemeCSS` (by [@shairez](https://github.com/shairez) in [#604](https://github.com/qwikifiers/qwik-ui/pull/604))
+
+## 0.2.0
+
+### Minor Changes
+
+- Removed `useOrdinal` (by [@shairez](https://github.com/shairez) in [`4043d29`](https://github.com/qwikifiers/qwik-ui/commit/4043d29dcc39b03f16c79d659da592af3fbeafeb))
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## [0.1.1](https://github.com/qwikifiers/qwik-ui/compare/utils-0.1.0...utils-0.1.1) (2024-01-09)
+
+# [0.1.0](https://github.com/qwikifiers/qwik-ui/compare/utils-0.0.3...utils-0.1.0) (2023-12-16)
+
+### Bug Fixes
+
+- **docs:** add install / related docs / merge with main ([bb1b62c](https://github.com/qwikifiers/qwik-ui/commit/bb1b62cd87d376858fd706e9b5344603be87127c))
+- **everything:** fix 1.3 craziness ([0b20d97](https://github.com/qwikifiers/qwik-ui/commit/0b20d97af41f75bc7e1215391fd1c202ee8a9366))
+
+## [0.0.3](https://github.com/qwikifiers/qwik-ui/compare/utils-0.0.2...utils-0.0.3) (2023-12-01)
+
+## [0.0.2](https://github.com/qwikifiers/qwik-ui/compare/utils-0.0.1...utils-0.0.2) (2023-12-01)
+
+## 0.0.1 (2023-11-30)
diff --git a/packages/extract-theme/LICENSE b/packages/extract-theme/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 HiRez.io, Qwikifiers
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/extract-theme/README.md b/packages/extract-theme/README.md
@@ -0,0 +1,20 @@
+# Qwik UI extract-theme
+
+## `stringifyClassList`
+
+A function that takes a Qwik class list and returns a string.
+Good for cases you are working with other libraries that require a string as an input.
+
+## `cva`
+
+This is a version of the original code from [cva](https://cva.style/) but optimized for Qwik apps.
+
+Thanks to [Joe Bell](https://twitter.com/joebell_) for creating the original library.
+
+## `tcva`
+
+CVA with Tailwind merge built in.
+
+# License
+
+MIT
diff --git a/packages/extract-theme/package.json b/packages/extract-theme/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "@qwik-ui/extract-theme",
+  "version": "0.3.1",
+  "description": "Qwik UI extract-theme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/qwikifiers/qwik-ui",
+    "directory": "packages/extract-theme"
+  },
+  "main": "./index.qwik.cjs",
+  "qwik": "./index.qwik.mjs",
+  "module": "./index.qwik.mjs",
+  "types": "./index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.qwik.mjs",
+      "require": "./index.qwik.cjs"
+    }
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "private": false,
+  "dependencies": {
+    "tailwind-merge": "^1.14.0",
+    "clsx": "^2.0.0",
+    "qwik-themes": "^0.2.0"
+  }
+}
diff --git a/packages/extract-theme/project.json b/packages/extract-theme/project.json
@@ -0,0 +1,61 @@
+{
+  "name": "extract-theme",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/extract-theme/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/packages/extract-theme",
+        "configFile": "packages/extract-theme/vite.config.ts",
+        "mode": "lib"
+      },
+      "configurations": {
+        "development": {},
+        "production": {}
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["packages/extract-theme/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "e2e": {
+      "executor": "@nx/playwright:playwright",
+      "outputs": ["{workspaceRoot}/dist/.playwright/packages/extract-theme"],
+      "options": {
+        "config": "packages/extract-theme/playwright.config.ts",
+        "project": ["logic"]
+      }
+    },
+    "setup-chrome-108": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "setup.chrome.108"
+      }
+    },
+    "e2e-chrome-108": {
+      "executor": "@nx/playwright:playwright",
+      "outputs": ["{workspaceRoot}/dist/.playwright/packages/extract-theme"],
+      "dependsOn": ["setup-chrome-108"],
+      "options": {
+        "config": "packages/extract-theme/playwright.config.ts",
+        "project": ["popover-chrome-108"]
+      }
+    },
+    "visual-test": {
+      "executor": "@nx/playwright:playwright",
+      "outputs": ["{workspaceRoot}/dist/.playwright/packages/extract-theme"],
+      "options": {
+        "config": "packages/extract-theme/playwright.config.ts",
+        "project": ["visual"]
+      }
+    }
+  },
+  "tags": []
+}
diff --git a/packages/extract-theme/src/extract-between-comments.ts b/packages/extract-theme/src/extract-between-comments.ts
diff --git a/packages/extract-theme/src/extract-theme-css.spec.ts b/packages/extract-theme/src/extract-theme-css.spec.ts
diff --git a/packages/extract-theme/src/extract-theme-css.ts b/packages/extract-theme/src/extract-theme-css.ts
diff --git a/packages/extract-theme/src/index.ts b/packages/extract-theme/src/index.ts
@@ -0,0 +1,9 @@
+export { extractBetweenComments } from './extract-between-comments';
+export { extractThemeCSS } from './extract-theme-css';
+export { ThemeBaseColors, type ThemeBaseColor } from './theme-base-colors';
+export { ThemeBorderRadiuses, type ThemeBorderRadius } from './theme-border-radiuses';
+export { type ThemeConfig } from './theme-config.type';
+export { ThemeFonts, type ThemeFont } from './theme-fonts';
+export { ThemeModes, type ThemeMode } from './theme-modes';
+export { ThemePrimaryColors, type ThemePrimaryColor } from './theme-primary-colors';
+export { ThemeStyles, type ThemeStyle } from './theme-styles';
diff --git a/packages/extract-theme/src/root.tsx b/packages/extract-theme/src/root.tsx
@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export default () => {};
+
+// THIS FILE IS ONLY HERE TO SATISFY QWIK BUILD
diff --git a/packages/extract-theme/src/theme-base-colors.ts b/packages/extract-theme/src/theme-base-colors.ts
@@ -1,4 +1,4 @@
-import { ObjectValues } from '../type-utils';
+import { ObjectValues } from './type-utils';
 
 export const ThemeBaseColors = {
   SLATE: 'base-slate',
diff --git a/packages/extract-theme/src/theme-border-radiuses.ts b/packages/extract-theme/src/theme-border-radiuses.ts
@@ -1,4 +1,4 @@
-import { ObjectValues } from '../type-utils';
+import { ObjectValues } from './type-utils';
 
 export const ThemeBorderRadiuses = {
   'BORDER-RADIUS-0': 'border-radius-0',
diff --git a/packages/extract-theme/src/theme-config.type.ts b/packages/extract-theme/src/theme-config.type.ts
diff --git a/packages/extract-theme/src/theme-fonts.ts b/packages/extract-theme/src/theme-fonts.ts
@@ -1,4 +1,4 @@
-import { ObjectValues } from '../type-utils';
+import { ObjectValues } from './type-utils';
 
 export const ThemeFonts = {
   MONO: 'font-mono',
diff --git a/packages/extract-theme/src/theme-modes.ts b/packages/extract-theme/src/theme-modes.ts
@@ -1,4 +1,4 @@
-import { ObjectValues } from '../type-utils';
+import { ObjectValues } from './type-utils';
 
 export const ThemeModes = {
   LIGHT: 'light',
diff --git a/packages/extract-theme/src/theme-primary-colors.ts b/packages/extract-theme/src/theme-primary-colors.ts
@@ -1,4 +1,4 @@
-import { ObjectValues } from '../type-utils';
+import { ObjectValues } from './type-utils';
 
 export const ThemePrimaryColors = {
   SLATE100: 'primary-slate-100',
diff --git a/packages/extract-theme/src/theme-styles.ts b/packages/extract-theme/src/theme-styles.ts
@@ -1,4 +1,4 @@
-import { ObjectValues } from '../type-utils';
+import { ObjectValues } from './type-utils';
 
 export const ThemeStyles = {
   SIMPLE: 'simple',
diff --git a/packages/extract-theme/src/type-utils.ts b/packages/extract-theme/src/type-utils.ts
@@ -0,0 +1 @@
+export type ObjectValues<T> = T[keyof T];
diff --git a/packages/extract-theme/tsconfig.json b/packages/extract-theme/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ES2022",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "types": ["vitest"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
diff --git a/packages/extract-theme/tsconfig.lib.json b/packages/extract-theme/tsconfig.lib.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"]
+}
diff --git a/packages/extract-theme/tsconfig.spec.json b/packages/extract-theme/tsconfig.spec.json
@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["vitest/globals", "vitest/importMeta", "vite/client", "node", "vitest"]
+  },
+  "include": [
+    "vite.config.ts",
+    "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"
+  ]
+}
diff --git a/packages/extract-theme/vite.config.ts b/packages/extract-theme/vite.config.ts
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tsconfig.base.json b/tsconfig.base.json

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import type { ThemeConfig } from '@qwik-ui/utils';`
	`1`	`+import type { ThemeConfig } from '@qwik-ui/extract-theme';`
`2`	`2`
`3`	`3`	`export interface SetupTailwindGeneratorSchema extends ThemeConfig {`
`4`	`4`	`projectRoot?: string;`