refactor!: simpliy reset css (#59)

hi-ogawa · Sep 14, 2023 · 33db262 · 33db262
1 parent 0598458
commit 33db262
Show file tree

Hide file tree

Showing 21 changed files with 173 additions and 177 deletions.
diff --git a/.changeset/long-pets-remember.md b/.changeset/long-pets-remember.md
@@ -0,0 +1,5 @@
+---
+"@hiogawa/unocss-preset-antd": major
+---
+
+refactor!: simplify reset css etc...
diff --git a/packages/app-solid/uno.config.ts b/packages/app-solid/uno.config.ts
@@ -1,4 +1,4 @@
-import { antdPreset } from "@hiogawa/unocss-preset-antd";
+import { unocssPresetAntd } from "@hiogawa/unocss-preset-antd";
 import {
   dummyPreset,
   dummyPresetIconsRules,
@@ -20,7 +20,7 @@ export default defineConfig({
     },
   },
   presets: [
-    antdPreset(),
+    unocssPresetAntd(),
     filterColorPallete(presetUno()),
     presetIcons({
       extraProperties: {
@@ -31,6 +31,7 @@ export default defineConfig({
   ],
   rules: [...dummyPresetIconsRules(["ri"])],
   transformers: [
+    // @ts-ignore
     transformerTypescriptDsl(),
     transformerDirectives(),
     transformerVariantGroup(),

diff --git a/packages/app/index.html b/packages/app/index.html
@@ -7,25 +7,18 @@
       name="viewport"
       content="width=device-width, height=device-height, initial-scale=1.0"
     />
-    <!-- https://remixicon.com/icon/pencil-ruler-line -->
-    <!--
-      "data:image/svg+xml;base64," + btoa(`
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-        <style>
-          :root { color: black }
-          @media (prefers-color-scheme: dark) {
-            :root { color: white }
-          }
-        </style>
-        <path fill="currentColor" d="M5 8V20H9V8H5ZM3 7L7 2L11 7V22H3V7ZM19 16V14H16V12H19V10H17V8H19V6H15V20H19V18H17V16H19ZM14 4H20C20.5523 4 21 4.44772 21 5V21C21 21.5523 20.5523 22 20 22H14C13.4477 22 13 21.5523 13 21V5C13 4.44772 13.4477 4 14 4Z"></path>
-      </svg>
-      `)
-     -->
     <link
       rel="icon"
       type="image/svg+xml"
-      href="data:image/svg+xml;base64,CiAgICAgIDxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgICAgIDxzdHlsZT4KICAgICAgICAgIDpyb290IHsgY29sb3I6IGJsYWNrIH0KICAgICAgICAgIEBtZWRpYSAocHJlZmVycy1jb2xvci1zY2hlbWU6IGRhcmspIHsKICAgICAgICAgICAgOnJvb3QgeyBjb2xvcjogd2hpdGUgfQogICAgICAgICAgfQogICAgICAgIDwvc3R5bGU+CiAgICAgICAgPHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNNSA4VjIwSDlWOEg1Wk0zIDdMNyAyTDExIDdWMjJIM1Y3Wk0xOSAxNlYxNEgxNlYxMkgxOVYxMEgxN1Y4SDE5VjZIMTVWMjBIMTlWMThIMTdWMTZIMTlaTTE0IDRIMjBDMjAuNTUyMyA0IDIxIDQuNDQ3NzIgMjEgNVYyMUMyMSAyMS41NTIzIDIwLjU1MjMgMjIgMjAgMjJIMTRDMTMuNDQ3NyAyMiAxMyAyMS41NTIzIDEzIDIxVjVDMTMgNC40NDc3MiAxMy40NDc3IDQgMTQgNFoiPjwvcGF0aD4KICAgICAgPC9zdmc+CiAgICAgIA=="
+      href="https://iconify-dark-hiro18181.vercel.app/icon/ri/pencil-ruler-line"
     />
+    <style>
+      html,
+      body,
+      #root {
+        height: 100%;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>

diff --git a/packages/app/src/components/stories.tsx b/packages/app/src/components/stories.tsx
@@ -1,5 +1,5 @@
 import { Transition } from "@hiogawa/tiny-transition/dist/react";
-import { ANTD_VERS } from "@hiogawa/unocss-preset-antd";
+import { ANTD_VARS } from "@hiogawa/unocss-preset-antd";
 import { objectPickBy, range } from "@hiogawa/utils";
 import { Debug, toSetSetState, useDelay } from "@hiogawa/utils-react";
 import React from "react";
@@ -114,17 +114,17 @@ export function StoryInput() {
   );
 }
 
-const ANTD_COLORS = objectPickBy(ANTD_VERS, (_, k) => k.startsWith("color"));
+const ANTD_COLORS = objectPickBy(ANTD_VARS, (_, k) => k.startsWith("color"));
 const ANTD_COLORS_OPTIONS = Object.entries(ANTD_COLORS).map(
   ([label, value]) => ({ label, value })
 );
 
 export function StoryColor() {
   const form = useForm({
     defaultValues: {
-      color: ANTD_VERS.colorText,
-      backgroundColor: ANTD_VERS.colorBgContainer,
-      borderColor: ANTD_VERS.colorBorderSecondary,
+      color: ANTD_VARS.colorText,
+      backgroundColor: ANTD_VARS.colorBgContainer,
+      borderColor: ANTD_VARS.colorBorderSecondary,
     },
   });
 

diff --git a/packages/app/src/index.tsx b/packages/app/src/index.tsx
@@ -1,4 +1,4 @@
-import "./styles";
+import "virtual:uno.css";
 import { tinyassert } from "@hiogawa/utils";
 import React from "react";
 import { createRoot } from "react-dom/client";

diff --git a/packages/app/src/styles/index.css b/packages/app/src/styles/index.css
diff --git a/packages/app/src/styles/index.ts b/packages/app/src/styles/index.ts
diff --git a/packages/app/src/styles/tw/types.ts b/packages/app/src/styles/tw/types.ts
@@ -3996,9 +3996,4 @@ export type Shortcut =
   | `antd_link`
   | `antd_floating`
   | `antd_spin`
-  | `antd_reset`
-  | `antd_body`
-  | `antd_variables_compact`
-  | `antd_variables_dark`
-  | `antd_variables_default`
 ;
diff --git a/packages/app/uno.config.ts b/packages/app/uno.config.ts
@@ -1,4 +1,4 @@
-import { antdPreset } from "@hiogawa/unocss-preset-antd";
+import { unocssPresetAntd } from "@hiogawa/unocss-preset-antd";
 import {
   dummyPreset,
   dummyPresetIconsRules,
@@ -21,7 +21,7 @@ export default defineConfig({
     },
   },
   presets: [
-    antdPreset({ reset: false }), // no auto reset for dev reloading (see packages/app/src/styles/index.ts)
+    unocssPresetAntd(),
     filterColorPallete(presetUno()),
     presetIcons({
       extraProperties: {
@@ -36,6 +36,7 @@ export default defineConfig({
     ...dummyPresetIconsRules(["ri"]),
   ],
   transformers: [
+    // @ts-ignore peer dep version?
     transformerTypescriptDsl(),
     transformerDirectives(),
     transformerVariantGroup(),

diff --git a/packages/lib/index.html b/packages/lib/index.html
diff --git a/packages/lib/package.json b/packages/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hiogawa/unocss-preset-antd",
-  "version": "2.2.1-pre.3",
+  "version": "2.2.1-pre.5",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -10,15 +10,6 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs",
       "types": "./dist/index.d.ts"
-    },
-    "./dist/reset-dev": {
-      "import": "./dist/reset-dev.js",
-      "require": "./dist/reset-dev.cjs",
-      "types": "./dist/reset-dev.d.ts"
-    },
-    "./dist/reset.css": {
-      "import": "./dist/reset.css",
-      "require": "./dist/reset.css"
     }
   },
   "files": [
@@ -27,16 +18,15 @@
     "dist/reset.css"
   ],
   "license": "MIT",
+  "homepage": "https://github.com/hi-ogawa/unocss-preset-antd/packages/lib",
   "repository": {
     "type": "git",
     "url": "https://github.com/hi-ogawa/unocss-preset-antd",
     "directory": "packages/lib"
   },
   "scripts": {
     "dev": "tsup --watch",
-    "build": "run-s build:*",
-    "build:reset": "vite build && cp -f dist/vite/assets/index-*.css dist/reset.css",
-    "build:tsup": "tsup",
+    "build": "tsup",
     "build-theme": "pnpm -s ts ./src/build-theme.ts > ./src/theme.ts",
     "generate-tw": "unocss-typescript-dsl --outDir src/tw",
     "generate-tw-test": "unocss-typescript-dsl --stdout | diff src/tw/types.ts -",
@@ -46,16 +36,12 @@
   "devDependencies": {
     "@types/node": "^16.18.12",
     "@unocss/preset-uno": "^0.48.5",
+    "@unocss/reset": "^0.55.7",
     "antd": "^5.1.7",
     "esbuild": "^0.17.5",
     "esbuild-register": "^3.4.2"
   },
   "peerDependencies": {
-    "@unocss/preset-uno": "*",
     "unocss": "*"
-  },
-  "dependencies": {
-    "@unocss/reset": "^0.48.5",
-    "local-pkg": "^0.4.3"
   }
 }
diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts
@@ -1,20 +1,28 @@
-import fs from "node:fs";
-import path from "node:path";
-import { objectPickBy, typedBoolean } from "@hiogawa/utils";
-import type { Theme } from "@unocss/preset-uno";
+import { objectEntries, objectMapValues, objectPickBy } from "@hiogawa/utils";
 import type { Preset } from "unocss";
+import { name as packageName } from "../package.json";
 import { theme } from "./theme";
 import { tw } from "./tw";
 
-export function antdPreset(options?: { reset?: boolean }): Preset<Theme> {
+// typed css variable name helper
+//   ANTD_VARS.colorText => "var(--antd-colorText)"
+export const ANTD_VARS = objectMapValues(
+  theme.default,
+  (_v, k) => `var(--antd-${k})`
+);
+
+// re-export all theme constants
+export { theme as ANTD_THEME };
+
+export function unocssPresetAntd(): Preset {
   return {
-    name: "antd-preset",
+    name: packageName,
     prefix: "antd-",
     theme: {
       aria: {
         invalid: 'invalid="true"',
       },
-      colors: objectPickBy(VARS, (_, k) => k.startsWith("color")),
+      colors: objectPickBy(ANTD_VARS, (_, k) => k.startsWith("color")),
       animation: {
         // builtin spin is not "composable" and cannot be used with `translate-xxx` etc... (https://github.com/unocss/unocss/blob/339f2b2c9be41a5505e7f4509eea1cf00a87a8d1/packages/preset-wind/src/theme.ts#L19)
         keyframes: {
@@ -29,38 +37,6 @@ export function antdPreset(options?: { reset?: boolean }): Preset<Theme> {
       },
     },
     shortcuts: {
-      /**
-       * pass theme variables via shortcuts, which can be used e.g. by
-       *
-          :root {
-            --at-apply: "antd-variables-default";
-          }
-          .dark {
-            --at-apply: "antd-variables-dark";
-          }
-       *
-       */
-      "variables-default": [toCssVariables(theme.default)],
-      "variables-dark": [toCssVariables(theme.dark)],
-      "variables-compact": [toCssVariables(theme.compact)],
-
-      /**
-       * base style e.g.
-       *
-          body {
-            --at-apply: "antd-body";
-          }
-          *, ::before, ::after {
-            --at-apply: "antd-reset";
-          }
-       *
-       */
-      body: tw._(`font-[${VARS.fontFamily}]`).bg_colorBgContainer.text_colorText
-        .$,
-
-      // default border color e.g. for card, divider, etc...
-      reset: tw.border_colorBorderSecondary.$,
-
       /**
        * misc
        */
@@ -70,8 +46,9 @@ export function antdPreset(options?: { reset?: boolean }): Preset<Theme> {
         .border_t_current.aspect_square.$,
 
       // modal, popover, snackbar, etc...
-      floating: tw.bg_colorBgElevated._(`shadow-[${VARS.boxShadowSecondary}]`)
-        .$,
+      floating: tw.bg_colorBgElevated._(
+        `shadow-[${ANTD_VARS.boxShadowSecondary}]`
+      ).$,
 
       // a href
       link: tw.cursor_pointer.transition.text_colorLink.hover(
@@ -154,32 +131,78 @@ export function antdPreset(options?: { reset?: boolean }): Preset<Theme> {
       "menu-item": "antd-btn antd-btn-text",
       "menu-item-active": tw.important(
         tw.text_colorPrimary
-          ._(`bg-[${VARS.controlItemBgActive}]`)
+          ._(`bg-[${ANTD_VARS.controlItemBgActive}]`)
           .dark(tw.text_white.bg_colorPrimary)
       ).$,
     },
     preflights: [
-      (options?.reset ?? true) && {
-        getCSS: () =>
-          // TODO: esm?
-          fs.promises.readFile(path.join(__dirname, "reset.css"), "utf-8"),
+      {
+        getCSS: () => getResetCSS(),
       },
-    ].filter(typedBoolean),
+    ],
   };
 }
 
-// VARS.colorText => "var(--antd-colorText)"
-const VARS = Object.fromEntries(
-  Object.keys(theme.default).map((k) => [k, `var(--antd-${k})`])
-) as Record<keyof typeof theme.default, string>;
+//
+// default reset css
+//
+
+function inlintCssVars(
+  tokens: Record<string, unknown>,
+  indent: number
+): string {
+  const pre = " ".repeat(indent);
+  return objectEntries(tokens)
+    .map(([k, v]) => `${pre}--antd-${k}: ${String(v)};\n`)
+    .join("");
+}
+
+// defined by tsup.config.ts
+declare let __DEFINE_RAW__: {
+  "@unocss/reset/tailwind.css": string;
+};
 
-// export for `StoryColor` in packages/app/src/components/stories.tsx
-export { VARS as ANTD_VERS };
+function getResetCSS() {
+  // TODO: use "--un-default-border-color" for global border color https://github.com/unocss/unocss/commit/d0d35cb00ca2a3e9fdb9a1c3143ca32ba7b04df3
+  return `
+/********************************************************************/
+/* [START] @unocss/reset/tailwind.css bundled by unocss-preset-antd */
+/*******************************************************************/
+
+${__DEFINE_RAW__["@unocss/reset/tailwind.css"]}
+
+/******************************************************************/
+/* [END] @unocss/reset/tailwind.css bundled by unocss-preset-antd */
+/******************************************************************/
+
+/************************************/
+/* [START] unocss-preset-antd reset */
+/************************************/
+
+:root {
+  color-scheme: light;
+${inlintCssVars(theme.default, 2)}
+}
+
+.dark {
+  color-scheme: dark;
+${inlintCssVars(theme.dark, 2)}
+}
+
+body {
+  font-family: ${ANTD_VARS.fontFamily};
+  background-color: ${ANTD_VARS.colorBgContainer};
+  color: ${ANTD_VARS.colorText};
+}
+
+*,
+::before,
+::after {
+  border-color: ${ANTD_VARS.colorBorderSecondary};
+}
 
-function toCssVariables(
-  tokens: Record<string, unknown>
-): Record<string, string> {
-  return Object.fromEntries(
-    Object.entries(tokens).map(([k, v]) => ["--antd-" + k, String(v)])
-  );
+/**********************************/
+/* [END] unocss-preset-antd reset */
+/**********************************/
+`;
 }
diff --git a/packages/lib/src/reset-bundle.ts b/packages/lib/src/reset-bundle.ts