This commit is contained in:
fabricteam 2022-05-04 16:17:14 +00:00
Родитель 04811745ed
Коммит bc5f6e1f00
37 изменённых файлов: 98 добавлений и 80 удалений

Просмотреть файл

@ -5,13 +5,13 @@
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="Docusaurus v2.0.0-beta.15">
<title data-react-helmet="true">Page Not Found | Griffel</title><meta data-react-helmet="true" property="og:title" content="Page Not Found | Griffel"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://griffel.js.org/404.html"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_tag" content="default"><link data-react-helmet="true" rel="canonical" href="https://griffel.js.org/404.html"><link data-react-helmet="true" rel="alternate" href="https://griffel.js.org/404.html" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://griffel.js.org/404.html" hreflang="x-default"><link rel="stylesheet" href="/assets/css/styles.eecc7f29.css">
<link rel="preload" href="/assets/js/runtime~main.193dd2bd.js" as="script">
<link rel="preload" href="/assets/js/main.35d7031d.js" as="script">
<link rel="preload" href="/assets/js/runtime~main.123e31a7.js" as="script">
<link rel="preload" href="/assets/js/main.33a065b8.js" as="script">
</head>
<body>
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
<div role="region"><a href="#" class="skipToContent_cbSD">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><b class="navbar__title">Griffel</b></a><a class="navbar__item navbar__link" href="/react/install">For React.js</a><a class="navbar__item navbar__link" href="/try-it-out">Try it out</a></div><div class="navbar__items navbar__items--right"><div class="container_zN5y"><button aria-label="Switch to dark mode" class="toggleButton_mXq3" disabled="" type="button"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg></button><a aria-label="Go to Griffel GitHub page" class="githubLink_Z_dD" href="https://github.com/microsoft/griffel" target="_blank" rel="noopener noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper"><main class="container margin-vert--xl"><div class="row"><div class="col col--6 col--offset-3"><h1 class="hero__title">Page Not Found</h1><p>We could not find what you were looking for.</p><p>Please contact the owner of the site that linked you to the original URL and let them know their link is broken.</p></div></div></main></div></div>
<script src="/assets/js/runtime~main.193dd2bd.js"></script>
<script src="/assets/js/main.35d7031d.js"></script>
<script src="/assets/js/runtime~main.123e31a7.js"></script>
<script src="/assets/js/main.33a065b8.js"></script>
</body>
</html>

Просмотреть файл

@ -1 +0,0 @@
"use strict";(self.webpackChunk_griffel_website=self.webpackChunk_griffel_website||[]).push([[464],{5726:(e,t,r)=>{r.r(t),r.d(t,{frontMatter:()=>s,contentTitle:()=>c,metadata:()=>u,toc:()=>l,default:()=>f});var n=r(7896),i=r(1461),o=(r(2784),r(876)),a=["components"],s={sidebar_position:3},c="Build time transforms",u={unversionedId:"react/guides/build-time-transforms",id:"react/guides/build-time-transforms",title:"Build time transforms",description:"",source:"@site/docs/react/guides/build-time-transforms.md",sourceDirName:"react/guides",slug:"/react/guides/build-time-transforms",permalink:"/react/guides/build-time-transforms",editUrl:"https://github.com/microsoft/griffel/tree/main/apps/website/docs/react/guides/build-time-transforms.md",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"reactSidebar",previous:{title:"Limitations",permalink:"/react/guides/limitations"},next:{title:"Server-Side Rendering",permalink:"/react/guides/ssr-usage"}},l=[],p={toc:l};function f(e){var t=e.components,r=(0,i.Z)(e,a);return(0,o.kt)("wrapper",(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"build-time-transforms"},"Build time transforms"))}f.isMDXComponent=!0},876:(e,t,r)=>{r.d(t,{Zo:()=>l,kt:()=>m});var n=r(2784);function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function s(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}var c=n.createContext({}),u=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},l=function(e){var t=u(e.components);return n.createElement(c.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,i=e.mdxType,o=e.originalType,c=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),f=u(r),m=i,d=f["".concat(c,".").concat(m)]||f[m]||p[m]||o;return r?n.createElement(d,a(a({ref:t},l),{},{components:r})):n.createElement(d,a({ref:t},l))}));function m(e,t){var r=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var o=r.length,a=new Array(o);a[0]=f;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s.mdxType="string"==typeof e?e:i,a[1]=s;for(var u=2;u<o;u++)a[u]=r[u];return n.createElement.apply(null,a)}return n.createElement.apply(null,r)}f.displayName="MDXCreateElement"}}]);

Просмотреть файл

@ -0,0 +1 @@
"use strict";(self.webpackChunk_griffel_website=self.webpackChunk_griffel_website||[]).push([[464],{5726:(e,t,r)=>{r.r(t),r.d(t,{frontMatter:()=>s,contentTitle:()=>c,metadata:()=>u,toc:()=>l,default:()=>f});var n=r(7896),i=r(1461),o=(r(2784),r(876)),a=["components"],s={sidebar_position:3},c="Build time transforms",u={unversionedId:"react/guides/build-time-transforms",id:"react/guides/build-time-transforms",title:"Build time transforms",description:"This page is not ready yet.",source:"@site/docs/react/guides/build-time-transforms.md",sourceDirName:"react/guides",slug:"/react/guides/build-time-transforms",permalink:"/react/guides/build-time-transforms",editUrl:"https://github.com/microsoft/griffel/tree/main/apps/website/docs/react/guides/build-time-transforms.md",tags:[],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3},sidebar:"reactSidebar",previous:{title:"Limitations",permalink:"/react/guides/limitations"},next:{title:"Server-Side Rendering",permalink:"/react/guides/ssr-usage"}},l=[],p={toc:l};function f(e){var t=e.components,r=(0,i.Z)(e,a);return(0,o.kt)("wrapper",(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"build-time-transforms"},"Build time transforms"),(0,o.kt)("p",null,"This page is not ready yet."))}f.isMDXComponent=!0},876:(e,t,r)=>{r.d(t,{Zo:()=>l,kt:()=>m});var n=r(2784);function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function s(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}var c=n.createContext({}),u=function(e){var t=n.useContext(c),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},l=function(e){var t=u(e.components);return n.createElement(c.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,i=e.mdxType,o=e.originalType,c=e.parentName,l=s(e,["components","mdxType","originalType","parentName"]),f=u(r),m=i,d=f["".concat(c,".").concat(m)]||f[m]||p[m]||o;return r?n.createElement(d,a(a({ref:t},l),{},{components:r})):n.createElement(d,a({ref:t},l))}));function m(e,t){var r=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var o=r.length,a=new Array(o);a[0]=f;var s={};for(var c in t)hasOwnProperty.call(t,c)&&(s[c]=t[c]);s.originalType=e,s.mdxType="string"==typeof e?e:i,a[1]=s;for(var u=2;u<o;u++)a[u]=r[u];return n.createElement.apply(null,a)}return n.createElement.apply(null,r)}f.displayName="MDXCreateElement"}}]);

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -0,0 +1 @@
"use strict";(self.webpackChunk_griffel_website=self.webpackChunk_griffel_website||[]).push([[53],{1109:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"reactSidebar":[{"type":"link","label":"Install","href":"/react/install","docId":"react/install"},{"type":"category","label":"API","collapsible":true,"collapsed":false,"items":[{"type":"link","label":"makeStyles","href":"/react/api/make-styles","docId":"react/api/make-styles"},{"type":"link","label":"mergeClasses","href":"/react/api/merge-classes","docId":"react/api/merge-classes"},{"type":"link","label":"shorthands","href":"/react/api/shorthands","docId":"react/api/shorthands"},{"type":"link","label":"makeStaticStyles","href":"/react/api/make-static-styles","docId":"react/api/make-static-styles"},{"type":"link","label":"createDOMRenderer","href":"/react/api/create-dom-renderer","docId":"react/api/create-dom-renderer"}]},{"type":"category","label":"Guides","collapsible":true,"collapsed":false,"items":[{"type":"link","label":"Atomic CSS","href":"/react/guides/atomic-css","docId":"react/guides/atomic-css"},{"type":"link","label":"Limitations","href":"/react/guides/limitations","docId":"react/guides/limitations"},{"type":"link","label":"Build time transforms","href":"/react/guides/build-time-transforms","docId":"react/guides/build-time-transforms"},{"type":"link","label":"Server-Side Rendering","href":"/react/guides/ssr-usage","docId":"react/guides/ssr-usage"},{"type":"link","label":"Child Window/Shadow DOM Rendering","href":"/react/guides/child-window-rendering","docId":"react/guides/child-window-rendering"}]}]},"docs":{"react/api/create-dom-renderer":{"id":"react/api/create-dom-renderer","title":"createDOMRenderer","description":"createDOMRenderer is paired with RendererProvider component and is useful for child window rendering and SSR scenarios. This is the default renderer for web, and will make sure that styles are injected to a document.","sidebar":"reactSidebar"},"react/api/make-static-styles":{"id":"react/api/make-static-styles","title":"makeStaticStyles","description":"Creates styles with a global selector. This is especially useful for CSS resets, for example normalize.css.","sidebar":"reactSidebar"},"react/api/make-styles":{"id":"react/api/make-styles","title":"makeStyles","description":"Is used to define styles, returns a React hook that should be called inside a component:","sidebar":"reactSidebar"},"react/api/merge-classes":{"id":"react/api/merge-classes","title":"mergeClasses","description":"There are cases where you need to merge classes from multiple useClasses calls. To merge the classes correctly, you need to use mergeClasses() function, which merges and dedupes the atomic classes generated by makeStyles().","sidebar":"reactSidebar"},"react/api/shorthands":{"id":"react/api/shorthands","title":"shorthands","description":"Check limitations to understand why these helpers are needed.","sidebar":"reactSidebar"},"react/guides/atomic-css":{"id":"react/guides/atomic-css","title":"Atomic CSS","description":"This page is not ready yet.","sidebar":"reactSidebar"},"react/guides/build-time-transforms":{"id":"react/guides/build-time-transforms","title":"Build time transforms","description":"This page is not ready yet.","sidebar":"reactSidebar"},"react/guides/child-window-rendering":{"id":"react/guides/child-window-rendering","title":"Child Window/Shadow DOM Rendering","description":"When rendering in the main browser window, many components will need access to window or document to apply styles, listening for events, or measuring things. However it is possible to render to child windows and elements hosted in iframes.","sidebar":"reactSidebar"},"react/guides/limitations":{"id":"react/guides/limitations","title":"Limitations","description":"CSS shorthands are not supported","sidebar":"reactSidebar"},"react/guides/ssr-usage":{"id":"react/guides/ssr-usage","title":"Server-Side Rendering","description":"Griffel provides first class support for Server-Side Rendering.","sidebar":"reactSidebar"},"react/install":{"id":"react/install","title":"Install","description":"By default Griffel is a runtime css-in-js engine, you can simply install and use it in code directly:","sidebar":"reactSidebar"},"try-it-out":{"id":"try-it-out","title":"Try it out","description":"Don\'t know how to get started writing styles in Griffel ?"}}}')}}]);

Просмотреть файл

@ -1 +0,0 @@
"use strict";(self.webpackChunk_griffel_website=self.webpackChunk_griffel_website||[]).push([[53],{1109:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"reactSidebar":[{"type":"link","label":"Install","href":"/react/install","docId":"react/install"},{"type":"category","label":"API","collapsible":true,"collapsed":false,"items":[{"type":"link","label":"makeStyles","href":"/react/api/make-styles","docId":"react/api/make-styles"},{"type":"link","label":"mergeClasses","href":"/react/api/merge-classes","docId":"react/api/merge-classes"},{"type":"link","label":"makeStaticStyles","href":"/react/api/make-static-styles","docId":"react/api/make-static-styles"},{"type":"link","label":"createDOMRenderer","href":"/react/api/create-dom-renderer","docId":"react/api/create-dom-renderer"}]},{"type":"category","label":"Guides","collapsible":true,"collapsed":false,"items":[{"type":"link","label":"Atomic CSS","href":"/react/guides/atomic-css","docId":"react/guides/atomic-css"},{"type":"link","label":"Limitations","href":"/react/guides/limitations","docId":"react/guides/limitations"},{"type":"link","label":"Build time transforms","href":"/react/guides/build-time-transforms","docId":"react/guides/build-time-transforms"},{"type":"link","label":"Server-Side Rendering","href":"/react/guides/ssr-usage","docId":"react/guides/ssr-usage"},{"type":"link","label":"Child Window/Shadow DOM Rendering","href":"/react/guides/child-window-rendering","docId":"react/guides/child-window-rendering"}]}]},"docs":{"react/api/create-dom-renderer":{"id":"react/api/create-dom-renderer","title":"createDOMRenderer","description":"createDOMRenderer is paired with RendererProvider component and is useful for child window rendering and SSR scenarios. This is the default renderer for web, and will make sure that styles are injected to a document.","sidebar":"reactSidebar"},"react/api/make-static-styles":{"id":"react/api/make-static-styles","title":"makeStaticStyles","description":"Creates styles with a global selector. This is especially useful for CSS resets, for example normalize.css.","sidebar":"reactSidebar"},"react/api/make-styles":{"id":"react/api/make-styles","title":"makeStyles","description":"Is used to define styles, returns a React hook that should be called inside a component:","sidebar":"reactSidebar"},"react/api/merge-classes":{"id":"react/api/merge-classes","title":"mergeClasses","description":"There are cases where you need to merge classes from multiple useClasses calls. To merge the classes correctly, you need to use mergeClasses() function, which merges and dedupes the atomic classes generated by makeStyles().","sidebar":"reactSidebar"},"react/guides/atomic-css":{"id":"react/guides/atomic-css","title":"Atomic CSS","description":"","sidebar":"reactSidebar"},"react/guides/build-time-transforms":{"id":"react/guides/build-time-transforms","title":"Build time transforms","description":"","sidebar":"reactSidebar"},"react/guides/child-window-rendering":{"id":"react/guides/child-window-rendering","title":"Child Window/Shadow DOM Rendering","description":"When rendering in the main browser window, many components will need access to window or document to apply styles, listening for events, or measuring things. However it is possible to render to child windows and elements hosted in iframes.","sidebar":"reactSidebar"},"react/guides/limitations":{"id":"react/guides/limitations","title":"Limitations","description":"","sidebar":"reactSidebar"},"react/guides/ssr-usage":{"id":"react/guides/ssr-usage","title":"Server-Side Rendering","description":"Griffel provides first class support for Server-Side Rendering.","sidebar":"reactSidebar"},"react/install":{"id":"react/install","title":"Install","description":"By default Griffel is a runtime css-in-js engine, you can simply install and use it in code directly:","sidebar":"reactSidebar"},"try-it-out":{"id":"try-it-out","title":"Try it out","description":"Don\'t know how to get started writing styles in Griffel ?"}}}')}}]);

Просмотреть файл

@ -0,0 +1 @@
"use strict";(self.webpackChunk_griffel_website=self.webpackChunk_griffel_website||[]).push([[760],{7853:(e,t,r)=>{r.r(t),r.d(t,{frontMatter:()=>c,contentTitle:()=>s,metadata:()=>p,toc:()=>l,default:()=>m});var n=r(7896),i=r(1461),o=(r(2784),r(876)),a=["components"],c={sidebar_position:1},s="Atomic CSS",p={unversionedId:"react/guides/atomic-css",id:"react/guides/atomic-css",title:"Atomic CSS",description:"This page is not ready yet.",source:"@site/docs/react/guides/atomic-css.md",sourceDirName:"react/guides",slug:"/react/guides/atomic-css",permalink:"/react/guides/atomic-css",editUrl:"https://github.com/microsoft/griffel/tree/main/apps/website/docs/react/guides/atomic-css.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"reactSidebar",previous:{title:"createDOMRenderer",permalink:"/react/api/create-dom-renderer"},next:{title:"Limitations",permalink:"/react/guides/limitations"}},l=[],u={toc:l};function m(e){var t=e.components,r=(0,i.Z)(e,a);return(0,o.kt)("wrapper",(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"atomic-css"},"Atomic CSS"),(0,o.kt)("p",null,"This page is not ready yet."))}m.isMDXComponent=!0},876:(e,t,r)=>{r.d(t,{Zo:()=>l,kt:()=>f});var n=r(2784);function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}var s=n.createContext({}),p=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},l=function(e){var t=p(e.components);return n.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,i=e.mdxType,o=e.originalType,s=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),m=p(r),f=i,d=m["".concat(s,".").concat(f)]||m[f]||u[f]||o;return r?n.createElement(d,a(a({ref:t},l),{},{components:r})):n.createElement(d,a({ref:t},l))}));function f(e,t){var r=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var o=r.length,a=new Array(o);a[0]=m;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c.mdxType="string"==typeof e?e:i,a[1]=c;for(var p=2;p<o;p++)a[p]=r[p];return n.createElement.apply(null,a)}return n.createElement.apply(null,r)}m.displayName="MDXCreateElement"}}]);

Просмотреть файл

@ -1 +0,0 @@
"use strict";(self.webpackChunk_griffel_website=self.webpackChunk_griffel_website||[]).push([[760],{7853:(e,t,r)=>{r.r(t),r.d(t,{frontMatter:()=>a,contentTitle:()=>s,metadata:()=>p,toc:()=>u,default:()=>m});var n=r(7896),i=r(1461),o=(r(2784),r(876)),c=["components"],a={sidebar_position:1},s="Atomic CSS",p={unversionedId:"react/guides/atomic-css",id:"react/guides/atomic-css",title:"Atomic CSS",description:"",source:"@site/docs/react/guides/atomic-css.md",sourceDirName:"react/guides",slug:"/react/guides/atomic-css",permalink:"/react/guides/atomic-css",editUrl:"https://github.com/microsoft/griffel/tree/main/apps/website/docs/react/guides/atomic-css.md",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1},sidebar:"reactSidebar",previous:{title:"createDOMRenderer",permalink:"/react/api/create-dom-renderer"},next:{title:"Limitations",permalink:"/react/guides/limitations"}},u=[],l={toc:u};function m(e){var t=e.components,r=(0,i.Z)(e,c);return(0,o.kt)("wrapper",(0,n.Z)({},l,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"atomic-css"},"Atomic CSS"))}m.isMDXComponent=!0},876:(e,t,r)=>{r.d(t,{Zo:()=>u,kt:()=>f});var n=r(2784);function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function c(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function a(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}var s=n.createContext({}),p=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):c(c({},t),e)),r},u=function(e){var t=p(e.components);return n.createElement(s.Provider,{value:t},e.children)},l={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,i=e.mdxType,o=e.originalType,s=e.parentName,u=a(e,["components","mdxType","originalType","parentName"]),m=p(r),f=i,d=m["".concat(s,".").concat(f)]||m[f]||l[f]||o;return r?n.createElement(d,c(c({ref:t},u),{},{components:r})):n.createElement(d,c({ref:t},u))}));function f(e,t){var r=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var o=r.length,c=new Array(o);c[0]=m;var a={};for(var s in t)hasOwnProperty.call(t,s)&&(a[s]=t[s]);a.originalType=e,a.mdxType="string"==typeof e?e:i,c[1]=a;for(var p=2;p<o;p++)c[p]=r[p];return n.createElement.apply(null,c)}return n.createElement.apply(null,r)}m.displayName="MDXCreateElement"}}]);

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -1 +0,0 @@
"use strict";(self.webpackChunk_griffel_website=self.webpackChunk_griffel_website||[]).push([[319],{9759:(e,t,r)=>{r.r(t),r.d(t,{frontMatter:()=>c,contentTitle:()=>s,metadata:()=>l,toc:()=>u,default:()=>m});var n=r(7896),i=r(1461),o=(r(2784),r(876)),a=["components"],c={sidebar_position:2},s="Limitations",l={unversionedId:"react/guides/limitations",id:"react/guides/limitations",title:"Limitations",description:"",source:"@site/docs/react/guides/limitations.md",sourceDirName:"react/guides",slug:"/react/guides/limitations",permalink:"/react/guides/limitations",editUrl:"https://github.com/microsoft/griffel/tree/main/apps/website/docs/react/guides/limitations.md",tags:[],version:"current",sidebarPosition:2,frontMatter:{sidebar_position:2},sidebar:"reactSidebar",previous:{title:"Atomic CSS",permalink:"/react/guides/atomic-css"},next:{title:"Build time transforms",permalink:"/react/guides/build-time-transforms"}},u=[],p={toc:u};function m(e){var t=e.components,r=(0,i.Z)(e,a);return(0,o.kt)("wrapper",(0,n.Z)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"limitations"},"Limitations"))}m.isMDXComponent=!0},876:(e,t,r)=>{r.d(t,{Zo:()=>u,kt:()=>f});var n=r(2784);function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?o(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}var s=n.createContext({}),l=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},u=function(e){var t=l(e.components);return n.createElement(s.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var r=e.components,i=e.mdxType,o=e.originalType,s=e.parentName,u=c(e,["components","mdxType","originalType","parentName"]),m=l(r),f=i,d=m["".concat(s,".").concat(f)]||m[f]||p[f]||o;return r?n.createElement(d,a(a({ref:t},u),{},{components:r})):n.createElement(d,a({ref:t},u))}));function f(e,t){var r=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var o=r.length,a=new Array(o);a[0]=m;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c.mdxType="string"==typeof e?e:i,a[1]=c;for(var l=2;l<o;l++)a[l]=r[l];return n.createElement.apply(null,a)}return n.createElement.apply(null,r)}m.displayName="MDXCreateElement"}}]);

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -0,0 +1 @@
(()=>{"use strict";var e,t,r,o,f,n={},a={};function d(e){var t=a[e];if(void 0!==t)return t.exports;var r=a[e]={id:e,loaded:!1,exports:{}};return n[e].call(r.exports,r,r.exports,d),r.loaded=!0,r.exports}d.m=n,d.c=a,e=[],d.O=(t,r,o,f)=>{if(!r){var n=1/0;for(l=0;l<e.length;l++){for(var[r,o,f]=e[l],a=!0,i=0;i<r.length;i++)(!1&f||n>=f)&&Object.keys(d.O).every((e=>d.O[e](r[i])))?r.splice(i--,1):(a=!1,f<n&&(n=f));if(a){e.splice(l--,1);var c=o();void 0!==c&&(t=c)}}return t}f=f||0;for(var l=e.length;l>0&&e[l-1][2]>f;l--)e[l]=e[l-1];e[l]=[r,o,f]},d.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return d.d(t,{a:t}),t},r=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,d.t=function(e,o){if(1&o&&(e=this(e)),8&o)return e;if("object"==typeof e&&e){if(4&o&&e.__esModule)return e;if(16&o&&"function"==typeof e.then)return e}var f=Object.create(null);d.r(f);var n={};t=t||[null,r({}),r([]),r(r)];for(var a=2&o&&e;"object"==typeof a&&!~t.indexOf(a);a=r(a))Object.getOwnPropertyNames(a).forEach((t=>n[t]=()=>e[t]));return n.default=()=>e,d.d(f,n),f},d.d=(e,t)=>{for(var r in t)d.o(t,r)&&!d.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},d.f={},d.e=e=>Promise.all(Object.keys(d.f).reduce(((t,r)=>(d.f[r](e,t),t)),[])),d.u=e=>"assets/js/"+({53:"935f2afb",96:"fdbc8de5",237:"1df93b7f",268:"e3f9271d",308:"c810fd4b",319:"f9c9fb94",428:"8fbfd0c8",464:"09233cf4",514:"1be78505",536:"df7e75dc",542:"61237def",712:"1358346b",760:"b918371a",766:"3b30420a",780:"76d43799",918:"17896441"}[e]||e)+"."+{53:"13fff4a4",66:"7a624869",96:"318dc626",237:"553f9998",268:"672e50a0",308:"e9f26f12",319:"f7e50a90",366:"aae40bfd",428:"4c49c423",464:"8db7e3b5",514:"4a7569b4",536:"3757fbf8",542:"55997f07",620:"3e1591a3",712:"e286461d",760:"a47dbe9c",766:"53d02fa6",780:"2d203c54",918:"59e98e16"}[e]+".js",d.miniCssF=e=>"assets/css/styles.eecc7f29.css",d.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),d.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o={},f="@griffel/website:",d.l=(e,t,r,n)=>{if(o[e])o[e].push(t);else{var a,i;if(void 0!==r)for(var c=document.getElementsByTagName("script"),l=0;l<c.length;l++){var s=c[l];if(s.getAttribute("src")==e||s.getAttribute("data-webpack")==f+r){a=s;break}}a||(i=!0,(a=document.createElement("script")).charset="utf-8",a.timeout=120,d.nc&&a.setAttribute("nonce",d.nc),a.setAttribute("data-webpack",f+r),a.src=e),o[e]=[t];var b=(t,r)=>{a.onerror=a.onload=null,clearTimeout(u);var f=o[e];if(delete o[e],a.parentNode&&a.parentNode.removeChild(a),f&&f.forEach((e=>e(r))),t)return t(r)},u=setTimeout(b.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=b.bind(null,a.onerror),a.onload=b.bind(null,a.onload),i&&document.head.appendChild(a)}},d.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),d.p="/",d.gca=function(e){return e={17896441:"918","935f2afb":"53",fdbc8de5:"96","1df93b7f":"237",e3f9271d:"268",c810fd4b:"308",f9c9fb94:"319","8fbfd0c8":"428","09233cf4":"464","1be78505":"514",df7e75dc:"536","61237def":"542","1358346b":"712",b918371a:"760","3b30420a":"766","76d43799":"780"}[e]||e,d.p+d.u(e)},(()=>{var e={303:0,532:0};d.f.j=(t,r)=>{var o=d.o(e,t)?e[t]:void 0;if(0!==o)if(o)r.push(o[2]);else if(/^(303|532)$/.test(t))e[t]=0;else{var f=new Promise(((r,f)=>o=e[t]=[r,f]));r.push(o[2]=f);var n=d.p+d.u(t),a=new Error;d.l(n,(r=>{if(d.o(e,t)&&(0!==(o=e[t])&&(e[t]=void 0),o)){var f=r&&("load"===r.type?"missing":r.type),n=r&&r.target&&r.target.src;a.message="Loading chunk "+t+" failed.\n("+f+": "+n+")",a.name="ChunkLoadError",a.type=f,a.request=n,o[1](a)}}),"chunk-"+t,t)}},d.O.j=t=>0===e[t];var t=(t,r)=>{var o,f,[n,a,i]=r,c=0;if(n.some((t=>0!==e[t]))){for(o in a)d.o(a,o)&&(d.m[o]=a[o]);if(i)var l=i(d)}for(t&&t(r);c<n.length;c++)f=n[c],d.o(e,f)&&e[f]&&e[f][0](),e[f]=0;return d.O(l)},r=self.webpackChunk_griffel_website=self.webpackChunk_griffel_website||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})()})();

Просмотреть файл

@ -1 +0,0 @@
(()=>{"use strict";var e,t,r,o,f,n={},a={};function i(e){var t=a[e];if(void 0!==t)return t.exports;var r=a[e]={id:e,loaded:!1,exports:{}};return n[e].call(r.exports,r,r.exports,i),r.loaded=!0,r.exports}i.m=n,i.c=a,e=[],i.O=(t,r,o,f)=>{if(!r){var n=1/0;for(l=0;l<e.length;l++){for(var[r,o,f]=e[l],a=!0,c=0;c<r.length;c++)(!1&f||n>=f)&&Object.keys(i.O).every((e=>i.O[e](r[c])))?r.splice(c--,1):(a=!1,f<n&&(n=f));if(a){e.splice(l--,1);var d=o();void 0!==d&&(t=d)}}return t}f=f||0;for(var l=e.length;l>0&&e[l-1][2]>f;l--)e[l]=e[l-1];e[l]=[r,o,f]},i.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return i.d(t,{a:t}),t},r=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,i.t=function(e,o){if(1&o&&(e=this(e)),8&o)return e;if("object"==typeof e&&e){if(4&o&&e.__esModule)return e;if(16&o&&"function"==typeof e.then)return e}var f=Object.create(null);i.r(f);var n={};t=t||[null,r({}),r([]),r(r)];for(var a=2&o&&e;"object"==typeof a&&!~t.indexOf(a);a=r(a))Object.getOwnPropertyNames(a).forEach((t=>n[t]=()=>e[t]));return n.default=()=>e,i.d(f,n),f},i.d=(e,t)=>{for(var r in t)i.o(t,r)&&!i.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},i.f={},i.e=e=>Promise.all(Object.keys(i.f).reduce(((t,r)=>(i.f[r](e,t),t)),[])),i.u=e=>"assets/js/"+({53:"935f2afb",96:"fdbc8de5",237:"1df93b7f",268:"e3f9271d",308:"c810fd4b",319:"f9c9fb94",428:"8fbfd0c8",464:"09233cf4",514:"1be78505",542:"61237def",712:"1358346b",760:"b918371a",766:"3b30420a",780:"76d43799",918:"17896441"}[e]||e)+"."+{53:"560d6242",66:"7a624869",96:"ca995604",237:"553f9998",268:"672e50a0",308:"b14b47fd",319:"f3256c2e",366:"aae40bfd",428:"3525005c",464:"6c171a88",514:"4a7569b4",542:"55997f07",620:"3e1591a3",712:"e286461d",760:"df9618d6",766:"ce5b0593",780:"197917d7",918:"59e98e16"}[e]+".js",i.miniCssF=e=>"assets/css/styles.eecc7f29.css",i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o={},f="@griffel/website:",i.l=(e,t,r,n)=>{if(o[e])o[e].push(t);else{var a,c;if(void 0!==r)for(var d=document.getElementsByTagName("script"),l=0;l<d.length;l++){var s=d[l];if(s.getAttribute("src")==e||s.getAttribute("data-webpack")==f+r){a=s;break}}a||(c=!0,(a=document.createElement("script")).charset="utf-8",a.timeout=120,i.nc&&a.setAttribute("nonce",i.nc),a.setAttribute("data-webpack",f+r),a.src=e),o[e]=[t];var b=(t,r)=>{a.onerror=a.onload=null,clearTimeout(u);var f=o[e];if(delete o[e],a.parentNode&&a.parentNode.removeChild(a),f&&f.forEach((e=>e(r))),t)return t(r)},u=setTimeout(b.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=b.bind(null,a.onerror),a.onload=b.bind(null,a.onload),c&&document.head.appendChild(a)}},i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),i.p="/",i.gca=function(e){return e={17896441:"918","935f2afb":"53",fdbc8de5:"96","1df93b7f":"237",e3f9271d:"268",c810fd4b:"308",f9c9fb94:"319","8fbfd0c8":"428","09233cf4":"464","1be78505":"514","61237def":"542","1358346b":"712",b918371a:"760","3b30420a":"766","76d43799":"780"}[e]||e,i.p+i.u(e)},(()=>{var e={303:0,532:0};i.f.j=(t,r)=>{var o=i.o(e,t)?e[t]:void 0;if(0!==o)if(o)r.push(o[2]);else if(/^(303|532)$/.test(t))e[t]=0;else{var f=new Promise(((r,f)=>o=e[t]=[r,f]));r.push(o[2]=f);var n=i.p+i.u(t),a=new Error;i.l(n,(r=>{if(i.o(e,t)&&(0!==(o=e[t])&&(e[t]=void 0),o)){var f=r&&("load"===r.type?"missing":r.type),n=r&&r.target&&r.target.src;a.message="Loading chunk "+t+" failed.\n("+f+": "+n+")",a.name="ChunkLoadError",a.type=f,a.request=n,o[1](a)}}),"chunk-"+t,t)}},i.O.j=t=>0===e[t];var t=(t,r)=>{var o,f,[n,a,c]=r,d=0;if(n.some((t=>0!==e[t]))){for(o in a)i.o(a,o)&&(i.m[o]=a[o]);if(c)var l=c(i)}for(t&&t(r);d<n.length;d++)f=n[d],i.o(e,f)&&e[f]&&e[f][0](),e[f]=0;return i.O(l)},r=self.webpackChunk_griffel_website=self.webpackChunk_griffel_website||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})()})();

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@ -1 +1 @@
<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"><url><loc>https://griffel.js.org/</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/react/api/create-dom-renderer</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/react/api/make-static-styles</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/react/api/make-styles</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/react/api/merge-classes</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/react/guides/atomic-css</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/react/guides/build-time-transforms</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/react/guides/child-window-rendering</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/react/guides/limitations</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/react/guides/ssr-usage</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/react/install</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/try-it-out</loc><changefreq>weekly</changefreq><priority>0.5</priority></url></urlset>
<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"><url><loc>https://griffel.js.org/</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/react/api/create-dom-renderer</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/react/api/make-static-styles</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/react/api/make-styles</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/react/api/merge-classes</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/react/api/shorthands</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/react/guides/atomic-css</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/react/guides/build-time-transforms</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/react/guides/child-window-rendering</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/react/guides/limitations</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/react/guides/ssr-usage</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/react/install</loc><changefreq>weekly</changefreq><priority>0.5</priority></url><url><loc>https://griffel.js.org/try-it-out</loc><changefreq>weekly</changefreq><priority>0.5</priority></url></urlset>

Просмотреть файл

@ -5,12 +5,12 @@
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="Docusaurus v2.0.0-beta.15">
<title data-react-helmet="true">Try it out | Griffel</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://griffel.js.org/try-it-out"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="Try it out | Griffel"><meta data-react-helmet="true" name="description" content="Don&#x27;t know how to get started writing styles in Griffel ?"><meta data-react-helmet="true" property="og:description" content="Don&#x27;t know how to get started writing styles in Griffel ?"><link data-react-helmet="true" rel="canonical" href="https://griffel.js.org/try-it-out"><link data-react-helmet="true" rel="alternate" href="https://griffel.js.org/try-it-out" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://griffel.js.org/try-it-out" hreflang="x-default"><link rel="stylesheet" href="/assets/css/styles.eecc7f29.css">
<link rel="preload" href="/assets/js/runtime~main.193dd2bd.js" as="script">
<link rel="preload" href="/assets/js/main.35d7031d.js" as="script">
<link rel="preload" href="/assets/js/runtime~main.123e31a7.js" as="script">
<link rel="preload" href="/assets/js/main.33a065b8.js" as="script">
</head>
<body>
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
<div role="region"><a href="#" class="skipToContent_cbSD">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><b class="navbar__title">Griffel</b></a><a class="navbar__item navbar__link" href="/react/install">For React.js</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/try-it-out">Try it out</a></div><div class="navbar__items navbar__items--right"><div class="container_zN5y"><button aria-label="Switch to dark mode" class="toggleButton_mXq3" disabled="" type="button"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg></button><a aria-label="Go to Griffel GitHub page" class="githubLink_Z_dD" href="https://github.com/microsoft/griffel" target="_blank" rel="noopener noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_CtYO"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_EOoS" type="button"></button><main class="docMainContainer_MzcF docMainContainerEnhanced_iNMK"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_lvEh"><div class="docItemContainer_JwXb"><article><div class="theme-doc-markdown markdown"><h1>Try it out</h1><p>Don&#x27;t know how to get started writing styles in Griffel ?</p><p>Having trouble getting your styles to work the way you want to ?</p><p>Use the editor below to try it out! Griffel on the left, CSS on the right.</p><div class="sp-wrapper sp-github-light"><div class="sp-layout"><div class="sp-stack" style="height:400px"><div class="sp-code-editor"><div aria-describedby="enter-instructions-2661" aria-label="Code Editor for Styles.js" class="sp-cm sp-pristine sp-javascript" role="group" tabindex="0" translate="no"><pre class="sp-pre-placeholder" style="margin-left:28px">import { makeStyles, shorthands } from &#x27;@griffel/core&#x27;;
<div role="region"><a href="#" class="skipToContent_cbSD">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><b class="navbar__title">Griffel</b></a><a class="navbar__item navbar__link" href="/react/install">For React.js</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/try-it-out">Try it out</a></div><div class="navbar__items navbar__items--right"><div class="container_zN5y"><button aria-label="Switch to dark mode" class="toggleButton_mXq3" disabled="" type="button"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg></button><a aria-label="Go to Griffel GitHub page" class="githubLink_Z_dD" href="https://github.com/microsoft/griffel" target="_blank" rel="noopener noreferrer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_CtYO"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_EOoS" type="button"></button><main class="docMainContainer_MzcF docMainContainerEnhanced_iNMK"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_lvEh"><div class="docItemContainer_JwXb"><article><div class="theme-doc-markdown markdown"><h1>Try it out</h1><p>Don&#x27;t know how to get started writing styles in Griffel ?</p><p>Having trouble getting your styles to work the way you want to ?</p><p>Use the editor below to try it out! Griffel on the left, CSS on the right.</p><div class="sp-wrapper sp-github-light"><div class="sp-layout"><div class="sp-stack" style="height:400px"><div class="sp-code-editor"><div aria-describedby="enter-instructions-2457" aria-label="Code Editor for Styles.js" class="sp-cm sp-pristine sp-javascript" role="group" tabindex="0" translate="no"><pre class="sp-pre-placeholder" style="margin-left:28px">import { makeStyles, shorthands } from &#x27;@griffel/core&#x27;;
export default makeStyles({
root: {
@ -21,8 +21,8 @@ export default makeStyles({
},
},
});
</pre><p id="enter-instructions-2661" style="display:none">To enter the code editing mode, press Enter. To exit the edit mode, press Escape</p><p id="exit-instructions-2661" style="display:none">You are editing the code. To exit the edit mode, press Escape</p></div></div></div><div class="sp-stack" style="height:400px"><div class="sp-preview-container"><iframe class="sp-preview-iframe" title="Sandpack Preview"></iframe><div class="sp-preview-actions"></div></div></div></div></div></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class="col"><a href="https://github.com/microsoft/griffel/tree/main/apps/website/docs/try-it-out.mdx" target="_blank" rel="noreferrer noopener" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_xj76" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_twTl"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"></div></nav></div></div></div></div></main></div></div></div>
<script src="/assets/js/runtime~main.193dd2bd.js"></script>
<script src="/assets/js/main.35d7031d.js"></script>
</pre><p id="enter-instructions-2457" style="display:none">To enter the code editing mode, press Enter. To exit the edit mode, press Escape</p><p id="exit-instructions-2457" style="display:none">You are editing the code. To exit the edit mode, press Escape</p></div></div></div><div class="sp-stack" style="height:400px"><div class="sp-preview-container"><iframe class="sp-preview-iframe" title="Sandpack Preview"></iframe><div class="sp-preview-actions"></div></div></div></div></div></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class="col"><a href="https://github.com/microsoft/griffel/tree/main/apps/website/docs/try-it-out.mdx" target="_blank" rel="noreferrer noopener" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_xj76" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_twTl"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"></div></nav></div></div></div></div></main></div></div></div>
<script src="/assets/js/runtime~main.123e31a7.js"></script>
<script src="/assets/js/main.33a065b8.js"></script>
</body>
</html>