cssier 0.2.3 → 0.3.1

package/dist/cssier.js

@@ -1,171 +1,169 @@
-import { useAnimation as o, useCssProperty as i } from "./hooks/index.js";
-import { u as n } from "./useStylesheet-42306f27.mjs";
-import { A as s, Abbr as m, Address as F, Animate as d, AnimateTransform as u, Area as g, Article as S, Aside as c, Audio as T, B as D, Base as M, Bdi as b, Bdo as h, Blockquote as f, Body as C, Br as P, Button as y, Canvas as H, Caption as L, Circle as A, Cite as B, ClipPath as x, Code as I, Col as O, Colgroup as v, Data as k, Datalist as R, Dd as G, Defs as E, Del as N, Desc as U, Details as V, Dfn as j, Dialog as w, Div as q, Dl as K, Dt as Q, Ellipse as W, Em as z, Embed as J, FeBlend as X, FeColorMatrix as Y, FeComponentTransfer as Z, FeComposite as _, FeConvolveMatrix as $, FeDiffuseLighting as ee, FeDisplacementMap as te, FeDistantLight as ae, FeFlood as re, FeGaussianBlur as oe, FeImage as ie, FeMerge as le, FeMergeNode as ne, FeMorphology as pe, FeOffset as se, FePointLight as me, FeSpecularLighting as Fe, FeSpotLight as de, FeTile as ue, FeTurbulence as ge, Fieldset as Se, Figcaption as ce, Figure as Te, Filter as De, Footer as Me, ForeignObject as be, Form as he, G as fe, H1 as Ce, H2 as Pe, H3 as ye, H4 as He, H5 as Le, H6 as Ae, Head as Be, Header as xe, Hgroup as Ie, Hr as Oe, Html as ve, I as ke, Iframe as Re, Image as Ge, Img as Ee, Input as Ne, Ins as Ue, Kbd as Ve, Label as je, Legend as we, Li as qe, Line as Ke, LinearGradient as Qe, Link as We, Main as ze, Map as Je, Mark as Xe, Marker as Ye, Mask as Ze, Meta as _e, Metadata as $e, Meter as et, Mpath as tt, Nav as at, Noscript as rt, Object as ot, Ol as it, Optgroup as lt, Option as nt, Output as pt, P as st, Param as mt, Path as Ft, Pattern as dt, Picture as ut, Polygon as gt, Polyline as St, Pre as ct, Progress as Tt, Q as Dt, RadialGradient as Mt, Rect as bt, Rp as ht, Rt as ft, Ruby as Ct, S as Pt, Samp as yt, Script as Ht, Section as Lt, Select as At, Small as Bt, Source as xt, Span as It, Stop as Ot, Strong as vt, Style as kt, Sub as Rt, Summary as Gt, Sup as Et, Svg as Nt, Switch as Ut, Symbol as Vt, Table as jt, Tbody as wt, Td as qt, Template as Kt, Text as Qt, TextPath as Wt, Textarea as zt, Tfoot as Jt, Th as Xt, Thead as Yt, Time as Zt, Title as _t, Tr as $t, Tspan as ea, U as ta, Ul as aa, Use as ra, Var as oa, Video as ia, View as la, Wbr as na } from "./components/index.js";
-import "react";
-import "react/jsx-runtime";
+import { u as e, a as t } from "./useCssProperty-SssU__r7.mjs";
+import { u as o } from "./useStylesheet-CyPq1r4E.mjs";
+import { A as b, a as l, b as n, aG as p, aH as F, bt as u, c as d, d as m, bu as g, B as S, bv as c, e as T, f as D, g as h, h as M, bw as f, i as C, C as P, j as y, aI as H, k as L, aJ as A, l as B, bx as x, m as v, D as I, n as O, o as k, aK as G, p as R, aL as E, q as j, r as w, s as N, t as U, u as V, v as q, aM as z, E as K, by as Q, aN as W, aO as J, aP as X, aQ as Y, aR as Z, aS as _, aT as $, aU as aa, aV as sa, aW as ea, aX as ta, aY as ra, aZ as oa, a_ as ia, a$ as ba, b0 as la, b1 as na, b2 as pa, b3 as Fa, b4 as ua, F as da, w as ma, x as ga, b5 as Sa, y as ca, b6 as Ta, z as Da, b7 as ha, H as Ma, G as fa, I as Ca, J as Pa, K as ya, L as Ha, M as La, N as Aa, O as Ba, bz as xa, P as va, Q as Ia, R as Oa, b8 as ka, bA as Ga, bB as Ra, S as Ea, T as ja, U as wa, V as Na, W as Ua, b9 as Va, ba as qa, bC as za, X as Ka, Y as Qa, Z as Wa, bb as Ja, bc as Xa, bD as Ya, bd as Za, _ as _a, be as $a, $ as as, a0 as ss, a1 as es, a2 as ts, a3 as rs, a4 as os, a5 as is, a6 as bs, bE as ls, bf as ns, bg as ps, a7 as Fs, bh as us, bi as ds, a8 as ms, a9 as gs, aa as Ss, bj as cs, bk as Ts, ab as Ds, ac as hs, ad as Ms, ae as fs, af as Cs, ag as Ps, ah as ys, ai as Hs, aj as Ls, bF as As, ak as Bs, bl as xs, al as vs, am as Is, an as Os, ao as ks, ap as Gs, aF as Rs, bm as Es, bn as js, aq as ws, ar as Ns, as as Us, at as Vs, bo as qs, bp as zs, au as Ks, av as Qs, aw as Ws, ax as Js, ay as Xs, az as Ys, aA as Zs, bq as _s, aB as $s, aC as ae, br as se, aD as ee, aE as te, bs as re, bG as oe } from "./Wbr-CXRoFcRY.mjs";
 export {
-  s as A,
-  m as Abbr,
-  F as Address,
-  d as Animate,
-  u as AnimateTransform,
-  g as Area,
-  S as Article,
-  c as Aside,
-  T as Audio,
-  D as B,
-  M as Base,
-  b as Bdi,
-  h as Bdo,
-  f as Blockquote,
-  C as Body,
-  P as Br,
-  y as Button,
-  H as Canvas,
-  L as Caption,
-  A as Circle,
-  B as Cite,
-  x as ClipPath,
-  I as Code,
-  O as Col,
+  b as A,
+  l as Abbr,
+  n as Address,
+  p as Animate,
+  F as AnimateTransform,
+  u as Area,
+  d as Article,
+  m as Aside,
+  g as Audio,
+  S as B,
+  c as Base,
+  T as Bdi,
+  D as Bdo,
+  h as Blockquote,
+  M as Body,
+  f as Br,
+  C as Button,
+  P as Canvas,
+  y as Caption,
+  H as Circle,
+  L as Cite,
+  A as ClipPath,
+  B as Code,
+  x as Col,
   v as Colgroup,
-  k as Data,
-  R as Datalist,
-  G as Dd,
-  E as Defs,
-  N as Del,
-  U as Desc,
-  V as Details,
-  j as Dfn,
-  w as Dialog,
-  q as Div,
-  K as Dl,
-  Q as Dt,
-  W as Ellipse,
-  z as Em,
-  J as Embed,
-  X as FeBlend,
-  Y as FeColorMatrix,
-  Z as FeComponentTransfer,
-  _ as FeComposite,
-  $ as FeConvolveMatrix,
-  ee as FeDiffuseLighting,
-  te as FeDisplacementMap,
-  ae as FeDistantLight,
-  re as FeFlood,
-  oe as FeGaussianBlur,
-  ie as FeImage,
-  le as FeMerge,
-  ne as FeMergeNode,
-  pe as FeMorphology,
-  se as FeOffset,
-  me as FePointLight,
-  Fe as FeSpecularLighting,
-  de as FeSpotLight,
-  ue as FeTile,
-  ge as FeTurbulence,
-  Se as Fieldset,
-  ce as Figcaption,
-  Te as Figure,
-  De as Filter,
-  Me as Footer,
-  be as ForeignObject,
-  he as Form,
-  fe as G,
-  Ce as H1,
-  Pe as H2,
-  ye as H3,
-  He as H4,
-  Le as H5,
-  Ae as H6,
-  Be as Head,
-  xe as Header,
-  Ie as Hgroup,
-  Oe as Hr,
-  ve as Html,
-  ke as I,
-  Re as Iframe,
-  Ge as Image,
-  Ee as Img,
-  Ne as Input,
-  Ue as Ins,
-  Ve as Kbd,
-  je as Label,
-  we as Legend,
-  qe as Li,
-  Ke as Line,
-  Qe as LinearGradient,
-  We as Link,
-  ze as Main,
-  Je as Map,
-  Xe as Mark,
-  Ye as Marker,
-  Ze as Mask,
-  _e as Meta,
-  $e as Metadata,
-  et as Meter,
-  tt as Mpath,
-  at as Nav,
-  rt as Noscript,
-  ot as Object,
-  it as Ol,
-  lt as Optgroup,
-  nt as Option,
-  pt as Output,
-  st as P,
-  mt as Param,
-  Ft as Path,
-  dt as Pattern,
-  ut as Picture,
-  gt as Polygon,
-  St as Polyline,
-  ct as Pre,
-  Tt as Progress,
-  Dt as Q,
-  Mt as RadialGradient,
-  bt as Rect,
-  ht as Rp,
-  ft as Rt,
-  Ct as Ruby,
-  Pt as S,
-  yt as Samp,
-  Ht as Script,
-  Lt as Section,
-  At as Select,
-  Bt as Small,
-  xt as Source,
-  It as Span,
-  Ot as Stop,
-  vt as Strong,
-  kt as Style,
-  Rt as Sub,
-  Gt as Summary,
-  Et as Sup,
-  Nt as Svg,
-  Ut as Switch,
-  Vt as Symbol,
-  jt as Table,
-  wt as Tbody,
-  qt as Td,
-  Kt as Template,
-  Qt as Text,
-  Wt as TextPath,
-  zt as Textarea,
-  Jt as Tfoot,
-  Xt as Th,
-  Yt as Thead,
-  Zt as Time,
-  _t as Title,
-  $t as Tr,
-  ea as Tspan,
-  ta as U,
-  aa as Ul,
-  ra as Use,
-  oa as Var,
-  ia as Video,
-  la as View,
-  na as Wbr,
-  o as useAnimation,
-  i as useCssProperty,
-  n as useStylesheet
+  I as Data,
+  O as Datalist,
+  k as Dd,
+  G as Defs,
+  R as Del,
+  E as Desc,
+  j as Details,
+  w as Dfn,
+  N as Dialog,
+  U as Div,
+  V as Dl,
+  q as Dt,
+  z as Ellipse,
+  K as Em,
+  Q as Embed,
+  W as FeBlend,
+  J as FeColorMatrix,
+  X as FeComponentTransfer,
+  Y as FeComposite,
+  Z as FeConvolveMatrix,
+  _ as FeDiffuseLighting,
+  $ as FeDisplacementMap,
+  aa as FeDistantLight,
+  sa as FeFlood,
+  ea as FeGaussianBlur,
+  ta as FeImage,
+  ra as FeMerge,
+  oa as FeMergeNode,
+  ia as FeMorphology,
+  ba as FeOffset,
+  la as FePointLight,
+  na as FeSpecularLighting,
+  pa as FeSpotLight,
+  Fa as FeTile,
+  ua as FeTurbulence,
+  da as Fieldset,
+  ma as Figcaption,
+  ga as Figure,
+  Sa as Filter,
+  ca as Footer,
+  Ta as ForeignObject,
+  Da as Form,
+  ha as G,
+  Ma as H1,
+  fa as H2,
+  Ca as H3,
+  Pa as H4,
+  ya as H5,
+  Ha as H6,
+  La as Head,
+  Aa as Header,
+  Ba as Hgroup,
+  xa as Hr,
+  va as Html,
+  Ia as I,
+  Oa as Iframe,
+  ka as Image,
+  Ga as Img,
+  Ra as Input,
+  Ea as Ins,
+  ja as Kbd,
+  wa as Label,
+  Na as Legend,
+  Ua as Li,
+  Va as Line,
+  qa as LinearGradient,
+  za as Link,
+  Ka as Main,
+  Qa as Map,
+  Wa as Mark,
+  Ja as Marker,
+  Xa as Mask,
+  Ya as Meta,
+  Za as Metadata,
+  _a as Meter,
+  $a as Mpath,
+  as as Nav,
+  ss as Noscript,
+  es as Object,
+  ts as Ol,
+  rs as Optgroup,
+  os as Option,
+  is as Output,
+  bs as P,
+  ls as Param,
+  ns as Path,
+  ps as Pattern,
+  Fs as Picture,
+  us as Polygon,
+  ds as Polyline,
+  ms as Pre,
+  gs as Progress,
+  Ss as Q,
+  cs as RadialGradient,
+  Ts as Rect,
+  Ds as Rp,
+  hs as Rt,
+  Ms as Ruby,
+  fs as S,
+  Cs as Samp,
+  Ps as Script,
+  ys as Section,
+  Hs as Select,
+  Ls as Small,
+  As as Source,
+  Bs as Span,
+  xs as Stop,
+  vs as Strong,
+  Is as Style,
+  Os as Sub,
+  ks as Summary,
+  Gs as Sup,
+  Rs as Svg,
+  Es as Switch,
+  js as Symbol,
+  ws as Table,
+  Ns as Tbody,
+  Us as Td,
+  Vs as Template,
+  qs as Text,
+  zs as TextPath,
+  Ks as Textarea,
+  Qs as Tfoot,
+  Ws as Th,
+  Js as Thead,
+  Xs as Time,
+  Ys as Title,
+  Zs as Tr,
+  _s as Tspan,
+  $s as U,
+  ae as Ul,
+  se as Use,
+  ee as Var,
+  te as Video,
+  re as View,
+  oe as Wbr,
+  e as useAnimation,
+  t as useCssProperty,
+  o as useStylesheet
 };

package/dist/hooks/index.js

@@ -1,81 +1,7 @@
-import { g as $ } from "../useStylesheet-42306f27.mjs";
-import { u as V } from "../useStylesheet-42306f27.mjs";
-import { useState as s, useEffect as d } from "react";
-function v(t, e) {
-  if (!e) {
-    const y = document.head.querySelector(`style#${t}`);
-    return y && y.remove(), "";
-  }
-  let a = document.head.querySelector(`style#${t}`);
-  console.log(t), a || (a = document.createElement("style"), a.id = t, a.type = "text/css", document.head.appendChild(a));
-  let n = "";
-  n += `@keyframes ${e.name} {`, Object.entries(e.keyframes).forEach(([y, g]) => {
-    n += `${y} {
-`, n += Object.entries(g).map(([h, C]) => `${h.replace(/[A-Z]/g, (x) => `-${x.toLowerCase()}`)}: ${C}`).join(`; 
-`), n += `
-}
-`;
-  }), n += `}
-`, n += `.${t} {
-`;
-  const r = e.delay ?? "0s", u = e.direction ?? "normal", i = e.duration ?? "2s", c = e.fillMode ?? "none", l = e.iterationCount ?? "1", m = e.playState ?? "running", f = e.timingFunction ?? "ease";
-  n += `    animation-name: ${e.name};
-`, e.delay && (n += `    animation-delay: ${r};
-`), e.direction && (n += `    animation-direction: ${u};
-`), e.duration && (n += `    animation-duration: ${i};
-`), e.fillMode && (n += `    animation-fill-mode: ${c};
-`), e.iterationCount && (n += `    animation-iteration-count: ${l};
-`), e.playState && (n += `    animation-play-state: ${m};
-`), e.timingFunction && (n += `    animation-timing-function: ${f};
-`), n += `}
-`, a.textContent = n;
-  const S = `${e.name} ${i} ${f} ${r} ${l} ${u} ${c} ${m}`;
-  return [n, S];
-}
-function p(t) {
-  const e = Array.isArray(t.syntax) ? t.syntax.join(", ") : t.syntax;
-  return `@property ${t.name} {
-    syntax: ${e};
-    inherits: ${t.inherits};
-    initial-value: ${t.initialValue};
-}
-    
-body{
-    ${t.name}: ${t.initialValue};
-}
-`;
-}
-function P(t, e) {
-  if (!e) {
-    const r = document.head.querySelector(`style#${t}`);
-    return r && r.remove(), "";
-  }
-  let a = document.head.querySelector(`style#${t}`);
-  a || (a = document.createElement("style"), a.id = t, a.type = "text/css", document.head.appendChild(a));
-  let n = p(e);
-  return a.textContent = n, n;
-}
-function k(t, e) {
-  return t == null && e == null ? !0 : !(t == null && typeof e == "object" || e == null && typeof t == "object" || Object.keys(t).length !== Object.keys(e).length || (t == null ? void 0 : t.duration) !== (e == null ? void 0 : e.duration) || (t == null ? void 0 : t.delay) !== (e == null ? void 0 : e.delay) || (t == null ? void 0 : t.direction) !== (e == null ? void 0 : e.direction) || (t == null ? void 0 : t.fillMode) !== (e == null ? void 0 : e.fillMode) || (t == null ? void 0 : t.iterationCount) !== (e == null ? void 0 : e.iterationCount) || (t == null ? void 0 : t.name) !== (e == null ? void 0 : e.name) || (t == null ? void 0 : t.playState) !== (e == null ? void 0 : e.playState) || (t == null ? void 0 : t.timingFunction) !== (e == null ? void 0 : e.timingFunction) || JSON.stringify(t == null ? void 0 : t.keyframes) !== JSON.stringify(e == null ? void 0 : e.keyframes));
-}
-function A(t, e) {
-  const [a] = s(() => e ?? $()), [n, r] = s({}), [u, i] = s(""), [c, l] = s("");
-  return d(() => {
-    if (!k(n, t)) {
-      r(t);
-      const [m, f] = v(a, t);
-      i(m), l(f);
-    }
-  }, [a, t, n, i]), [a, c, u];
-}
-function F(t, e) {
-  const [a] = s(() => e ?? $()), [n, r] = s("");
-  return d(() => {
-    r(P(a, t));
-  }, [a, r, t]), [a, `var(${t.name})`, n];
-}
+import { u as o } from "../useStylesheet-CyPq1r4E.mjs";
+import { u as t, a } from "../useCssProperty-SssU__r7.mjs";
 export {
-  A as useAnimation,
-  F as useCssProperty,
-  V as useStylesheet
+  t as useAnimation,
+  a as useCssProperty,
+  o as useStylesheet
 };

package/dist/hooks/useCssProperty.d.ts

@@ -1,2 +1,2 @@
 import type { ICssProperty } from '../types';
-export default function useStylesheet(property: ICssProperty, propertyId?: string): string[];
+export default function useCssProperty(property: ICssProperty, propertyId?: string): string[];

package/dist/templates/ChildlessComponentTemplate.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from 'react';
-import type { PseudoCss } from '../lib/types';
+import type { PseudoCss } from '../types';
 export default function COMPONENT_NAME(props: ComponentProps<'TAG'> & {
     pseudo?: PseudoCss;
     pseudoId?: string;

package/dist/templates/ComponentTemplate.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from 'react';
-import type { PseudoCss } from '../lib/types';
+import type { PseudoCss } from '../types';
 export default function COMPONENT_NAME(props: ComponentProps<'TAG'> & {
     pseudo?: PseudoCss;
     pseudoId?: string;

package/dist/useCssProperty-SssU__r7.mjs

@@ -0,0 +1,79 @@
+import { useState as s, useEffect as $ } from "react";
+import { g as d } from "./useStylesheet-CyPq1r4E.mjs";
+function x(t, e) {
+  if (!e) {
+    const y = document.head.querySelector(`style#${t}`);
+    return y && y.remove(), "";
+  }
+  let a = document.head.querySelector(`style#${t}`);
+  console.log(t), a || (a = document.createElement("style"), a.id = t, a.type = "text/css", document.head.appendChild(a));
+  let n = "";
+  n += `@keyframes ${e.name} {`, Object.entries(e.keyframes).forEach(([y, C]) => {
+    n += `${y} {
+`, n += Object.entries(C).map(([S, h]) => `${S.replace(/[A-Z]/g, (v) => `-${v.toLowerCase()}`)}: ${h}`).join(`; 
+`), n += `
+}
+`;
+  }), n += `}
+`, n += `.${t} {
+`;
+  const r = e.delay ?? "0s", c = e.direction ?? "normal", i = e.duration ?? "2s", u = e.fillMode ?? "none", l = e.iterationCount ?? "1", m = e.playState ?? "running", f = e.timingFunction ?? "ease";
+  n += `    animation-name: ${e.name};
+`, e.delay && (n += `    animation-delay: ${r};
+`), e.direction && (n += `    animation-direction: ${c};
+`), e.duration && (n += `    animation-duration: ${i};
+`), e.fillMode && (n += `    animation-fill-mode: ${u};
+`), e.iterationCount && (n += `    animation-iteration-count: ${l};
+`), e.playState && (n += `    animation-play-state: ${m};
+`), e.timingFunction && (n += `    animation-timing-function: ${f};
+`), n += `}
+`, a.textContent = n;
+  const g = `${e.name} ${i} ${f} ${r} ${l} ${c} ${u} ${m}`;
+  return [n, g];
+}
+function p(t) {
+  const e = Array.isArray(t.syntax) ? t.syntax.join(", ") : t.syntax;
+  return `@property ${t.name} {
+    syntax: ${e};
+    inherits: ${t.inherits};
+    initial-value: ${t.initialValue};
+}
+    
+body{
+    ${t.name}: ${t.initialValue};
+}
+`;
+}
+function P(t, e) {
+  if (!e) {
+    const r = document.head.querySelector(`style#${t}`);
+    return r && r.remove(), "";
+  }
+  let a = document.head.querySelector(`style#${t}`);
+  a || (a = document.createElement("style"), a.id = t, a.type = "text/css", document.head.appendChild(a));
+  let n = p(e);
+  return a.textContent = n, n;
+}
+function k(t, e) {
+  return t == null && e == null ? !0 : !(t == null && typeof e == "object" || e == null && typeof t == "object" || Object.keys(t).length !== Object.keys(e).length || (t == null ? void 0 : t.duration) !== (e == null ? void 0 : e.duration) || (t == null ? void 0 : t.delay) !== (e == null ? void 0 : e.delay) || (t == null ? void 0 : t.direction) !== (e == null ? void 0 : e.direction) || (t == null ? void 0 : t.fillMode) !== (e == null ? void 0 : e.fillMode) || (t == null ? void 0 : t.iterationCount) !== (e == null ? void 0 : e.iterationCount) || (t == null ? void 0 : t.name) !== (e == null ? void 0 : e.name) || (t == null ? void 0 : t.playState) !== (e == null ? void 0 : e.playState) || (t == null ? void 0 : t.timingFunction) !== (e == null ? void 0 : e.timingFunction) || JSON.stringify(t == null ? void 0 : t.keyframes) !== JSON.stringify(e == null ? void 0 : e.keyframes));
+}
+function A(t, e) {
+  const [a] = s(() => e ?? d()), [n, r] = s({}), [c, i] = s(""), [u, l] = s("");
+  return $(() => {
+    if (!k(n, t)) {
+      r(t);
+      const [m, f] = x(a, t);
+      i(m), l(f);
+    }
+  }, [a, t, n, i]), [a, u, c];
+}
+function F(t, e) {
+  const [a] = s(() => e ?? d()), [n, r] = s("");
+  return $(() => {
+    r(P(a, t));
+  }, [a, r, t]), [a, `var(${t.name})`, n];
+}
+export {
+  F as a,
+  A as u
+};

package/dist/{useStylesheet-42306f27.mjs → useStylesheet-CyPq1r4E.mjs}

@@ -186,8 +186,7 @@ function $() {
   return v.next().value;
 }
 function p(t, r) {
-  if (t == null && r == null)
-    return !0;
+  if (t == null && r == null) return !0;
   if (t == null && typeof r == "object" || r == null && typeof t == "object" || Object.keys(t).length !== Object.keys(r).length)
     return !1;
   for (const e in t)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cssier",
   "private": false,
-  "version": "0.2.3",
+  "version": "0.3.1",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",