@byyuurin/ui 0.0.1 → 0.0.3

package/dist/internal/styler.mjs

@@ -1,235 +0,0 @@
-import { cv } from "@byyuurin/ui-kit";
-import { h, isCSSMathFn, parseColor, splitShorthand } from "@unocss/preset-mini/utils";
-import { mergeConfigs, presetUno, toArray } from "unocss";
-import presetUI, { cssVarsAll, cssVarsPrefix } from "../unocss-preset.mjs";
-const theme = mergeConfigs([
-  presetUno(),
-  presetUI()
-]).theme;
-export function createMergeRules() {
-  const GlobalKeywordsRE = /^inherit|initial|revert|revert-layer|unset$/;
-  return [
-    // _rules/align
-    [/^(?:vertical|align|v)-([-\w]+%?)$/, ([type]) => {
-      const valid = [
-        GlobalKeywordsRE,
-        /^(mid(?:dle)?|base(?:line)?|btm|bottom|top|start|bottom|end|text-(?:top|bottom)|sub|super)$/
-      ].some((r) => r.test(type));
-      return valid ? "vertical-align" : null;
-    }],
-    [/^text-?(?:align-?)?(.+)$/, ([type]) => {
-      const valid = [
-        GlobalKeywordsRE,
-        /^center|left|right|justify|start|end$/
-      ].some((r) => r.test(type));
-      return valid ? "text-align" : null;
-    }],
-    // _rules/behaviors
-    // _rules/border
-    [/^(?:border-|b-)(.+)$/, ([type]) => {
-      let result = "border";
-      [
-        /^([xyrltbse]|block|inline|[bi][se])(?:-(.+))?$/
-      ].some((r) => {
-        const matched = type.match(r);
-        if (matched) {
-          const [_, type2, color = ""] = matched;
-          const parsed2 = parseColor(color, theme);
-          result = parsed2?.color ? `border-${type2}-color` : `border-${type2}`;
-          return true;
-        }
-        return false;
-      });
-      const parsed = parseColor(type, theme);
-      return parsed?.color ? "border-color" : result;
-    }],
-    [/^(?:border-|b-)?(?:rounded|rd)(.+)$/, ([type]) => {
-      let result = "border-radius";
-      [
-        /^([xyrltbse]|block|inline|[bi][se])(?:-(.+))?$/
-      ].some((r) => {
-        const matched = type.match(r);
-        if (matched) {
-          result = `border-radius-${matched[1]}`;
-          return true;
-        }
-        return false;
-      });
-      return result;
-    }],
-    // _rules/color
-    [/^op(?:acity)?-?(.+)$/, () => `opacity`],
-    [/^bg-(.+)$/, ([type]) => {
-      if (/^\[url\(.+\)\]$/.test(type))
-        return "image";
-      if (/^\[image:.+\]$/.test(type))
-        return "image";
-      if (/^\[(?:linear|conic|radial)-gradient\(.+\)\]$/.test(type))
-        return "image";
-      if (/^\[(?:length|size):.+\]$/.test(type))
-        return "size";
-      if (/^\[position:.+\]$/.test(type))
-        return "position";
-      if (/^op(?:acity)?-?(.+)$/.test(type))
-        return "opacity";
-      const parsed = parseColor(type, theme);
-      return parsed?.color ? "color" : null;
-    }, { scope: "bg" }],
-    // _rules/container
-    [/^@container(?:\/(\w+))?(?:-(normal))?$/, () => "container"],
-    // _rules/decoration
-    // _rules/default
-    // _rules/flex
-    // [/^$/, () => ''],
-    // _rules/gap
-    [
-      /^(?:flex-|grid-)?(?:gap-?()|gap-([xy]-?|col-?|row-?))(.+)$/,
-      ([direction]) => {
-        if (direction === "y" || direction === "row")
-          return "gap-row";
-        if (direction === "x" || direction === "col")
-          return "gap-column";
-        return "gap";
-      }
-    ],
-    // _rules/grid
-    // _rules/layout
-    // _rules/position
-    [/^(?:position-|pos-)?(relative|absolute|fixed|sticky)$/, () => "position"],
-    [/^(?:position-|pos-)([-\w]+)$/, ([type]) => GlobalKeywordsRE.test(type) ? "position" : null],
-    [/^(?:position-|pos-)?(static)$/, () => "position"],
-    // _rules/question-mark
-    // _rules/ring
-    // _rules/shadow
-    // _rules/size
-    // _rules/spacing
-    [/^p-?([xy])(?:-?(.+))?$/, ([type]) => `padding-${type}`],
-    [/^p-?([rltbse])(?:-?(.+))?$/, ([type]) => `padding-${type}`],
-    [/^p-(block|inline)(?:-(.+))?$/, ([type]) => `padding-${type}`],
-    [/^p-?([bi][se])(?:-?(.+))?$/, ([type]) => `padding-${type}`],
-    // [/^pa?()-?(.+)$/, () => 'padding'],
-    // [/^p-?xy()()$/, () => 'padding'],
-    [/^m-?([xy])(?:-?(.+))?$/, ([type]) => `margin-${type}`],
-    [/^m-?([rltbse])(?:-?(.+))?$/, ([type]) => `margin-${type}`],
-    [/^m-(block|inline)(?:-(.+))?$/, ([type]) => `margin-${type}`],
-    [/^m-?([bi][se])(?:-?(.+))?$/, ([type]) => `margin-${type}`],
-    // [/^ma?()-?(.+)$/, () => 'margin'],
-    // [/^m-?xy()()$/, () => 'margin'],
-    // _rules/static
-    [
-      /^(?:display-(.+)|inline|block|inline-block|contents|flow-root|list-item|hidden)$/,
-      ([type]) => {
-        if (!type || GlobalKeywordsRE.test(type))
-          return "display";
-        return null;
-      }
-    ],
-    [
-      /^(?:visible|invisible|backface-(.+))$/,
-      ([type]) => {
-        if (!type || GlobalKeywordsRE.test(type) || /^(?:visible|hidden)$/.test(type))
-          return "visibility";
-        return null;
-      }
-    ],
-    [/^content-(.+)$/, () => "content"],
-    // _rules/svg
-    // _rules/transform
-    [
-      /^(?:transform-)?(origin|perspect(?:ive)?(?:-origin)?|(?:translate|rotate|skew|scale)(?:-[xyz])?)-(.+)$/,
-      ([type]) => type
-    ],
-    [
-      /^(?:transform-)?preserve-(?:3d|flat)$/,
-      () => "preserve"
-    ],
-    [
-      /^(?:transform)(?:-(.+))?$/,
-      ([type]) => {
-        if (!type || type === "none" || GlobalKeywordsRE.test(type))
-          return "transform";
-        return null;
-      }
-    ],
-    // _rules/transition
-    [/^(?:transition-)?(?:(duration|delay|ease|property)-)(.+)$/, ([type]) => type],
-    [/^transition(?:-(.+))$/, ([type]) => {
-      if (!type || type === "none" || GlobalKeywordsRE.test(type))
-        return "transition";
-      if (/^discrete|normal$/.test(type))
-        return "transition-behavior";
-      return null;
-    }],
-    // _rules/typography
-    [
-      /^text-(.+)$/,
-      ([s = "base"]) => {
-        const returnValue = "font-size";
-        const split = splitShorthand(s, "length");
-        if (!split)
-          return null;
-        const [size] = split;
-        const sizePairs = toArray(theme.fontSize?.[size]);
-        if (sizePairs?.[0])
-          return returnValue;
-        const fontSize = h.bracketOfLength.rem(size);
-        if (fontSize)
-          return returnValue;
-        return h.bracketOfLength.rem(s) ? returnValue : null;
-      }
-    ],
-    [
-      /^(?:text|font)-size-(.+)$/,
-      ([s]) => {
-        const themed = toArray(theme.fontSize?.[s]);
-        const size = themed?.[0] ?? h.bracket.cssvar.global.rem(s);
-        return size == null ? null : "font-size";
-      }
-    ],
-    [
-      /^text-(?:color-)?(.+)$/,
-      ([colorOrSize]) => {
-        if (isCSSMathFn(h.bracket(colorOrSize)))
-          return "font-size";
-        const parsed = parseColor(colorOrSize, theme);
-        return parsed?.color ? "color" : null;
-      }
-    ],
-    [
-      /^(?:color|c)-(.+)$/,
-      ([color]) => {
-        const parsed = parseColor(color, theme);
-        return parsed?.color ? "color" : null;
-      }
-    ],
-    // _rules/variables
-    [
-      /^\[(.*)\]$/,
-      ([body]) => {
-        if (!body.includes(":"))
-          return null;
-        const [prop] = body.split(":");
-        return prop;
-      },
-      { scope: "variables" }
-    ],
-    // others
-    [
-      new RegExp(`^${cssVarsPrefix}-((?:${cssVarsAll.join("|")})-)?(.+)$`),
-      ([type = "base", color]) => {
-        const parsed = parseColor(color, theme);
-        return parsed?.color ? type : null;
-      },
-      { scope: cssVarsPrefix }
-    ]
-  ];
-}
-export function prepareStyler(rules = []) {
-  const createVariants = cv(rules);
-  function createStyler(theme2) {
-    const ui = createVariants(theme2);
-    const styler = (props) => ui(props);
-    return styler;
-  }
-  return { createStyler };
-}

package/dist/internal/styler.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/internal/styler.test.mjs

@@ -1,10 +0,0 @@
-import { cr } from "@byyuurin/ui-kit";
-import { describe, expect, it } from "vitest";
-import { mergeRules } from "../composables/useTheme.mjs";
-describe("check style merge", () => {
-  const merge = cr(mergeRules, { debug: true });
-  it("should...", () => {
-    const result = merge("grid gap-10 grid-cols-10 scale-1 translate-y-full");
-    expect(result).toMatchInlineSnapshot(`"grid gap grid-cols-10 scale translate-y"`);
-  });
-});

package/dist/utils/unocss.d.ts

@@ -1,3 +0,0 @@
-import type { CRRule } from '@byyuurin/ui-kit';
-import type { ConfigBase } from 'unocss';
-export declare function transformUnoRules<Theme extends object = object>(config?: ConfigBase<Theme>): CRRule[];

package/dist/utils/unocss.mjs

@@ -1,50 +0,0 @@
-export function transformUnoRules(config = {}) {
-  const { rules = [], theme = {} } = config;
-  const mergeRules = [];
-  const wrap = (value, skip = false) => skip ? value : `[${value}]`;
-  const resolveCSSEntries = (entries, skipWrap = false) => () => wrap(
-    entries.flatMap((value) => Object.keys(value)).join(","),
-    skipWrap
-  );
-  const resolveCSSObject = (object, skipWrap = false) => () => {
-    if (JSON.stringify(object) === "{}")
-      return null;
-    return wrap(
-      Object.keys(object).join(","),
-      skipWrap
-    );
-  };
-  for (const rule of rules) {
-    const [maybeString, maybeResult] = rule;
-    const ruleRE = typeof maybeString === "string" ? new RegExp(`^${maybeString}$`) : maybeString;
-    if (Array.isArray(maybeResult)) {
-      mergeRules.push([ruleRE, resolveCSSEntries(maybeResult)]);
-      continue;
-    }
-    if (typeof maybeResult === "object") {
-      mergeRules.push([ruleRE, resolveCSSObject(maybeResult)]);
-      continue;
-    }
-    const matcher = (matches, ctx) => {
-      try {
-        const result = maybeResult([ctx.input, ...matches], {
-          theme,
-          // @ts-expect-error pass
-          generator: { config: {} }
-        });
-        if (typeof result === "function")
-          return null;
-        if (Array.isArray(result)) {
-          return wrap(result.map((item) => Array.isArray(item) ? item[0] : resolveCSSObject(item, false)).join(","));
-        }
-        if (typeof result === "object")
-          return resolveCSSObject(result)();
-      } catch (e) {
-        console.warn(`[Fail Rule]`, ruleRE, e.message);
-      }
-      return null;
-    };
-    mergeRules.push([ruleRE, matcher]);
-  }
-  return mergeRules;
-}