diff --git a/client.js b/client.js index b2361ee..ea5a4c4 100644 --- a/client.js +++ b/client.js @@ -1,2 +1,2 @@ /*! For license information please see client.js.LICENSE.txt */ -(()=>{var e={5823:(e,n,t)=>{var a={"./background.md":6625,"./data-types.md":8515,"./how-it-works.md":9848,"./introduction.md":5298,"./react-api.md":2975,"./runtime-api.md":2327,"./setup.md":2241,"./styling-api.md":8486,"./webpack-options.md":678};function o(e){var n=s(e);return t(n)}function s(e){if(!t.o(a,e)){var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}return a[e]}o.keys=function(){return Object.keys(a)},o.resolve=s,e.exports=o,o.id=5823},6084:(e,n,t)=>{"use strict";function a(){return(a=Object.assign||function(e){for(var n=1;na})},53:(e,n,t)=>{"use strict";function a(e,n){return(a=Object.setPrototypeOf||function(e,n){return e.__proto__=n,e})(e,n)}function o(e,n){e.prototype=Object.create(n.prototype),e.prototype.constructor=e,a(e,n)}t.d(n,{Z:()=>o})},3251:(e,n,t)=>{"use strict";function a(e,n){if(null==e)return{};var t,a,o={},s=Object.keys(e);for(a=0;a=0||(o[t]=e[t]);return o}t.d(n,{Z:()=>a})},2804:(e,n,t)=>{"use strict";var a=t(5699);Object.defineProperty(n,"XJ",{enumerable:!0,get:function(){return s(a).default}});var o=t(8228);function s(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"Zo",{enumerable:!0,get:function(){return s(o).default}})},8228:(e,n,t)=>{"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.withMDXComponents=void 0;var a,o=Object.assign||function(e){for(var n=1;n=0||Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a]);return t}(n,["components"]);return s.default.createElement(i,null,(function(n){return s.default.createElement(e,o({components:t||n},a))}))}},n.default=function(e){var n=e.components,t=e.children;return s.default.createElement(l,{value:n},t)}},5699:(e,n,t)=>{"use strict";function a(e){return(a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(n,"__esModule",{value:!0});var o,s=Object.assign||function(e){for(var n=1;n{var a;function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}!function(){"use strict";var s={}.hasOwnProperty;function r(){for(var e=[],n=0;n{"use strict";t.d(n,{lX:()=>S,q_:()=>J,ob:()=>h,PP:()=>P,Ep:()=>d,Hp:()=>y});var a=t(6084);function o(e){return"/"===e.charAt(0)}function s(e,n){for(var t=n,a=t+1,o=e.length;a=0;m--){var f=r[m];"."===f?s(r,m):".."===f?(s(r,m),u++):u&&(s(r,m),u--)}if(!p)for(;u--;u)r.unshift("..");!p||""===r[0]||r[0]&&o(r[0])||r.unshift("");var d=r.join("/");return t&&"/"!==d.substr(-1)&&(d+="/"),d}(l.pathname,r.pathname)):l.pathname=r.pathname:l.pathname||(l.pathname="/"),l}function y(e,n){return e.pathname===n.pathname&&e.search===n.search&&e.hash===n.hash&&e.key===n.key&&i(e.state,n.state)}function g(){var e=null,n=[];return{setPrompt:function(n){return e=n,function(){e===n&&(e=null)}},confirmTransitionTo:function(n,t,a,o){if(null!=e){var s="function"==typeof e?e(n,t):e;"string"==typeof s?"function"==typeof a?a(s,o):o(!0):o(!1!==s)}else o(!0)},appendListener:function(e){var t=!0;function a(){t&&e.apply(void 0,arguments)}return n.push(a),function(){t=!1,n=n.filter((function(e){return e!==a}))}},notifyListeners:function(){for(var e=arguments.length,t=new Array(e),a=0;an?t.splice(n,t.length-n,o):t.push(o),u({action:a,location:o,index:n,entries:t})}}))},replace:function(e,n){var a="REPLACE",o=h(e,n,m(),v.location);c.confirmTransitionTo(o,a,t,(function(e){e&&(v.entries[v.index]=o,u({action:a,location:o}))}))},go:b,goBack:function(){b(-1)},goForward:function(){b(1)},canGo:function(e){var n=v.index+e;return n>=0&&n{"use strict";var a=t(5634),o={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},s={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},r={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},l={};function i(e){return a.isMemo(e)?r:l[e.$$typeof]||o}l[a.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},l[a.Memo]=r;var p=Object.defineProperty,c=Object.getOwnPropertyNames,u=Object.getOwnPropertySymbols,m=Object.getOwnPropertyDescriptor,f=Object.getPrototypeOf,d=Object.prototype;e.exports=function e(n,t,a){if("string"!=typeof t){if(d){var o=f(t);o&&o!==d&&e(n,o,a)}var r=c(t);u&&(r=r.concat(u(t)));for(var l=i(n),h=i(t),y=0;y{var a=t(5338).Symbol;e.exports=a},5113:(e,n,t)=>{var a=t(9778),o=t(277),s=t(8692),r=a?a.toStringTag:void 0;e.exports=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":r&&r in Object(e)?o(e):s(e)}},8514:(e,n,t)=>{function a(e){return(a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var o="object"==(void 0===t.g?"undefined":a(t.g))&&t.g&&t.g.Object===Object&&t.g;e.exports=o},277:(e,n,t)=>{var a=t(9778),o=Object.prototype,s=o.hasOwnProperty,r=o.toString,l=a?a.toStringTag:void 0;e.exports=function(e){var n=s.call(e,l),t=e[l];try{e[l]=void 0;var a=!0}catch(e){}var o=r.call(e);return a&&(n?e[l]=t:delete e[l]),o}},8692:e=>{var n=Object.prototype.toString;e.exports=function(e){return n.call(e)}},5338:(e,n,t)=>{function a(e){return(a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var o=t(8514),s="object"==("undefined"==typeof self?"undefined":a(self))&&self&&self.Object===Object&&self,r=o||s||Function("return this")();e.exports=r},24:(e,n,t)=>{var a=t(5414),o=t(2913),s=t(2885),r=Math.max,l=Math.min;e.exports=function(e,n,t){var i,p,c,u,m,f,d=0,h=!1,y=!1,g=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function k(n){var t=i,a=p;return i=p=void 0,d=n,u=e.apply(a,t)}function b(e){return d=e,m=setTimeout(w,n),h?k(e):u}function v(e){var t=e-f;return void 0===f||t>=n||t<0||y&&e-d>=c}function w(){var e=o();if(v(e))return E(e);m=setTimeout(w,function(e){var t=n-(e-f);return y?l(t,c-(e-d)):t}(e))}function E(e){return m=void 0,g&&i?k(e):(i=p=void 0,u)}function S(){var e=o(),t=v(e);if(i=arguments,p=this,f=e,t){if(void 0===m)return b(f);if(y)return clearTimeout(m),m=setTimeout(w,n),k(f)}return void 0===m&&(m=setTimeout(w,n)),u}return n=s(n)||0,a(t)&&(h=!!t.leading,c=(y="maxWait"in t)?r(s(t.maxWait)||0,n):c,g="trailing"in t?!!t.trailing:g),S.cancel=function(){void 0!==m&&clearTimeout(m),d=0,i=f=p=m=void 0},S.flush=function(){return void 0===m?u:E(o())},S}},5414:e=>{function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}e.exports=function(e){var t=n(e);return null!=e&&("object"==t||"function"==t)}},8300:e=>{function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}e.exports=function(e){return null!=e&&"object"==n(e)}},8033:(e,n,t)=>{function a(e){return(a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var o=t(5113),s=t(8300);e.exports=function(e){return"symbol"==a(e)||s(e)&&"[object Symbol]"==o(e)}},2913:(e,n,t)=>{var a=t(5338);e.exports=function(){return a.Date.now()}},172:(e,n,t)=>{var a=t(24),o=t(5414);e.exports=function(e,n,t){var s=!0,r=!0;if("function"!=typeof e)throw new TypeError("Expected a function");return o(t)&&(s="leading"in t?!!t.leading:s,r="trailing"in t?!!t.trailing:r),a(e,n,{leading:s,maxWait:n,trailing:r})}},2885:(e,n,t)=>{var a=t(5414),o=t(8033),s=/^\s+|\s+$/g,r=/^[-+]0x[0-9a-f]+$/i,l=/^0b[01]+$/i,i=/^0o[0-7]+$/i,p=parseInt;e.exports=function(e){if("number"==typeof e)return e;if(o(e))return NaN;if(a(e)){var n="function"==typeof e.valueOf?e.valueOf():e;e=a(n)?n+"":n}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(s,"");var t=l.test(e);return t||i.test(e)?p(e.slice(2),t?2:8):r.test(e)?NaN:+e}},6625:(e,n,t)=>{"use strict";t.r(n),t.d(n,{readingTime:()=>c,default:()=>u,tableOfContents:()=>m,frontMatter:()=>f});var a=t(362),o=t(2804);function s(e){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function r(e,n){for(var t=0;t=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}}(e,["components"]),a.createElement(o.XJ,{name:"wrapper",components:n},a.createElement(o.XJ,{name:"h1",components:n,props:{id:"background"}},"Background"),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"tradeoffs"}},"Tradeoffs"),a.createElement(o.XJ,{name:"p",components:n},"There are plenty of great CSS-in-JS solutions available—and we’re big fans of them. However, treat has taken quite a different approach."),a.createElement(o.XJ,{name:"p",components:n},"The primary goals of treat are ",a.createElement(o.XJ,{name:"strong",components:n,parentName:"p"},"full static extraction, minimal runtime code, type safety and legacy browser support.")," While a great developer experience is important to us, it will never come at the cost of these goals."),a.createElement(o.XJ,{name:"p",components:n},"Unlike a lot of CSS-in-JS approaches, treat is much more similar to ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://github.com/css-modules/css-modules"}},"CSS Modules"),", requiring a bit more work to bind styles to your components. It’s also unable to generate styles at runtime, which means it cannot handle dynamic theming. The upside of treat is that it allows you to craft themeable, statically extracted CSS using JavaScript (or TypeScript) with little impact to bundle size and negligible runtime performance cost."),a.createElement(o.XJ,{name:"p",components:n},"If you’re used to libraries like ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://www.styled-components.com"}},"styled-components")," or ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://emotion.sh/"}},"Emotion"),", treat might seem like a step backwards. These libraries can quickly and easily create dynamic component-oriented styles. However, they come with a bundle size and performance cost. For plenty of applications, this is a worthwhile tradeoff—and these libraries are a great choice if this isn’t an issue for you."),a.createElement(o.XJ,{name:"p",components:n},"If you’re familiar with static CSS-in-JS libraries like ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://linaria.now.sh/"}},"Linaria")," and ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://github.com/4Catalyzer/astroturf"}},"Astroturf"),", treat is very similar but with a couple of notable differences. Firstly, treat’s theming mechanism doesn’t require CSS custom property support (i.e. CSS variables), which means that legacy browsers like IE11 are supported. Secondly, styles are written as objects rather than template literals, to both ensure type safety, and to encourage you to think of your styles as data rather than strings of CSS."),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"backstory"}},"Backstory"),a.createElement(o.XJ,{name:"blockquote",components:n},a.createElement(o.XJ,{name:"p",components:n,parentName:"blockquote"},"You don’t have to read this to understand treat, but it’ll give you a much better understanding of where we’re coming from.")),a.createElement(o.XJ,{name:"p",components:n},"The origins of treat begin with ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://github.com/seek-oss/braid-design-system"}},"Braid"),", our design system."),a.createElement(o.XJ,{name:"p",components:n},"Braid was originally built with CSS Modules, but authored in JavaScript (via ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://github.com/naistran/css-in-js-loader"}},"css-in-js-loader"),"). Unfortunately, we were hitting up against the limits of this approach."),a.createElement(o.XJ,{name:"p",components:n},a.createElement(o.XJ,{name:"strong",components:n,parentName:"p"},"Problem #1: We were unable to author our CSS Modules in TypeScript.")),a.createElement(o.XJ,{name:"p",components:n},"When you attempt to write your CSS Modules in TypeScript, you export an entire style sheet object (which then gets converted to a CSS Module by ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://github.com/postcss/postcss-js"}},"postcss-js"),")."),a.createElement(o.XJ,{name:"p",components:n},"For example, let’s assume we have the following style sheet:"),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'export default {\n \'.someClass\': {\n color: \'red\'\n }\n};\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"When importing this file, consumers can only see a flat ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"styles")," object, which is notably different to the object that was exported."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'import styles from \'./styles.css.js\';\n\nstyles.someClass; // \'GENERATED_CLASS_NAME\'\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"The TypeScript compiler can’t make sense of this without an understanding of the transformation happening within webpack. When looking at the raw source code, this doesn’t make sense from a type perspective."),a.createElement(o.XJ,{name:"p",components:n},"As a result, even though the rest of our project was now written in TypeScript, we were forced to keep our CSS written in JavaScript. As a workaround, we generated TypeScript declaration files (via our own ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://github.com/seek-oss/css-modules-typescript-loader"}},"css-modules-typescript-loader"),"), but it was less than ideal."),a.createElement(o.XJ,{name:"p",components:n},a.createElement(o.XJ,{name:"strong",components:n,parentName:"p"},"Problem #2: CSS Modules only provided a single flat namespace to work with.")),a.createElement(o.XJ,{name:"p",components:n},"We were generating themed collections of utility classes and wanted to export multiple namespaces from a single file, e.g. ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"paddingTop"),", ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"background"),", ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"color"),", etc."),a.createElement(o.XJ,{name:"p",components:n},"We were forced to manually namespace properties with underscores, which required a lot of boilerplate code to convert these into nested data structures (e.g. converting ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"paddingTop_large")," into ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"paddingTop.large"),")."),a.createElement(o.XJ,{name:"p",components:n},"TypeScript made this particularly painful because we also had to maintain type definitions for these extra translation steps."),a.createElement(o.XJ,{name:"p",components:n},a.createElement(o.XJ,{name:"strong",components:n,parentName:"p"},"Potential solution: Runtime CSS-in-JS?")),a.createElement(o.XJ,{name:"p",components:n},"At this point we talked about migrating to a runtime CSS-in-JS library like ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://www.styled-components.com"}},"styled-components")," or ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://emotion.sh/"}},"Emotion"),". In fact, if we were starting from scratch, it’s likely we would have simply reached for one of these libraries. That certainly would have solved our immediate problems."),a.createElement(o.XJ,{name:"p",components:n},"However, we weren’t starting from scratch. Instead, we were beginning to roll out our new design system to an existing, well-established ecosystem that had grown accustomed to the technical tradeoffs and runtime characteristics of CSS Modules."),a.createElement(o.XJ,{name:"p",components:n},"Some of our projects are particularly sensitive to changes in bundle size and runtime performance, and we didn’t want to negatively impact these projects from the outside. Some of our projects are even shipped as standalone JavaScript widgets into external codebases. We wanted to be sure that our new design system wouldn’t come with a noticeable change in footprint."),a.createElement(o.XJ,{name:"p",components:n},"We did leave the door open to adopting this architecture in the future, but decided that we wanted to see how far we could go with our current set of tradeoffs."),a.createElement(o.XJ,{name:"p",components:n},a.createElement(o.XJ,{name:"strong",components:n,parentName:"p"},"Potential solution: Static CSS-in-JS?")),a.createElement(o.XJ,{name:"p",components:n},"The next step for us was to investigate libraries like ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://linaria.now.sh/"}},"Linaria")," and ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://github.com/4Catalyzer/astroturf"}},"Astroturf"),", which are both really interesting attempts at getting the best of both worlds—CSS-in-JS without the runtime overhead."),a.createElement(o.XJ,{name:"p",components:n},"Unfortunately, neither of them quite fit our particular needs."),a.createElement(o.XJ,{name:"p",components:n},a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://github.com/4Catalyzer/astroturf"}},"Astroturf")," is a really lean solution to this problem, essentially supporting CSS Modules and standard preprocessors within JavaScript template literals. That makes it much more ergonomic than more traditional approaches, but it also inherits all of the limitations we were experiencing with CSS Modules."),a.createElement(o.XJ,{name:"p",components:n},a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://linaria.now.sh/"}},"Linaria")," looked a lot more promising due to its theming support, but it came with an important caveat. Theming is achieved via CSS custom properties (i.e. CSS variables), which means that legacy browsers like IE11 are not supported. This simply wasn’t an option for us."),a.createElement(o.XJ,{name:"p",components:n},a.createElement(o.XJ,{name:"strong",components:n,parentName:"p"},"Potential solution: Something new?")),a.createElement(o.XJ,{name:"p",components:n},"As a result, we started talking about alternative ideas. Something that could offer the theming ability of Linaria, but without the reliance on CSS variables. Something that could offer the runtime characteristics of CSS Modules, while feeling like regular JavaScript (or, in our case, TypeScript)."),a.createElement(o.XJ,{name:"p",components:n},"That’s when the early ideas for treat started to emerge."),a.createElement(o.XJ,{name:"p",components:n},"Early API designs looked promising, and initial prototypes proved that the concept could be supported by webpack. We decided to start investing in this approach—slowly at first, but ramping up as it started to further prove itself."),a.createElement(o.XJ,{name:"p",components:n},"We continued to refine treat over several months while we simultaneously worked on Braid, with the development of one supporting the other. The code in Braid was now much more maintainable than it was before, and treat ultimately shipped to production, supporting real applications, with only a couple of minor hiccups along the way."),a.createElement(o.XJ,{name:"p",components:n},"After using treat internally for a considerable amount of time, we decided we were finally ready to share treat with the world—and here you are! 😎"),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"thanks"}},"Thanks"),a.createElement(o.XJ,{name:"p",components:n},a.createElement(o.XJ,{name:"strong",components:n,parentName:"p"},a.createElement(o.XJ,{name:"a",components:n,parentName:"strong",props:{href:"https://twitter.com/Jhnnns"}},"Johannes Ewald"))," for letting us have the ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"treat")," name on npm."),a.createElement(o.XJ,{name:"p",components:n},a.createElement(o.XJ,{name:"strong",components:n,parentName:"p"},a.createElement(o.XJ,{name:"a",components:n,parentName:"strong",props:{href:"https://twitter.com/naistran"}},"Nathan Nam Tran"))," for creating ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://github.com/naistran/css-in-js-loader"}},"css-in-js-loader"),", which served as the initial starting point for our approach."),a.createElement(o.XJ,{name:"p",components:n},a.createElement(o.XJ,{name:"strong",components:n,parentName:"p"},a.createElement(o.XJ,{name:"a",components:n,parentName:"strong",props:{href:"https://www.seek.com.au"}},"SEEK"))," for giving us the space to do interesting work."))}}])&&r(n.prototype,t),m}(a.Component),m=function(){return[{id:"tradeoffs",level:2,title:"Tradeoffs",children:[]},{id:"backstory",level:2,title:"Backstory",children:[]},{id:"thanks",level:2,title:"Thanks",children:[]}]},f={title:"Background"}},8515:(e,n,t)=>{"use strict";t.r(n),t.d(n,{readingTime:()=>c,default:()=>u,tableOfContents:()=>m,frontMatter:()=>f});var a=t(362),o=t(2804);function s(e){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function r(e,n){for(var t=0;t=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}}(e,["components"]),a.createElement(o.XJ,{name:"wrapper",components:n},a.createElement(o.XJ,{name:"h1",components:n,props:{id:"data-types"}},"Data Types"),a.createElement(o.XJ,{name:"p",components:n},"While not an exhaustive list of all types defined in the library, this section covers the core data types that are essential to using the library."),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"styles"}},"Styles"),a.createElement(o.XJ,{name:"p",components:n},"Type: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"object")),a.createElement(o.XJ,{name:"p",components:n},"When passing styles to the ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"styling-api#style"}},a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"a"},"style")),", ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"styling-api#stylemap"}},a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"a"},"styleMap"))," and ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"styling-api#styletree"}},a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"a"},"styleTree"))," functions, or returning styles from a ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"#themedstyles"}},a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"a"},"ThemedStyles")," function"),", you’ll need to define them in the following format."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'{\n color: \'red\',\n fontFamily: \'comic sans ms\',\n fontSize: 24\n}\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"Simple pseudo selectors are supported at the top level."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'{\n color: \'red\',\n \':hover\': {\n backgroundColor: \'pink\'\n },\n \':active\': {\n backgroundColor: \'tomato\'\n }\n}\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"Media queries are also supported via the ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"@media")," key."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'{\n fontSize: 24,\n \'@media\': {\n \'screen and (min-width: 768px)\': {\n fontSize: 42\n }\n }\n}\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"For anything more advanced, you can provide a set of custom selectors. Within each selector, you must target the ampersand character (",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"&"),"), which refers to the element currently being styled."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'{\n marginRight: 10,\n selectors: {\n \'&:nth-child(2n)\': {\n marginRight: 0\n }\n }\n}\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"Within selectors, existing treat classes can be referenced with standard string interpolation."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'{\n backgroundColor: \'white\',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: \'aqua\'\n }\n }\n}\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"The ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"@keyframes")," property allows the creation of keyframes that will automatically be attached to the style as your ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"animation-name"),"."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'{\n backgroundColor: \'white\',\n \'@keyframes\': {\n from: {\n transform: \'rotate(0deg)\',\n },\n to: {\n transform: \'rotate(359deg)\',\n },\n },\n animationTimingFunction: \'linear\',\n animationDuration: \'1.5s\',\n}\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"The animation shorthand is also supported via a ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"@keyframes")," placeholder."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'{\n backgroundColor: \'white\',\n \'@keyframes\': {\n from: {\n transform: \'rotate(0deg)\',\n },\n to: {\n transform: \'rotate(359deg)\',\n },\n },\n animation: \'@keyframes 1.5s linear\'\n}\n'}}})),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"themedstyles"}},"ThemedStyles"),a.createElement(o.XJ,{name:"p",components:n},"Type: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"function")),a.createElement(o.XJ,{name:"p",components:n},"Accepts a ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"#theme"}},a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"a"},"Theme"))," and returns a ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"#styles"}},a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"a"},"Styles")," object.")),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'(theme) => ({\n color: theme.brandColor\n});\n'}}})),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"theme"}},"Theme"),a.createElement(o.XJ,{name:"p",components:n},"When ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"styling-api#createtheme"}},"defining themes")," and ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"#themedstyles"}},"consuming themes"),", the provided theme object uses the ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"Theme")," type, which is ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"any")," by default. This means that any usage of a theme will not be type-safe."),a.createElement(o.XJ,{name:"p",components:n},"The simplest way to fix this is to override this type at a global level. For example, you could create a ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"treat.d.ts")," file in your project with the following contents."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-tsx","data-language":"tsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'declare module \'treat/theme\' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"If your ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"Theme")," type is already defined elsewhere in your application, you’ll need to import it with a dynamic ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"import")," expression within the module declaration block."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-tsx","data-language":"tsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'declare module \'treat/theme\' {\n type MyTheme = import(\'./types\').Theme;\n export interface Theme extends MyTheme {}\n}\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"Alternatively, if you’d prefer to avoid global types, you can manually annotate the theme object being passed into a ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"#themedstyles"}},a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"a"},"ThemedStyles")," function.")),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-tsx","data-language":"tsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'import { style } from \'treat\';\nimport { Theme } from \'./types\';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n'}}})))}}])&&r(n.prototype,t),m}(a.Component),m=function(){return[{id:"styles",level:2,title:"Styles",children:[]},{id:"themedstyles",level:2,title:"ThemedStyles",children:[]},{id:"theme",level:2,title:"Theme",children:[]}]},f={title:"Data types"}},9848:(e,n,t)=>{"use strict";t.r(n),t.d(n,{readingTime:()=>c,default:()=>u,tableOfContents:()=>m,frontMatter:()=>f});var a=t(362),o=t(2804);function s(e){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function r(e,n){for(var t=0;t=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}}(e,["components"]),a.createElement(o.XJ,{name:"wrapper",components:n},a.createElement(o.XJ,{name:"h1",components:n,props:{id:"how-it-works"}},"How it works"),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"static-extraction"}},"Static extraction"),a.createElement(o.XJ,{name:"p",components:n},"In order to support static extraction of CSS from JavaScript code, styles are authored in JavaScript files with a special extension (",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},".treat.js")," / ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},".treat.ts")," by default). We refer to these files as ",a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"treat files.")),a.createElement(o.XJ,{name:"p",components:n},"These treat files are separated from regular JavaScript files so that they can be compiled and executed at build time rather than being executed in the browser."),a.createElement(o.XJ,{name:"p",components:n},"Conceptually, this is no different to preprocessors like ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://sass-lang.com/"}},"Sass")," and ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"http://lesscss.org/"}},"Less"),". The difference is that, rather than using a custom domain-specific language, treat lets you use ",a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"JavaScript")," as your preprocessor."),a.createElement(o.XJ,{name:"p",components:n},"Within treat files, treat provides a set of ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"styling-api"}},"styling APIs")," for generating CSS. Calling these APIs will result in styles being added to your application bundle. In order to expose these styles to your application code, they must be explicitly exported:"),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'// Button.treat.js\nimport { style } from \'treat\';\n\nexport const button = style({\n backgroundColor: \'blue\',\n height: 48\n});\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"When treat files are executed at build time, all of the exports are inlined into your bundle. For example, the treat file above would turn into this:"),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'export var button = \'GENERATED_CLASS_NAME\';\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"Generated styles are separately passed through the webpack loader pipeline, which allows you to create static CSS files via ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://github.com/webpack-contrib/mini-css-extract-plugin"}},"mini-css-extract-plugin"),"."),a.createElement(o.XJ,{name:"p",components:n},a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"For more details, see our ",a.createElement(o.XJ,{name:"a",components:n,parentName:"em",props:{href:"setup#webpack-setup"}},"webpack setup")," guide.")),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"theming"}},"Theming"),a.createElement(o.XJ,{name:"p",components:n},"For ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"data-types#themedstyles"}},"themed styles"),", treat generates a separate block of CSS for each theme."),a.createElement(o.XJ,{name:"p",components:n},"For example, let’s assume you have the following themes defined:"),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'// themes.treat.js\nimport { createTheme } from \'treat\';\n\nexport const greenTheme = createTheme({ text: \'green\' });\nexport const redTheme = createTheme({ text: \'red\' });\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"Then, let’s assume you’ve written the following treat file:"),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'// text.treat.js\nimport { style } from \'treat\';\n\nexport const text = style((theme) => ({\n color: theme.text\n}));\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"This will generate the following CSS:"),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-css","data-language":"css","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'.text_greenTheme {\n color: green;\n}\n.text_redTheme {\n color: red;\n}\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"Now that we’ve generated styles for each theme, the ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"runtime-api"}},"runtime API")," can be used to resolve the correct class for the desired theme."),a.createElement(o.XJ,{name:"p",components:n},"Theming in this way allows full static extraction of themed styles. However, it comes with an important trade-off."),a.createElement(o.XJ,{name:"p",components:n},"In order to ensure consistent specificity across different themes, ",a.createElement(o.XJ,{name:"strong",components:n,parentName:"p"},"themed styles are generated with higher precedence than non-themed styles.")," As a result, you need to be mindful when attempting to override themed styles with non-themed styles within a single treat file."),a.createElement(o.XJ,{name:"p",components:n},"For example, let’s assume you’ve defined the following styles:"),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'export const inactive = style((theme) => ({\n color: theme.text\n}));\n\nexport const active = style({\n color: \'white\'\n});\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"Typically, if both of these classes were applied simultaneously to the same element, you would expect the ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"active")," styles to override the ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"inactive")," styles. However, in treat, this is not the case. The resulting style sheet would actually look something like this:"),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-css","data-language":"css","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'.active {\n color: white;\n}\n\n.inactive_greenTheme {\n color: green;\n}\n\n.inactive_redTheme {\n color: red;\n}\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"Note that the style order has changed, with the non-themed styles rising to the top of the file, which means that the ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"inactive")," class will take precedence over the ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"active")," class if both are used simultaneously."),a.createElement(o.XJ,{name:"p",components:n},"To avoid this issue, ",a.createElement(o.XJ,{name:"strong",components:n,parentName:"p"},"it’s recommended that you try not to rely on style overrides across multiple classes.")),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"runtime"}},"Runtime"),a.createElement(o.XJ,{name:"blockquote",components:n},a.createElement(o.XJ,{name:"p",components:n,parentName:"blockquote"},"If you’re not using themed styles, the runtime is ",a.createElement(o.XJ,{name:"strong",components:n,parentName:"p"},"not")," required.")),a.createElement(o.XJ,{name:"p",components:n},"The treat runtime is extremely lightweight, only needing to perform a simple lookup to figure out which pre-generated CSS class belongs to which theme."),a.createElement(o.XJ,{name:"p",components:n},"The core API for performing this task is the ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"runtime-api#resolvestyles"}},a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"a"},"resolveStyles"))," function (or ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"react-api#usestyles"}},a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"a"},"useStyles"))," if you’re using React)."),a.createElement(o.XJ,{name:"p",components:n},"Let’s assume we have a treat file with some complex exports:"),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'// styles.treat.js\nexport const topLevelExport = style((theme) => ({\n color: theme.red\n}));\n\nexport const objectExport = {\n key: style((theme) => ({ color: theme.blue }))\n};\n\nexport const arrayExport = [\n style((theme) => ({ color: theme.aqua })),\n style((theme) => ({ color: theme.pink }))\n];\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"We can then import this module and deeply resolve all styles with a single ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"runtime-api#resolvestyles"}},a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"a"},"resolveStyles"))," call."),a.createElement(o.XJ,{name:"blockquote",components:n},a.createElement(o.XJ,{name:"p",components:n,parentName:"blockquote"},"This is obviously a contrived example since we’re hard-coding the desired theme. Typically, you’d want to inject themes dynamically so that they can be configured at an application level. To see a good example of this pattern, see our ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"react-api"}},"React API"),".")),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'import * as styleRefs from \'./styles.treat.js\';\nimport { greenTheme } from \'./themes.treat.js\';\n\nconst styles = resolveStyles(greenTheme, styleRefs);\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"In this case, the ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"styles")," object is a deep clone of the ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"styleRefs")," object, with all themed classes resolved relative to ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"greenTheme"),":"),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'{\n topLevelExport: \'GENERATED_CLASS_NAME_1_greenTheme\',\n objectExport: {\n key: \'GENERATED_CLASS_NAME_2_greenTheme\'\n },\n arrayExport: [\n \'GENERATED_CLASS_NAME_3_greenTheme\',\n \'GENERATED_CLASS_NAME_4_greenTheme\'\n ]\n}\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"Because module exports are static, the treat runtime caches the resolved ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"styles")," object in memory, which means that this cloning and class resolution process only happens once per treat file and theme, for the lifetime of your application."),a.createElement(o.XJ,{name:"p",components:n},"It’s important to note that this resolved ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"styles")," object has the same type signature as the original ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"styleRefs")," object, which means that themed styles remain type safe."))}}])&&r(n.prototype,t),m}(a.Component),m=function(){return[{id:"static-extraction",level:2,title:"Static extraction",children:[]},{id:"theming",level:2,title:"Theming",children:[]},{id:"runtime",level:2,title:"Runtime",children:[]}]},f={title:"How it works"}},5298:(e,n,t)=>{"use strict";t.r(n),t.d(n,{readingTime:()=>c,default:()=>u,tableOfContents:()=>m,frontMatter:()=>f});var a=t(362),o=t(2804);function s(e){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function r(e,n){for(var t=0;t=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}}(e,["components"]),a.createElement(o.XJ,{name:"wrapper",components:n},a.createElement("br",null),a.createElement(o.XJ,{name:"blockquote",components:n},a.createElement(o.XJ,{name:"p",components:n,parentName:"blockquote"},"⚠️ WARNING: This project has been deprecated in favour of ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://github.com/vanilla-extract-css/vanilla-extract"}},"Vanilla Extract."))),a.createElement(o.XJ,{name:"h1",components:n,props:{id:"themeable-statically-extracted-cssinjs-with-nearzero-runtime"}},"Themeable, statically extracted CSS","‑","in","‑","JS with near","‑","zero runtime."),a.createElement(o.XJ,{name:"p",components:n},"Write your styles in JavaScript/TypeScript within ",a.createElement(o.XJ,{name:"strong",components:n,parentName:"p"},a.createElement(o.XJ,{name:"em",components:n,parentName:"strong"},"treat files"))," (e.g. ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"Button.treat.js"),") that get ",a.createElement(o.XJ,{name:"strong",components:n,parentName:"p"},a.createElement(o.XJ,{name:"em",components:n,parentName:"strong"},"executed at build time")),"."),a.createElement(o.XJ,{name:"p",components:n},"All CSS rules are created ahead of time, so the runtime is ",a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"very")," lightweight—only needing to swap out pre-existing classes. In fact, if your application doesn’t use theming, you don’t even need the runtime at all."),a.createElement(o.XJ,{name:"p",components:n},a.createElement(o.XJ,{name:"strong",components:n,parentName:"p"},"All CSS logic, including its dependencies, will not be included in your final bundle.")),a.createElement(o.XJ,{name:"p",components:n},"Because theming is achieved by generating multiple classes, ",a.createElement(o.XJ,{name:"strong",components:n,parentName:"p"},a.createElement(o.XJ,{name:"em",components:n,parentName:"strong"},"legacy browsers are supported."))),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"requirements"}},"Requirements"),a.createElement(o.XJ,{name:"p",components:n},"Your project must be using ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"webpack-options"}},"webpack")," with the supplied ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"webpack-options"}},"webpack plugin"),", but that’s it."),a.createElement(o.XJ,{name:"p",components:n},a.createElement(o.XJ,{name:"strong",components:n,parentName:"p"},"First-class support is provided for ",a.createElement(o.XJ,{name:"a",components:n,parentName:"strong",props:{href:"https://reactjs.org/"}},"React")," and ",a.createElement(o.XJ,{name:"a",components:n,parentName:"strong",props:{href:"https://www.typescriptlang.org/"}},"TypeScript"),",")," but those layers are ",a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"entirely optional.")," The core ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"runtime-api"}},"runtime API")," can be integrated into other frameworks, if needed."),a.createElement(o.XJ,{name:"p",components:n},"The runtime makes use of ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map"}},a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"a"},"Map")),", so you may need a ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://www.npmjs.com/package/es6-map"}},"polyfill")," for ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://caniuse.com/#feat=es6"}},"pre-ES2015 browsers.")),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"basic-usage"}},"Basic usage"),a.createElement(o.XJ,{name:"p",components:n},"First, install the core library."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-bash","data-language":"bash","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'$ yarn add treat\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"Then, add the ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"setup#webpack-setup"}},"webpack plugin")," to your project. In this case, we’re using ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://github.com/webpack-contrib/mini-css-extract-plugin"}},"mini-css-extract-plugin")," to generate a static CSS file."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'const { TreatPlugin } = require(\'treat/webpack-plugin\');\nconst MiniCssExtractPlugin = require(\'mini-css-extract-plugin\');\n\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n outputLoaders: [MiniCssExtractPlugin.loader]\n }),\n new MiniCssExtractPlugin()\n ]\n};\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"Next, define and export ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"data-types#styles"}},"styles")," from a treat file."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'// Button.treat.js\n// ** THIS CODE WON\'T END UP IN YOUR BUNDLE! **\nimport { style } from \'treat\';\n\nexport const button = style({\n backgroundColor: \'blue\',\n height: 48\n});\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"Finally, import the styles."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'// Button.js\nimport * as styles from \'./Button.treat.js\';\n\nexport const Button = ({ text }) => `\n <button class="${styles.button}">${text}</button>\n`;\n'}}})),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"themed-usage"}},"Themed usage"),a.createElement(o.XJ,{name:"blockquote",components:n},a.createElement(o.XJ,{name:"p",components:n,parentName:"blockquote"},"This themed usage example makes use of ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"react-api"}},"react-treat")," to keep things simple. React is ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"runtime-api"}},"not required")," to use treat.")),a.createElement(o.XJ,{name:"p",components:n},"First, install react-treat."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-bash","data-language":"bash","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'$ yarn add react-treat\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"Assuming you’ve already set up the ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"setup#webpack-setup"}},"webpack plugin"),", start by creating and exporting a theme from a treat file. Normally, you’d define multiple themes, but let’s keep it short."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'// theme.treat.js\n// ** THIS CODE WON\'T END UP IN YOUR BUNDLE! **\nimport { createTheme } from \'treat\';\n\nexport default createTheme({\n brandColor: \'blue\',\n grid: 4\n});\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"Then, import the desired theme and pass it to ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"react-api#treatprovider"}},a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"a"},"TreatProvider"))," at the root of your application."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'// App.js\nimport React from \'react\';\nimport { TreatProvider } from \'react-treat\';\n\nimport theme from \'./theme.treat.js\';\n\nexport const App = () => (\n <TreatProvider theme={theme}>...</TreatProvider>\n);\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"Now that you’ve configured the theming system, define and export ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"data-types#themedstyles"}},"themed styles")," from a treat file."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'// Button.treat.js\n// ** THIS CODE WON\'T END UP IN YOUR BUNDLE EITHER! **\nimport { style } from \'treat\';\n\nexport const button = style((theme) => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n'}}})),a.createElement(o.XJ,{name:"blockquote",components:n},a.createElement(o.XJ,{name:"p",components:n,parentName:"blockquote"},"Themed styles have higher precedence than non-themed styles, regardless of document order. For more information, read the ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"how-it-works#theming"}},"theming")," guide.")),a.createElement(o.XJ,{name:"p",components:n},"Then import and resolve themed styles via the ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"react-api#usestyles"}},a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"a"},"useStyles")," Hook.")),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'// Button.js\nimport React from \'react\';\nimport { useStyles } from \'react-treat\';\nimport * as styleRefs from \'./Button.treat.js\';\n\nexport const Button = (props) => {\n const styles = useStyles(styleRefs);\n\n return <button {...props} className={styles.button} />;\n};\n'}}})))}}])&&r(n.prototype,t),m}(a.Component),m=function(){return[{id:"requirements",level:2,title:"Requirements",children:[]},{id:"basic-usage",level:2,title:"Basic usage",children:[]},{id:"themed-usage",level:2,title:"Themed usage",children:[]}]},f={title:"Introduction"}},2975:(e,n,t)=>{"use strict";t.r(n),t.d(n,{readingTime:()=>c,default:()=>u,tableOfContents:()=>m,frontMatter:()=>f});var a=t(362),o=t(2804);function s(e){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function r(e,n){for(var t=0;t=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}}(e,["components"]),a.createElement(o.XJ,{name:"wrapper",components:n},a.createElement(o.XJ,{name:"h1",components:n,props:{id:"react-api"}},"React API"),a.createElement(o.XJ,{name:"blockquote",components:n},a.createElement(o.XJ,{name:"p",components:n,parentName:"blockquote"},"Note: React is ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"runtime-api"}},"not required")," to use treat.")),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"treatprovider"}},"TreatProvider"),a.createElement(o.XJ,{name:"p",components:n},"Type: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"Component")),a.createElement(o.XJ,{name:"p",components:n},"In order for the ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"#usestyles"}},a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"a"},"useStyles"))," and ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"#useclassname"}},a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"a"},"useClassName"))," Hooks to work, you’ll need to render a ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"TreatProvider")," higher in the tree."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'import React from \'react\';\nimport { TreatProvider } from \'react-treat\';\n\nimport theme from \'./theme.treat.js\';\n\nexport function App() {\n return <TreatProvider theme={theme}>...</TreatProvider>;\n}\n'}}})),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"usestyles"}},"useStyles"),a.createElement(o.XJ,{name:"p",components:n},"Type: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"function")),a.createElement(o.XJ,{name:"p",components:n},"A ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://reactjs.org/docs/hooks-intro.html"}},"React Hook")," that resolves styles for an entire treat file relative to the current theme."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'import React from \'react\';\nimport { useStyles } from \'react-treat\';\nimport * as styleRefs from \'./Button.treat.js\';\n\nexport function Button({ primary, ...props }) {\n const styles = useStyles(styleRefs);\n\n return <button {...props} className={styles.button} />;\n}\n'}}})),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"useclassname"}},"useClassName"),a.createElement(o.XJ,{name:"p",components:n},"Type: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"function")),a.createElement(o.XJ,{name:"p",components:n},"A ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://reactjs.org/docs/hooks-intro.html"}},"React Hook")," that resolves a single treat class relative to the current theme."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'import React from \'react\';\nimport { useClassName } from \'react-treat\';\nimport * as styleRefs from \'./Button.treat.js\';\n\nexport const Button = (props) => (\n <button\n {...props}\n className={useClassName(styles.button)}\n />\n);\n'}}})))}}])&&r(n.prototype,t),m}(a.Component),m=function(){return[{id:"treatprovider",level:2,title:"TreatProvider",children:[]},{id:"usestyles",level:2,title:"useStyles",children:[]},{id:"useclassname",level:2,title:"useClassName",children:[]}]},f={title:"React API"}},2327:(e,n,t)=>{"use strict";t.r(n),t.d(n,{readingTime:()=>c,default:()=>u,tableOfContents:()=>m,frontMatter:()=>f});var a=t(362),o=t(2804);function s(e){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function r(e,n){for(var t=0;t=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}}(e,["components"]),a.createElement(o.XJ,{name:"wrapper",components:n},a.createElement(o.XJ,{name:"h1",components:n,props:{id:"runtime-api"}},"Runtime API"),a.createElement(o.XJ,{name:"blockquote",components:n},a.createElement(o.XJ,{name:"p",components:n,parentName:"blockquote"},"Note: If you’re using React, you should use our ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"react-api"}},"React API")," instead.")),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"resolvestyles"}},"resolveStyles"),a.createElement(o.XJ,{name:"p",components:n},"Type: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"function")),a.createElement(o.XJ,{name:"p",components:n},"Resolves styles for an entire treat file relative to a given theme."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'import { resolveStyles } from \'treat\';\nimport * as styleRefs from \'./styles.treat.js\';\nimport theme from \'./theme.treat.js\';\n\nconst styles = resolveStyles(theme, styleRefs);\n'}}})),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"resolveclassname"}},"resolveClassName"),a.createElement(o.XJ,{name:"p",components:n},"Type: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"function")),a.createElement(o.XJ,{name:"p",components:n},"Resolves a single treat class name relative to a given theme."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'import { resolveClassName } from \'treat\';\n\nimport theme from \'./theme.treat.js\';\nimport * as styleRefs from \'./Button.treat.js\';\n\nconst className = resolveClassName(theme, styleRefs.button);\n'}}})))}}])&&r(n.prototype,t),m}(a.Component),m=function(){return[{id:"resolvestyles",level:2,title:"resolveStyles",children:[]},{id:"resolveclassname",level:2,title:"resolveClassName",children:[]}]},f={title:"Runtime API"}},2241:(e,n,t)=>{"use strict";t.r(n),t.d(n,{readingTime:()=>c,default:()=>u,tableOfContents:()=>m,frontMatter:()=>f});var a=t(362),o=t(2804);function s(e){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function r(e,n){for(var t=0;t=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}}(e,["components"]),a.createElement(o.XJ,{name:"wrapper",components:n},a.createElement(o.XJ,{name:"h1",components:n,props:{id:"setup"}},"Setup"),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"webpack-setup"}},"Webpack Setup"),a.createElement(o.XJ,{name:"p",components:n},"To get started, add the treat ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://webpack.js.org/"}},"webpack")," plugin to ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://webpack.js.org/concepts/configuration"}},a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"a"},"webpack.config.js")),". Since webpack is required to use treat, the webpack plugin is provided via the core ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"treat")," package as ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"treat/webpack-plugin"),"."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'const { TreatPlugin } = require(\'treat/webpack-plugin\');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"By default, this will inject styles into the page via ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://github.com/webpack-contrib/style-loader"}},"style-loader"),", but this can be overridden via the ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"outputLoaders")," option."),a.createElement(o.XJ,{name:"p",components:n},"For example, if you’d like to ",a.createElement(o.XJ,{name:"strong",components:n,parentName:"p"},"export static CSS files,")," you can wire it up to ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://github.com/webpack-contrib/mini-css-extract-plugin"}},"mini-css-extract-plugin"),"."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'const { TreatPlugin } = require(\'treat/webpack-plugin\');\nconst MiniCssExtractPlugin = require(\'mini-css-extract-plugin\');\n\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n outputLoaders: [MiniCssExtractPlugin.loader]\n }),\n new MiniCssExtractPlugin()\n ]\n};\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"For more configuration options, view the full list of ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"webpack-options"}},"webpack options"),"."),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"babel-setup"}},"Babel Setup"),a.createElement(o.XJ,{name:"p",components:n},"In order to improve the ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"#debugging"}},"debugging")," experience, treat also provides an optional Babel plugin."),a.createElement(o.XJ,{name:"p",components:n},"First, install the plugin:"),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-bash","data-language":"bash","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'$ yarn add --dev babel-plugin-treat\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"Then, add it to your Babel config. For example, in ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},".babelrc"),":"),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'{\n "plugins": ["babel-plugin-treat"]\n}\n'}}})),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"debugging"}},"Debugging"),a.createElement(o.XJ,{name:"blockquote",components:n},a.createElement(o.XJ,{name:"p",components:n,parentName:"blockquote"},"Note: This can be automated via our ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"#babel-setup"}},"Babel plugin"),".")),a.createElement(o.XJ,{name:"p",components:n},"All styling APIs (except for ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"styling-api#globalstyle"}},a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"a"},"globalStyle")),") have an optional argument that allows you to provide a local debug name."),a.createElement(o.XJ,{name:"p",components:n},"For example, the local name for the following style will be ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"style")," by default because treat doesn’t have access to your variable name at runtime."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'export const green = style({ color: \'green\' });\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"To fix this, you can pass in a debug name as the last argument:"),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'export const green = style({ color: \'green\' }, \'green\');\n'}}})),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"server-side-rendering"}},"Server side rendering"),a.createElement(o.XJ,{name:"p",components:n},"Server-rendered apps will likely be running two webpack builds (one for the browser code, and one for the server code). The server config should disable CSS output by setting ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"outputCSS")," to ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"false"),"."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'const { TreatPlugin } = require(\'treat/webpack-plugin\');\n\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n outputCSS: false\n })\n ]\n};\n'}}})),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"bundle-splitting"}},"Bundle splitting"),a.createElement(o.XJ,{name:"p",components:n},"If you’d like to dynamically load themes, treat supports bundle splitting via ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://webpack.js.org/guides/code-splitting/#dynamic-imports"}},"webpack dynamic imports")," with no special setup."),a.createElement(o.XJ,{name:"p",components:n},"In practice, it’s likely you’ll want to split your themes into separate CSS files. This is achieved by dynamic importing your treat files that call ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"styling-api#createtheme"}},a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"a"},"createTheme")),"."),a.createElement(o.XJ,{name:"p",components:n},"Let’s assume you have a set of theme files that look like this:"),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'// mainTheme.treat.js\nimport { createTheme } from \'treat\';\n\nexport default createTheme({\n // Theme variables...\n});\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"You can then dynamically load the desired theme and use it to resolve styles."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'import { resolveStyles } from \'treat\';\nimport styleRefs from \'./styles.treat\';\n\n// Inject the theme name somehow:\nconst themeName = getThemeName();\n\nimport(`../themes/${themeName}.treat`).then((theme) => {\n const styles = resolveStyles(theme.default, styleRefs);\n // You now have access to themed styles!\n});\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"If you’re using the ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"react-api"}},"React API"),", you’ll want to provide the theme to your ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"react-api#treatprovider"}},a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"a"},"TreatProvider")),"."),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"gatsby-setup"}},"Gatsby Setup"),a.createElement(o.XJ,{name:"blockquote",components:n},a.createElement(o.XJ,{name:"p",components:n,parentName:"blockquote"},"Warning: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"gatsby-plugin-treat")," is not yet working with treat v2.")),a.createElement(o.XJ,{name:"p",components:n},"To use ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"treat")," in a ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://www.gatsbyjs.org"}},"Gatsby")," project, install ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"gatsby-plugin-treat")," and add it to your ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"gatsby-config.js")," file like this:"),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'module.exports = {\n plugins: [\'gatsby-plugin-treat\']\n};\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"You can also provide ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"webpack-options"}},"webpack options")," to the plugin:"),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'module.exports = {\n plugins: [\n {\n resolve: \'gatsby-plugin-treat\',\n options: {\n // Plugin options go here...\n }\n }\n ]\n};\n'}}})),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"nextjs-setup"}},"Next.js Setup"),a.createElement(o.XJ,{name:"blockquote",components:n},a.createElement(o.XJ,{name:"p",components:n,parentName:"blockquote"},"Warning: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"next-treat")," is not yet working with treat v2.")),a.createElement(o.XJ,{name:"p",components:n},"To use ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"treat")," in a ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://nextjs.org"}},"Next.js")," project, install ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"next-treat")," and add it to your ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"next.config.js")," file like this:"),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'const withTreat = require(\'next-treat\')(/* Extra TreatPlugin options */);\n\nmodule.exports = withTreat(/* Additional Next.js configuration */);\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"Debugging experience can be improved by ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"#babel-setup"}},"setting up the Babel plugin")," with the ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},".babelrc")," below:"),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'{\n "presets": ["next/babel"],\n "plugins": ["babel-plugin-treat"]\n}\n'}}})))}}])&&r(n.prototype,t),m}(a.Component),m=function(){return[{id:"webpack-setup",level:2,title:"Webpack Setup",children:[]},{id:"babel-setup",level:2,title:"Babel Setup",children:[]},{id:"debugging",level:2,title:"Debugging",children:[]},{id:"server-side-rendering",level:2,title:"Server side rendering",children:[]},{id:"bundle-splitting",level:2,title:"Bundle splitting",children:[]},{id:"gatsby-setup",level:2,title:"Gatsby Setup",children:[]},{id:"nextjs-setup",level:2,title:"Next.js Setup",children:[]}]},f={title:"Setup"}},8486:(e,n,t)=>{"use strict";t.r(n),t.d(n,{readingTime:()=>c,default:()=>u,tableOfContents:()=>m,frontMatter:()=>f});var a=t(362),o=t(2804);function s(e){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function r(e,n){for(var t=0;t=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}}(e,["components"]),a.createElement(o.XJ,{name:"wrapper",components:n},a.createElement(o.XJ,{name:"h1",components:n,props:{id:"styling-api"}},"Styling API"),a.createElement(o.XJ,{name:"p",components:n},"The following styling APIs are only valid within treat files (e.g. ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"Button.treat.js"),")."),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"createtheme"}},"createTheme"),a.createElement(o.XJ,{name:"p",components:n},"Type: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"function")),a.createElement(o.XJ,{name:"p",components:n},"The ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"createTheme")," function allows you to register individual themes within a treat file."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'import { createTheme } from \'treat\';\n\nconst theme = createTheme({\n brandColor: \'blue\',\n grid: 4\n});\n'}}})),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"style"}},"style"),a.createElement(o.XJ,{name:"p",components:n},"Type: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"function")),a.createElement(o.XJ,{name:"p",components:n},"The ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"style")," function allows you to create individual style rules within a treat file."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'import { style } from \'treat\';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"If your styles aren’t dependent on the theme, you can provide a static object instead."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'import { style } from \'treat\';\n\nexport const green = style({\n color: \'green\'\n});\n'}}})),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"stylemap"}},"styleMap"),a.createElement(o.XJ,{name:"p",components:n},"Type: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"function")),a.createElement(o.XJ,{name:"p",components:n},"The ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"styleMap")," function allows you to easily create multiple namespaces within a treat file."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'import { styleMap } from \'treat\';\n\nexport const variants = styleMap((theme) => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"This is particularly useful when mapping component props to separate style maps. For example, if you wanted to map these styles to a React component in TypeScript:"),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-ts","data-language":"ts","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'import React from \'react\';\nimport { useStyles } from \'react-treat\';\nimport * as styleRefs from \'./Button.treat\';\n\nexport function Button({ variant = \'primary\', ...props }) {\n const styles = useStyles(styleRefs);\n\n return (\n <button\n {...props}\n className={styles.variants[variant]}\n />\n );\n}\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"This pattern scales extremely well to ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://css-tricks.com/lets-define-exactly-atomic-css/"}},"atomic CSS patterns"),". For example:"),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'// atoms.treat.js\n\nimport { styleMap } from \'treat\';\nimport { mapValues } from \'lodash\';\n\nconst spacingTokens = {\n small: 4,\n medium: 8,\n large: 16\n};\n\nconst spacingStyles = (property) =>\n mapValues(spacingTokens, (value) => ({\n [property]: value\n }));\n\nexport const padding = {\n top: styleMap(spacingStyles(\'paddingTop\')),\n bottom: styleMap(spacingStyles(\'paddingBottom\')),\n left: styleMap(spacingStyles(\'paddingLeft\')),\n right: styleMap(spacingStyles(\'paddingRight\'))\n};\n\nexport const margin = {\n top: styleMap(spacingStyles(\'marginTop\')),\n bottom: styleMap(spacingStyles(\'marginBottom\')),\n left: styleMap(spacingStyles(\'marginLeft\')),\n right: styleMap(spacingStyles(\'marginRight\'))\n};\n\n// etc...\n'}}})),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"styletree"}},"styleTree"),a.createElement(o.XJ,{name:"p",components:n},"Type: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"function")),a.createElement(o.XJ,{name:"blockquote",components:n},a.createElement(o.XJ,{name:"p",components:n,parentName:"blockquote"},"Note: This is an advanced feature that you ",a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"probably")," don’t need. It can only create themed styles. Only use this if you’ve exhausted all other options.")),a.createElement(o.XJ,{name:"p",components:n},"The ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"styleTree")," function allows you to create complex, nested data structures based on your theme."),a.createElement(o.XJ,{name:"p",components:n},"For example, if you wanted to create a nested atomic CSS structure (e.g. ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"atoms.padding.top.desktop"),"), which requires iterating over ",a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"both")," your white space scale ",a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"and")," your breakpoints, you could do the following:"),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'// atoms.treat.js\n\nimport { styleTree } from \'treat\';\nimport { mapValues } from \'lodash\';\n\nconst responsiveSpacingStyles = (property) =>\n styleTree((theme, styleNode) =>\n mapValues(theme.spacing, (space) =>\n mapValues(theme.breakpoints, (minWidth) =>\n styleNode({\n \'@media\': {\n [`screen and (min-width: ${minWidth}px)`]: {\n [property]: space * theme.grid\n }\n }\n })\n )\n )\n );\n\nexport const padding = {\n top: responsiveSpacingStyles(\'paddingTop\'),\n bottom: responsiveSpacingStyles(\'paddingBottom\'),\n left: responsiveSpacingStyles(\'paddingLeft\'),\n right: responsiveSpacingStyles(\'paddingRight\')\n};\n\n// etc...\n'}}})),a.createElement(o.XJ,{name:"blockquote",components:n},a.createElement(o.XJ,{name:"p",components:n,parentName:"blockquote"},"Note: When using ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"styleTree"),", the ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"setup#babel-setup"}},"babel-plugin")," does not add a local debug name for you, as it is too complex to infer in most cases. However, you can still manually pass a local debug name to the ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"styleNode")," function you receive.")),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"globalstyle"}},"globalStyle"),a.createElement(o.XJ,{name:"p",components:n},"Type: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"function")),a.createElement(o.XJ,{name:"p",components:n},"The ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"globalStyle")," function allows you to define selector-based styles. This function is purely a side effect and does not create a new class."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'import { globalStyle } from \'treat\';\n\nglobalStyle(\'html, body\', {\n margin: 0,\n padding: 0\n});\n'}}})))}}])&&r(n.prototype,t),m}(a.Component),m=function(){return[{id:"createtheme",level:2,title:"createTheme",children:[]},{id:"style",level:2,title:"style",children:[]},{id:"stylemap",level:2,title:"styleMap",children:[]},{id:"styletree",level:2,title:"styleTree",children:[]},{id:"globalstyle",level:2,title:"globalStyle",children:[]}]},f={title:"Styling API"}},678:(e,n,t)=>{"use strict";t.r(n),t.d(n,{readingTime:()=>c,default:()=>u,tableOfContents:()=>m,frontMatter:()=>f});var a=t(362),o=t(2804);function s(e){return(s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function r(e,n){for(var t=0;t=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}}(e,["components"]),a.createElement(o.XJ,{name:"wrapper",components:n},a.createElement(o.XJ,{name:"h1",components:n,props:{id:"webpack-options"}},"Webpack Options"),a.createElement(o.XJ,{name:"p",components:n},"The following options can be supplied to the included webpack plugin, e.g."),a.createElement(o.XJ,{name:"pre",components:n},a.createElement(o.XJ,{name:"code",components:n,parentName:"pre",props:{className:"language-jsx","data-language":"jsx","data-highlighted-line-numbers":"",dangerouslySetInnerHTML:{__html:'const { TreatPlugin } = require(\'treat/webpack-plugin\');\n\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n // Plugin options go here...\n })\n ]\n};\n'}}})),a.createElement(o.XJ,{name:"p",components:n},"All configuration values are optional."),a.createElement(o.XJ,{name:"p",components:n},"Some configuration defaults differ between production and development environments. This is inferred from your ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://webpack.js.org/concepts/#mode"}},"webpack mode")," setting."),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"outputloaders"}},"outputLoaders"),a.createElement(o.XJ,{name:"p",components:n},a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"Default: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"em"},"['style-loader']")),a.createElement("br",null),a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"Type: ",a.createElement(o.XJ,{name:"a",components:n,parentName:"em",props:{href:"https://webpack.js.org/configuration/module/#useentry"}},"Array of webpack loader configurations"))),a.createElement(o.XJ,{name:"p",components:n},"Defines which loaders generated CSS should be passed through after ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"css-loader"),". Strings (e.g. ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"style-loader"),") and objects with options are supported.",a.createElement("br",null)),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"test"}},"test"),a.createElement(o.XJ,{name:"p",components:n},a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"Default: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"em"},"/.treat.(js|ts)$/")),a.createElement("br",null),a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"Type: ",a.createElement(o.XJ,{name:"a",components:n,parentName:"em",props:{href:"https://webpack.js.org/configuration/module/#rule-conditions"}},"Webpack condition"))),a.createElement(o.XJ,{name:"p",components:n},"Configures which files are considered to be treat files."),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"localidentname"}},"localIdentName"),a.createElement(o.XJ,{name:"p",components:n},a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"Default (Production): ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"em"},"'[hash:base64:5]'")),a.createElement("br",null),a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"Default (Development): ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"em"},"'[name]-[local]_[hash:base64:5]'")),a.createElement("br",null),a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"Type: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"em"},"'string'"))),a.createElement(o.XJ,{name:"p",components:n},"Template string for naming CSS classes. Should always contain a ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"hash")," option to avoid clashes."),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"themeidentname"}},"themeIdentName"),a.createElement(o.XJ,{name:"p",components:n},a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"Default (Production): ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"em"},"'[hash:base64:4]'")),a.createElement("br",null),a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"Default (Development): ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"em"},"'_[name]-[local]_[hash:base64:4]'")),a.createElement("br",null),a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"Type: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"em"},"string"))),a.createElement(o.XJ,{name:"p",components:n},"Same as ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"localIdentName"),", but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme, which is useful for minifying theme classes, e.g. ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"theme => themeNames.indexOf(theme.name)"),"."),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"minify"}},"minify"),a.createElement(o.XJ,{name:"p",components:n},a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"Default (Production): ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"em"},"true")),a.createElement("br",null),a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"Default (Development): ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"em"},"false")),a.createElement("br",null),a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"Type: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"em"},"boolean"))),a.createElement(o.XJ,{name:"p",components:n},"Configures whether to minify the generated CSS."),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"browsers"}},"browsers"),a.createElement(o.XJ,{name:"p",components:n},a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"Default: ",a.createElement(o.XJ,{name:"a",components:n,parentName:"em",props:{href:"https://github.com/browserslist/browserslist#config-file"}},"Browserslist config"),", if present."),a.createElement("br",null),a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"Type: ",a.createElement(o.XJ,{name:"a",components:n,parentName:"em",props:{href:"https://github.com/browserslist/browserslist"}},"Browserslist query"))),a.createElement(o.XJ,{name:"p",components:n},"Configures which browsers to target when running generated CSS through ",a.createElement(o.XJ,{name:"a",components:n,parentName:"p",props:{href:"https://github.com/postcss/autoprefixer"}},"autoprefixer"),"."),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"outputcss"}},"outputCSS"),a.createElement(o.XJ,{name:"p",components:n},a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"Default: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"em"},"true")),a.createElement("br",null),a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"Type: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"em"},"boolean"))),a.createElement(o.XJ,{name:"p",components:n},"Configures whether to output CSS in the resulting bundle. Useful for server rendered apps that have separate webpack builds for client and server code, only one of which needs to generate styles."),a.createElement(o.XJ,{name:"h2",components:n,props:{id:"hmr"}},"hmr"),a.createElement(o.XJ,{name:"p",components:n},a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"Default: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"em"},"false")),a.createElement("br",null),a.createElement(o.XJ,{name:"em",components:n,parentName:"p"},"Type: ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"em"},"boolean"))),a.createElement(o.XJ,{name:"blockquote",components:n},a.createElement(o.XJ,{name:"p",components:n,parentName:"blockquote"},"This option is inferred in webpack 5. HMR requires at least webpack v4.43.0.")),a.createElement(o.XJ,{name:"p",components:n},"Enable hot module reloading for treat modules. "),a.createElement(o.XJ,{name:"p",components:n},a.createElement(o.XJ,{name:"strong",components:n,parentName:"p"},"Note:")," This only enables HMR for the generated JavaScript. As treat forwards CSS to your ",a.createElement(o.XJ,{name:"inlineCode",components:n,parentName:"p"},"outputLoaders")," you’ll need to refer to their docs for how to set up HMR for your CSS."))}}])&&r(n.prototype,t),m}(a.Component),m=function(){return[{id:"outputloaders",level:2,title:"outputLoaders",children:[]},{id:"test",level:2,title:"test",children:[]},{id:"localidentname",level:2,title:"localIdentName",children:[]},{id:"themeidentname",level:2,title:"themeIdentName",children:[]},{id:"minify",level:2,title:"minify",children:[]},{id:"browsers",level:2,title:"browsers",children:[]},{id:"outputcss",level:2,title:"outputCSS",children:[]},{id:"hmr",level:2,title:"hmr",children:[]}]},f={title:"Webpack Options"}},3764:e=>{"use strict";var n=Object.getOwnPropertySymbols,t=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable;function o(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var n={},t=0;t<10;t++)n["_"+String.fromCharCode(t)]=t;if("0123456789"!==Object.getOwnPropertyNames(n).map((function(e){return n[e]})).join(""))return!1;var a={};return"abcdefghijklmnopqrst".split("").forEach((function(e){a[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},a)).join("")}catch(e){return!1}}()?Object.assign:function(e,s){for(var r,l,i=o(e),p=1;p{"use strict";var a=t(5178);function o(){}function s(){}s.resetWarningCache=o,e.exports=function(){function e(e,n,t,o,s,r){if(r!==a){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function n(){return e}e.isRequired=e;var t={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:n,element:e,elementType:e,instanceOf:n,node:e,objectOf:n,oneOf:n,oneOfType:n,shape:n,exact:n,checkPropTypes:s,resetWarningCache:o};return t.PropTypes=t,t}},3715:(e,n,t)=>{e.exports=t(6402)()},5178:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},7658:(e,n,t)=>{"use strict";function a(e){return(a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var o=t(362),s=t(3764),r=t(2884);function l(e){for(var n="https://reactjs.org/docs/error-decoder.html?invariant="+e,t=1;t