UNPKG

@prop-styles/react

Version:

Process CSS-related properties in Props so that they can generate the element style.

8 lines (7 loc) 4.51 kB
/*! * @prop-styles/react version 1.0.3-beta * Author: Capricorncd<capricorncd@qq.com> * Homepage: https://github.com/capricorncd/prop-styles#readme * Released on: 2025-11-09 10:56:20 (GMT+0000) */ (function(a,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],c):(a=typeof globalThis<"u"?globalThis:a||self,c(a["prop-styles"]={},a.react))})(this,(function(a,c){"use strict";const w={xs:640,sm:768,md:1024,lg:1280,xl:1536,xxl:1920},m=e=>{if(!e)return;const r=Object.entries(e===!0?w:e).sort((t,o)=>t[1]-o[1]);if(!(typeof window>"u"||typeof window.matchMedia!="function"))for(const[t,o]of r)try{if(window.matchMedia(`(min-width: ${o}px)`).matches)return t}catch{}};function g(e){return typeof e=="string"?/^-?\d+(\.\d+)?$/.test(e):h(e)}function h(e){return Number.isFinite(e)}const x=/^((-?\d+(\.\d+)?)?([a-z]+|%)?\s*)+$/i,k=/(\d+\s|\s-?\d+(\.\d+)?$)/;function l(e,r="px"){if(g(e))return`${e}${r}`;if(e&&typeof e=="string"){const t=e.trim().replace(/\s{2,}/g," ");return x.test(t)&&k.test(t)?t.trim().split(" ").map(o=>l(o,r)).join(" "):t}return""}function S(e){return e.replace(/^-?[1-9]\d{0,2}(,\d{3})+/,r=>r.replace(/,/g,""))}function b(e,r=!1,t){if(typeof r=="number"&&(t=r,r=!1),typeof t!="number"&&(t=0),h(e))return e;if(typeof e=="string"){if(!r&&/^(-?\d+(?:\.\d+)?)\D*/.test(S(e)))return b(RegExp.$1,!0);const o=Number(e);return isNaN(o)?t:o}return t}const j=/^(#[a-f0-9]{3,8}|(rgba?|hsla?|hwb|lab|lch|oklab|oklch|hwb|lch|light-dark)\(.+\))$/i,$=/^--\w+(-\w+)*$/,T=/(\s)*--\w+(-\w+)*/;function R(e){return typeof e!="string"?!1:j.test(e)}const O=e=>e?T.test(e)?e.split(/\s+/g).map(r=>$.test(r)?`var(${r})`:r).join(" "):e:"",i=(e,r,t)=>!r&&r!==0?null:{key:e,value:O(t??String(r))},W=(e,r)=>{const t={};let o;for(const f of Object.keys(e)){if(o=r[f],!o)continue;const p=o(e[f],e);if(p)if(Array.isArray(p))p.forEach(n=>{n&&(t[n.key]=n.value)});else{const{key:n,value:d}=p;t[n]=d}}return t},v=/^-?\d+(\.\d+)?[a-z]+$/i,B=e=>typeof e=="string"&&v.test(e),u=(e,r)=>{const t=r?`border${r}`:"border";return g(e)||B(e)?{key:`${t}Width`,value:l(e)}:R(e)?{key:`${t}Color`,value:e}:i(t,e)},z={display:"display",width:"width",minWidth:"minWidth",maxWidth:"maxWidth",height:"height",minHeight:"minHeight",maxHeight:"maxHeight",gap:"gap",fd:"flexDirection",ai:"alignItems",ac:"alignContent",ji:"justifyItems",jc:"justifyContent",ws:"whiteSpace",p:"padding",pt:"paddingTop",pr:"paddingRight",pb:"paddingBottom",pl:"paddingLeft",px:"paddingInline",py:"paddingBlock",m:"margin",mt:"marginTop",mr:"marginRight",mb:"marginBottom",ml:"marginLeft",mx:"marginInline",my:"marginBlock",radius:"borderRadius",fs:"fontSize",lh:"lineHeight",color:"color",bg:"background",bgs:"backgroundSize",bgo:"backgroundOrigin",fw:"fontWeight",border:"border",borderTop:"borderTop",borderRight:"borderRight",borderBottom:"borderBottom",borderLeft:"borderLeft",gtc:"gridTemplateColumns",gtr:"gridTemplateRows",ta:"textAlign",position:"position",top:"top",right:"right",bottom:"bottom",left:"left",zIndex:"zIndex",inset:"inset",transform:"transform",cursor:"cursor",whiteSpace:"whiteSpace",ratio:"aspectRatio"},I={column:e=>i("flexDirection",e,"column"),wrap:e=>i("flexWrap",e,e===!0?"wrap":String(e)),breakWord:e=>i("overflowWrap",e,"break-word"),scroll:e=>i(`overflow${typeof e=="string"?e.toUpperCase():""}`,e,"auto"),shadow:e=>i("boxShadow",e,e===!0?"0 2px 4px 0 rgba(0, 0, 0, 0.1)":String(e)),flex:e=>e===!0?i("display","flex"):i("flex",e),inline:e=>i("display",e,"inline"),nowrap:e=>i("whiteSpace",e,"nowrap")},C={...Object.entries(z).reduce((e,[r,t])=>(e[r]=o=>i(t,o,l(o)),e),{}),...I,border:e=>u(e),borderTop:e=>u(e,"Top"),borderRight:e=>u(e,"Right"),borderBottom:e=>u(e,"Bottom"),borderLeft:e=>u(e,"Left"),fw:e=>i("fontWeight",e),gtc:e=>i("gridTemplateColumns",e,l(e,"fr")),gtr:e=>i("gridTemplateRows",e,l(e,"fr")),zIndex:e=>i("zIndex",e),lh:e=>i("lineHeight",e,g(e)&&b(e)<8?String(e):l(e))},y=(e,r,t={})=>{const o={...C,...r},f=t.breakpoint??m(t.breakpoints),p=(()=>{const n={};for(const d of Object.keys(e)){const s=e[d];s!==null&&typeof s=="object"&&!Array.isArray(s)?f&&Object.prototype.hasOwnProperty.call(s,f)?n[d]=s[f]:Object.prototype.hasOwnProperty.call(s,"default")?n[d]=s.default:n[d]=s:n[d]=s}return n})();return W(p,o)},L=(e,r,t)=>({style:c.useMemo(()=>({...e.style,...y(e,r,t)}),[e])});a.createPropStyles=y,a.getDefaultBreakpoint=m,a.transform=i,a.usePropStyles=L,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}));