text: (window.webpackJsonp=window.webpackJsonp||[]).push([[5],{"fn/H":function(e,t,n){"use strict";n.r(t),n.d(t,"_frontmatter",(function(){return u})),n.d(t,"default",(function(){return d}));var a=n("Fcif"),o=n("+I+c"),s=n("mXGw"),r=n("/FXl"),l=n("TjRS"),c=n("ZFoC"),p=n("htWr"),i=n("3re2"),u=(n("aD51"),{});void 0!==u&&u&&u===Object(u)&&Object.isExtensible(u)&&!u.hasOwnProperty("__filemeta")&&Object.defineProperty(u,"__filemeta",{configurable:!0,value:{name:"_frontmatter",filename:"src/docs/API.mdx"}});var m={_frontmatter:u},b=l.a;function d(e){var t,n,d=e.components,y=Object(o.a)(e,["components"]);return Object(r.b)(b,Object(a.a)({},m,y,{components:d,mdxType:"MDXLayout"}),Object(r.b)("pre",null,Object(r.b)("code",{parentName:"pre",className:"language-tsx"},"import { Style, styled } from 'stylerun'\n")),Object(r.b)("h2",{id:"style"},Object(r.b)("inlineCode",{parentName:"h2"},"Style")),Object(r.b)("p",null,"The Style component just cache and forward pasted styles into the ",Object(r.b)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Glossary/Head"},"head"),"."),Object(r.b)("p",null,"Basic example with hand made ",Object(r.b)("inlineCode",{parentName:"p"},"className"),":"),Object(r.b)(c.c,{__position:0,__code:'() => (\n  <>\n    <textarea className="text-input" />\n    <Style>{`\n          .text-input {\n              font-size: 1em;\n              outline: none;\n          }\n          .text-input:focus {\n              box-shadow: 0 0 1em indigo;\n          }\n      `}</Style>\n  </>\n)',__scope:(t={props:y,DefaultLayout:l.a,Playground:c.c,AutoResizedInput:p.a,Style:i.a,styled:i.b},t.DefaultLayout=l.a,t._frontmatter=u,t),mdxType:"Playground"},(function(){return Object(r.b)(s.Fragment,null,Object(r.b)("textarea",{className:"text-input"}),Object(r.b)(i.a,{mdxType:"Style"},"\n            .text-input {\n                font-size: 1em;\n                outline: none;\n            }\n            .text-input:focus {\n                box-shadow: 0 0 1em indigo;\n            }\n        "))})),Object(r.b)("h2",{id:"styled"},Object(r.b)("inlineCode",{parentName:"h2"},"styled")),Object(r.b)("p",null,"Inspired by ",Object(r.b)("a",{parentName:"p",href:"https://styled-components.com"},"styled-component")," Stylerun has ",Object(r.b)("inlineCode",{parentName:"p"},"styled")," method for easily creation of styled components and wrap existed components to allow use it as selectors."),Object(r.b)("pre",null,Object(r.b)("code",{parentName:"pre",className:"language-tsx"},"import { styled } from 'stylerun'\n\n// classic input component with `className` prop and returns it `toString` method\nconst Input = styled('input')\nconsole.log(Input.className)  // 'sr_1_qj2c'\nconsole.log(Input.toString()) // '.sr_1_qj2c'\nconsole.log(Input + '')       // '.sr_1_qj2c'\nconsole.log(`${Input}`)       // '.sr_1_qj2c'\n\n// Fill free rewrite `className` for better debug\nInput.className = `example-input`\nconsole.log(Input.className)  // 'example-input'\nconsole.log(Input.toString()) // '.example-input'\nconsole.log(Input + '')       // '.example-input'\nconsole.log(`${Input}`)       // '.example-input'\n\nconst OtherInput = styled(Input)\nconsole.log(OtherInput.className)  // 'sr_2_qj2c'\n")),Object(r.b)("p",null,"When you create an component with ",Object(r.b)("inlineCode",{parentName:"p"},"styled")," method you can paste styles creator as the second argument. It will be called inside component render on each update so you may use ",Object(r.b)("a",{parentName:"p",href:"https://reactjs.org/docs/hooks-intro.html"},"hooks")," with it. One of the best feature of Stylerun is build in ",Object(r.b)("inlineCode",{parentName:"p"},"useCssVar")," hook that passed in the props, using it inside the styles creator callback automatically register created css-variables inside element styles."),Object(r.b)("p",null,"Remember that styles creator return plain css with global values for ",Object(r.b)("a",{parentName:"p",href:"#style"},"Style")," component, so for scoped styles defenition you should use passed ",Object(r.b)("inlineCode",{parentName:"p"},"className"),"."),Object(r.b)("pre",null,Object(r.b)("code",{parentName:"pre",className:"language-tsx"},"import { styled } from 'stylerun'\n\nconst TextArea = styled(\n  `textarea`,\n  ({ className }) => `\n    .${className} {\n      font-size: 1em;\n      outline: none;\n    }\n    .${className}:focus {\n      box-shadow: 0 0 1em indigo;\n    }\n  `\n)\n")),Object(r.b)("hr",null),Object(r.b)("pre",null,Object(r.b)("code",{parentName:"pre",className:"language-tsx"},"import { styled } from 'stylerun'\n\nconst AutoResizedInput = styled(`input`, ({ className, value = '', useCssVar }) => `\n  .${className} {\n    font-size: ${useCssVar(`${Math.max(1, 2 - String(value).length * 0.1)}em`)}\n  }\n`)\n")),Object(r.b)(c.c,{__position:1,__code:"() => {\n  const [input, update] = React.useState('')\n\n  return (\n    <AutoResizedInput\n      value={input}\n      onChange={e => update(e.currentTarget.value)}\n    />\n  )\n}",__scope:(n={props:y,DefaultLayout:l.a,Playground:c.c,AutoResizedInput:p.a,Style:i.a,styled:i.b},n.DefaultLayout=l.a,n._frontmatter=u,n),mdxType:"Playground"},(function(){var e=s.useState(""),t=e[0],n=e[1];return Object(r.b)(p.a,{value:t,onChange:function(e){return n(e.currentTarget.value)},mdxType:"AutoResizedInput"})})),Object(r.b)("h2",{id:"usecssvar"},Object(r.b)("inlineCode",{parentName:"h2"},"useCssVar")),Object(r.b)("p",null,Object(r.b)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties"},"Css-variables")," is a most performant and flexible way to bring visual interaction to your application. Stylerun help to use it."),Object(r.b)("p",null,Object(r.b)("inlineCode",{parentName:"p"},"useCssVar")," come from ",Object(r.b)("inlineCode",{parentName:"p"},"styled")," props and accept string or number value and create object with one ",Object(r.b)("strong",{parentName:"p"},"unique")," css-property name in the keys and and passed value in the value of property. It may be used as an ",Object(r.b)("a",{parentName:"p",href:"https://reactjs.org/docs/dom-elements.html#style"},"style object")," or spread in to it. Also it has ",Object(r.b)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString"},Object(r.b)("inlineCode",{parentName:"a"},"toString"))," method that returns css-variable for paste it in a styles."),Object(r.b)("pre",null,Object(r.b)("code",{parentName:"pre",className:"language-tsx"},"import { Style } from 'stylerun'\n\nexport const Example1 = styled/*<{ color: string }>*/(\n  ({ color, useCssVar }) => {\n    const colorVar = useCssVar(color)\n\n    console.log(colorVar)            // { '--sr_var_1_qj2c': 'red' }\n    console.log(colorVar.toString()) // 'var(--sr_var_1_qj2c)'\n    console.log(colorVar + '')       // 'var(--sr_var_1_qj2c)'\n    console.log(`${colorVar}`)       // 'var(--sr_var_1_qj2c)'\n\n    return <>\n        <span style={colorVar} className=\"example-text\">text</span>\n        <Style>{`\n            .example-text {\n                color: ${colorVar}\n            }\n        `}</Style>\n    </>\n  }\n)\n\n// Also you may paste optional name for generated value by the second argument\n\nexport const Example2 = styled/*<{ color: string, size: '2' }>*/(\n  ({ color, size, useCssVar }) => {\n    const colorVar = useCssVar(props.color)\n    const sizeVar = useCssVar(`${props.size}em`, 'size')\n\n    console.log(colorVar) // { '--sr_var_2_qj2c': 'red' }\n    console.log(sizeVar)  // { '--sr_size_3_qj2c': '2em' }\n\n    return <>\n        <span style={{...colorVar, ...sizeVar}} className=\"example-text\">text</span>\n        <Style>{`\n            .example-text {\n                color: ${colorVar}\n                font-size: ${sizeVar}\n            }\n        `}</Style>\n    </>\n  }\n)\n")))}void 0!==d&&d&&d===Object(d)&&Object.isExtensible(d)&&!d.hasOwnProperty("__filemeta")&&Object.defineProperty(d,"__filemeta",{configurable:!0,value:{name:"MDXContent",filename:"src/docs/API.mdx"}}),d.isMDXComponent=!0}}]);
  //# sourceMappingURL=component---src-docs-api-mdx-f55040118175c22b09a5.js.map