1"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[6330],{876:(e,t,n)=>{n.d(t,{Zo:()=>u,kt:()=>m});var r=n(2784);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var i=r.createContext({}),p=function(e){var t=r.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},u=function(e){var t=p(e.components);return r.createElement(i.Provider,{value:t},e.children)},c="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},y=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,i=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),c=p(n),y=o,m=c["".concat(i,".").concat(y)]||c[y]||d[y]||a;return n?r.createElement(m,l(l({ref:t},u),{},{components:n})):r.createElement(m,l({ref:t},u))}));function m(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,l=new Array(a);l[0]=y;var s={};for(var i in t)hasOwnProperty.call(t,i)&&(s[i]=t[i]);s.originalType=e,s[c]="string"==typeof e?e:o,l[1]=s;for(var p=2;p<a;p++)l[p]=n[p];return r.createElement.apply(null,l)}return r.createElement.apply(null,n)}y.displayName="MDXCreateElement"},2009:(e,t,n)=>{n.d(t,{Z:()=>l});var r=n(2784),o=n(6277);const a={tabItem:"tabItem_OMyP"};function l(e){let{children:t,hidden:n,className:l}=e;return r.createElement("div",{role:"tabpanel",className:(0,o.Z)(a.tabItem,l),hidden:n},t)}},7336:(e,t,n)=>{n.d(t,{Z:()=>x});var r=n(7896),o=n(2784),a=n(6277),l=n(4126),s=n(7267),i=n(2424),p=n(2244),u=n(4155);function c(e){return function(e){return o.Children.map(e,(e=>{if(!e||(0,o.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad <Tabs> child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.`)}))?.filter(Boolean)??[]}(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:o}}=e;return{value:t,label:n,attributes:r,default:o}}))}function d(e){const{values:t,children:n}=e;return(0,o.useMemo)((()=>{const e=t??c(n);return function(e){const t=(0,p.l)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e}),[t,n])}function y(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const r=(0,s.k6)(),a=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,i._X)(a),(0,o.useCallback)((e=>{if(!a)return;const t=new URLSearchParams(r.location.search);t.set(a,e),r.replace({...r.location,search:t.toString()})}),[a,r])]}function f(e){const{defaultValue:t,queryString:n=!1,groupId:r}=e,a=d(e),[l,s]=(0,o.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(t){if(!y({value:t,tabValues:n}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:a}))),[i,p]=m({queryString:n,groupId:r}),[c,f]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[r,a]=(0,u.Nk)(n);return[r,(0,o.useCallback)((e=>{n&&a.set(e)}),[n,a])]}({groupId:r}),b=(()=>{const e=i??c;return y({value:e,tabValues:a})?e:null})();(0,o.useLayoutEffect)((()=>{b&&s(b)}),[b]);return{selectedValue:l,selectValue:(0,o.useCallback)((e=>{if(!y({value:e,tabValues:a}))throw new Error(`Can't select invalid tab value=${e}`);s(e),p(e),f(e)}),[p,f,a]),tabValues:a}}var b=n(9741);const g={tabList:"tabList_M0Dn",tabItem:"tabItem_ysIP"};function h(e){let{className:t,block:n,selectedValue:s,selectValue:i,tabValues:p}=e;const u=[],{blockElementScrollPositionUntilNextRender:c}=(0,l.o5)(),d=e=>{const t=e.currentTarget,n=u.indexOf(t),r=p[n].value;r!==s&&(c(t),i(r))},y=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const n=u.indexOf(e.currentTarget)+1;t=u[n]??u[0];break}case"ArrowLeft":{const n=u.indexOf(e.currentTarget)-1;t=u[n]??u[u.length-1];break}}t?.focus()};return o.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.Z)("tabs",{"tabs--block":n},t)},p.map((e=>{let{value:t,label:n,attributes:l}=e;return o.createElement("li",(0,r.Z)({role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,key:t,ref:e=>u.push(e),onKeyDown:y,onClick:d},l,{className:(0,a.Z)("tabs__item",g.tabItem,l?.className,{"tabs__item--active":s===t})}),n??t)})))}function k(e){let{lazy:t,children:n,selectedValue:r}=e;
1const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===r));return e?(0,o.cloneElement)(e,{className:"margin-top--md"}):null}return o.createElement("div",{className:"margin-top--md"},a.map(((e,t)=>(0,o.cloneElement)(e,{key:t,hidden:e.props.value!==r}))))}function v(e){const t=f(e);return o.createElement("div",{className:(0,a.Z)("tabs-container",g.tabList)},o.createElement(h,(0,r.Z)({},e,t)),o.createElement(k,(0,r.Z)({},e,t)))}function x(e){const t=(0,b.Z)();return o.createElement(v,(0,r.Z)({key:String(t)},e))}},5179:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>u,contentTitle:()=>i,default:()=>m,frontMatter:()=>s,metadata:()=>p,toc:()=>c});var r=n(7896),o=(n(2784),n(876)),a=n(7336),l=n(2009);const s={sidebar_position:6},i="Static types",p={unversionedId:"learn/static-types",id:"learn/static-types",title:"Static types",description:"Types for style props",source:"@site/docs/learn/07-static-types.mdx",sourceDirName:"learn",slug:"/learn/static-types",permalink:"/docs/learn/static-types",draft:!1,editUrl:"https://github.com/facebookexternal/stylex/tree/main/apps/docs/docs/learn/07-static-types.mdx",tags:[],version:"current",sidebarPosition:6,frontMatter:{sidebar_position:6},sidebar:"docs",previous:{title:"Creating themes",permalink:"/docs/learn/theming/creating-themes"},next:{title:"Acknowledgements",permalink:"/docs/learn/acknowledgements"}},u={},c=[{value:"Types for style props",id:"types-for-style-props",level:2},{value:"Constraining accepted styles",id:"constraining-accepted-styles",level:2},{value:"Accepting from a set of style properties",id:"accepting-from-a-set-of-style-properties",level:3},{value:"Limiting the possible values for styles",id:"limiting-the-possible-values-for-styles",level:3},{value:"Disallowing properties",id:"disallowing-properties",level:2}],d={toc:c},y="wrapper";
1function m(e){let{components:t,...n}=e;return(0,o.kt)(y,(0,r.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"static-types"},"Static types"),(0,o.kt)("h2",{id:"types-for-style-props"},"Types for style props"),(0,o.kt)("p",null,"StyleX comes with full support for Static Types. The most common utility type is\n",(0,o.kt)("inlineCode",{parentName:"p"},"StyleXStyles")," which is used to accept any arbitrary StyleX styles."),(0,o.kt)(a.Z,{mdxType:"Tabs"},(0,o.kt)(l.Z,{value:"typescript",label:"Typescript",default:!0,mdxType:"TabItem"},(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import type {StyleXStyles} from '@stylexjs/stylex';\nimport * as stylex from '@stylexjs/stylex';\n\ntype Props = {\n ...\n style?: StyleXStyles,\n};\n\nfunction MyComponent({style, ...otherProps}: Props): React.MixedElement {\n return (\n <div\n {...stylex.props(localStyles.foo, localStyles.bar, style)}\n >\n {/* ... */}\n </div>\n );\n}\n"))),(0,o.kt)(l.Z,{value:"flow",label:"Flow",mdxType:"TabItem"},(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import type {StyleXStyles} from '@stylexjs/stylex';\nimport * as stylex from '@stylexjs/stylex';\n\ntype Props = $ReadOnly<{\n ...\n style?: StyleXStyles<>,\n}>;\n\nfunction MyComponent({style, ...otherProps}: Props): React.MixedElement {\n return (\n <div\n {...stylex.props(localStyles.foo, localStyles.bar, style)}\n >\n {/* ... */}\n </div>\n );\n}\n")))),(0,o.kt)("admonition",{title:"Disallowing dynamic styles",type:"tip"},(0,o.kt)("p",{parentName:"admonition"},(0,o.kt)("inlineCode",{parentName:"p"},"StaticStyles")," can be used instead of ",(0,o.kt)("inlineCode",{parentName:"p"},"StyleXStyles")," to accept arbitrary static\nstyles, but disallow dynamic styles.")),(0,o.kt)("h2",{id:"constraining-accepted-styles"},"Constraining accepted styles"),(0,o.kt)("p",null,"Type arguments can be used with ",(0,o.kt)("inlineCode",{parentName:"p"},"StyleXStyles<{...}>")," to limit the styles that\nare accepted."),(0,o.kt)("h3",{id:"accepting-from-a-set-of-style-properties"},"Accepting from a set of style properties"),(0,o.kt)("p",null,"To limit the accepted style properties to a given set, an object type with the\nallowed properties can be used:"),(0,o.kt)(a.Z,{mdxType:"Tabs"},(0,o.kt)(l.Z,{value:"typescript",label:"Typescript",default:!0,mdxType:"TabItem"},(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import type {StyleXStyles} from '@stylexjs/stylex';\n\ntype Props = {\n // ...\n style?: StyleXStyles<{\n color?: string;\n backgroundColor?: string;\n borderColor?: string;\n borderTopColor?: string;\n borderEndColor?: string;\n borderBottomColor?: string;\n borderStartColor?: string;\n }>;\n};\n"))),(0,o.kt)(l.Z,{value:"flow",label:"Flow",mdxType:"TabItem"},(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import type {StyleXStyles} from '@stylexjs/stylex';\n\ntype Props = $ReadOnly<{\n // ...\n style?: StyleXStyles<{\n color?: string;\n backgroundColor?: string;\n borderColor?: string;\n borderTopColor?: string;\n borderEndColor?: string;\n borderBottomColor?: string;\n borderStartColor?: string;\n }>;\n}>;\n")))),(0,o.kt)("p",null,"The ",(0,o.kt)("inlineCode",{parentName:"p"},"style")," prop will now accept only the properties defined but disallow\nanything else."),(0,o.kt)("admonition",{title:"Good Default Styles",type:"tip"},(0,o.kt)("p",{parentName:"admonition"},"It is a good practice to make the keys of the style types optional and have\nbaseline styles in the component itself.")),(0,o.kt)("admonition",{title:"Typescript may not catch extra style properties",type:"danger"},(0,o.kt)("p",{parentName:"admonition"},"Typescript object types don\u2019t error when given objects with extra properties.\nWe\u2019ve taken steps to mitigate this issue, but there may be edge-cases where\nyou\u2019ll be able to pass in extra, disallowed styles without a type error.")),(0,o.kt)("h3",{id:"limiting-the-possible-values-for-styles"},"Limiting the possible values for styles"),(0,o.kt)("p",null,"In addition to the accepted style properties, the values for those properties\ncan be constrained too."),(0,o.kt)(a.Z,{mdxType:"Tabs"},(0,o.kt)(l.Z,{value:"typescript",label:"Typescript",default:!0,mdxType:"TabItem"},(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import type {StyleXStyles} from '@stylexjs/stylex';\n\ntype Props = {\n ...\n // Only accept styles for marginTop and nothing else.\n // the value for marginTop can only be 0, 4, or 8.\n style?: StyleXStyles<{\n marginTop: 0 | 4 | 8 | 16\n }>,\n};\n"))),(0,o.kt)(l.Z,{value:"flow",label:"Flow",mdxType:"TabItem"},(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import type {StyleXStyles} from '@stylexjs/stylex';\n\ntype Props = $ReadOnly<{\n ...\n // Only accept styles for marginTop and nothing else.\n // the value for marginTop can only be 0, 4, or 8.\n style?: StyleXStyles<{\n marginTop: 0 | 4 | 8 | 16\n }>,\n}>;\n")))),(0,o.kt)("p",null,"Now, this component only accepts styles that have a ",(0,o.kt)("inlineCode",{parentName:"p"},"marginTop")," property and no\nother properties. The value for ",(0,o.kt)("inlineCode",{parentName:"p"},"marginTop")," can only be one of ",(0,o.kt)("inlineCode",{parentName:"p"},"0"),", ",(0,o.kt)("inlineCode",{parentName:"p"},"4"),", ",(0,o.kt)("inlineCode",{parentName:"p"},"8"),", or\n",(0,o.kt)("inlineCode",{parentName:"p"},"16"),"."),(0,o.kt)("h2",{id:"disallowing-properties"},"Disallowing properties"),(0,o.kt)("p",null,"It is sometimes more convenient to define a blocklist instead of an allowlist."),(0,o.kt)(a.Z,{mdxType:"Tabs"},(0,o.kt)(l.Z,{value:"typescript",label:"Typescript",default:!0,mdxType:"TabItem"},(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import type {StyleXStylesWithout} from '@stylexjs/stylex';\nimport * as stylex from '@stylexjs/stylex';\n\ntype NoLayout = StyleXStylesWithout<{\n postion: unknown,\n display: unknown,\n top: unknown,\n start: unknown,\n end: unknown,\n bottom: unknown,\n border: unknown,\n borderWidth: unknown,\n borderBottomWidth: unknown,\n borderEndWidth: unknown,\n borderStartWidth: unknown,\n borderTopWidth: unknown,\n margin: unknown,\n marginBottom: unknown,\n marginEnd: unknown,\n marginStart: unknown,\n marginTop: unknown,\n padding: unknown,\n paddingBottom: unknown,\n paddingEnd: unknown,\n paddingStart: unknown,\n paddingTop: unknown,\n width: unknown,\n height: unknown,\n flexBasis: unknown,\n overflow: unknown,\n overflowX: unknown,\n overflowY: unknown,\n}>;\n\ntype Props = {\n // ...\n style?: NoLayout,\n};
1\n\nfunction MyComponent({style, ...}: Props) {\n return (\n <div\n {...stylex.props(localStyles.foo, localStyles.bar, style)}\n >\n {/* ... */}\n </div>\n );\n}\n"))),(0,o.kt)(l.Z,{value:"flow",label:"Flow",mdxType:"TabItem"},(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import type {StyleXStylesWithout} from '@stylexjs/stylex';\nimport * as stylex from '@stylexjs/stylex';\n\ntype NoLayout = StyleXStylesWithout<{\n postion: mixed,\n display: mixed,\n top: mixed,\n start: mixed,\n end: mixed,\n bottom: mixed,\n border: mixed,\n borderWidth: mixed,\n borderBottomWidth: mixed,\n borderEndWidth: mixed,\n borderStartWidth: mixed,\n borderTopWidth: mixed,\n margin: mixed,\n marginBottom: mixed,\n marginEnd: mixed,\n marginStart: mixed,\n marginTop: mixed,\n padding: mixed,\n paddingBottom: mixed,\n paddingEnd: mixed,\n paddingStart: mixed,\n paddingTop: mixed,\n width: mixed,\n height: mixed,\n flexBasis: mixed,\n overflow: mixed,\n overflowX: mixed,\n overflowY: mixed,\n}>;\n\ntype Props = $ReadOnly<{\n // ...\n style?: NoLayout,\n}>;\n\nfunction MyComponent({style, ...}: Props): React.MixedElement {\n return (\n <div\n {...stylex.props(localStyles.foo, localStyles.bar, style)}\n >\n {/* ... */}\n </div>\n );\n}\n")))),(0,o.kt)("p",null,"Here the listed properties in the object type will be disallowed, but all other\nstyles will still be accepted."))}m.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.