npm - @telegraph/style-engine - Versions diffs - 0.1.9 → 0.1.11 - Mend

@telegraph/style-engine 0.1.9 → 0.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/CHANGELOG.md +13 -0
package/dist/cjs/index.js +1 -1
package/dist/cjs/index.js.map +1 -1
package/dist/cjs/postcss.js +1 -1
package/dist/cjs/postcss.js.map +1 -1
package/dist/esm/index.mjs +1 -1
package/dist/esm/postcss.mjs +38 -37
package/dist/esm/postcss.mjs.map +1 -1
package/dist/types/hooks/useStyleEngine.d.ts +0 -1
package/dist/types/hooks/useStyleProps.d.ts +0 -1
package/dist/types/plugins/postcss.d.ts +0 -1
package/dist/types/plugins/postcss.d.ts.map +1 -1
package/package.json +3 -3

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,18 @@
 # @telegraph/style-engine
+## 0.1.11
+### Patch Changes
+- Updated dependencies [[`9eec71e`](https://github.com/knocklabs/telegraph/commit/9eec71e19160c4d987d959a62ed02648d1639d2e)]:
+  - @telegraph/tokens@0.0.21
+## 0.1.10
+### Patch Changes
+- [`dfafb5d`](https://github.com/knocklabs/telegraph/commit/dfafb5de1da5664bbe832fa0a36518ee53fed162) Thanks [@kylemcd](https://github.com/kylemcd)! - don't throw error when not in monorepo
 ## 0.1.9
 ### Patch Changes

package/dist/cjs/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("@vanilla-extract/css"),m=require("@vanilla-extract/recipes"),y=require("@vanilla-extract/sprinkles"),v=require("react"),i=require("@telegraph/tokens"),x={transparent:"var(--tgph-transparent)",white:"var(--tgph-white)",black:"var(--tgph-black)","surface-1":"var(--tgph-surface-1)","surface-2":"var(--tgph-surface-2)","alpha-white-1":"var(--tgph-alpha-white-1)","alpha-white-2":"var(--tgph-alpha-white-2)","alpha-white-3":"var(--tgph-alpha-white-3)","alpha-white-4":"var(--tgph-alpha-white-4)","alpha-white-5":"var(--tgph-alpha-white-5)","alpha-white-6":"var(--tgph-alpha-white-6)","alpha-white-7":"var(--tgph-alpha-white-7)","alpha-white-8":"var(--tgph-alpha-white-8)","alpha-white-9":"var(--tgph-alpha-white-9)","alpha-white-10":"var(--tgph-alpha-white-10)","alpha-white-11":"var(--tgph-alpha-white-11)","alpha-white-12":"var(--tgph-alpha-white-12)","alpha-black-1":"var(--tgph-alpha-black-1)","alpha-black-2":"var(--tgph-alpha-black-2)","alpha-black-3":"var(--tgph-alpha-black-3)","alpha-black-4":"var(--tgph-alpha-black-4)","alpha-black-5":"var(--tgph-alpha-black-5)","alpha-black-6":"var(--tgph-alpha-black-6)","alpha-black-7":"var(--tgph-alpha-black-7)","alpha-black-8":"var(--tgph-alpha-black-8)","alpha-black-9":"var(--tgph-alpha-black-9)","alpha-black-10":"var(--tgph-alpha-black-10)","alpha-black-11":"var(--tgph-alpha-black-11)","alpha-black-12":"var(--tgph-alpha-black-12)","gray-1":"var(--tgph-gray-1)","gray-2":"var(--tgph-gray-2)","gray-3":"var(--tgph-gray-3)","gray-4":"var(--tgph-gray-4)","gray-5":"var(--tgph-gray-5)","gray-6":"var(--tgph-gray-6)","gray-7":"var(--tgph-gray-7)","gray-8":"var(--tgph-gray-8)","gray-9":"var(--tgph-gray-9)","gray-10":"var(--tgph-gray-10)","gray-11":"var(--tgph-gray-11)","gray-12":"var(--tgph-gray-12)","beige-1":"var(--tgph-beige-1)","beige-2":"var(--tgph-beige-2)","beige-3":"var(--tgph-beige-3)","beige-4":"var(--tgph-beige-4)","beige-5":"var(--tgph-beige-5)","beige-6":"var(--tgph-beige-6)","beige-7":"var(--tgph-beige-7)","beige-8":"var(--tgph-beige-8)","beige-9":"var(--tgph-beige-9)","beige-10":"var(--tgph-beige-10)","beige-11":"var(--tgph-beige-11)","beige-12":"var(--tgph-beige-12)","accent-1":"var(--tgph-accent-1)","accent-2":"var(--tgph-accent-2)","accent-3":"var(--tgph-accent-3)","accent-4":"var(--tgph-accent-4)","accent-5":"var(--tgph-accent-5)","accent-6":"var(--tgph-accent-6)","accent-7":"var(--tgph-accent-7)","accent-8":"var(--tgph-accent-8)","accent-9":"var(--tgph-accent-9)","accent-10":"var(--tgph-accent-10)","accent-11":"var(--tgph-accent-11)","accent-12":"var(--tgph-accent-12)","green-1":"var(--tgph-green-1)","green-2":"var(--tgph-green-2)","green-3":"var(--tgph-green-3)","green-4":"var(--tgph-green-4)","green-5":"var(--tgph-green-5)","green-6":"var(--tgph-green-6)","green-7":"var(--tgph-green-7)","green-8":"var(--tgph-green-8)","green-9":"var(--tgph-green-9)","green-10":"var(--tgph-green-10)","green-11":"var(--tgph-green-11)","green-12":"var(--tgph-green-12)","yellow-1":"var(--tgph-yellow-1)","yellow-2":"var(--tgph-yellow-2)","yellow-3":"var(--tgph-yellow-3)","yellow-4":"var(--tgph-yellow-4)","yellow-5":"var(--tgph-yellow-5)","yellow-6":"var(--tgph-yellow-6)","yellow-7":"var(--tgph-yellow-7)","yellow-8":"var(--tgph-yellow-8)","yellow-9":"var(--tgph-yellow-9)","yellow-10":"var(--tgph-yellow-10)","yellow-11":"var(--tgph-yellow-11)","yellow-12":"var(--tgph-yellow-12)","blue-1":"var(--tgph-blue-1)","blue-2":"var(--tgph-blue-2)","blue-3":"var(--tgph-blue-3)","blue-4":"var(--tgph-blue-4)","blue-5":"var(--tgph-blue-5)","blue-6":"var(--tgph-blue-6)","blue-7":"var(--tgph-blue-7)","blue-8":"var(--tgph-blue-8)","blue-9":"var(--tgph-blue-9)","blue-10":"var(--tgph-blue-10)","blue-11":"var(--tgph-blue-11)","blue-12":"var(--tgph-blue-12)","red-1":"var(--tgph-red-1)","red-2":"var(--tgph-red-2)","red-3":"var(--tgph-red-3)","red-4":"var(--tgph-red-4)","red-5":"var(--tgph-red-5)","red-6":"var(--tgph-red-6)","red-7":"var(--tgph-red-7)","red-8":"var(--tgph-red-8)","red-9":"var(--tgph-red-9)","red-10":"var(--tgph-red-10)","red-11":"var(--tgph-red-11)","red-12":"var(--tgph-red-12)","purple-1":"var(--tgph-purple-1)","purple-2":"var(--tgph-purple-2)","purple-3":"var(--tgph-purple-3)","purple-4":"var(--tgph-purple-4)","purple-5":"var(--tgph-purple-5)","purple-6":"var(--tgph-purple-6)","purple-7":"var(--tgph-purple-7)","purple-8":"var(--tgph-purple-8)","purple-9":"var(--tgph-purple-9)","purple-10":"var(--tgph-purple-10)","purple-11":"var(--tgph-purple-11)","purple-12":"var(--tgph-purple-12)"},P={0:"var(--tgph-rounded-0)",1:"var(--tgph-rounded-1)",2:"var(--tgph-rounded-2)",3:"var(--tgph-rounded-3)",4:"var(--tgph-rounded-4)",5:"var(--tgph-rounded-5)",6:"var(--tgph-rounded-6)",full:"var(--tgph-rounded-full)"},S={0:"var(--tgph-shadow-0)",1:"var(--tgph-shadow-1)",2:"var(--tgph-shadow-2)",3:"var(--tgph-shadow-3)",inner:"var(--tgph-shadow-inner)"},O={0:"var(--tgph-spacing-0)",1:"var(--tgph-spacing-1)",2:"var(--tgph-spacing-2)",3:"var(--tgph-spacing-3)",4:"var(--tgph-spacing-4)",5:"var(--tgph-spacing-5)",6:"var(--tgph-spacing-6)",7:"var(--tgph-spacing-7)",8:"var(--tgph-spacing-8)",9:"var(--tgph-spacing-9)",10:"var(--tgph-spacing-10)",11:"var(--tgph-spacing-11)",12:"var(--tgph-spacing-12)",14:"var(--tgph-spacing-14)",16:"var(--tgph-spacing-16)",20:"var(--tgph-spacing-20)",24:"var(--tgph-spacing-24)",28:"var(--tgph-spacing-28)",32:"var(--tgph-spacing-32)",36:"var(--tgph-spacing-36)",40:"var(--tgph-spacing-40)",44:"var(--tgph-spacing-44)",48:"var(--tgph-spacing-48)",52:"var(--tgph-spacing-52)",56:"var(--tgph-spacing-56)",60:"var(--tgph-spacing-60)",64:"var(--tgph-spacing-64)",72:"var(--tgph-spacing-72)",80:"var(--tgph-spacing-80)",96:"var(--tgph-spacing-96)",140:"var(--tgph-spacing-140)",160:"var(--tgph-spacing-160)",px:"var(--tgph-spacing-px)",full:"var(--tgph-spacing-full)",auto:"var(--tgph-spacing-auto)"},j={sans:"var(--tgph-family-sans)",mono:"var(--tgph-family-mono)"},I={0:"var(--tgph-leading-0)",1:"var(--tgph-leading-1)",2:"var(--tgph-leading-2)",3:"var(--tgph-leading-3)",4:"var(--tgph-leading-4)",5:"var(--tgph-leading-5)",6:"var(--tgph-leading-6)",7:"var(--tgph-leading-7)",8:"var(--tgph-leading-8)",9:"var(--tgph-leading-9)","code-0":"var(--tgph-leading-code-0)","code-1":"var(--tgph-leading-code-1)","code-2":"var(--tgph-leading-code-2)","code-3":"var(--tgph-leading-code-3)","code-4":"var(--tgph-leading-code-4)","code-5":"var(--tgph-leading-code-5)","code-6":"var(--tgph-leading-code-6)","code-7":"var(--tgph-leading-code-7)","code-8":"var(--tgph-leading-code-8)","code-9":"var(--tgph-leading-code-9)"},V={0:"var(--tgph-tracking-0)",1:"var(--tgph-tracking-1)",2:"var(--tgph-tracking-2)",3:"var(--tgph-tracking-3)",4:"var(--tgph-tracking-4)",5:"var(--tgph-tracking-5)",6:"var(--tgph-tracking-6)",7:"var(--tgph-tracking-7)",8:"var(--tgph-tracking-8)",9:"var(--tgph-tracking-9)"},z={0:"var(--tgph-text-0)",1:"var(--tgph-text-1)",2:"var(--tgph-text-2)",3:"var(--tgph-text-3)",4:"var(--tgph-text-4)",5:"var(--tgph-text-5)",6:"var(--tgph-text-6)",7:"var(--tgph-text-7)",8:"var(--tgph-text-8)",9:"var(--tgph-text-9)","code-0":"var(--tgph-text-code-0)","code-1":"var(--tgph-text-code-1)","code-2":"var(--tgph-text-code-2)","code-4":"var(--tgph-text-code-4)","code-5":"var(--tgph-text-code-5)","code-6":"var(--tgph-text-code-6)","code-7":"var(--tgph-text-code-7)","code-8":"var(--tgph-text-code-8)","code-9":"var(--tgph-text-code-9)"},E={regular:"var(--tgph-weight-regular)",medium:"var(--tgph-weight-medium)","semi-bold":"var(--tgph-weight-semi-bold)"},R={sm:"var(--tgph-breakpoint-sm)",md:"var(--tgph-breakpoint-md)",lg:"var(--tgph-breakpoint-lg)",xl:"var(--tgph-breakpoint-xl)","2xl":"var(--tgph-breakpoint-2xl)"},q={hidden:"var(--tgph-zIndex-hidden)",base:"var(--tgph-zIndex-base)",auto:"var(--tgph-zIndex-auto)",dropdown:"var(--tgph-zIndex-dropdown)",sticky:"var(--tgph-zIndex-sticky)",banner:"var(--tgph-zIndex-banner)",overlay:"var(--tgph-zIndex-overlay)",modal:"var(--tgph-zIndex-modal)",popover:"var(--tgph-zIndex-popover)",skipLink:"var(--tgph-zIndex-skipLink)",toast:"var(--tgph-zIndex-toast)",tooltip:"var(--tgph-zIndex-tooltip)"},C={"border-style":{solid:"var(--tgph-border-style-solid)",dashed:"var(--tgph-border-style-dashed)"},color:x,rounded:P,shadow:S,spacing:O,family:j,leading:I,tracking:V,text:z,weight:E,breakpoint:R,zIndex:q},L=({props:r,stylePropsFn:e})=>{const a=v.useMemo(()=>r,[r]),p=v.useMemo(()=>{const c=e.properties,n={},t={};return a?(Object.keys(a).forEach(h=>{const l=h;c.has(l)&&Object.assign(n,{[l]:a[l]}),c.has(l)||Object.assign(t,{[l]:a[l]})}),{styleProps:n,componentProps:t}):{styleProps:n,componentProps:t}},[a,e==null?void 0:e.properties]),g=v.useMemo(()=>e(p.styleProps),[p.styleProps,e]);return{styleProps:p.styleProps,componentProps:p.componentProps,styleClassName:g}},M={conditions:{sm:{"@media":`screen and (min-width: ${i.tokens.breakpoint.sm})`},md:{"@media":`screen and (min-width: ${i.tokens.breakpoint.md})`},lg:{"@media":`screen and (min-width: ${i.tokens.breakpoint.lg})`},xl:{"@media":`screen and (min-width: ${i.tokens.breakpoint.xl})`},"2xl":{"@media":`screen and (min-width: ${i.tokens.breakpoint["2xl"]})`}},defaultCondition:"sm",responsiveArray:["sm","md","lg","xl","2xl"]},$=({currentValueOfCssVar:r="0 0 0 0",value:e,direction:a})=>{const[p,g,c,n]=r.split(" "),t={top:p,right:g,bottom:c,left:n};return a==="top"&&(t.top=e),a==="right"&&(t.right=e),a==="bottom"&&(t.bottom=e),a==="left"&&(t.left=e),a==="all"&&(t.top=e,t.right=e,t.bottom=e,t.left=e),a==="x"&&(t.left=e,t.right=e),a==="y"&&(t.top=e,t.bottom=e),a==="side-top"&&(t.top=e,t.right=e),a==="side-bottom"&&(t.bottom=e,t.left=e),a==="side-left"&&(t.top=e,t.left=e),a==="side-right"&&(t.right=e,t.bottom=e),Object.values(t).join(" ")},k=r=>{const{cssVars:e}=r;if(!(r!=null&&r.props)||Object.keys(r.props).length===0)return{styleProp:{},otherProps:{},interactive:!1};const{style:a={},...p}=r.props;let g=a;const c={};let n=!1;return Object.keys(p).forEach(t=>{const h=t,l=h,o=e==null?void 0:e[l];if(!o){Object.assign(c,{[h]:p[h]});return}const b=p==null?void 0:p[h];if(!b){Object.assign(g,{[h]:p[h]});return}const u=o.value.replace("VARIABLE",b),s=o.cssVar;if(o.interactive&&(n=!0),o.direction){const w=g==null?void 0:g[s],f=$({currentValueOfCssVar:w,value:u,direction:o.direction});g={...g,[s]:f};return}g={...g,[s]:u}}),{styleProp:g,otherProps:c,interactive:n}},N=r=>v.useMemo(()=>k(r),[r]);Object.defineProperty(exports,"globalStyle",{enumerable:!0,get:()=>d.globalStyle});Object.defineProperty(exports,"keyframes",{enumerable:!0,get:()=>d.keyframes});Object.defineProperty(exports,"style",{enumerable:!0,get:()=>d.style});Object.defineProperty(exports,"variant",{enumerable:!0,get:()=>m.recipe});Object.defineProperty(exports,"createStyleProps",{enumerable:!0,get:()=>y.createSprinkles});Object.defineProperty(exports,"defineStyleProps",{enumerable:!0,get:()=>y.defineProperties});exports.RESPONSIVE_STYLE_PROPS=M;exports.getStyleProp=k;exports.tokens=C;exports.useStyleEngine=N;exports.useStyleProps=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("@vanilla-extract/css"),m=require("@vanilla-extract/recipes"),y=require("@vanilla-extract/sprinkles"),v=require("react"),i=require("@telegraph/tokens"),x={transparent:"var(--tgph-transparent)",white:"var(--tgph-white)",black:"var(--tgph-black)","surface-1":"var(--tgph-surface-1)","surface-2":"var(--tgph-surface-2)","alpha-white-1":"var(--tgph-alpha-white-1)","alpha-white-2":"var(--tgph-alpha-white-2)","alpha-white-3":"var(--tgph-alpha-white-3)","alpha-white-4":"var(--tgph-alpha-white-4)","alpha-white-5":"var(--tgph-alpha-white-5)","alpha-white-6":"var(--tgph-alpha-white-6)","alpha-white-7":"var(--tgph-alpha-white-7)","alpha-white-8":"var(--tgph-alpha-white-8)","alpha-white-9":"var(--tgph-alpha-white-9)","alpha-white-10":"var(--tgph-alpha-white-10)","alpha-white-11":"var(--tgph-alpha-white-11)","alpha-white-12":"var(--tgph-alpha-white-12)","alpha-black-1":"var(--tgph-alpha-black-1)","alpha-black-2":"var(--tgph-alpha-black-2)","alpha-black-3":"var(--tgph-alpha-black-3)","alpha-black-4":"var(--tgph-alpha-black-4)","alpha-black-5":"var(--tgph-alpha-black-5)","alpha-black-6":"var(--tgph-alpha-black-6)","alpha-black-7":"var(--tgph-alpha-black-7)","alpha-black-8":"var(--tgph-alpha-black-8)","alpha-black-9":"var(--tgph-alpha-black-9)","alpha-black-10":"var(--tgph-alpha-black-10)","alpha-black-11":"var(--tgph-alpha-black-11)","alpha-black-12":"var(--tgph-alpha-black-12)","gray-1":"var(--tgph-gray-1)","gray-2":"var(--tgph-gray-2)","gray-3":"var(--tgph-gray-3)","gray-4":"var(--tgph-gray-4)","gray-5":"var(--tgph-gray-5)","gray-6":"var(--tgph-gray-6)","gray-7":"var(--tgph-gray-7)","gray-8":"var(--tgph-gray-8)","gray-9":"var(--tgph-gray-9)","gray-10":"var(--tgph-gray-10)","gray-11":"var(--tgph-gray-11)","gray-12":"var(--tgph-gray-12)","beige-1":"var(--tgph-beige-1)","beige-2":"var(--tgph-beige-2)","beige-3":"var(--tgph-beige-3)","beige-4":"var(--tgph-beige-4)","beige-5":"var(--tgph-beige-5)","beige-6":"var(--tgph-beige-6)","beige-7":"var(--tgph-beige-7)","beige-8":"var(--tgph-beige-8)","beige-9":"var(--tgph-beige-9)","beige-10":"var(--tgph-beige-10)","beige-11":"var(--tgph-beige-11)","beige-12":"var(--tgph-beige-12)","accent-1":"var(--tgph-accent-1)","accent-2":"var(--tgph-accent-2)","accent-3":"var(--tgph-accent-3)","accent-4":"var(--tgph-accent-4)","accent-5":"var(--tgph-accent-5)","accent-6":"var(--tgph-accent-6)","accent-7":"var(--tgph-accent-7)","accent-8":"var(--tgph-accent-8)","accent-9":"var(--tgph-accent-9)","accent-10":"var(--tgph-accent-10)","accent-11":"var(--tgph-accent-11)","accent-12":"var(--tgph-accent-12)","green-1":"var(--tgph-green-1)","green-2":"var(--tgph-green-2)","green-3":"var(--tgph-green-3)","green-4":"var(--tgph-green-4)","green-5":"var(--tgph-green-5)","green-6":"var(--tgph-green-6)","green-7":"var(--tgph-green-7)","green-8":"var(--tgph-green-8)","green-9":"var(--tgph-green-9)","green-10":"var(--tgph-green-10)","green-11":"var(--tgph-green-11)","green-12":"var(--tgph-green-12)","yellow-1":"var(--tgph-yellow-1)","yellow-2":"var(--tgph-yellow-2)","yellow-3":"var(--tgph-yellow-3)","yellow-4":"var(--tgph-yellow-4)","yellow-5":"var(--tgph-yellow-5)","yellow-6":"var(--tgph-yellow-6)","yellow-7":"var(--tgph-yellow-7)","yellow-8":"var(--tgph-yellow-8)","yellow-9":"var(--tgph-yellow-9)","yellow-10":"var(--tgph-yellow-10)","yellow-11":"var(--tgph-yellow-11)","yellow-12":"var(--tgph-yellow-12)","blue-1":"var(--tgph-blue-1)","blue-2":"var(--tgph-blue-2)","blue-3":"var(--tgph-blue-3)","blue-4":"var(--tgph-blue-4)","blue-5":"var(--tgph-blue-5)","blue-6":"var(--tgph-blue-6)","blue-7":"var(--tgph-blue-7)","blue-8":"var(--tgph-blue-8)","blue-9":"var(--tgph-blue-9)","blue-10":"var(--tgph-blue-10)","blue-11":"var(--tgph-blue-11)","blue-12":"var(--tgph-blue-12)","red-1":"var(--tgph-red-1)","red-2":"var(--tgph-red-2)","red-3":"var(--tgph-red-3)","red-4":"var(--tgph-red-4)","red-5":"var(--tgph-red-5)","red-6":"var(--tgph-red-6)","red-7":"var(--tgph-red-7)","red-8":"var(--tgph-red-8)","red-9":"var(--tgph-red-9)","red-10":"var(--tgph-red-10)","red-11":"var(--tgph-red-11)","red-12":"var(--tgph-red-12)","purple-1":"var(--tgph-purple-1)","purple-2":"var(--tgph-purple-2)","purple-3":"var(--tgph-purple-3)","purple-4":"var(--tgph-purple-4)","purple-5":"var(--tgph-purple-5)","purple-6":"var(--tgph-purple-6)","purple-7":"var(--tgph-purple-7)","purple-8":"var(--tgph-purple-8)","purple-9":"var(--tgph-purple-9)","purple-10":"var(--tgph-purple-10)","purple-11":"var(--tgph-purple-11)","purple-12":"var(--tgph-purple-12)"},P={0:"var(--tgph-rounded-0)",1:"var(--tgph-rounded-1)",2:"var(--tgph-rounded-2)",3:"var(--tgph-rounded-3)",4:"var(--tgph-rounded-4)",5:"var(--tgph-rounded-5)",6:"var(--tgph-rounded-6)",full:"var(--tgph-rounded-full)"},S={0:"var(--tgph-shadow-0)",1:"var(--tgph-shadow-1)",2:"var(--tgph-shadow-2)",3:"var(--tgph-shadow-3)",inner:"var(--tgph-shadow-inner)"},O={0:"var(--tgph-spacing-0)",1:"var(--tgph-spacing-1)",2:"var(--tgph-spacing-2)",3:"var(--tgph-spacing-3)",4:"var(--tgph-spacing-4)",5:"var(--tgph-spacing-5)",6:"var(--tgph-spacing-6)",7:"var(--tgph-spacing-7)",8:"var(--tgph-spacing-8)",9:"var(--tgph-spacing-9)",10:"var(--tgph-spacing-10)",11:"var(--tgph-spacing-11)",12:"var(--tgph-spacing-12)",14:"var(--tgph-spacing-14)",16:"var(--tgph-spacing-16)",20:"var(--tgph-spacing-20)",24:"var(--tgph-spacing-24)",28:"var(--tgph-spacing-28)",32:"var(--tgph-spacing-32)",36:"var(--tgph-spacing-36)",40:"var(--tgph-spacing-40)",44:"var(--tgph-spacing-44)",48:"var(--tgph-spacing-48)",52:"var(--tgph-spacing-52)",56:"var(--tgph-spacing-56)",60:"var(--tgph-spacing-60)",64:"var(--tgph-spacing-64)",72:"var(--tgph-spacing-72)",80:"var(--tgph-spacing-80)",96:"var(--tgph-spacing-96)",120:"var(--tgph-spacing-120)",140:"var(--tgph-spacing-140)",160:"var(--tgph-spacing-160)",px:"var(--tgph-spacing-px)",full:"var(--tgph-spacing-full)",auto:"var(--tgph-spacing-auto)"},j={sans:"var(--tgph-family-sans)",mono:"var(--tgph-family-mono)"},I={0:"var(--tgph-leading-0)",1:"var(--tgph-leading-1)",2:"var(--tgph-leading-2)",3:"var(--tgph-leading-3)",4:"var(--tgph-leading-4)",5:"var(--tgph-leading-5)",6:"var(--tgph-leading-6)",7:"var(--tgph-leading-7)",8:"var(--tgph-leading-8)",9:"var(--tgph-leading-9)","code-0":"var(--tgph-leading-code-0)","code-1":"var(--tgph-leading-code-1)","code-2":"var(--tgph-leading-code-2)","code-3":"var(--tgph-leading-code-3)","code-4":"var(--tgph-leading-code-4)","code-5":"var(--tgph-leading-code-5)","code-6":"var(--tgph-leading-code-6)","code-7":"var(--tgph-leading-code-7)","code-8":"var(--tgph-leading-code-8)","code-9":"var(--tgph-leading-code-9)"},V={0:"var(--tgph-tracking-0)",1:"var(--tgph-tracking-1)",2:"var(--tgph-tracking-2)",3:"var(--tgph-tracking-3)",4:"var(--tgph-tracking-4)",5:"var(--tgph-tracking-5)",6:"var(--tgph-tracking-6)",7:"var(--tgph-tracking-7)",8:"var(--tgph-tracking-8)",9:"var(--tgph-tracking-9)"},z={0:"var(--tgph-text-0)",1:"var(--tgph-text-1)",2:"var(--tgph-text-2)",3:"var(--tgph-text-3)",4:"var(--tgph-text-4)",5:"var(--tgph-text-5)",6:"var(--tgph-text-6)",7:"var(--tgph-text-7)",8:"var(--tgph-text-8)",9:"var(--tgph-text-9)","code-0":"var(--tgph-text-code-0)","code-1":"var(--tgph-text-code-1)","code-2":"var(--tgph-text-code-2)","code-4":"var(--tgph-text-code-4)","code-5":"var(--tgph-text-code-5)","code-6":"var(--tgph-text-code-6)","code-7":"var(--tgph-text-code-7)","code-8":"var(--tgph-text-code-8)","code-9":"var(--tgph-text-code-9)"},E={regular:"var(--tgph-weight-regular)",medium:"var(--tgph-weight-medium)","semi-bold":"var(--tgph-weight-semi-bold)"},R={sm:"var(--tgph-breakpoint-sm)",md:"var(--tgph-breakpoint-md)",lg:"var(--tgph-breakpoint-lg)",xl:"var(--tgph-breakpoint-xl)","2xl":"var(--tgph-breakpoint-2xl)"},q={hidden:"var(--tgph-zIndex-hidden)",base:"var(--tgph-zIndex-base)",auto:"var(--tgph-zIndex-auto)",dropdown:"var(--tgph-zIndex-dropdown)",sticky:"var(--tgph-zIndex-sticky)",banner:"var(--tgph-zIndex-banner)",overlay:"var(--tgph-zIndex-overlay)",modal:"var(--tgph-zIndex-modal)",popover:"var(--tgph-zIndex-popover)",skipLink:"var(--tgph-zIndex-skipLink)",toast:"var(--tgph-zIndex-toast)",tooltip:"var(--tgph-zIndex-tooltip)"},C={"border-style":{solid:"var(--tgph-border-style-solid)",dashed:"var(--tgph-border-style-dashed)"},color:x,rounded:P,shadow:S,spacing:O,family:j,leading:I,tracking:V,text:z,weight:E,breakpoint:R,zIndex:q},L=({props:r,stylePropsFn:e})=>{const a=v.useMemo(()=>r,[r]),p=v.useMemo(()=>{const c=e.properties,n={},t={};return a?(Object.keys(a).forEach(h=>{const l=h;c.has(l)&&Object.assign(n,{[l]:a[l]}),c.has(l)||Object.assign(t,{[l]:a[l]})}),{styleProps:n,componentProps:t}):{styleProps:n,componentProps:t}},[a,e==null?void 0:e.properties]),g=v.useMemo(()=>e(p.styleProps),[p.styleProps,e]);return{styleProps:p.styleProps,componentProps:p.componentProps,styleClassName:g}},M={conditions:{sm:{"@media":`screen and (min-width: ${i.tokens.breakpoint.sm})`},md:{"@media":`screen and (min-width: ${i.tokens.breakpoint.md})`},lg:{"@media":`screen and (min-width: ${i.tokens.breakpoint.lg})`},xl:{"@media":`screen and (min-width: ${i.tokens.breakpoint.xl})`},"2xl":{"@media":`screen and (min-width: ${i.tokens.breakpoint["2xl"]})`}},defaultCondition:"sm",responsiveArray:["sm","md","lg","xl","2xl"]},$=({currentValueOfCssVar:r="0 0 0 0",value:e,direction:a})=>{const[p,g,c,n]=r.split(" "),t={top:p,right:g,bottom:c,left:n};return a==="top"&&(t.top=e),a==="right"&&(t.right=e),a==="bottom"&&(t.bottom=e),a==="left"&&(t.left=e),a==="all"&&(t.top=e,t.right=e,t.bottom=e,t.left=e),a==="x"&&(t.left=e,t.right=e),a==="y"&&(t.top=e,t.bottom=e),a==="side-top"&&(t.top=e,t.right=e),a==="side-bottom"&&(t.bottom=e,t.left=e),a==="side-left"&&(t.top=e,t.left=e),a==="side-right"&&(t.right=e,t.bottom=e),Object.values(t).join(" ")},k=r=>{const{cssVars:e}=r;if(!(r!=null&&r.props)||Object.keys(r.props).length===0)return{styleProp:{},otherProps:{},interactive:!1};const{style:a={},...p}=r.props;let g=a;const c={};let n=!1;return Object.keys(p).forEach(t=>{const h=t,l=h,o=e==null?void 0:e[l];if(!o){Object.assign(c,{[h]:p[h]});return}const b=p==null?void 0:p[h];if(!b){Object.assign(g,{[h]:p[h]});return}const u=o.value.replace("VARIABLE",b),s=o.cssVar;if(o.interactive&&(n=!0),o.direction){const w=g==null?void 0:g[s],f=$({currentValueOfCssVar:w,value:u,direction:o.direction});g={...g,[s]:f};return}g={...g,[s]:u}}),{styleProp:g,otherProps:c,interactive:n}},N=r=>v.useMemo(()=>k(r),[r]);Object.defineProperty(exports,"globalStyle",{enumerable:!0,get:()=>d.globalStyle});Object.defineProperty(exports,"keyframes",{enumerable:!0,get:()=>d.keyframes});Object.defineProperty(exports,"style",{enumerable:!0,get:()=>d.style});Object.defineProperty(exports,"variant",{enumerable:!0,get:()=>m.recipe});Object.defineProperty(exports,"createStyleProps",{enumerable:!0,get:()=>y.createSprinkles});Object.defineProperty(exports,"defineStyleProps",{enumerable:!0,get:()=>y.defineProperties});exports.RESPONSIVE_STYLE_PROPS=M;exports.getStyleProp=k;exports.tokens=C;exports.useStyleEngine=N;exports.useStyleProps=L;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../src/hooks/useStyleProps.ts","../../src/constants/responsive-style-props.ts","../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["import { type SprinklesProperties as StyleProperties } from \"@vanilla-extract/sprinkles\";\nimport React from \"react\";\n\nimport { type createStyleProps } from \"../index\";\n\ntype StylePropFn<StylePropFnProperties extends StyleProperties[]> = ReturnType<\n typeof createStyleProps<StylePropFnProperties>\n>;\n\ntype StyleProps<StylePropFnProperties extends StyleProperties[]> = Parameters<\n StylePropFn<StylePropFnProperties>\n>[0];\n\ntype ComponentProps<\n Props,\n StylePropFnProperties extends StyleProperties[],\n> = Omit<Props, keyof StyleProps<StylePropFnProperties>>;\n\ntype UseStylePropsParams<\n Props,\n StylePropFnProperties extends StyleProperties[],\n> = {\n props: Props;\n stylePropsFn: StylePropFn<StylePropFnProperties>;\n};\n\nexport const useStyleProps = <\n Props,\n StylePropFnProperties extends StyleProperties[],\n>({\n props,\n stylePropsFn,\n}: UseStylePropsParams<Props, StylePropFnProperties>) => {\n // Keep this memoed to prevent unnecessary re-renders\n const memoizedProps = React.useMemo<Props>(() => props, [props]);\n\n // Filter the props into styleProps and componentProps so that we can\n // pass styleProps to the stylePropsFn and componentProps to the component\n const filteredProps = React.useMemo(() => {\n const stylePropFnProperties = stylePropsFn.properties;\n\n const styleProps = {} as StyleProps<StylePropFnProperties>;\n const componentProps = {} as ComponentProps<Props, StylePropFnProperties>;\n\n // If there are no memoized props, return the empty styleProps and componentProps objects\n if (!memoizedProps) return { styleProps, componentProps };\n\n Object.keys(memoizedProps).forEach((_key) => {\n const key = _key as keyof StyleProps<StylePropFnProperties> & keyof Props;\n if (stylePropFnProperties.has(key)) {\n Object.assign(styleProps, {\n [key]: memoizedProps[key],\n });\n }\n if (!stylePropFnProperties.has(key)) {\n Object.assign(componentProps, {\n [key]: memoizedProps[key],\n });\n }\n });\n\n return { styleProps, componentProps };\n }, [memoizedProps, stylePropsFn?.properties]);\n\n // Generate the style class name that we can apply to the component\n const styleClassName = React.useMemo(() => {\n return stylePropsFn(filteredProps.styleProps);\n }, [filteredProps.styleProps, stylePropsFn]);\n\n return {\n styleProps: filteredProps.styleProps,\n componentProps: filteredProps.componentProps,\n styleClassName,\n };\n};\n","import t from \"@telegraph/tokens\";\n\nexport const RESPONSIVE_STYLE_PROPS = {\n conditions: {\n sm: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.sm})` },\n md: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.md})` },\n lg: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.lg})` },\n xl: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.xl})` },\n \"2xl\": {\n \"@media\": `screen and (min-width: ${t.tokens.breakpoint[\"2xl\"]})`,\n },\n },\n defaultCondition: \"sm\",\n responsiveArray: [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"],\n};\n","type Direction =\n \| \"x\"\n \| \"y\"\n \| \"top\"\n \| \"bottom\"\n \| \"left\"\n \| \"right\"\n \| \"all\"\n \| \"side-top\"\n \| \"side-bottom\"\n \| \"side-left\"\n \| \"side-right\";\n\nexport type CssVarProp = {\n cssVar: string;\n value: string;\n direction?: Direction;\n interactive?: boolean;\n};\n\ntype ApplyDirectionProps = {\n currentValueOfCssVar: string \| undefined;\n value: string;\n direction?: Direction;\n};\n\n// For values like margin and padding that require 4 values\nconst applyDirectionalValues = ({\n currentValueOfCssVar = \"0 0 0 0\",\n value,\n direction,\n}: ApplyDirectionProps) => {\n const [top, right, bottom, left] = currentValueOfCssVar.split(\" \");\n\n const newValues = {\n top,\n right,\n bottom,\n left,\n };\n\n if (direction === \"top\") {\n newValues.top = value;\n }\n\n if (direction === \"right\") {\n newValues.right = value;\n }\n\n if (direction === \"bottom\") {\n newValues.bottom = value;\n }\n\n if (direction === \"left\") {\n newValues.left = value;\n }\n\n if (direction === \"all\") {\n newValues.top = value;\n newValues.right = value;\n newValues.bottom = value;\n newValues.left = value;\n }\n\n if (direction === \"x\") {\n newValues.left = value;\n newValues.right = value;\n }\n\n if (direction === \"y\") {\n newValues.top = value;\n newValues.bottom = value;\n }\n\n // \"side\" direction is used for things like border-radius\n // where we are settings values on corners instead of sides\n // entire sides like padding and margin provide.\n if (direction === \"side-top\") {\n newValues.top = value;\n newValues.right = value;\n }\n\n if (direction === \"side-bottom\") {\n newValues.bottom = value;\n newValues.left = value;\n }\n\n if (direction === \"side-left\") {\n newValues.top = value;\n newValues.left = value;\n }\n\n if (direction === \"side-right\") {\n newValues.right = value;\n newValues.bottom = value;\n }\n\n const newValuesString = Object.values(newValues).join(\" \");\n\n return newValuesString;\n};\n\nexport type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> =\n Record<keyof CssVars, CssVarProp>;\n\ntype CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;\n\n// Allow for explicitly defined props that are not css vars to end to end typesafe\ntype OtherProps<CssVars extends CssVarsPropObject<CssVars>, Props> =\n \| Omit<\n {\n [key in keyof Props]: Props[key];\n },\n CssVarPropKey<CssVars>\n >\n \| object;\n\n// Allow for explicitly defined css vars return css variables object created\n// by this function and be end to end typesafe\ntype StyleProp<CssVars extends CssVarsPropObject<CssVars>> =\n \| {\n [key in CssVars[keyof CssVars][\"cssVar\"]]: string;\n }\n \| object;\n\ntype GetStylePropParams<CssVars, Props> = {\n props: Props & { style?: Record<string, string> };\n cssVars: CssVars;\n};\n\nexport const getStyleProp = <\n CssVars extends CssVarsPropObject<CssVars>,\n Props extends Record<string, unknown>,\n>(\n params: GetStylePropParams<CssVars, Props>,\n): {\n styleProp: StyleProp<CssVars>;\n otherProps: OtherProps<CssVars, Props>;\n interactive: boolean;\n} => {\n const { cssVars } = params;\n\n if (!params?.props \|\| Object.keys(params.props).length === 0) {\n return { styleProp: {}, otherProps: {}, interactive: false };\n }\n\n // Assign the additional styles to the style object so that it can be passed\n // to the component as a prop.\n const { style = {}, ...props } = params.props;\n\n let styleProp: StyleProp<CssVars> = style;\n const otherProps: OtherProps<CssVars, Props> = {};\n let interactive = false;\n\n Object.keys(props).forEach((_key) => {\n const key = _key as keyof typeof props;\n const cssVarsKey = key as unknown as keyof typeof cssVars;\n const matchingCssVar = cssVars?.[cssVarsKey];\n\n // If the prop is not a css var, just add it to the otherProps\n if (!matchingCssVar) {\n Object.assign(otherProps, { [key]: props[key] });\n return;\n }\n\n const matchingPropValue = props?.[key] as string \| undefined;\n\n if (!matchingPropValue) {\n Object.assign(styleProp, { [key]: props[key] });\n return;\n }\n\n // Replace the VARIABLE placeholder with the actual value of the prop\n const mappedValueOfCssVar = matchingCssVar.value.replace(\n \"VARIABLE\",\n matchingPropValue,\n );\n\n const cssVarName = matchingCssVar.cssVar as keyof StyleProp<CssVars>;\n\n // If the style contains an interactive prop, set the interactive flag to true\n // so that the component can include the interactive class\n if (matchingCssVar.interactive) {\n interactive = true;\n }\n\n if (matchingCssVar.direction) {\n const currentValueOfCssVar = styleProp?.[cssVarName];\n\n const directionalValue = applyDirectionalValues({\n currentValueOfCssVar,\n value: mappedValueOfCssVar,\n direction: matchingCssVar.direction,\n });\n\n styleProp = {\n ...styleProp,\n [cssVarName]: directionalValue,\n };\n return;\n }\n\n styleProp = {\n ...styleProp,\n [cssVarName]: mappedValueOfCssVar,\n };\n });\n\n return { styleProp, otherProps, interactive };\n};\n","import React from \"react\";\n\nimport { type CssVarProp, getStyleProp } from \"../helpers/getStyleProp\";\n\ntype CssVarsPropObject<CssVars> = Record<keyof CssVars, CssVarProp>;\n\nexport const useStyleEngine = <\n CssVars extends CssVarsPropObject<CssVars>,\n Props extends Record<string, unknown>,\n>(\n params: Parameters<typeof getStyleProp<CssVars, Props>>[0],\n) => {\n return React.useMemo(() => getStyleProp(params), [params]);\n};\n"],"names":["useStyleProps","props","stylePropsFn","memoizedProps","React","filteredProps","stylePropFnProperties","styleProps","componentProps","_key","key","styleClassName","RESPONSIVE_STYLE_PROPS","t","applyDirectionalValues","currentValueOfCssVar","value","direction","top","right","bottom","left","newValues","getStyleProp","params","cssVars","style","styleProp","otherProps","interactive","cssVarsKey","matchingCssVar","matchingPropValue","mappedValueOfCssVar","cssVarName","directionalValue","useStyleEngine"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../src/hooks/useStyleProps.ts","../../src/constants/responsive-style-props.ts","../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["import { type SprinklesProperties as StyleProperties } from \"@vanilla-extract/sprinkles\";\nimport React from \"react\";\n\nimport { type createStyleProps } from \"../index\";\n\ntype StylePropFn<StylePropFnProperties extends StyleProperties[]> = ReturnType<\n typeof createStyleProps<StylePropFnProperties>\n>;\n\ntype StyleProps<StylePropFnProperties extends StyleProperties[]> = Parameters<\n StylePropFn<StylePropFnProperties>\n>[0];\n\ntype ComponentProps<\n Props,\n StylePropFnProperties extends StyleProperties[],\n> = Omit<Props, keyof StyleProps<StylePropFnProperties>>;\n\ntype UseStylePropsParams<\n Props,\n StylePropFnProperties extends StyleProperties[],\n> = {\n props: Props;\n stylePropsFn: StylePropFn<StylePropFnProperties>;\n};\n\nexport const useStyleProps = <\n Props,\n StylePropFnProperties extends StyleProperties[],\n>({\n props,\n stylePropsFn,\n}: UseStylePropsParams<Props, StylePropFnProperties>) => {\n // Keep this memoed to prevent unnecessary re-renders\n const memoizedProps = React.useMemo<Props>(() => props, [props]);\n\n // Filter the props into styleProps and componentProps so that we can\n // pass styleProps to the stylePropsFn and componentProps to the component\n const filteredProps = React.useMemo(() => {\n const stylePropFnProperties = stylePropsFn.properties;\n\n const styleProps = {} as StyleProps<StylePropFnProperties>;\n const componentProps = {} as ComponentProps<Props, StylePropFnProperties>;\n\n // If there are no memoized props, return the empty styleProps and componentProps objects\n if (!memoizedProps) return { styleProps, componentProps };\n\n Object.keys(memoizedProps).forEach((_key) => {\n const key = _key as keyof StyleProps<StylePropFnProperties> & keyof Props;\n if (stylePropFnProperties.has(key)) {\n Object.assign(styleProps, {\n [key]: memoizedProps[key],\n });\n }\n if (!stylePropFnProperties.has(key)) {\n Object.assign(componentProps, {\n [key]: memoizedProps[key],\n });\n }\n });\n\n return { styleProps, componentProps };\n }, [memoizedProps, stylePropsFn?.properties]);\n\n // Generate the style class name that we can apply to the component\n const styleClassName = React.useMemo(() => {\n return stylePropsFn(filteredProps.styleProps);\n }, [filteredProps.styleProps, stylePropsFn]);\n\n return {\n styleProps: filteredProps.styleProps,\n componentProps: filteredProps.componentProps,\n styleClassName,\n };\n};\n","import t from \"@telegraph/tokens\";\n\nexport const RESPONSIVE_STYLE_PROPS = {\n conditions: {\n sm: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.sm})` },\n md: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.md})` },\n lg: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.lg})` },\n xl: { \"@media\": `screen and (min-width: ${t.tokens.breakpoint.xl})` },\n \"2xl\": {\n \"@media\": `screen and (min-width: ${t.tokens.breakpoint[\"2xl\"]})`,\n },\n },\n defaultCondition: \"sm\",\n responsiveArray: [\"sm\", \"md\", \"lg\", \"xl\", \"2xl\"],\n};\n","type Direction =\n \| \"x\"\n \| \"y\"\n \| \"top\"\n \| \"bottom\"\n \| \"left\"\n \| \"right\"\n \| \"all\"\n \| \"side-top\"\n \| \"side-bottom\"\n \| \"side-left\"\n \| \"side-right\";\n\nexport type CssVarProp = {\n cssVar: string;\n value: string;\n direction?: Direction;\n interactive?: boolean;\n};\n\ntype ApplyDirectionProps = {\n currentValueOfCssVar: string \| undefined;\n value: string;\n direction?: Direction;\n};\n\n// For values like margin and padding that require 4 values\nconst applyDirectionalValues = ({\n currentValueOfCssVar = \"0 0 0 0\",\n value,\n direction,\n}: ApplyDirectionProps) => {\n const [top, right, bottom, left] = currentValueOfCssVar.split(\" \");\n\n const newValues = {\n top,\n right,\n bottom,\n left,\n };\n\n if (direction === \"top\") {\n newValues.top = value;\n }\n\n if (direction === \"right\") {\n newValues.right = value;\n }\n\n if (direction === \"bottom\") {\n newValues.bottom = value;\n }\n\n if (direction === \"left\") {\n newValues.left = value;\n }\n\n if (direction === \"all\") {\n newValues.top = value;\n newValues.right = value;\n newValues.bottom = value;\n newValues.left = value;\n }\n\n if (direction === \"x\") {\n newValues.left = value;\n newValues.right = value;\n }\n\n if (direction === \"y\") {\n newValues.top = value;\n newValues.bottom = value;\n }\n\n // \"side\" direction is used for things like border-radius\n // where we are settings values on corners instead of sides\n // entire sides like padding and margin provide.\n if (direction === \"side-top\") {\n newValues.top = value;\n newValues.right = value;\n }\n\n if (direction === \"side-bottom\") {\n newValues.bottom = value;\n newValues.left = value;\n }\n\n if (direction === \"side-left\") {\n newValues.top = value;\n newValues.left = value;\n }\n\n if (direction === \"side-right\") {\n newValues.right = value;\n newValues.bottom = value;\n }\n\n const newValuesString = Object.values(newValues).join(\" \");\n\n return newValuesString;\n};\n\nexport type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> =\n Record<keyof CssVars, CssVarProp>;\n\ntype CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;\n\n// Allow for explicitly defined props that are not css vars to end to end typesafe\ntype OtherProps<CssVars extends CssVarsPropObject<CssVars>, Props> =\n \| Omit<\n {\n [key in keyof Props]: Props[key];\n },\n CssVarPropKey<CssVars>\n >\n \| object;\n\n// Allow for explicitly defined css vars return css variables object created\n// by this function and be end to end typesafe\ntype StyleProp<CssVars extends CssVarsPropObject<CssVars>> =\n \| {\n [key in CssVars[keyof CssVars][\"cssVar\"]]: string;\n }\n \| object;\n\ntype GetStylePropParams<CssVars, Props> = {\n props: Props & { style?: Record<string, string> };\n cssVars: CssVars;\n};\n\nexport const getStyleProp = <\n CssVars extends CssVarsPropObject<CssVars>,\n Props extends Record<string, unknown>,\n>(\n params: GetStylePropParams<CssVars, Props>,\n): {\n styleProp: StyleProp<CssVars>;\n otherProps: OtherProps<CssVars, Props>;\n interactive: boolean;\n} => {\n const { cssVars } = params;\n\n if (!params?.props \|\| Object.keys(params.props).length === 0) {\n return { styleProp: {}, otherProps: {}, interactive: false };\n }\n\n // Assign the additional styles to the style object so that it can be passed\n // to the component as a prop.\n const { style = {}, ...props } = params.props;\n\n let styleProp: StyleProp<CssVars> = style;\n const otherProps: OtherProps<CssVars, Props> = {};\n let interactive = false;\n\n Object.keys(props).forEach((_key) => {\n const key = _key as keyof typeof props;\n const cssVarsKey = key as unknown as keyof typeof cssVars;\n const matchingCssVar = cssVars?.[cssVarsKey];\n\n // If the prop is not a css var, just add it to the otherProps\n if (!matchingCssVar) {\n Object.assign(otherProps, { [key]: props[key] });\n return;\n }\n\n const matchingPropValue = props?.[key] as string \| undefined;\n\n if (!matchingPropValue) {\n Object.assign(styleProp, { [key]: props[key] });\n return;\n }\n\n // Replace the VARIABLE placeholder with the actual value of the prop\n const mappedValueOfCssVar = matchingCssVar.value.replace(\n \"VARIABLE\",\n matchingPropValue,\n );\n\n const cssVarName = matchingCssVar.cssVar as keyof StyleProp<CssVars>;\n\n // If the style contains an interactive prop, set the interactive flag to true\n // so that the component can include the interactive class\n if (matchingCssVar.interactive) {\n interactive = true;\n }\n\n if (matchingCssVar.direction) {\n const currentValueOfCssVar = styleProp?.[cssVarName];\n\n const directionalValue = applyDirectionalValues({\n currentValueOfCssVar,\n value: mappedValueOfCssVar,\n direction: matchingCssVar.direction,\n });\n\n styleProp = {\n ...styleProp,\n [cssVarName]: directionalValue,\n };\n return;\n }\n\n styleProp = {\n ...styleProp,\n [cssVarName]: mappedValueOfCssVar,\n };\n });\n\n return { styleProp, otherProps, interactive };\n};\n","import React from \"react\";\n\nimport { type CssVarProp, getStyleProp } from \"../helpers/getStyleProp\";\n\ntype CssVarsPropObject<CssVars> = Record<keyof CssVars, CssVarProp>;\n\nexport const useStyleEngine = <\n CssVars extends CssVarsPropObject<CssVars>,\n Props extends Record<string, unknown>,\n>(\n params: Parameters<typeof getStyleProp<CssVars, Props>>[0],\n) => {\n return React.useMemo(() => getStyleProp(params), [params]);\n};\n"],"names":["useStyleProps","props","stylePropsFn","memoizedProps","React","filteredProps","stylePropFnProperties","styleProps","componentProps","_key","key","styleClassName","RESPONSIVE_STYLE_PROPS","t","applyDirectionalValues","currentValueOfCssVar","value","direction","top","right","bottom","left","newValues","getStyleProp","params","cssVars","style","styleProp","otherProps","interactive","cssVarsKey","matchingCssVar","matchingPropValue","mappedValueOfCssVar","cssVarName","directionalValue","useStyleEngine"],"mappings":"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"}

package/dist/cjs/postcss.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";const a=require("path"),l=require("fs"),m=require("postcss");function y(n=process.cwd()){let e=n,s=!0;for(;s;){const t=a.join(e,"package.json");if(l.existsSync(t))try{if(JSON.parse(l.readFileSync(t,"utf8")).workspaces)return e}catch{}const r=a.dirname(e);r===e&&(s=!1),e=r}throw new Error('Could not find monorepo root (no package.json with "workspaces" found)')}const h=(n,e)=>{var s;if(!(!n.dependencies||((s=Object.keys(n.dependencies))==null?void 0:s.length)===0))return Object.entries(n.dependencies).reduce((t,[r,c])=>(r.startsWith("@telegraph/")&&(t[r]={name:r,version:c,path:a.resolve(e,"node_modules",r)}),t),{})};function j(){const n=a.resolve(process.cwd(),"package.json"),e=JSON.parse(l.readFileSync(n,"utf8")),s=h(e,process.cwd()),t=y(),r=c=>{if(!c||Object.keys(c).length===0)return c;const i={...c};for(const u of Object.values(c)){let o,p;u.version.includes("workspace:")&&t?(o=a.resolve(t,"node_modules",u.name,"package.json"),p=t):(o=a.resolve(process.cwd(),"node_modules",u.name,"package.json"),p=process.cwd());try{const d=JSON.parse(l.readFileSync(o,"utf8")),g=h(d,p);if(Object.assign(i,g),g){const k=r(g);Object.assign(i,k)}}catch{continue}}return i};return s?r(s):{}}function f({fileName:n="default.css",path:e}){try{const s=`${e}/dist/css/${n}`,t=a.resolve(s);return l.existsSync(t)?l.readFileSync(t,"utf8"):null}catch{return null}}const v=async({root:n,config:e})=>{const s=j(),t=e.components===!0?Object.values(s).filter(o=>!o.name.includes("@telegraph/tokens")):[],r=e.tokens.length>0?Object.values(s).filter(o=>o.name.includes("@telegraph/tokens")):[],c=t.map(o=>f({path:o.path})).filter(Boolean),i=e.tokens.map(o=>r.map(d=>f({path:d.path,fileName:`${o}.css`})).filter(Boolean)).filter(Boolean),u=[...c,...i];for(const o of u){const p=m.parse(o);n.append(p)}},w=()=>({postcssPlugin:"@telegraph/style-engine",plugins:[{postcssPlugin:"style-engine",async Once(n){const e={tokens:[],components:!1};n.walkAtRules("telegraph",s=>{s.params==="components"&&(e.components=!0,s.remove()),s.params==="tokens-light"&&(e.tokens.push("light"),s.remove()),s.params==="tokens-dark"&&(e.tokens.push("dark"),s.remove()),s.params==="tokens"&&(e.tokens.push("default"),s.remove())}),await v({root:n,config:{tokens:e.tokens,components:e.components}})}}]}),O=Object.assign(w,{postcss:!0});module.exports=O;
+"use strict";const a=require("path"),l=require("fs"),m=require("postcss");function y(t=process.cwd()){let e=t,s=!0;for(;s;){const n=a.join(e,"package.json");if(l.existsSync(n))try{if(JSON.parse(l.readFileSync(n,"utf8")).workspaces)return e}catch{}const r=a.dirname(e);r===e&&(s=!1),e=r}}const d=(t,e)=>{var s;if(!(!t.dependencies||((s=Object.keys(t.dependencies))==null?void 0:s.length)===0))return Object.entries(t.dependencies).reduce((n,[r,c])=>(r.startsWith("@telegraph/")&&(n[r]={name:r,version:c,path:a.resolve(e,"node_modules",r)}),n),{})};function v(){const t=a.resolve(process.cwd(),"package.json"),e=JSON.parse(l.readFileSync(t,"utf8")),s=d(e,process.cwd()),n=y(),r=c=>{if(!c||Object.keys(c).length===0)return c;const i={...c};for(const u of Object.values(c)){let o,p;u.version.includes("workspace:")&&n?(o=a.resolve(n,"node_modules",u.name,"package.json"),p=n):(o=a.resolve(process.cwd(),"node_modules",u.name,"package.json"),p=process.cwd());try{const g=JSON.parse(l.readFileSync(o,"utf8")),h=d(g,p);if(Object.assign(i,h),h){const k=r(h);Object.assign(i,k)}}catch{continue}}return i};return s?r(s):{}}function f({fileName:t="default.css",path:e}){try{const s=`${e}/dist/css/${t}`,n=a.resolve(s);return l.existsSync(n)?l.readFileSync(n,"utf8"):null}catch{return null}}const j=async({root:t,config:e})=>{const s=v(),n=e.components===!0?Object.values(s).filter(o=>!o.name.includes("@telegraph/tokens")):[],r=e.tokens.length>0?Object.values(s).filter(o=>o.name.includes("@telegraph/tokens")):[],c=n.map(o=>f({path:o.path})).filter(Boolean),i=e.tokens.map(o=>r.map(g=>f({path:g.path,fileName:`${o}.css`})).filter(Boolean)).filter(Boolean),u=[...c,...i];for(const o of u){const p=m.parse(o);t.append(p)}},O=()=>({postcssPlugin:"@telegraph/style-engine",plugins:[{postcssPlugin:"telegraph",AtRule:{telegraph(){}},async Once(t){const e={tokens:[],components:!1};t.walkAtRules("telegraph",s=>{s.params==="components"&&(e.components=!0,s.remove()),s.params==="tokens-light"&&(e.tokens.push("light"),s.remove()),s.params==="tokens-dark"&&(e.tokens.push("dark"),s.remove()),s.params==="tokens"&&(e.tokens.push("default"),s.remove())}),await j({root:t,config:{tokens:e.tokens,components:e.components}})}}]}),P=Object.assign(O,{postcss:!0});module.exports=P;
 //# sourceMappingURL=postcss.js.map

package/dist/cjs/postcss.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"postcss.js","sources":["../../src/plugins/postcss.ts"],"sourcesContent":["import { type AcceptedPlugin, type PluginCreator, type Root } from \"postcss\";\n\n// Using require() instead of import to prevent ESM-related bugs in PostCSS.\n// ESM = ECMAScript Modules (the import/export syntax)\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodePath = require(\"path\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodeFs = require(\"fs\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst postcss = require(\"postcss\");\n\ntype PkgJson = {\n dependencies?: Record<string, string>;\n devDependencies?: Record<string, string>;\n};\n\ntype DepObject = Record<\n string,\n {\n name: string;\n version: string;\n path: string;\n }\n>;\n\n/*\n Traverses up the directory tree to find the root of the monorepo by looking for a package.json with workspaces.\n * This is needed to properly resolve workspace dependencies in a monorepo setup.\n /\nfunction findMonorepoRoot(start = process.cwd()): string {\n let current = start;\n let run = true;\n\n while (run) {\n const pkgJsonPath = nodePath.join(current, \"package.json\");\n if (nodeFs.existsSync(pkgJsonPath)) {\n try {\n const pkg = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n if (pkg.workspaces) {\n return current;\n }\n } catch {\n // malformed package.json, skip\n }\n }\n\n const parent = nodePath.dirname(current);\n if (parent === current) run = false;\n current = parent;\n }\n\n throw new Error(\n 'Could not find monorepo root (no package.json with \"workspaces\" found)',\n );\n}\n\n/\n Extracts all @telegraph/* dependencies from a package.json file and returns them with their paths.\n * This is used to find all Telegraph packages that might contain CSS we need to include.\n /\nconst getTelegraphDepsFromPackageJson = (\n pkg: PkgJson,\n pkgPath: string,\n): DepObject \| undefined => {\n if (!pkg.dependencies \|\| Object.keys(pkg.dependencies)?.length === 0) return;\n\n return Object.entries(pkg.dependencies).reduce((acc, [dep, version]) => {\n if (dep.startsWith(\"@telegraph/\")) {\n acc[dep] = {\n name: dep,\n version,\n path: nodePath.resolve(pkgPath, \"node_modules\", dep),\n };\n }\n return acc;\n }, {} as DepObject);\n};\n\n/\n Gets all Telegraph dependencies recursively, including dependencies of dependencies.\n * Handles both normal npm dependencies and workspace dependencies in a monorepo.\n /\nfunction getTelegraphDeps(): DepObject {\n const pkgPath = nodePath.resolve(process.cwd(), \"package.json\");\n const pkg = JSON.parse(nodeFs.readFileSync(pkgPath, \"utf8\"));\n const topLevelDeps = getTelegraphDepsFromPackageJson(pkg, process.cwd());\n const monorepoRoot = findMonorepoRoot();\n\n const recursivelyGetTelegraphDeps = (deps: DepObject): DepObject => {\n if (!deps \|\| Object.keys(deps).length === 0) {\n return deps;\n }\n\n const allDeps = { ...deps };\n\n for (const dep of Object.values(deps)) {\n let pkgJsonPath: string;\n let searchPath: string;\n\n if (dep.version.includes(\"workspace:\") && monorepoRoot) {\n pkgJsonPath = nodePath.resolve(\n monorepoRoot,\n \"node_modules\",\n dep.name,\n \"package.json\",\n );\n searchPath = monorepoRoot;\n } else {\n pkgJsonPath = nodePath.resolve(\n process.cwd(),\n \"node_modules\",\n dep.name,\n \"package.json\",\n );\n searchPath = process.cwd();\n }\n\n try {\n const pkgJson = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n const deps = getTelegraphDepsFromPackageJson(pkgJson, searchPath);\n\n // Merge new dependencies into allDeps\n Object.assign(allDeps, deps);\n\n if (deps) {\n // Recursively get dependencies of dependencies\n const nestedDeps = recursivelyGetTelegraphDeps(deps);\n Object.assign(allDeps, nestedDeps);\n }\n } catch (err) {\n // Skip if package.json cannot be read\n continue;\n }\n }\n\n return allDeps;\n };\n\n if (topLevelDeps) {\n return recursivelyGetTelegraphDeps(topLevelDeps);\n }\n\n return {};\n}\n\ntype GetCssStylesParams = {\n fileName?: string;\n path: string;\n};\n\n/\n Reads CSS file content from a Telegraph package's dist/css directory.\n * Returns null if the file doesn't exist or can't be read.\n /\nfunction getCssStyles({\n fileName = \"default.css\",\n path,\n}: GetCssStylesParams): string \| null {\n try {\n const cssPath = `${path}/dist/css/${fileName}`;\n const pkgPath = nodePath.resolve(cssPath);\n\n if (nodeFs.existsSync(pkgPath)) {\n return nodeFs.readFileSync(pkgPath, \"utf8\");\n }\n\n return null;\n } catch {\n return null;\n }\n}\n\ntype BuildTelegraphCssParams = {\n root: Root;\n config: {\n tokens: Array<\"light\" \| \"dark\" \| \"default\">;\n components: boolean;\n };\n};\n\n/\n Main function that builds the final CSS by:\n * 1. Getting all Telegraph dependencies\n * 2. Filtering for either token packages or component packages based on config\n * 3. Reading their CSS files\n * 4. Appending all CSS to the PostCSS Root node\n /\nconst buildTelegraphCss = async ({ root, config }: BuildTelegraphCssParams) => {\n const deps = getTelegraphDeps();\n\n const depsWithoutTokens =\n config.components === true\n ? Object.values(deps).filter(\n (dep) => !dep.name.includes(\"@telegraph/tokens\"),\n )\n : [];\n\n const tokensDeps =\n config.tokens.length > 0\n ? Object.values(deps).filter((dep) =>\n dep.name.includes(\"@telegraph/tokens\"),\n )\n : [];\n\n const cssFiles = depsWithoutTokens\n .map((dep) => getCssStyles({ path: dep.path }))\n .filter(Boolean) as Array<string>;\n\n const tokensCssFiles = config.tokens\n .map((token) => {\n const cssFile = tokensDeps.map((dep) =>\n getCssStyles({ path: dep.path, fileName: `${token}.css` }),\n );\n\n return cssFile.filter(Boolean) as Array<string>;\n })\n .filter(Boolean);\n\n const allCssFiles = [...cssFiles, ...tokensCssFiles];\n\n for (const content of allCssFiles) {\n const parsed = postcss.parse(content);\n root.append(parsed);\n }\n};\n\n/\n PostCSS plugin that processes @telegraph rules in CSS files.\n * It looks for @telegraph tokens, @telegraph tokens-light, @telegraph tokens-dark,\n * and @telegraph components rules and includes the appropriate CSS from Telegraph packages.\n */\nconst styleEnginePostCssPlugin = (): AcceptedPlugin => {\n return {\n postcssPlugin: \"@telegraph/style-engine\",\n plugins: [\n {\n postcssPlugin: \"style-engine\",\n async Once(root) {\n const run = {\n tokens: [] as BuildTelegraphCssParams[\"config\"][\"tokens\"],\n components: false,\n };\n root.walkAtRules(\"telegraph\", (atRule) => {\n if (atRule.params === \"components\") {\n run.components = true;\n atRule.remove();\n }\n\n if (atRule.params === \"tokens-light\") {\n run.tokens.push(\"light\");\n atRule.remove();\n }\n\n if (atRule.params === \"tokens-dark\") {\n run.tokens.push(\"dark\");\n atRule.remove();\n }\n\n if (atRule.params === \"tokens\") {\n run.tokens.push(\"default\");\n atRule.remove();\n }\n });\n\n await buildTelegraphCss({\n root,\n config: {\n tokens: run.tokens,\n components: run.components,\n },\n });\n },\n },\n ],\n };\n};\n\nexport default Object.assign(styleEnginePostCssPlugin, {\n postcss: true,\n}) as PluginCreator<Record<string, never>>;\n"],"names":["nodePath","nodeFs","postcss","findMonorepoRoot","start","current","run","pkgJsonPath","parent","getTelegraphDepsFromPackageJson","pkg","pkgPath","_a","acc","dep","version","getTelegraphDeps","topLevelDeps","monorepoRoot","recursivelyGetTelegraphDeps","deps","allDeps","searchPath","pkgJson","nestedDeps","getCssStyles","fileName","path","cssPath","buildTelegraphCss","root","config","depsWithoutTokens","tokensDeps","cssFiles","tokensCssFiles","token","allCssFiles","content","parsed","styleEnginePostCssPlugin","atRule","postcss$1"],"mappings":"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"}
1	+ {"version":3,"file":"postcss.js","sources":["../../src/plugins/postcss.ts"],"sourcesContent":["import { type AcceptedPlugin, type PluginCreator, type Root } from \"postcss\";\n\n// Using require() instead of import to prevent ESM-related bugs in PostCSS.\n// ESM = ECMAScript Modules (the import/export syntax)\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodePath = require(\"path\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodeFs = require(\"fs\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst postcss = require(\"postcss\");\n\ntype PkgJson = {\n dependencies?: Record<string, string>;\n devDependencies?: Record<string, string>;\n};\n\ntype DepObject = Record<\n string,\n {\n name: string;\n version: string;\n path: string;\n }\n>;\n\n/*\n Traverses up the directory tree to find the root of the monorepo by looking for a package.json with workspaces.\n * This is needed to properly resolve workspace dependencies in a monorepo setup.\n /\nfunction findMonorepoRoot(start = process.cwd()): string \| undefined {\n let current = start;\n let run = true;\n\n while (run) {\n const pkgJsonPath = nodePath.join(current, \"package.json\");\n if (nodeFs.existsSync(pkgJsonPath)) {\n try {\n const pkg = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n if (pkg.workspaces) {\n return current;\n }\n } catch {\n // malformed package.json, skip\n }\n }\n\n const parent = nodePath.dirname(current);\n if (parent === current) run = false;\n current = parent;\n }\n\n return undefined;\n}\n\n/\n Extracts all @telegraph/* dependencies from a package.json file and returns them with their paths.\n * This is used to find all Telegraph packages that might contain CSS we need to include.\n /\nconst getTelegraphDepsFromPackageJson = (\n pkg: PkgJson,\n pkgPath: string,\n): DepObject \| undefined => {\n if (!pkg.dependencies \|\| Object.keys(pkg.dependencies)?.length === 0) return;\n\n return Object.entries(pkg.dependencies).reduce((acc, [dep, version]) => {\n if (dep.startsWith(\"@telegraph/\")) {\n acc[dep] = {\n name: dep,\n version,\n path: nodePath.resolve(pkgPath, \"node_modules\", dep),\n };\n }\n return acc;\n }, {} as DepObject);\n};\n\n/\n Gets all Telegraph dependencies recursively, including dependencies of dependencies.\n * Handles both normal npm dependencies and workspace dependencies in a monorepo.\n /\nfunction getTelegraphDeps(): DepObject {\n const pkgPath = nodePath.resolve(process.cwd(), \"package.json\");\n const pkg = JSON.parse(nodeFs.readFileSync(pkgPath, \"utf8\"));\n const topLevelDeps = getTelegraphDepsFromPackageJson(pkg, process.cwd());\n const monorepoRoot = findMonorepoRoot();\n\n const recursivelyGetTelegraphDeps = (deps: DepObject): DepObject => {\n if (!deps \|\| Object.keys(deps).length === 0) {\n return deps;\n }\n\n const allDeps = { ...deps };\n\n for (const dep of Object.values(deps)) {\n let pkgJsonPath: string;\n let searchPath: string;\n\n if (dep.version.includes(\"workspace:\") && monorepoRoot) {\n pkgJsonPath = nodePath.resolve(\n monorepoRoot,\n \"node_modules\",\n dep.name,\n \"package.json\",\n );\n searchPath = monorepoRoot;\n } else {\n pkgJsonPath = nodePath.resolve(\n process.cwd(),\n \"node_modules\",\n dep.name,\n \"package.json\",\n );\n searchPath = process.cwd();\n }\n\n try {\n const pkgJson = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n const deps = getTelegraphDepsFromPackageJson(pkgJson, searchPath);\n\n // Merge new dependencies into allDeps\n Object.assign(allDeps, deps);\n\n if (deps) {\n // Recursively get dependencies of dependencies\n const nestedDeps = recursivelyGetTelegraphDeps(deps);\n Object.assign(allDeps, nestedDeps);\n }\n } catch (err) {\n // Skip if package.json cannot be read\n continue;\n }\n }\n\n return allDeps;\n };\n\n if (topLevelDeps) {\n return recursivelyGetTelegraphDeps(topLevelDeps);\n }\n\n return {};\n}\n\ntype GetCssStylesParams = {\n fileName?: string;\n path: string;\n};\n\n/\n Reads CSS file content from a Telegraph package's dist/css directory.\n * Returns null if the file doesn't exist or can't be read.\n /\nfunction getCssStyles({\n fileName = \"default.css\",\n path,\n}: GetCssStylesParams): string \| null {\n try {\n const cssPath = `${path}/dist/css/${fileName}`;\n const pkgPath = nodePath.resolve(cssPath);\n\n if (nodeFs.existsSync(pkgPath)) {\n return nodeFs.readFileSync(pkgPath, \"utf8\");\n }\n\n return null;\n } catch {\n return null;\n }\n}\n\ntype BuildTelegraphCssParams = {\n root: Root;\n config: {\n tokens: Array<\"light\" \| \"dark\" \| \"default\">;\n components: boolean;\n };\n};\n\n/\n Main function that builds the final CSS by:\n * 1. Getting all Telegraph dependencies\n * 2. Filtering for either token packages or component packages based on config\n * 3. Reading their CSS files\n * 4. Appending all CSS to the PostCSS Root node\n /\nconst buildTelegraphCss = async ({ root, config }: BuildTelegraphCssParams) => {\n const deps = getTelegraphDeps();\n\n const depsWithoutTokens =\n config.components === true\n ? Object.values(deps).filter(\n (dep) => !dep.name.includes(\"@telegraph/tokens\"),\n )\n : [];\n\n const tokensDeps =\n config.tokens.length > 0\n ? Object.values(deps).filter((dep) =>\n dep.name.includes(\"@telegraph/tokens\"),\n )\n : [];\n\n const cssFiles = depsWithoutTokens\n .map((dep) => getCssStyles({ path: dep.path }))\n .filter(Boolean) as Array<string>;\n\n const tokensCssFiles = config.tokens\n .map((token) => {\n const cssFile = tokensDeps.map((dep) =>\n getCssStyles({ path: dep.path, fileName: `${token}.css` }),\n );\n\n return cssFile.filter(Boolean) as Array<string>;\n })\n .filter(Boolean);\n\n const allCssFiles = [...cssFiles, ...tokensCssFiles];\n\n for (const content of allCssFiles) {\n const parsed = postcss.parse(content);\n root.append(parsed);\n }\n};\n\n/\n PostCSS plugin that processes @telegraph rules in CSS files.\n * It looks for @telegraph tokens, @telegraph tokens-light, @telegraph tokens-dark,\n * and @telegraph components rules and includes the appropriate CSS from Telegraph packages.\n */\nconst styleEnginePostCssPlugin = (): AcceptedPlugin => {\n return {\n postcssPlugin: \"@telegraph/style-engine\",\n plugins: [\n {\n postcssPlugin: \"telegraph\",\n AtRule: {\n telegraph() {},\n },\n async Once(root) {\n const run = {\n tokens: [] as BuildTelegraphCssParams[\"config\"][\"tokens\"],\n components: false,\n };\n root.walkAtRules(\"telegraph\", (atRule) => {\n if (atRule.params === \"components\") {\n run.components = true;\n atRule.remove();\n }\n\n if (atRule.params === \"tokens-light\") {\n run.tokens.push(\"light\");\n atRule.remove();\n }\n\n if (atRule.params === \"tokens-dark\") {\n run.tokens.push(\"dark\");\n atRule.remove();\n }\n\n if (atRule.params === \"tokens\") {\n run.tokens.push(\"default\");\n atRule.remove();\n }\n });\n\n await buildTelegraphCss({\n root,\n config: {\n tokens: run.tokens,\n components: run.components,\n },\n });\n },\n },\n ],\n };\n};\n\nexport default Object.assign(styleEnginePostCssPlugin, {\n postcss: true,\n}) as PluginCreator<Record<string, never>>;\n"],"names":["nodePath","nodeFs","postcss","findMonorepoRoot","start","current","run","pkgJsonPath","parent","getTelegraphDepsFromPackageJson","pkg","pkgPath","_a","acc","dep","version","getTelegraphDeps","topLevelDeps","monorepoRoot","recursivelyGetTelegraphDeps","deps","allDeps","searchPath","pkgJson","nestedDeps","getCssStyles","fileName","path","cssPath","buildTelegraphCss","root","config","depsWithoutTokens","tokensDeps","cssFiles","tokensCssFiles","token","allCssFiles","content","parsed","styleEnginePostCssPlugin","atRule","postcss$1"],"mappings":"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"}

package/dist/esm/index.mjs CHANGED Viewed

@@ -3,7 +3,7 @@ import { recipe as Y } from "@vanilla-extract/recipes";
 import { createSprinkles as G, defineProperties as H } from "@vanilla-extract/sprinkles";
 import i from "react";
 import c from "@telegraph/tokens";
-const w = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)", black: "var(--tgph-black)", "surface-1": "var(--tgph-surface-1)", "surface-2": "var(--tgph-surface-2)", "alpha-white-1": "var(--tgph-alpha-white-1)", "alpha-white-2": "var(--tgph-alpha-white-2)", "alpha-white-3": "var(--tgph-alpha-white-3)", "alpha-white-4": "var(--tgph-alpha-white-4)", "alpha-white-5": "var(--tgph-alpha-white-5)", "alpha-white-6": "var(--tgph-alpha-white-6)", "alpha-white-7": "var(--tgph-alpha-white-7)", "alpha-white-8": "var(--tgph-alpha-white-8)", "alpha-white-9": "var(--tgph-alpha-white-9)", "alpha-white-10": "var(--tgph-alpha-white-10)", "alpha-white-11": "var(--tgph-alpha-white-11)", "alpha-white-12": "var(--tgph-alpha-white-12)", "alpha-black-1": "var(--tgph-alpha-black-1)", "alpha-black-2": "var(--tgph-alpha-black-2)", "alpha-black-3": "var(--tgph-alpha-black-3)", "alpha-black-4": "var(--tgph-alpha-black-4)", "alpha-black-5": "var(--tgph-alpha-black-5)", "alpha-black-6": "var(--tgph-alpha-black-6)", "alpha-black-7": "var(--tgph-alpha-black-7)", "alpha-black-8": "var(--tgph-alpha-black-8)", "alpha-black-9": "var(--tgph-alpha-black-9)", "alpha-black-10": "var(--tgph-alpha-black-10)", "alpha-black-11": "var(--tgph-alpha-black-11)", "alpha-black-12": "var(--tgph-alpha-black-12)", "gray-1": "var(--tgph-gray-1)", "gray-2": "var(--tgph-gray-2)", "gray-3": "var(--tgph-gray-3)", "gray-4": "var(--tgph-gray-4)", "gray-5": "var(--tgph-gray-5)", "gray-6": "var(--tgph-gray-6)", "gray-7": "var(--tgph-gray-7)", "gray-8": "var(--tgph-gray-8)", "gray-9": "var(--tgph-gray-9)", "gray-10": "var(--tgph-gray-10)", "gray-11": "var(--tgph-gray-11)", "gray-12": "var(--tgph-gray-12)", "beige-1": "var(--tgph-beige-1)", "beige-2": "var(--tgph-beige-2)", "beige-3": "var(--tgph-beige-3)", "beige-4": "var(--tgph-beige-4)", "beige-5": "var(--tgph-beige-5)", "beige-6": "var(--tgph-beige-6)", "beige-7": "var(--tgph-beige-7)", "beige-8": "var(--tgph-beige-8)", "beige-9": "var(--tgph-beige-9)", "beige-10": "var(--tgph-beige-10)", "beige-11": "var(--tgph-beige-11)", "beige-12": "var(--tgph-beige-12)", "accent-1": "var(--tgph-accent-1)", "accent-2": "var(--tgph-accent-2)", "accent-3": "var(--tgph-accent-3)", "accent-4": "var(--tgph-accent-4)", "accent-5": "var(--tgph-accent-5)", "accent-6": "var(--tgph-accent-6)", "accent-7": "var(--tgph-accent-7)", "accent-8": "var(--tgph-accent-8)", "accent-9": "var(--tgph-accent-9)", "accent-10": "var(--tgph-accent-10)", "accent-11": "var(--tgph-accent-11)", "accent-12": "var(--tgph-accent-12)", "green-1": "var(--tgph-green-1)", "green-2": "var(--tgph-green-2)", "green-3": "var(--tgph-green-3)", "green-4": "var(--tgph-green-4)", "green-5": "var(--tgph-green-5)", "green-6": "var(--tgph-green-6)", "green-7": "var(--tgph-green-7)", "green-8": "var(--tgph-green-8)", "green-9": "var(--tgph-green-9)", "green-10": "var(--tgph-green-10)", "green-11": "var(--tgph-green-11)", "green-12": "var(--tgph-green-12)", "yellow-1": "var(--tgph-yellow-1)", "yellow-2": "var(--tgph-yellow-2)", "yellow-3": "var(--tgph-yellow-3)", "yellow-4": "var(--tgph-yellow-4)", "yellow-5": "var(--tgph-yellow-5)", "yellow-6": "var(--tgph-yellow-6)", "yellow-7": "var(--tgph-yellow-7)", "yellow-8": "var(--tgph-yellow-8)", "yellow-9": "var(--tgph-yellow-9)", "yellow-10": "var(--tgph-yellow-10)", "yellow-11": "var(--tgph-yellow-11)", "yellow-12": "var(--tgph-yellow-12)", "blue-1": "var(--tgph-blue-1)", "blue-2": "var(--tgph-blue-2)", "blue-3": "var(--tgph-blue-3)", "blue-4": "var(--tgph-blue-4)", "blue-5": "var(--tgph-blue-5)", "blue-6": "var(--tgph-blue-6)", "blue-7": "var(--tgph-blue-7)", "blue-8": "var(--tgph-blue-8)", "blue-9": "var(--tgph-blue-9)", "blue-10": "var(--tgph-blue-10)", "blue-11": "var(--tgph-blue-11)", "blue-12": "var(--tgph-blue-12)", "red-1": "var(--tgph-red-1)", "red-2": "var(--tgph-red-2)", "red-3": "var(--tgph-red-3)", "red-4": "var(--tgph-red-4)", "red-5": "var(--tgph-red-5)", "red-6": "var(--tgph-red-6)", "red-7": "var(--tgph-red-7)", "red-8": "var(--tgph-red-8)", "red-9": "var(--tgph-red-9)", "red-10": "var(--tgph-red-10)", "red-11": "var(--tgph-red-11)", "red-12": "var(--tgph-red-12)", "purple-1": "var(--tgph-purple-1)", "purple-2": "var(--tgph-purple-2)", "purple-3": "var(--tgph-purple-3)", "purple-4": "var(--tgph-purple-4)", "purple-5": "var(--tgph-purple-5)", "purple-6": "var(--tgph-purple-6)", "purple-7": "var(--tgph-purple-7)", "purple-8": "var(--tgph-purple-8)", "purple-9": "var(--tgph-purple-9)", "purple-10": "var(--tgph-purple-10)", "purple-11": "var(--tgph-purple-11)", "purple-12": "var(--tgph-purple-12)" }, k = { 0: "var(--tgph-rounded-0)", 1: "var(--tgph-rounded-1)", 2: "var(--tgph-rounded-2)", 3: "var(--tgph-rounded-3)", 4: "var(--tgph-rounded-4)", 5: "var(--tgph-rounded-5)", 6: "var(--tgph-rounded-6)", full: "var(--tgph-rounded-full)" }, m = { 0: "var(--tgph-shadow-0)", 1: "var(--tgph-shadow-1)", 2: "var(--tgph-shadow-2)", 3: "var(--tgph-shadow-3)", inner: "var(--tgph-shadow-inner)" }, f = { 0: "var(--tgph-spacing-0)", 1: "var(--tgph-spacing-1)", 2: "var(--tgph-spacing-2)", 3: "var(--tgph-spacing-3)", 4: "var(--tgph-spacing-4)", 5: "var(--tgph-spacing-5)", 6: "var(--tgph-spacing-6)", 7: "var(--tgph-spacing-7)", 8: "var(--tgph-spacing-8)", 9: "var(--tgph-spacing-9)", 10: "var(--tgph-spacing-10)", 11: "var(--tgph-spacing-11)", 12: "var(--tgph-spacing-12)", 14: "var(--tgph-spacing-14)", 16: "var(--tgph-spacing-16)", 20: "var(--tgph-spacing-20)", 24: "var(--tgph-spacing-24)", 28: "var(--tgph-spacing-28)", 32: "var(--tgph-spacing-32)", 36: "var(--tgph-spacing-36)", 40: "var(--tgph-spacing-40)", 44: "var(--tgph-spacing-44)", 48: "var(--tgph-spacing-48)", 52: "var(--tgph-spacing-52)", 56: "var(--tgph-spacing-56)", 60: "var(--tgph-spacing-60)", 64: "var(--tgph-spacing-64)", 72: "var(--tgph-spacing-72)", 80: "var(--tgph-spacing-80)", 96: "var(--tgph-spacing-96)", 140: "var(--tgph-spacing-140)", 160: "var(--tgph-spacing-160)", px: "var(--tgph-spacing-px)", full: "var(--tgph-spacing-full)", auto: "var(--tgph-spacing-auto)" }, x = { sans: "var(--tgph-family-sans)", mono: "var(--tgph-family-mono)" }, P = { 0: "var(--tgph-leading-0)", 1: "var(--tgph-leading-1)", 2: "var(--tgph-leading-2)", 3: "var(--tgph-leading-3)", 4: "var(--tgph-leading-4)", 5: "var(--tgph-leading-5)", 6: "var(--tgph-leading-6)", 7: "var(--tgph-leading-7)", 8: "var(--tgph-leading-8)", 9: "var(--tgph-leading-9)", "code-0": "var(--tgph-leading-code-0)", "code-1": "var(--tgph-leading-code-1)", "code-2": "var(--tgph-leading-code-2)", "code-3": "var(--tgph-leading-code-3)", "code-4": "var(--tgph-leading-code-4)", "code-5": "var(--tgph-leading-code-5)", "code-6": "var(--tgph-leading-code-6)", "code-7": "var(--tgph-leading-code-7)", "code-8": "var(--tgph-leading-code-8)", "code-9": "var(--tgph-leading-code-9)" }, I = { 0: "var(--tgph-tracking-0)", 1: "var(--tgph-tracking-1)", 2: "var(--tgph-tracking-2)", 3: "var(--tgph-tracking-3)", 4: "var(--tgph-tracking-4)", 5: "var(--tgph-tracking-5)", 6: "var(--tgph-tracking-6)", 7: "var(--tgph-tracking-7)", 8: "var(--tgph-tracking-8)", 9: "var(--tgph-tracking-9)" }, V = { 0: "var(--tgph-text-0)", 1: "var(--tgph-text-1)", 2: "var(--tgph-text-2)", 3: "var(--tgph-text-3)", 4: "var(--tgph-text-4)", 5: "var(--tgph-text-5)", 6: "var(--tgph-text-6)", 7: "var(--tgph-text-7)", 8: "var(--tgph-text-8)", 9: "var(--tgph-text-9)", "code-0": "var(--tgph-text-code-0)", "code-1": "var(--tgph-text-code-1)", "code-2": "var(--tgph-text-code-2)", "code-4": "var(--tgph-text-code-4)", "code-5": "var(--tgph-text-code-5)", "code-6": "var(--tgph-text-code-6)", "code-7": "var(--tgph-text-code-7)", "code-8": "var(--tgph-text-code-8)", "code-9": "var(--tgph-text-code-9)" }, z = { regular: "var(--tgph-weight-regular)", medium: "var(--tgph-weight-medium)", "semi-bold": "var(--tgph-weight-semi-bold)" }, S = { sm: "var(--tgph-breakpoint-sm)", md: "var(--tgph-breakpoint-md)", lg: "var(--tgph-breakpoint-lg)", xl: "var(--tgph-breakpoint-xl)", "2xl": "var(--tgph-breakpoint-2xl)" }, O = { hidden: "var(--tgph-zIndex-hidden)", base: "var(--tgph-zIndex-base)", auto: "var(--tgph-zIndex-auto)", dropdown: "var(--tgph-zIndex-dropdown)", sticky: "var(--tgph-zIndex-sticky)", banner: "var(--tgph-zIndex-banner)", overlay: "var(--tgph-zIndex-overlay)", modal: "var(--tgph-zIndex-modal)", popover: "var(--tgph-zIndex-popover)", skipLink: "var(--tgph-zIndex-skipLink)", toast: "var(--tgph-zIndex-toast)", tooltip: "var(--tgph-zIndex-tooltip)" }, L = {
+const w = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)", black: "var(--tgph-black)", "surface-1": "var(--tgph-surface-1)", "surface-2": "var(--tgph-surface-2)", "alpha-white-1": "var(--tgph-alpha-white-1)", "alpha-white-2": "var(--tgph-alpha-white-2)", "alpha-white-3": "var(--tgph-alpha-white-3)", "alpha-white-4": "var(--tgph-alpha-white-4)", "alpha-white-5": "var(--tgph-alpha-white-5)", "alpha-white-6": "var(--tgph-alpha-white-6)", "alpha-white-7": "var(--tgph-alpha-white-7)", "alpha-white-8": "var(--tgph-alpha-white-8)", "alpha-white-9": "var(--tgph-alpha-white-9)", "alpha-white-10": "var(--tgph-alpha-white-10)", "alpha-white-11": "var(--tgph-alpha-white-11)", "alpha-white-12": "var(--tgph-alpha-white-12)", "alpha-black-1": "var(--tgph-alpha-black-1)", "alpha-black-2": "var(--tgph-alpha-black-2)", "alpha-black-3": "var(--tgph-alpha-black-3)", "alpha-black-4": "var(--tgph-alpha-black-4)", "alpha-black-5": "var(--tgph-alpha-black-5)", "alpha-black-6": "var(--tgph-alpha-black-6)", "alpha-black-7": "var(--tgph-alpha-black-7)", "alpha-black-8": "var(--tgph-alpha-black-8)", "alpha-black-9": "var(--tgph-alpha-black-9)", "alpha-black-10": "var(--tgph-alpha-black-10)", "alpha-black-11": "var(--tgph-alpha-black-11)", "alpha-black-12": "var(--tgph-alpha-black-12)", "gray-1": "var(--tgph-gray-1)", "gray-2": "var(--tgph-gray-2)", "gray-3": "var(--tgph-gray-3)", "gray-4": "var(--tgph-gray-4)", "gray-5": "var(--tgph-gray-5)", "gray-6": "var(--tgph-gray-6)", "gray-7": "var(--tgph-gray-7)", "gray-8": "var(--tgph-gray-8)", "gray-9": "var(--tgph-gray-9)", "gray-10": "var(--tgph-gray-10)", "gray-11": "var(--tgph-gray-11)", "gray-12": "var(--tgph-gray-12)", "beige-1": "var(--tgph-beige-1)", "beige-2": "var(--tgph-beige-2)", "beige-3": "var(--tgph-beige-3)", "beige-4": "var(--tgph-beige-4)", "beige-5": "var(--tgph-beige-5)", "beige-6": "var(--tgph-beige-6)", "beige-7": "var(--tgph-beige-7)", "beige-8": "var(--tgph-beige-8)", "beige-9": "var(--tgph-beige-9)", "beige-10": "var(--tgph-beige-10)", "beige-11": "var(--tgph-beige-11)", "beige-12": "var(--tgph-beige-12)", "accent-1": "var(--tgph-accent-1)", "accent-2": "var(--tgph-accent-2)", "accent-3": "var(--tgph-accent-3)", "accent-4": "var(--tgph-accent-4)", "accent-5": "var(--tgph-accent-5)", "accent-6": "var(--tgph-accent-6)", "accent-7": "var(--tgph-accent-7)", "accent-8": "var(--tgph-accent-8)", "accent-9": "var(--tgph-accent-9)", "accent-10": "var(--tgph-accent-10)", "accent-11": "var(--tgph-accent-11)", "accent-12": "var(--tgph-accent-12)", "green-1": "var(--tgph-green-1)", "green-2": "var(--tgph-green-2)", "green-3": "var(--tgph-green-3)", "green-4": "var(--tgph-green-4)", "green-5": "var(--tgph-green-5)", "green-6": "var(--tgph-green-6)", "green-7": "var(--tgph-green-7)", "green-8": "var(--tgph-green-8)", "green-9": "var(--tgph-green-9)", "green-10": "var(--tgph-green-10)", "green-11": "var(--tgph-green-11)", "green-12": "var(--tgph-green-12)", "yellow-1": "var(--tgph-yellow-1)", "yellow-2": "var(--tgph-yellow-2)", "yellow-3": "var(--tgph-yellow-3)", "yellow-4": "var(--tgph-yellow-4)", "yellow-5": "var(--tgph-yellow-5)", "yellow-6": "var(--tgph-yellow-6)", "yellow-7": "var(--tgph-yellow-7)", "yellow-8": "var(--tgph-yellow-8)", "yellow-9": "var(--tgph-yellow-9)", "yellow-10": "var(--tgph-yellow-10)", "yellow-11": "var(--tgph-yellow-11)", "yellow-12": "var(--tgph-yellow-12)", "blue-1": "var(--tgph-blue-1)", "blue-2": "var(--tgph-blue-2)", "blue-3": "var(--tgph-blue-3)", "blue-4": "var(--tgph-blue-4)", "blue-5": "var(--tgph-blue-5)", "blue-6": "var(--tgph-blue-6)", "blue-7": "var(--tgph-blue-7)", "blue-8": "var(--tgph-blue-8)", "blue-9": "var(--tgph-blue-9)", "blue-10": "var(--tgph-blue-10)", "blue-11": "var(--tgph-blue-11)", "blue-12": "var(--tgph-blue-12)", "red-1": "var(--tgph-red-1)", "red-2": "var(--tgph-red-2)", "red-3": "var(--tgph-red-3)", "red-4": "var(--tgph-red-4)", "red-5": "var(--tgph-red-5)", "red-6": "var(--tgph-red-6)", "red-7": "var(--tgph-red-7)", "red-8": "var(--tgph-red-8)", "red-9": "var(--tgph-red-9)", "red-10": "var(--tgph-red-10)", "red-11": "var(--tgph-red-11)", "red-12": "var(--tgph-red-12)", "purple-1": "var(--tgph-purple-1)", "purple-2": "var(--tgph-purple-2)", "purple-3": "var(--tgph-purple-3)", "purple-4": "var(--tgph-purple-4)", "purple-5": "var(--tgph-purple-5)", "purple-6": "var(--tgph-purple-6)", "purple-7": "var(--tgph-purple-7)", "purple-8": "var(--tgph-purple-8)", "purple-9": "var(--tgph-purple-9)", "purple-10": "var(--tgph-purple-10)", "purple-11": "var(--tgph-purple-11)", "purple-12": "var(--tgph-purple-12)" }, k = { 0: "var(--tgph-rounded-0)", 1: "var(--tgph-rounded-1)", 2: "var(--tgph-rounded-2)", 3: "var(--tgph-rounded-3)", 4: "var(--tgph-rounded-4)", 5: "var(--tgph-rounded-5)", 6: "var(--tgph-rounded-6)", full: "var(--tgph-rounded-full)" }, m = { 0: "var(--tgph-shadow-0)", 1: "var(--tgph-shadow-1)", 2: "var(--tgph-shadow-2)", 3: "var(--tgph-shadow-3)", inner: "var(--tgph-shadow-inner)" }, f = { 0: "var(--tgph-spacing-0)", 1: "var(--tgph-spacing-1)", 2: "var(--tgph-spacing-2)", 3: "var(--tgph-spacing-3)", 4: "var(--tgph-spacing-4)", 5: "var(--tgph-spacing-5)", 6: "var(--tgph-spacing-6)", 7: "var(--tgph-spacing-7)", 8: "var(--tgph-spacing-8)", 9: "var(--tgph-spacing-9)", 10: "var(--tgph-spacing-10)", 11: "var(--tgph-spacing-11)", 12: "var(--tgph-spacing-12)", 14: "var(--tgph-spacing-14)", 16: "var(--tgph-spacing-16)", 20: "var(--tgph-spacing-20)", 24: "var(--tgph-spacing-24)", 28: "var(--tgph-spacing-28)", 32: "var(--tgph-spacing-32)", 36: "var(--tgph-spacing-36)", 40: "var(--tgph-spacing-40)", 44: "var(--tgph-spacing-44)", 48: "var(--tgph-spacing-48)", 52: "var(--tgph-spacing-52)", 56: "var(--tgph-spacing-56)", 60: "var(--tgph-spacing-60)", 64: "var(--tgph-spacing-64)", 72: "var(--tgph-spacing-72)", 80: "var(--tgph-spacing-80)", 96: "var(--tgph-spacing-96)", 120: "var(--tgph-spacing-120)", 140: "var(--tgph-spacing-140)", 160: "var(--tgph-spacing-160)", px: "var(--tgph-spacing-px)", full: "var(--tgph-spacing-full)", auto: "var(--tgph-spacing-auto)" }, x = { sans: "var(--tgph-family-sans)", mono: "var(--tgph-family-mono)" }, P = { 0: "var(--tgph-leading-0)", 1: "var(--tgph-leading-1)", 2: "var(--tgph-leading-2)", 3: "var(--tgph-leading-3)", 4: "var(--tgph-leading-4)", 5: "var(--tgph-leading-5)", 6: "var(--tgph-leading-6)", 7: "var(--tgph-leading-7)", 8: "var(--tgph-leading-8)", 9: "var(--tgph-leading-9)", "code-0": "var(--tgph-leading-code-0)", "code-1": "var(--tgph-leading-code-1)", "code-2": "var(--tgph-leading-code-2)", "code-3": "var(--tgph-leading-code-3)", "code-4": "var(--tgph-leading-code-4)", "code-5": "var(--tgph-leading-code-5)", "code-6": "var(--tgph-leading-code-6)", "code-7": "var(--tgph-leading-code-7)", "code-8": "var(--tgph-leading-code-8)", "code-9": "var(--tgph-leading-code-9)" }, I = { 0: "var(--tgph-tracking-0)", 1: "var(--tgph-tracking-1)", 2: "var(--tgph-tracking-2)", 3: "var(--tgph-tracking-3)", 4: "var(--tgph-tracking-4)", 5: "var(--tgph-tracking-5)", 6: "var(--tgph-tracking-6)", 7: "var(--tgph-tracking-7)", 8: "var(--tgph-tracking-8)", 9: "var(--tgph-tracking-9)" }, V = { 0: "var(--tgph-text-0)", 1: "var(--tgph-text-1)", 2: "var(--tgph-text-2)", 3: "var(--tgph-text-3)", 4: "var(--tgph-text-4)", 5: "var(--tgph-text-5)", 6: "var(--tgph-text-6)", 7: "var(--tgph-text-7)", 8: "var(--tgph-text-8)", 9: "var(--tgph-text-9)", "code-0": "var(--tgph-text-code-0)", "code-1": "var(--tgph-text-code-1)", "code-2": "var(--tgph-text-code-2)", "code-4": "var(--tgph-text-code-4)", "code-5": "var(--tgph-text-code-5)", "code-6": "var(--tgph-text-code-6)", "code-7": "var(--tgph-text-code-7)", "code-8": "var(--tgph-text-code-8)", "code-9": "var(--tgph-text-code-9)" }, z = { regular: "var(--tgph-weight-regular)", medium: "var(--tgph-weight-medium)", "semi-bold": "var(--tgph-weight-semi-bold)" }, S = { sm: "var(--tgph-breakpoint-sm)", md: "var(--tgph-breakpoint-md)", lg: "var(--tgph-breakpoint-lg)", xl: "var(--tgph-breakpoint-xl)", "2xl": "var(--tgph-breakpoint-2xl)" }, O = { hidden: "var(--tgph-zIndex-hidden)", base: "var(--tgph-zIndex-base)", auto: "var(--tgph-zIndex-auto)", dropdown: "var(--tgph-zIndex-dropdown)", sticky: "var(--tgph-zIndex-sticky)", banner: "var(--tgph-zIndex-banner)", overlay: "var(--tgph-zIndex-overlay)", modal: "var(--tgph-zIndex-modal)", popover: "var(--tgph-zIndex-popover)", skipLink: "var(--tgph-zIndex-skipLink)", toast: "var(--tgph-zIndex-toast)", tooltip: "var(--tgph-zIndex-tooltip)" }, L = {
   "border-style": { solid: "var(--tgph-border-style-solid)", dashed: "var(--tgph-border-style-dashed)" },
   color: w,
   rounded: k,

package/dist/esm/postcss.mjs CHANGED Viewed

@@ -1,52 +1,49 @@
 const a = require("path"), l = require("fs"), m = require("postcss");
-function y(n = process.cwd()) {
-  let e = n, s = !0;
+function y(t = process.cwd()) {
+  let e = t, s = !0;
   for (; s; ) {
-    const t = a.join(e, "package.json");
-    if (l.existsSync(t))
+    const n = a.join(e, "package.json");
+    if (l.existsSync(n))
       try {
-        if (JSON.parse(l.readFileSync(t, "utf8")).workspaces)
+        if (JSON.parse(l.readFileSync(n, "utf8")).workspaces)
           return e;
       } catch {
       }
     const r = a.dirname(e);
     r === e && (s = !1), e = r;
   }
-  throw new Error(
-    'Could not find monorepo root (no package.json with "workspaces" found)'
-  );
 }
-const g = (n, e) => {
+const h = (t, e) => {
   var s;
-  if (!(!n.dependencies || ((s = Object.keys(n.dependencies)) == null ? void 0 : s.length) === 0))
-    return Object.entries(n.dependencies).reduce((t, [r, c]) => (r.startsWith("@telegraph/") && (t[r] = {
+  if (!(!t.dependencies || ((s = Object.keys(t.dependencies)) == null ? void 0 : s.length) === 0))
+    return Object.entries(t.dependencies).reduce((n, [r, c]) => (r.startsWith("@telegraph/") && (n[r] = {
       name: r,
       version: c,
       path: a.resolve(e, "node_modules", r)
-    }), t), {});
+    }), n), {});
 };
-function j() {
-  const n = a.resolve(process.cwd(), "package.json"), e = JSON.parse(l.readFileSync(n, "utf8")), s = g(e, process.cwd()), t = y(), r = (c) => {
+function v() {
+  const t = a.resolve(process.cwd(), "package.json"), e = JSON.parse(l.readFileSync(t, "utf8")), s = h(e, process.cwd()), n = y(), r = (c) => {
     if (!c || Object.keys(c).length === 0)
       return c;
     const i = { ...c };
     for (const u of Object.values(c)) {
       let o, p;
-      u.version.includes("workspace:") && t ? (o = a.resolve(
-        t,
+      u.version.includes("workspace:") && n ? (o = a.resolve(
+        n,
         "node_modules",
         u.name,
         "package.json"
-      ), p = t) : (o = a.resolve(
+      ), p = n) : (o = a.resolve(
         process.cwd(),
         "node_modules",
         u.name,
         "package.json"
       ), p = process.cwd());
       try {
-        const d = JSON.parse(l.readFileSync(o, "utf8")), f = g(d, p);
-        if (Object.assign(i, f), f) {
-          const k = r(f);
+        const d = JSON.parse(l.readFileSync(o, "utf8")), g = h(d, p);
+        if (Object.assign(i, g), g) {
+          const k = r(g);
           Object.assign(i, k);
         }
       } catch {
@@ -57,43 +54,47 @@ function j() {
   };
   return s ? r(s) : {};
 }
-function h({
-  fileName: n = "default.css",
+function f({
+  fileName: t = "default.css",
   path: e
 }) {
   try {
-    const s = `${e}/dist/css/${n}`, t = a.resolve(s);
-    return l.existsSync(t) ? l.readFileSync(t, "utf8") : null;
+    const s = `${e}/dist/css/${t}`, n = a.resolve(s);
+    return l.existsSync(n) ? l.readFileSync(n, "utf8") : null;
   } catch {
     return null;
   }
 }
-const v = async ({ root: n, config: e }) => {
-  const s = j(), t = e.components === !0 ? Object.values(s).filter(
+const j = async ({ root: t, config: e }) => {
+  const s = v(), n = e.components === !0 ? Object.values(s).filter(
     (o) => !o.name.includes("@telegraph/tokens")
   ) : [], r = e.tokens.length > 0 ? Object.values(s).filter(
     (o) => o.name.includes("@telegraph/tokens")
-  ) : [], c = t.map((o) => h({ path: o.path })).filter(Boolean), i = e.tokens.map((o) => r.map(
-    (d) => h({ path: d.path, fileName: `${o}.css` })
+  ) : [], c = n.map((o) => f({ path: o.path })).filter(Boolean), i = e.tokens.map((o) => r.map(
+    (d) => f({ path: d.path, fileName: `${o}.css` })
   ).filter(Boolean)).filter(Boolean), u = [...c, ...i];
   for (const o of u) {
     const p = m.parse(o);
-    n.append(p);
+    t.append(p);
   }
-}, w = () => ({
+}, O = () => ({
   postcssPlugin: "@telegraph/style-engine",
   plugins: [
     {
-      postcssPlugin: "style-engine",
-      async Once(n) {
+      postcssPlugin: "telegraph",
+      AtRule: {
+        telegraph() {
+        }
+      },
+      async Once(t) {
         const e = {
           tokens: [],
           components: !1
         };
-        n.walkAtRules("telegraph", (s) => {
+        t.walkAtRules("telegraph", (s) => {
           s.params === "components" && (e.components = !0, s.remove()), s.params === "tokens-light" && (e.tokens.push("light"), s.remove()), s.params === "tokens-dark" && (e.tokens.push("dark"), s.remove()), s.params === "tokens" && (e.tokens.push("default"), s.remove());
-        }), await v({
-          root: n,
+        }), await j({
+          root: t,
           config: {
             tokens: e.tokens,
             components: e.components
@@ -102,10 +103,10 @@ const v = async ({ root: n, config: e }) => {
       }
     }
   ]
-}), O = Object.assign(w, {
+}), P = Object.assign(O, {
   postcss: !0
 });
 export {
-  O as default
+  P as default
 };
 //# sourceMappingURL=postcss.mjs.map

package/dist/esm/postcss.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"postcss.mjs","sources":["../../src/plugins/postcss.ts"],"sourcesContent":["import { type AcceptedPlugin, type PluginCreator, type Root } from \"postcss\";\n\n// Using require() instead of import to prevent ESM-related bugs in PostCSS.\n// ESM = ECMAScript Modules (the import/export syntax)\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodePath = require(\"path\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodeFs = require(\"fs\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst postcss = require(\"postcss\");\n\ntype PkgJson = {\n dependencies?: Record<string, string>;\n devDependencies?: Record<string, string>;\n};\n\ntype DepObject = Record<\n string,\n {\n name: string;\n version: string;\n path: string;\n }\n>;\n\n/*\n Traverses up the directory tree to find the root of the monorepo by looking for a package.json with workspaces.\n * This is needed to properly resolve workspace dependencies in a monorepo setup.\n /\nfunction findMonorepoRoot(start = process.cwd()): string {\n let current = start;\n let run = true;\n\n while (run) {\n const pkgJsonPath = nodePath.join(current, \"package.json\");\n if (nodeFs.existsSync(pkgJsonPath)) {\n try {\n const pkg = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n if (pkg.workspaces) {\n return current;\n }\n } catch {\n // malformed package.json, skip\n }\n }\n\n const parent = nodePath.dirname(current);\n if (parent === current) run = false;\n current = parent;\n }\n\n throw new Error(\n 'Could not find monorepo root (no package.json with \"workspaces\" found)',\n );\n}\n\n/\n Extracts all @telegraph/* dependencies from a package.json file and returns them with their paths.\n * This is used to find all Telegraph packages that might contain CSS we need to include.\n /\nconst getTelegraphDepsFromPackageJson = (\n pkg: PkgJson,\n pkgPath: string,\n): DepObject \| undefined => {\n if (!pkg.dependencies \|\| Object.keys(pkg.dependencies)?.length === 0) return;\n\n return Object.entries(pkg.dependencies).reduce((acc, [dep, version]) => {\n if (dep.startsWith(\"@telegraph/\")) {\n acc[dep] = {\n name: dep,\n version,\n path: nodePath.resolve(pkgPath, \"node_modules\", dep),\n };\n }\n return acc;\n }, {} as DepObject);\n};\n\n/\n Gets all Telegraph dependencies recursively, including dependencies of dependencies.\n * Handles both normal npm dependencies and workspace dependencies in a monorepo.\n /\nfunction getTelegraphDeps(): DepObject {\n const pkgPath = nodePath.resolve(process.cwd(), \"package.json\");\n const pkg = JSON.parse(nodeFs.readFileSync(pkgPath, \"utf8\"));\n const topLevelDeps = getTelegraphDepsFromPackageJson(pkg, process.cwd());\n const monorepoRoot = findMonorepoRoot();\n\n const recursivelyGetTelegraphDeps = (deps: DepObject): DepObject => {\n if (!deps \|\| Object.keys(deps).length === 0) {\n return deps;\n }\n\n const allDeps = { ...deps };\n\n for (const dep of Object.values(deps)) {\n let pkgJsonPath: string;\n let searchPath: string;\n\n if (dep.version.includes(\"workspace:\") && monorepoRoot) {\n pkgJsonPath = nodePath.resolve(\n monorepoRoot,\n \"node_modules\",\n dep.name,\n \"package.json\",\n );\n searchPath = monorepoRoot;\n } else {\n pkgJsonPath = nodePath.resolve(\n process.cwd(),\n \"node_modules\",\n dep.name,\n \"package.json\",\n );\n searchPath = process.cwd();\n }\n\n try {\n const pkgJson = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n const deps = getTelegraphDepsFromPackageJson(pkgJson, searchPath);\n\n // Merge new dependencies into allDeps\n Object.assign(allDeps, deps);\n\n if (deps) {\n // Recursively get dependencies of dependencies\n const nestedDeps = recursivelyGetTelegraphDeps(deps);\n Object.assign(allDeps, nestedDeps);\n }\n } catch (err) {\n // Skip if package.json cannot be read\n continue;\n }\n }\n\n return allDeps;\n };\n\n if (topLevelDeps) {\n return recursivelyGetTelegraphDeps(topLevelDeps);\n }\n\n return {};\n}\n\ntype GetCssStylesParams = {\n fileName?: string;\n path: string;\n};\n\n/\n Reads CSS file content from a Telegraph package's dist/css directory.\n * Returns null if the file doesn't exist or can't be read.\n /\nfunction getCssStyles({\n fileName = \"default.css\",\n path,\n}: GetCssStylesParams): string \| null {\n try {\n const cssPath = `${path}/dist/css/${fileName}`;\n const pkgPath = nodePath.resolve(cssPath);\n\n if (nodeFs.existsSync(pkgPath)) {\n return nodeFs.readFileSync(pkgPath, \"utf8\");\n }\n\n return null;\n } catch {\n return null;\n }\n}\n\ntype BuildTelegraphCssParams = {\n root: Root;\n config: {\n tokens: Array<\"light\" \| \"dark\" \| \"default\">;\n components: boolean;\n };\n};\n\n/\n Main function that builds the final CSS by:\n * 1. Getting all Telegraph dependencies\n * 2. Filtering for either token packages or component packages based on config\n * 3. Reading their CSS files\n * 4. Appending all CSS to the PostCSS Root node\n /\nconst buildTelegraphCss = async ({ root, config }: BuildTelegraphCssParams) => {\n const deps = getTelegraphDeps();\n\n const depsWithoutTokens =\n config.components === true\n ? Object.values(deps).filter(\n (dep) => !dep.name.includes(\"@telegraph/tokens\"),\n )\n : [];\n\n const tokensDeps =\n config.tokens.length > 0\n ? Object.values(deps).filter((dep) =>\n dep.name.includes(\"@telegraph/tokens\"),\n )\n : [];\n\n const cssFiles = depsWithoutTokens\n .map((dep) => getCssStyles({ path: dep.path }))\n .filter(Boolean) as Array<string>;\n\n const tokensCssFiles = config.tokens\n .map((token) => {\n const cssFile = tokensDeps.map((dep) =>\n getCssStyles({ path: dep.path, fileName: `${token}.css` }),\n );\n\n return cssFile.filter(Boolean) as Array<string>;\n })\n .filter(Boolean);\n\n const allCssFiles = [...cssFiles, ...tokensCssFiles];\n\n for (const content of allCssFiles) {\n const parsed = postcss.parse(content);\n root.append(parsed);\n }\n};\n\n/\n PostCSS plugin that processes @telegraph rules in CSS files.\n * It looks for @telegraph tokens, @telegraph tokens-light, @telegraph tokens-dark,\n * and @telegraph components rules and includes the appropriate CSS from Telegraph packages.\n */\nconst styleEnginePostCssPlugin = (): AcceptedPlugin => {\n return {\n postcssPlugin: \"@telegraph/style-engine\",\n plugins: [\n {\n postcssPlugin: \"style-engine\",\n async Once(root) {\n const run = {\n tokens: [] as BuildTelegraphCssParams[\"config\"][\"tokens\"],\n components: false,\n };\n root.walkAtRules(\"telegraph\", (atRule) => {\n if (atRule.params === \"components\") {\n run.components = true;\n atRule.remove();\n }\n\n if (atRule.params === \"tokens-light\") {\n run.tokens.push(\"light\");\n atRule.remove();\n }\n\n if (atRule.params === \"tokens-dark\") {\n run.tokens.push(\"dark\");\n atRule.remove();\n }\n\n if (atRule.params === \"tokens\") {\n run.tokens.push(\"default\");\n atRule.remove();\n }\n });\n\n await buildTelegraphCss({\n root,\n config: {\n tokens: run.tokens,\n components: run.components,\n },\n });\n },\n },\n ],\n };\n};\n\nexport default Object.assign(styleEnginePostCssPlugin, {\n postcss: true,\n}) as PluginCreator<Record<string, never>>;\n"],"names":["nodePath","nodeFs","postcss","findMonorepoRoot","start","current","run","pkgJsonPath","parent","getTelegraphDepsFromPackageJson","pkg","pkgPath","_a","acc","dep","version","getTelegraphDeps","topLevelDeps","monorepoRoot","recursivelyGetTelegraphDeps","deps","allDeps","searchPath","pkgJson","nestedDeps","getCssStyles","fileName","path","cssPath","buildTelegraphCss","root","config","depsWithoutTokens","tokensDeps","cssFiles","tokensCssFiles","token","allCssFiles","content","parsed","styleEnginePostCssPlugin","atRule","postcss$1"],"mappings":"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"}
1	+ {"version":3,"file":"postcss.mjs","sources":["../../src/plugins/postcss.ts"],"sourcesContent":["import { type AcceptedPlugin, type PluginCreator, type Root } from \"postcss\";\n\n// Using require() instead of import to prevent ESM-related bugs in PostCSS.\n// ESM = ECMAScript Modules (the import/export syntax)\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodePath = require(\"path\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodeFs = require(\"fs\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst postcss = require(\"postcss\");\n\ntype PkgJson = {\n dependencies?: Record<string, string>;\n devDependencies?: Record<string, string>;\n};\n\ntype DepObject = Record<\n string,\n {\n name: string;\n version: string;\n path: string;\n }\n>;\n\n/*\n Traverses up the directory tree to find the root of the monorepo by looking for a package.json with workspaces.\n * This is needed to properly resolve workspace dependencies in a monorepo setup.\n /\nfunction findMonorepoRoot(start = process.cwd()): string \| undefined {\n let current = start;\n let run = true;\n\n while (run) {\n const pkgJsonPath = nodePath.join(current, \"package.json\");\n if (nodeFs.existsSync(pkgJsonPath)) {\n try {\n const pkg = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n if (pkg.workspaces) {\n return current;\n }\n } catch {\n // malformed package.json, skip\n }\n }\n\n const parent = nodePath.dirname(current);\n if (parent === current) run = false;\n current = parent;\n }\n\n return undefined;\n}\n\n/\n Extracts all @telegraph/* dependencies from a package.json file and returns them with their paths.\n * This is used to find all Telegraph packages that might contain CSS we need to include.\n /\nconst getTelegraphDepsFromPackageJson = (\n pkg: PkgJson,\n pkgPath: string,\n): DepObject \| undefined => {\n if (!pkg.dependencies \|\| Object.keys(pkg.dependencies)?.length === 0) return;\n\n return Object.entries(pkg.dependencies).reduce((acc, [dep, version]) => {\n if (dep.startsWith(\"@telegraph/\")) {\n acc[dep] = {\n name: dep,\n version,\n path: nodePath.resolve(pkgPath, \"node_modules\", dep),\n };\n }\n return acc;\n }, {} as DepObject);\n};\n\n/\n Gets all Telegraph dependencies recursively, including dependencies of dependencies.\n * Handles both normal npm dependencies and workspace dependencies in a monorepo.\n /\nfunction getTelegraphDeps(): DepObject {\n const pkgPath = nodePath.resolve(process.cwd(), \"package.json\");\n const pkg = JSON.parse(nodeFs.readFileSync(pkgPath, \"utf8\"));\n const topLevelDeps = getTelegraphDepsFromPackageJson(pkg, process.cwd());\n const monorepoRoot = findMonorepoRoot();\n\n const recursivelyGetTelegraphDeps = (deps: DepObject): DepObject => {\n if (!deps \|\| Object.keys(deps).length === 0) {\n return deps;\n }\n\n const allDeps = { ...deps };\n\n for (const dep of Object.values(deps)) {\n let pkgJsonPath: string;\n let searchPath: string;\n\n if (dep.version.includes(\"workspace:\") && monorepoRoot) {\n pkgJsonPath = nodePath.resolve(\n monorepoRoot,\n \"node_modules\",\n dep.name,\n \"package.json\",\n );\n searchPath = monorepoRoot;\n } else {\n pkgJsonPath = nodePath.resolve(\n process.cwd(),\n \"node_modules\",\n dep.name,\n \"package.json\",\n );\n searchPath = process.cwd();\n }\n\n try {\n const pkgJson = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n const deps = getTelegraphDepsFromPackageJson(pkgJson, searchPath);\n\n // Merge new dependencies into allDeps\n Object.assign(allDeps, deps);\n\n if (deps) {\n // Recursively get dependencies of dependencies\n const nestedDeps = recursivelyGetTelegraphDeps(deps);\n Object.assign(allDeps, nestedDeps);\n }\n } catch (err) {\n // Skip if package.json cannot be read\n continue;\n }\n }\n\n return allDeps;\n };\n\n if (topLevelDeps) {\n return recursivelyGetTelegraphDeps(topLevelDeps);\n }\n\n return {};\n}\n\ntype GetCssStylesParams = {\n fileName?: string;\n path: string;\n};\n\n/\n Reads CSS file content from a Telegraph package's dist/css directory.\n * Returns null if the file doesn't exist or can't be read.\n /\nfunction getCssStyles({\n fileName = \"default.css\",\n path,\n}: GetCssStylesParams): string \| null {\n try {\n const cssPath = `${path}/dist/css/${fileName}`;\n const pkgPath = nodePath.resolve(cssPath);\n\n if (nodeFs.existsSync(pkgPath)) {\n return nodeFs.readFileSync(pkgPath, \"utf8\");\n }\n\n return null;\n } catch {\n return null;\n }\n}\n\ntype BuildTelegraphCssParams = {\n root: Root;\n config: {\n tokens: Array<\"light\" \| \"dark\" \| \"default\">;\n components: boolean;\n };\n};\n\n/\n Main function that builds the final CSS by:\n * 1. Getting all Telegraph dependencies\n * 2. Filtering for either token packages or component packages based on config\n * 3. Reading their CSS files\n * 4. Appending all CSS to the PostCSS Root node\n /\nconst buildTelegraphCss = async ({ root, config }: BuildTelegraphCssParams) => {\n const deps = getTelegraphDeps();\n\n const depsWithoutTokens =\n config.components === true\n ? Object.values(deps).filter(\n (dep) => !dep.name.includes(\"@telegraph/tokens\"),\n )\n : [];\n\n const tokensDeps =\n config.tokens.length > 0\n ? Object.values(deps).filter((dep) =>\n dep.name.includes(\"@telegraph/tokens\"),\n )\n : [];\n\n const cssFiles = depsWithoutTokens\n .map((dep) => getCssStyles({ path: dep.path }))\n .filter(Boolean) as Array<string>;\n\n const tokensCssFiles = config.tokens\n .map((token) => {\n const cssFile = tokensDeps.map((dep) =>\n getCssStyles({ path: dep.path, fileName: `${token}.css` }),\n );\n\n return cssFile.filter(Boolean) as Array<string>;\n })\n .filter(Boolean);\n\n const allCssFiles = [...cssFiles, ...tokensCssFiles];\n\n for (const content of allCssFiles) {\n const parsed = postcss.parse(content);\n root.append(parsed);\n }\n};\n\n/\n PostCSS plugin that processes @telegraph rules in CSS files.\n * It looks for @telegraph tokens, @telegraph tokens-light, @telegraph tokens-dark,\n * and @telegraph components rules and includes the appropriate CSS from Telegraph packages.\n */\nconst styleEnginePostCssPlugin = (): AcceptedPlugin => {\n return {\n postcssPlugin: \"@telegraph/style-engine\",\n plugins: [\n {\n postcssPlugin: \"telegraph\",\n AtRule: {\n telegraph() {},\n },\n async Once(root) {\n const run = {\n tokens: [] as BuildTelegraphCssParams[\"config\"][\"tokens\"],\n components: false,\n };\n root.walkAtRules(\"telegraph\", (atRule) => {\n if (atRule.params === \"components\") {\n run.components = true;\n atRule.remove();\n }\n\n if (atRule.params === \"tokens-light\") {\n run.tokens.push(\"light\");\n atRule.remove();\n }\n\n if (atRule.params === \"tokens-dark\") {\n run.tokens.push(\"dark\");\n atRule.remove();\n }\n\n if (atRule.params === \"tokens\") {\n run.tokens.push(\"default\");\n atRule.remove();\n }\n });\n\n await buildTelegraphCss({\n root,\n config: {\n tokens: run.tokens,\n components: run.components,\n },\n });\n },\n },\n ],\n };\n};\n\nexport default Object.assign(styleEnginePostCssPlugin, {\n postcss: true,\n}) as PluginCreator<Record<string, never>>;\n"],"names":["nodePath","nodeFs","postcss","findMonorepoRoot","start","current","run","pkgJsonPath","parent","getTelegraphDepsFromPackageJson","pkg","pkgPath","_a","acc","dep","version","getTelegraphDeps","topLevelDeps","monorepoRoot","recursivelyGetTelegraphDeps","deps","allDeps","searchPath","pkgJson","nestedDeps","getCssStyles","fileName","path","cssPath","buildTelegraphCss","root","config","depsWithoutTokens","tokensDeps","cssFiles","tokensCssFiles","token","allCssFiles","content","parsed","styleEnginePostCssPlugin","atRule","postcss$1"],"mappings":"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"}

package/dist/types/hooks/useStyleEngine.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { CssVarProp, getStyleProp } from '../helpers/getStyleProp';
 type CssVarsPropObject<CssVars> = Record<keyof CssVars, CssVarProp>;
 export declare const useStyleEngine: <CssVars extends CssVarsPropObject<CssVars>, Props extends Record<string, unknown>>(params: Parameters<typeof getStyleProp<CssVars, Props>>[0]) => {
     styleProp: object | { [key in CssVars[keyof CssVars]["cssVar"]]: string; };

package/dist/types/hooks/useStyleProps.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import { SprinklesProperties as StyleProperties } from '@vanilla-extract/sprinkles';
 import { createStyleProps } from '../index';
 type StylePropFn<StylePropFnProperties extends StyleProperties[]> = ReturnType<typeof createStyleProps<StylePropFnProperties>>;
 type StyleProps<StylePropFnProperties extends StyleProperties[]> = Parameters<StylePropFn<StylePropFnProperties>>[0];
 type ComponentProps<Props, StylePropFnProperties extends StyleProperties[]> = Omit<Props, keyof StyleProps<StylePropFnProperties>>;

package/dist/types/plugins/postcss.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { PluginCreator } from 'postcss';
 declare const _default: PluginCreator<Record<string, never>>;
 export default _default;
 //# sourceMappingURL=postcss.d.ts.map

package/dist/types/plugins/postcss.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"postcss.d.ts","sourceRoot":"","sources":["../../../src/plugins/postcss.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,aAAa,EAAa,MAAM,SAAS,CAAC;~~wBAuRvE~~,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAF1C,wBAE2C"}
1	+ {"version":3,"file":"postcss.d.ts","sourceRoot":"","sources":["../../../src/plugins/postcss.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,aAAa,EAAa,MAAM,SAAS,CAAC;wBAwRvE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAF1C,wBAE2C"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/style-engine",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "A wrappar around vanilla extract to style telegraph",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/style-engine",
   "author": "@knocklabs",
@@ -37,14 +37,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@telegraph/tokens": "^0.0.20",
+    "@telegraph/tokens": "^0.0.21",
     "@vanilla-extract/css": "^1.15.3",
     "@vanilla-extract/recipes": "^0.5.3",
     "@vanilla-extract/sprinkles": "^1.6.2",
     "postcss": "^8.5.3"
   },
   "devDependencies": {
-    "@knocklabs/eslint-config": "^0.0.3",
+    "@knocklabs/eslint-config": "^0.0.4",
     "@knocklabs/typescript-config": "^0.0.2",
     "@telegraph/prettier-config": "^0.0.7",
     "@telegraph/vite-config": "^0.0.14",