1"use strict";(self.webpackChunk_repo_docs=self.webpackChunk_repo_docs||[]).push([[3932],{8193:(e,n,t)=>{t.d(n,{Z:()=>l});t(2735);var r=t(6568);const a={tabItem:"tabItem_Z3hq"};var s=t(4512);function l(e){let{children:n,hidden:t,className:l}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,r.Z)(a.tabItem,l),hidden:t,children:n})}},5274:(e,n,t)=>{t.d(n,{Z:()=>y});var r=t(2735),a=t(6568),s=t(2547),l=t(3038),o=t(98),i=t(3966),u=t(4902),d=t(2366);function c(e){var n,t;return null!=(n=null==(t=r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(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.')})))?void 0:t.filter(Boolean))?n:[]}function p(e){const{values:n,children:t}=e;return(0,r.useMemo)((()=>{const e=null!=n?n:function(e){return c(e).map((e=>{let{props:{value:n,label:t,attributes:r,default:a}}=e;return{value:n,label:t,attributes:r,default:a}}))}(t);return function(e){const n=(0,u.lx)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error('Docusaurus error: Duplicate values "'+n.map((e=>e.value)).join(", ")+'" found in <Tabs>. Every value needs to be unique.')}(e),e}),[n,t])}function m(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function h(e){let{queryString:n=!1,groupId:t}=e;const a=(0,l.k6)(),s=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)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 null!=t?t:null}({queryString:n,groupId:t});return[(0,i._X)(s),(0,r.useCallback)((e=>{if(!s)return;const n=new URLSearchParams(a.location.search);n.set(s,e),a.replace(Object.assign({},a.location,{search:n.toString()}))}),[s,a])]}function b(e){const{defaultValue:n,queryString:t=!1,groupId:a}=e,s=p(e),[l,i]=(0,r.useState)((()=>function(e){var n;let{defaultValue:t,tabValues:r}=e;if(0===r.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(t){if(!m({value:t,tabValues:r}))throw new Error('Docusaurus error: The <Tabs> has a defaultValue "'+t+'" but none of its children has the corresponding value. Available values are: '+r.map((e=>e.value)).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return t}const a=null!=(n=r.find((e=>e.default)))?n:r[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:n,tabValues:s}))),[u,c]=h({queryString:t,groupId:a}),[b,g]=function(e){let{groupId:n}=e;const t=function(e){return e?"docusaurus.tab."+e:null}(n),[a,s]=(0,d.Nk)(t);return[a,(0,r.useCallback)((e=>{t&&s.set(e)}),[t,s])]}({groupId:a}),f=(()=>{const e=null!=u?u:b;return m({value:e,tabValues:s})?e:null})();(0,o.Z)((()=>{f&&i(f)}),[f]);return{selectedValue:l,selectValue:(0,r.useCallback)((e=>{if(!m({value:e,tabValues:s}))throw new Error("Can't select invalid tab value="+e);i(e),c(e),g(e)}),[c,g,s]),tabValues:s}}var g=t(5167);const f={tabList:"tabList_FpWg",tabItem:"tabItem_lqZC"};var v=t(4512);function x(e){let{className:n,block:t,selectedValue:r,selectValue:l,tabValues:o}=e;const i=[],{blockElementScrollPositionUntilNextRender:u}=(0,s.o5)(),d=e=>{const n=e.currentTarget,t=i.indexOf(n),a=o[t].value;a!==r&&(u(n),l(a))},c=e=>{var n;let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{var r;const n=i.indexOf(e.currentTarget)+1;t=null!=(r=i[n])?r:i[0];break}case"ArrowLeft":{var a;const n=i.indexOf(e.currentTarget)-1;t=null!=(a=i[n])?a:i[i.length-1];break}}null==(n=t)||n.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.Z)("tabs",{"tabs--block":t},n),children:o.map((e=>{let{value:n,label:t,attributes:s}=e;return(0,v.jsx)("li",Object.assign({role:"tab",tabIndex:r===n?0:-1,"aria-selected":r===n,ref:e=>i.push(e),onKeyDown:c,onClick:d},s,{className:(0,a.Z)("tabs__item",f.tabItem,null==s?void 0:s.className,{"tabs__item--active":r===n}),children:null!=t?t:n}),n)}))})}function j(e){let{lazy:n,children:t,selectedValue:s}=e;
1const l=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=l.find((e=>e.props.value===s));return e?(0,r.cloneElement)(e,{className:(0,a.Z)("margin-top--md",e.props.className)}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:l.map(((e,n)=>(0,r.cloneElement)(e,{key:n,hidden:e.props.value!==s})))})}function w(e){const n=b(e);return(0,v.jsxs)("div",{className:(0,a.Z)("tabs-container",f.tabList),children:[(0,v.jsx)(x,Object.assign({},n,e)),(0,v.jsx)(j,Object.assign({},n,e))]})}function y(e){const n=(0,g.Z)();return(0,v.jsx)(w,Object.assign({},e,{children:c(e.children)}),String(n))}},3271:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>i,default:()=>m,frontMatter:()=>o,metadata:()=>u,toc:()=>c});var r=t(4512),a=t(3250),s=t(5274),l=t(8193);const o={title:"Adding Emotion",description:"How to get started with Emotion",sidebar_label:"Adding Emotion"},i=void 0,u={id:"getting-started/adding-emotion",title:"Adding Emotion",description:"How to get started with Emotion",source:"@site/content/learn/getting-started/adding-emotion.mdx",sourceDirName:"getting-started",slug:"/getting-started/adding-emotion",permalink:"/learn/getting-started/adding-emotion",draft:!1,unlisted:!1,editUrl:"https://github.com/roots/bud/edit/main/sources/@repo/docs/content/learn/getting-started/adding-emotion.mdx",tags:[],version:"current",frontMatter:{title:"Adding Emotion",description:"How to get started with Emotion",sidebar_label:"Adding Emotion"},sidebar:"sidebar",previous:{title:"Adding TailwindCSS",permalink:"/learn/getting-started/adding-tailwindcss"},next:{title:"Adding Eslint",permalink:"/learn/getting-started/adding-eslint"}},d={},c=[{value:"Installing bud.js dependencies",id:"installing-budjs-dependencies",level:2},{value:"Installing production dependencies",id:"installing-production-dependencies",level:2}];function p(e){const n={a:"a",code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{id:"installing-budjs-dependencies",children:"Installing bud.js dependencies"}),"\n",(0,r.jsxs)(n.p,{children:["To get started with Emotion, install the ",(0,r.jsx)(n.a,{href:"/extensions/bud-emotion",children:"@roots/bud-emotion"})," extension to your project along with a compatible compiler:"]}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"/extensions/bud-babel",children:"@roots/bud-babel"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.a,{href:"/extensions/bud-swc",children:"@roots/bud-swc"})}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["We recommend using ",(0,r.jsx)(n.a,{href:"/extensions/bud-swc",children:"@roots/bud-swc"}),":"]}),"\n",(0,r.jsxs)(s.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(l.Z,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-sh",children:"npm install @roots/bud-swc @roots/bud-emotion --save-dev\n"})})}),(0,r.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-sh",children:"yarn add @roots/bud-swc @roots/bud-emotion --dev\n"})})}),(0,r.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-sh",children:"pnpm add @roots/bud-swc @roots/bud-emotion --save-dev\n"})})})]}),"\n",(0,r.jsx)(n.h2,{id:"installing-production-dependencies",children:"Installing production dependencies"}),"\n",(0,r.jsx)(n.p,{children:"Emotion requires the several packages to be installed in your project."}),"\n",(0,r.jsx)(n.p,{children:"We will try and resolve them for you but it is a good idea to install them as explicit dependencies:"}),"\n",(0,r.jsxs)(s.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(l.Z,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-sh",children:"npm install @emotion/css @emotion/react @emotion/styled --save\n"})})}),(0,r.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-sh",children:"yarn add @emotion/css @emotion/react @emotion/styled\n"})})}),(0,r.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-sh",children:"pnpm add @emotion/css @emotion/react @emotion/styled\n"})})})]}),"\n",(0,r.jsxs)(n.p,{children:["See the ",(0,r.jsx)(n.a,{href:"https://emotion.sh/docs/install",children:"Emotion documentation"})," for more information."]})]})}function m(e={}){const{wrapper:n}={...(0,a.a)(),...e.components};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}},3250:(e,n,t)=>{t.d(n,{Z:()=>o,a:()=>l});var r=t(2735);const a={},s=r.createContext(a);function l(e){const n=r.useContext(s);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:l(e.components),r.createElement(s.Provider,{value:n},e.children)}}}]);
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.