{"_id":"treat","_rev":"90-eb4c734495579b8fb8f89f11cb89f00b","name":"treat","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","dist-tags":{"latest":"2.0.4","alpha":"1.0.0-alpha.18","webpack-fix":"1.0.0-webpack-fix.6","next":"1.0.0-beta.37","runtime":"1.5.0-alpha.2","perf":"1.6.0-alpha.0"},"versions":{"0.1.0":{"name":"treat","description":"Smart input type validation for node.js","version":"0.1.0","homepage":"http://github.com/jhnns/treat","repository":{"type":"git","url":"git://github.com/jhnns/treat.git"},"author":{"name":"Johannes Ewald","email":"mail@johannesewald.de"},"main":"./lib/treat.js","keywords":["type","check","type-check","validation","param","TypeError","casting"],"dependencies":{},"devDependencies":{"expect.js":"0.x","mocha":"1.x"},"engines":{"node":"0.x"},"scripts":{"test":"node node_modules/mocha/bin/mocha -R spec"},"_id":"treat@0.1.0","dist":{"shasum":"fcae870c5b2b1e24d1dad6be13ec654aed559e59","tarball":"https://registry.npmjs.org/treat/-/treat-0.1.0.tgz","integrity":"sha512-nibvHnzlWz4DJ37EaALjV0hlJlrrlUXg89ke4c2u3bm2IQ63JXKVQW27pO/amF6IEiuAtr7QyHrrkOLE1gK4fQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGxn/zun14KUM+nnZZjNM0+swrGUQ1GBbELpCD66lGtzAiEAjKXk0+MV0LQiSYkkjDuems98kpNNj0EJLFmI4xLIznQ="}]},"_npmVersion":"1.1.61","_npmUser":{"name":"jhnns","email":"mail@johannesewald.de"},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"}],"directories":{},"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"0.1.1":{"name":"treat","description":"Smart input type validation for node.js","version":"0.1.1","homepage":"http://github.com/peerigon/treat","repository":{"type":"git","url":"git://github.com/peerigon/treat.git"},"author":{"name":"peerigon","email":"developers@peerigon.com"},"main":"./lib/treat.js","keywords":["type","check","type-check","validation","param","TypeError","casting"],"dependencies":{"value":"0.x"},"devDependencies":{"expect.js":"0.x","mocha":"1.x"},"engines":{"node":"0.x"},"scripts":{"test":"node node_modules/mocha/bin/mocha -R spec"},"gitHead":"00ba71831c53aad466126eb9348a6419acd49189","bugs":{"url":"https://github.com/peerigon/treat/issues"},"_id":"treat@0.1.1","_shasum":"9edc0d97078b1d7d116a972e275879f88c1526ec","_from":".","_npmVersion":"4.4.4","_nodeVersion":"7.7.3","_npmUser":{"name":"peeri","email":"developers@peerigon.com"},"dist":{"shasum":"9edc0d97078b1d7d116a972e275879f88c1526ec","tarball":"https://registry.npmjs.org/treat/-/treat-0.1.1.tgz","integrity":"sha512-MFJuHO0zmvMS9o0RBIc0+qN/eV9fAaVqVNZa1wTibTjmv9EnutZ1HxCfnb1cvdPoDLaBLFEi5ef2TJ8qc90VEw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGGXstYy+DKzzt/1B0g19MAs723jJ7KvuF874B/yeF7DAiEAljnjf8bppOhsNwi4ukeN02H7CR5+wekOUTvD32d45kE="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/treat-0.1.1.tgz_1491226976775_0.5710807871073484"},"directories":{},"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-alpha.1":{"name":"treat","version":"1.0.0-alpha.1","description":"Themeable, typed CSS-in-JS with zero runtime","main":"lib","module":"lib","scripts":{"build":"tsc","watch":"tsc --watch","build-example":"webpack","start":"webpack-dev-server","prepublishOnly":"npm run build","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.13.0"},"devDependencies":{"@babel/core":"^7.3.4","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","classnames":"^2.2.6","html-webpack-plugin":"^3.2.0","mini-css-extract-plugin":"^0.5.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.3.3333","webpack":"^4.29.6","webpack-cli":"^3.2.3","webpack-dev-server":"^3.2.1"},"dependencies":{"@types/lodash":"^4.14.123","css-loader":"^2.1.0","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"eb0d3e96791eadfdf74ceac49c590ba97b2de6c6","readme":"ERROR: No README data found!","_id":"treat@1.0.0-alpha.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-pQ882vUf8D91lj8W4X0v9WJl7THSy1jaXIgvSbY0oVIiLdxaIJrTF6yo/ELiBeMTgqZKXOb/O0gBWyb2hmq7TQ==","shasum":"a941c174c925b86f2da02e519e795a750f7489f8","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-alpha.1.tgz","fileCount":18,"unpackedSize":18698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJciZTbCRA9TVsSAnZWagAACtIQAJ9NgUyIqreEsz32t/f7\nlRG0U5kskbqEbuUvSPZkU6vCxItNLvFM50gAJPwqqlZzzPnZ6WC4xZ5DOQXn\n4EqhABxjgq+em3F7h/6IyXDSgZZwmkrBP8WrsFgDvwIv/YVqNntjROzZ7AF5\n+IbDpbLUNuF1ZINSu+ntv55zbO3e9KBXMdrcSnukPGGM1u7RHZ1KLwFqEaXg\nM9dPM7uVzfcwVVL3J7b6STghr+ukpWNrnyyme0aMPU2B0z9nF5rZ+Uee2t8f\nfPTSKnsi7NbUPOUZFspPT/lDrgLep7kfe/seEImgMvNgwc2Jcokg410JDoVv\n5lvxBWe1jJH7/EoeI6YEFN+o4GxzcusAsUbOvk2fVRau+obmofg31OO8jkm4\naNzd8oQbjCs2wdpPWME6vD+Uxfij9rYpXDlFXMZUopMl+BoYgzDnwm7AdVZW\nmWdgTcBODmwWxOPq79omhX9EvsOnFGfV1Kfe9Kt0wD9QiNd1zSsl9lxiiT9e\nLIiiC2Oo/DheMd1/8ytlwbcSv8R6y7ss/SDCKlavqPqLC2BA9N657Va4m8n7\nwZS6k3q531oXQFku5eBKnN4LAJZEGxGpUADtFXvf4PHNy5/+2O1Bn8PCnoiS\nFQ9IaMn6IK/ngwbwVYocUx/FPHuaP9fmjwH8bVLospPXzKn/ALz09ap9WZ/w\nQAud\r\n=xOhE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBoz5ywPerIXbwZ0KewIhnlxBMO2EGkTjRECfyWsscVbAiEAgsi88GKE0+1vEX3VSihzMlDkboMCoNnTRInAZLiznS8="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-alpha.1_1552520410279_0.8492006852416916"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-alpha.2":{"name":"treat","version":"1.0.0-alpha.2","description":"Themeable, typed CSS-in-JS with zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"npm run build:module && npm run build:commonjs","watch":"tsc --watch","build-example":"webpack","start":"webpack-dev-server","prepublishOnly":"npm run build","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.13.0"},"devDependencies":{"@babel/core":"^7.3.4","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","classnames":"^2.2.6","html-webpack-plugin":"^3.2.0","mini-css-extract-plugin":"^0.5.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.3.3333","webpack":"^4.29.6","webpack-cli":"^3.2.3","webpack-dev-server":"^3.2.1"},"dependencies":{"@types/lodash":"^4.14.123","css-loader":"^2.1.0","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"93df7ed8023512722e61b837ab4e2c3e20824cb1","readme":"ERROR: No README data found!","_id":"treat@1.0.0-alpha.2","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-JkS0h1evLsTdP9wOAOZc32B+7CGE8rl+uimhxQqD9tzny0GQZ341huKuj+zrSkmZ1ZBXCjNkU8cAssG597jwBA==","shasum":"06b8d2a00b69d47391c4181a2476dd2f64a80bd2","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-alpha.2.tgz","fileCount":28,"unpackedSize":28682,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcidEhCRA9TVsSAnZWagAADmIP/24RQisIngfnzPsZ0ACM\niNPTigQvHlZyFPuh+6YG2gEWkq8zIJ3j26zPGBD71veZz7WsxPSxsyvYbapY\nMUGr+wTmp2xRFcSg6bIh2ZkS2gpo2AgGEK4asp3UIQZHvYI5pZya+5kvVhRj\ngvvE/QcwYJ6gcWs42TAhnRWVi2H4zzQn/XZm5lHnnSLxcYU1ZijjsjPnw9Ln\nKjJSLJQIH4MASWUaw4YQMd/h8qsgSMbRXFRGRztPDZHL1RqlH1znvLCrGDj3\nnzR79mJLjAEi2yW2Cu0QBAHECR/7sRIAGMP9hnDuv1gXiu2FHBQer3KIbOxk\nnng5Bfy7nYOMMz4p5IWXe035RWfKEgpB+1U8qFRjH4dW5oJA5fAALT3TM2iV\n9j9HX6qIcewjSwhePiYhRbEL2XEuKPcfOkQsZ4OdMIrDnZ1sUOpsvRge67pt\njPlokqxJp++lZIye9Tdkvsh5DQjRWuXL40kRBIHqNr2wjhiyGCQ85iL3CuQI\nmc2arfvw0+dO4caI3c+uNurgGPS1etu02nkka44wuFFRlNCd48uhBlxqxe+f\nYBVZ4kxEdmJrJLAm6mOciy1ETSV3+gEVRDu4XJ5JCFQONl/zmsuuGeUMgxYl\nvAjPy1bJTfpq8Q2ZXx4EImfy7uLs35AXaeo2kVLm8qBcXhi7mGVpFBY72TrH\nusGn\r\n=cmFF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAckFFZG+A2IawsvohXxvFrRNR/GQ6n27YZvRGenAibVAiEAia4ZiJmUCZuKvCNLOlE2lHMOeihyhG58uZ+BdKtduJg="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-alpha.2_1552535840610_0.8415923267176129"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-alpha.3":{"name":"treat","version":"1.0.0-alpha.3","description":"Themeable, typed CSS-in-JS with zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"npm run build:module && npm run build:commonjs","watch":"tsc --watch","build-example":"webpack","start":"webpack-dev-server","prepublishOnly":"npm run build","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.13.0"},"devDependencies":{"@babel/core":"^7.3.4","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","classnames":"^2.2.6","html-webpack-plugin":"^3.2.0","mini-css-extract-plugin":"^0.5.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.3.3333","webpack":"^4.29.6","webpack-cli":"^3.2.3","webpack-dev-server":"^3.2.1"},"dependencies":{"@types/lodash":"^4.14.123","css-loader":"^2.1.0","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"5b617ae4789b054259dfa448744deed301976ab5","readme":"ERROR: No README data found!","_id":"treat@1.0.0-alpha.3","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-pcSQxpN7fLyhdb9mZSQm/23hKdmz0a4tKWPbg5xmUmHKLM1bMWcUS+9vLTyPjI6MDi25JDMer6UdJ3hxwEoJ7w==","shasum":"d35f101216749e994deb7995a69466ae6a134ba4","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-alpha.3.tgz","fileCount":28,"unpackedSize":29057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJciuZUCRA9TVsSAnZWagAA3iMQAIafCdNvoPNuR+fxQY1U\nYv0ZC1NnQ3xR1FLZ5t7WQ7X7pY8TXLsFT8JX6yTa6RPx7fOzOT5yGvdlRmoQ\n32b26Ir+VDGI3yzhfaiJjsZq8c1YAUXYADw2wQZ3w/iWeIRR9nR4sHowCl4L\nG4Rlu3vrqebNM5X1v4K61mUTs1oPA/aZe/ZwGYABmuQzcUWvq2sdtfTenUOy\nn0cbn1PR25+uFaeLGqDFdEbRuEHVOCf/8eIcQ3KEVcF4vFZCm0qTDJ941w6f\nEQnZOBM3IdkvMS1l45GODRV7F/SEXPG0zX/b4wrq2Om7HbXZWD1eQ4MLq/T/\nYnrdfQf745vcNNDDk+T6mom3ttIKXwohsCotdkUtGJ/LvOnQ0ZuFz2QXbB7G\n/zNZjr/JgQbtCRMw8I4too4yukiNu8pYSfPAl1Pl2no0KU5Vfzl1g8Gd0dqo\nP/JFWBrgA3Ar44NzpFDrrjNYd9QUj1LgqDkQZxiOn0+GZXuhWkmrTxJc51ER\n628x2l5PphpKqn+9q/hxyndmZVlg9qivt2QIMZhs7O5mndIAsqloHvZgYLPm\nIEjdNsYOcKndNIfLWrzD59Pj3m/qWoTPTBlpon2qFlXr+4Hsbkw1t6QBua/1\nkuZqz85ri5qV4G8z0Te4Trou4M2XTY1PhpPDNfDh7ZVwciDCaUsdfNeSR3Xm\nBAqn\r\n=w13+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBbJZDIZ0YasNaaBkhPg/9f0zpSxzpPULf3adelt2ZIQIhAOb/LItNOn8kS2Q1K6Z4G5egeBqnGwcaPHxSuq03oSS0"}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-alpha.3_1552606803986_0.07278453671277085"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-alpha.4":{"name":"treat","version":"1.0.0-alpha.4","description":"Themeable, typed CSS-in-JS with zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"start":"concurrently 'npm run watch' 'npm run serve'","test":"npm run build","build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"npm run build:module && npm run build:commonjs","watch":"tsc --watch","serve":"webpack-dev-server","build-example":"webpack","prepublishOnly":"npm run build","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.13.0"},"devDependencies":{"@babel/core":"^7.3.4","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","classnames":"^2.2.6","concurrently":"^4.1.0","html-webpack-plugin":"^3.2.0","mini-css-extract-plugin":"^0.5.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.3.3333","webpack":"^4.29.6","webpack-cli":"^3.2.3","webpack-dev-server":"^3.2.1"},"dependencies":{"@types/lodash":"^4.14.123","css-loader":"^2.1.0","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"aa1eec37527803af05751314cb9e40730aff5746","readme":"ERROR: No README data found!","_id":"treat@1.0.0-alpha.4","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-gZ+CPvlU6pqzW7WBqiFTASOIyZ0F9aqLJcg82SQHrRsdW3O4cmq5dveb4ihzL9ONG67aRCb/yttCFf/lVPIolg==","shasum":"f78d5cb6f37a25a34b643c13fa695eef844530ef","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-alpha.4.tgz","fileCount":28,"unpackedSize":29197,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcjxQoCRA9TVsSAnZWagAAaO8QAIT55Fd8RBoCoS5eUsDP\nIzS4T9lrzwG3kM4RQXCWhHXcKg5tvKIOpjXyLaWHsLWQ4PsgxmiASBaGa+x3\nBoAF+GgdRMhcEK8A3cb3+p2qgPigyhVx+Y4B7NiPViQbzjW3IAo80rEdT7e6\nppVsf9HFK+K5EYxdIhB3FOgwqQ0PXRhGZm+QS3yJhH5mTuj4AzDIukSRjUBa\nhmJMJ8BqdLcQKBItPInIjgk0zq6azXvytnOiyCQ0+UzlWosP6Jk6aW5l8+Zd\n5zbhgWvVOHjsJiWNNl+tMl+s3Zhvt0dVZ1lgNNO1vVNYkFa89f4BLep1ezut\nogO0ZKHFARsKZXdlzlNE6DwYn20ZEXhVnzW1EqqBimyaDq1TQbxF/Zw+dmhF\nR/jGhy1I8OUjAv/E0GngfIt5i4KM5u2SL9ll+Nc2/Rgd5WzfgwCftWYezo/0\nnUUwkRWwAmfHEpUfhT7mHPVvQStCsaerIR3pteJD2X6YPljdCTXsgcsoI4s/\nyTbhVUKP8naY/KpgwZWltjGA2am7RCqkI4xeUBG9gbfVn8ICOcF7tqcaHK9N\nBpNzPnArDs2t4vTPoYU6Y/+FrZ5HAMcPx+soXjhdw6WIhxE/ZbGZMUurIRdP\nrsTRyya3zdrid6RLxSfyRym1o5kuS7NXa8h3U9glnSDxuYO62z8Zd3Rts9yc\n0RpG\r\n=sTEo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF7n1dcpD0X4OPXsIrEsnLqHfETPmqH62TdvPa4YJRIGAiEAperljy3imgmkPzwRSuPrBvr7nC3nRTh8vaVvrOtjTAM="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-alpha.4_1552880679605_0.8268985518205902"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-alpha.5":{"name":"treat","version":"1.0.0-alpha.5","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"start":"concurrently 'npm run watch' 'npm run serve'","test":"npm run build","build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"npm run build:module && npm run build:commonjs","watch":"tsc --watch","serve":"webpack-dev-server","build-example":"webpack","prepublishOnly":"npm run build","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.13.0"},"devDependencies":{"@babel/core":"^7.3.4","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","classnames":"^2.2.6","concurrently":"^4.1.0","html-webpack-plugin":"^3.2.0","mini-css-extract-plugin":"^0.5.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.3.3333","webpack":"^4.29.6","webpack-cli":"^3.2.3","webpack-dev-server":"^3.2.1"},"dependencies":{"@types/lodash":"^4.14.123","css-loader":"^2.1.0","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"readme":"# 🍬 treat\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat\n```\n\nWrite your styles in **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing class names. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nTheming is achieved by generating multiple classes, which means that **legacy browsers are supported.**\n\n## tl;dr (React version)\n\nCreate a theme:\n\n```js\n// theme.treat.js\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4,\n});\n```\n\nProvide the desired theme via context:\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n ...;\n}\n```\n\nDefine some styles, using the theme:\n\n```js\n// Button.treat.js\n\nimport { css } from 'treat';\n\nexport default css(theme => {\n button: {\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n },\n});\n```\n\nUse themed styles in your component:\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClasses } from 'treat';\n\nimport styles from './Button.treat.js';\n\nexport function Button(props) {\n return ;\n}\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","gitHead":"a90a1dd9fe1371da309173286cce91fa327f632f","_id":"treat@1.0.0-alpha.5","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-Er7xllv7oujLnCEHPS2O70hNSccl8t6qZpFiPFtQVZJPfQ+VMtfhqps6oZm1XqKpioSZciDcS6IEgxSljljI5w==","shasum":"47b5a33373aed680c50c28de829d5f4e54bf26c8","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-alpha.5.tgz","fileCount":29,"unpackedSize":30194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckGwdCRA9TVsSAnZWagAAccIQAJNnPkX4xpi5F4R+S5qh\nTBw8/PzYAHp764myy44X96OMY6f0zTym7RlDzeDyDKzHhmThwgM6bToriQGK\nwtewH+8aP22NAlwyXurQt5cEbQMNrAbWv18MlYBPVpnTKq6FjcdAQEjGoRxN\nA4C62MN2OVyiQJe1NgvScdu77doiLlEO2z0rmIsjNRDKxSaKMblA8dcdrHyw\nfcmRbxnehQq8tXuC633zlDY9AJkNzBrCbwvs2woT/8VOrBHlLy78EJvaXALy\n41nztYHj4WojAXamKTP14Nnm66BMmo+dY677kC8Nh8B29wR7XZb1GLvrx35p\nxsLXsiVU863JXNzvlbhcYm4aq1yv2lYiV87EXE28+gnplC0A2I7TF9z3gVkK\ngFctaex8qfSX+ncgk66e2Negxf5A6M5sN9KwGNPa0SPpHuxCmeLgPbW9l5QO\nDQknLIcMHveKNRAiUP+KwSz42jPD7n1xOCxqvpLFUQln2TycOWXbVh1Mjyrj\nE28sMkkcuNcXJueE3tLFR31RbxBcdbWIzjd1yGtpYs6TqcyWirJIfsBJojLj\nDvGYRTynda98ECGPVmSgJ24V/p1qBRbmY6CaQlCnKBKloRTlPkD0bM0tnO+k\nBSpqahLMcf+PvcFWc5RTHps4AoLVyXDZI9itGaGDKBrJ5rjg8puJxy1c7GdC\nznqT\r\n=GzBK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBP44Qu9GyOr+nT3/EaiWqKXJmNSSxSu5g+P/DK6ymnOAiBO8vdJ37wgw65/KuAUnDA0/8qTlzi76ZIgYVWkJwmIFA=="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-alpha.5_1552968733169_0.9944978458535685"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-alpha.6":{"name":"treat","version":"1.0.0-alpha.6","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"start":"concurrently 'npm run watch' 'npm run serve'","test":"npm run build","build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"npm run build:module && npm run build:commonjs","watch":"tsc --watch","serve":"webpack-dev-server","build-example":"webpack","prepublishOnly":"npm run build","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.13.0"},"devDependencies":{"@babel/core":"^7.3.4","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","classnames":"^2.2.6","concurrently":"^4.1.0","html-webpack-plugin":"^3.2.0","mini-css-extract-plugin":"^0.5.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.3.3333","webpack":"^4.29.6","webpack-cli":"^3.2.3","webpack-dev-server":"^3.2.1"},"dependencies":{"@types/lodash":"^4.14.123","css-loader":"^2.1.0","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"readme":"# 🍬 treat\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat\n```\n\nWrite your styles in **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing class names. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nTheming is achieved by generating multiple classes, which means that **legacy browsers are supported.**\n\n## tl;dr (React version)\n\nCreate a theme:\n\n```js\n// theme.treat.js\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4,\n});\n```\n\nProvide the desired theme via context:\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n ...;\n}\n```\n\nDefine some styles, using the theme:\n\n```js\n// Button.treat.js\n\nimport { css } from 'treat';\n\nexport default css(theme => {\n button: {\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n },\n});\n```\n\nUse themed styles in your component:\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClasses } from 'treat';\n\nimport styles from './Button.treat.js';\n\nexport function Button(props) {\n return ;\n}\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","gitHead":"63a337a893778295f799ce6bff20a6b7202a9257","_id":"treat@1.0.0-alpha.6","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-SgfFfE0OiHAUw4YMCCx9qGP4h9iDtKTv5cyLx4+GtHHFxpDWTjyNFnJwKJuxg5x5ezMqkLkFq/4/S7bxo0YJgA==","shasum":"d73c4c5f0b6f09a6cb36bedc0e592a8c92ce569f","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-alpha.6.tgz","fileCount":29,"unpackedSize":30278,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckG50CRA9TVsSAnZWagAAkvQP/2hFLbbuLNdt8UAb+rut\n+66SaGK0oGZqTI1tBs5cc5rp0gWqkFHTve6A4mX0ij6Co7Z9q5c8V9iYOwEz\nazlGWCCQ+Eic7nh6a9+aUtD8tJefR804GJ6iapkEi6zu85DIGepgH+t9ExP+\n9MVuIUaHc9Pzyd5co4nC8GbKbRuK+yZirxjNGm655krfVSNkx10HRiR5pMym\nyi9fuz2M3xj3zRzLAjtFdc/bq6OAVE2bDJLh7dt8xC9Tnyp8b6ZgxVnwe9hm\nqD7/vseH4CmMFhvjBAHatBjkTZ2gUHyvZBdhrAbfXo63j9PHZhGx4ZT4NMhx\nrFa81Z04gtM/3g+kdpM0SUS1+BdI7RZJn5A+yddisXgCBPWfezP+k/vkFtKv\nipKxPH17U7t1pzl1suuY3tjki5yTRyT7aCwpvj1iOMoDWd/17CIgKMY+BSR/\nCRn3a2OEjs3CbzRidxBkVC+oqEN/krQ5hTAdAUgHl4R59GvXU9LDk0ppR4Qb\no+qQqRB8tWg72ulJA/Ezdajlqz3KtXBprLDHIQ8g4bwA+2y2Wa7vKtq+YkOs\nu5cv3xgW9bsKKftSvYHKOtmG0WoDYceMpN5Rl0oBaWSopfqSe2nvwHl5GKHJ\nnYZ2LHkk4GXNU8+G5lHXN0qNW8R7p6urglOU4ZeeFAZoJz8Hz/hoyJ8vJEp8\ngdrN\r\n=5DRt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB3QVDcqpGD5ZVjQFBR7zLdsl2MRk5rs2u6r1jUhj4pGAiAp5JH47IUIoset8NzCZIVpUdmXjxFzVG1eIDyQbqk1zg=="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-alpha.6_1552969332116_0.3721270169418336"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-alpha.7":{"name":"treat","version":"1.0.0-alpha.7","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"start":"concurrently 'npm run watch' 'npm run serve'","test":"npm run build","build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"npm run build:module && npm run build:commonjs","watch":"tsc --watch","serve":"webpack-dev-server","build-example":"webpack","prepublishOnly":"npm run build","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.13.0"},"devDependencies":{"@babel/core":"^7.3.4","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","classnames":"^2.2.6","concurrently":"^4.1.0","html-webpack-plugin":"^3.2.0","mini-css-extract-plugin":"^0.5.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.3.3333","webpack":"^4.29.6","webpack-cli":"^3.2.3","webpack-dev-server":"^3.2.1"},"dependencies":{"@types/lodash":"^4.14.123","css-loader":"^2.1.0","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"readme":"# 🍬 treat\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat\n```\n\nWrite your styles in **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing class names. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nTheming is achieved by generating multiple classes, which means that **legacy browsers are supported.**\n\n## tl;dr (React version)\n\nCreate a theme:\n\n```js\n// theme.treat.js\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4,\n});\n```\n\nProvide the desired theme via context:\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n ...;\n}\n```\n\nDefine some styles, using the theme:\n\n```js\n// Button.treat.js\n\nimport { css } from 'treat';\n\nexport default css(theme => {\n button: {\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n },\n});\n```\n\nUse themed styles in your component:\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClasses } from 'treat';\n\nimport styles from './Button.treat.js';\n\nexport function Button(props) {\n return ;\n}\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","gitHead":"759441f03ca51f68e7d817a089cda81ad81fa300","_id":"treat@1.0.0-alpha.7","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-fjAYDepPJeQW5v7M4UZGvAkxkC5vfV5RtHTL4Z6tyE5/k+CdHtHPa57Rs0ieDomAg1mSs9KCGL64D4hBFZKfYg==","shasum":"28a1e470cfe938ff5415c7fcde9886f3d3d66b43","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-alpha.7.tgz","fileCount":29,"unpackedSize":30362,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckG8RCRA9TVsSAnZWagAA0nUP/1z/Ti63LgoGEjZa22m6\npMbnpprwGl4qCEkJ7goIHAuKxITd1g3akiP1O8eD8Nvu0FLS5+fBwL+jzKY6\n+ZLEk7H0TXtpD8xVEt9nGSR2gFekzdqqSGcwR0OKtZfIN45u/wGL3hWltsh1\nj+IjM00WeIdb+mrlYJq30DCpF1EOia2S2MnZV5SnTYJj/a9MNGJEQUjyUVN3\nJLjhHh7DBMbB9x3rKRWHTc0D8rlFyaSpeNWUsHIhmhIQw5ckJofuqyoPLNxK\ndE2OSg2tSbSJOoLhnXxv9D1s5ymrFQ/r9pwU0rK2f0E7ksXYv86J/AflPhYV\nbVGFRItIYddqh0FWSJeB+9WvMJYb5A28KNjw6J1Pn50mZRr4HR9bxN2Od7QY\n5EogAbw/VqrzQfRV5JtUy3ZRLZiLayzlVlO2Pm/+czpkkpK19BPsKW3FVQ2M\nZ7xz8aHXXKAogy/G++kQg2Osb05I3mqQ4L9gIQhl8jr6NbvYhJizIBcGeLZg\nVDPxNLAxBTmlNjavREVpLgCR/1xbR8wFdKvaZUp3I2XAXludB7Mw8c0DYxrI\nZ1H4OJY1lgRm3CtxCiQK+qB/kxTiRGYCHbAv8HRe+m6cj2DKsUR67zDOBqyk\nPUs0s64O0Gbvwq+adfRnSbQDp4EKF66jrW96+0Wiw/MP34m8GDi8T9psap5m\nDe+p\r\n=Renw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAirttl4bN8IbvN+PAhP5D6fcHDKO9q4LEKFk5Uhqad/AiANQmmWP+PBLHH0gUsvDJFb5MF4lPQYNlE0PFok2KCMWQ=="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-alpha.7_1552969488748_0.031003850977854963"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-alpha.8":{"name":"treat","version":"1.0.0-alpha.8","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"start":"concurrently 'npm run watch' 'npm run serve'","test":"npm run build","build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"npm run build:module && npm run build:commonjs","watch":"tsc --watch","serve":"webpack-dev-server","build-example":"webpack","prepublishOnly":"npm run build","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.13.0"},"devDependencies":{"@babel/core":"^7.3.4","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","classnames":"^2.2.6","concurrently":"^4.1.0","html-webpack-plugin":"^3.2.0","mini-css-extract-plugin":"^0.5.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.3.3333","webpack":"^4.29.6","webpack-cli":"^3.2.3","webpack-dev-server":"^3.2.1"},"dependencies":{"@types/lodash":"^4.14.123","css-loader":"^2.1.0","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"readme":"# 🍬 treat\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat\n```\n\nWrite your styles in **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing class names. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nTheming is achieved by generating multiple classes, which means that **legacy browsers are supported.**\n\n## tl;dr (React version)\n\nCreate a theme:\n\n```js\n// theme.treat.js\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4,\n});\n```\n\nProvide the desired theme via context:\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n ...;\n}\n```\n\nDefine some styles, using the theme:\n\n```js\n// Button.treat.js\n\nimport { css } from 'treat';\n\nexport default css(theme => {\n button: {\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n },\n});\n```\n\nUse themed styles in your component:\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClasses } from 'treat';\n\nimport styles from './Button.treat.js';\n\nexport function Button(props) {\n return ;\n}\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","gitHead":"5272efd3976e1316538dac3e9399e814a7749ff3","_id":"treat@1.0.0-alpha.8","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-PFsBTqhpZcKeYaoZWrHVBoAIv+rICEdwcWSMkgQqze63ffbHEYeOkaV1Tc9KGQFCpF4l3FMMLCevQkVcZjlNIg==","shasum":"ea2d742aedcfd697bb0603f8c700bf8ed338a91e","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-alpha.8.tgz","fileCount":29,"unpackedSize":31478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckHrQCRA9TVsSAnZWagAAPQkQAJCRsTrWB7t9VBMbIwFa\n/I1U9d9CH7ssutInjK8JATnUZV4oJ+Vql372KZACpQvtux9bExqqNZFrbKoV\nMHS+B/TtiqUvbGnoiZZpEAHO2ji8NPtMSEdAUg5p5EjZ4NVetkMoeucY6nnf\nkRv4jEKEg1v4SEzWQOKhwkv0kNmcDZM1MXdsk5ZRHx4VpT7P9DGn4swzZnsW\nluM7p03R9c+OV6s2JmvAPCZd27NwuFn29tBWxqL86GZE8f/39OhyCABif3JR\nicDVLSzakvaLKL9thF/YdgeWHEpbv98kJ1/VPvYS1/QOoE3UT95VEbd6Sy4e\noxM5+IWMToSbosY6K+Bwvf7HTXN2eVa2KzVy+oV41HSJz+2XEDu0ikoOf4Dl\n6eFAXNVKkH06//iPiQUrdpmPQBcan2kmc616cD9qleKSdKNhL/cN3LIkqE1K\nQeOjFANgVPNt2Y1hKLsPLci/IVNh/7I1YVe8aQweS9RyW7HcA/TRrXfFLnpm\nOh1YMxVhdsOLGZEDT2oZJMfdDIleLe3JlnazC291fEqVP3igRJ6a7Fj7f5JV\nt9RRWz+wfTwifajB0oGdyVqK7jbJuAI2AOgSBTSNaqR+OG9rX74T9VoPXjGG\nU+rLSQiWwvRHXfuGJRSCcvo4Gjn6aXfs62Ss2LlkW7ik7iztdvECmKnTurbI\nbJTK\r\n=QK7M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID8sidp30R6RrMbsQOC1y/zNKg1TeU8pIynu6lBk3YubAiAV81ogxTbCli0lcHIJSrN3JGIONVZhFo9O1oFhVmM2JQ=="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-alpha.8_1552972495900_0.8102653257699861"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-alpha.9":{"name":"treat","version":"1.0.0-alpha.9","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"start":"npm run build && concurrently 'npm run watch' 'npm run serve'","test":"npm run build","build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'npm run build:module' 'npm run build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'","serve":"webpack-dev-server","build-example":"webpack","prepublishOnly":"npm run build","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.13.0"},"devDependencies":{"@babel/core":"^7.3.4","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","classnames":"^2.2.6","concurrently":"^4.1.0","html-webpack-plugin":"^3.2.0","mini-css-extract-plugin":"^0.5.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.3.3333","webpack":"^4.29.6","webpack-cli":"^3.2.3","webpack-dev-server":"^3.2.1"},"dependencies":{"@types/lodash":"^4.14.123","css-loader":"^2.1.0","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"readme":"# 🍬 treat\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat\n```\n\nWrite your styles in **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing class names. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nTheming is achieved by generating multiple classes, which means that **legacy browsers are supported.**\n\n## Table of Contents\n\n- [tl;dr (React version)](#tldr-react-version)\n- [Requirements](#requirements)\n- [Webpack Setup](#webpack-setup)\n\n## tl;dr (React version)\n\nCreate a theme:\n\n```js\n// theme.treat.js\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nProvide the desired theme via context:\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nDefine some styles, using the theme:\n\n```js\n// Button.treat.js\n\nimport { css } from 'treat';\n\nexport default css(theme => {\n button: {\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n },\n});\n```\n\nUse themed styles in your component:\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClasses } from 'treat';\n\nimport styles from './Button.treat.js';\n\nexport function Button(props) {\n return ;\n}\n```\n\n## Requirements\n\nIn order to use treat, you need to be using [webpack](https://webpack.js.org/) with the supplied [treat webpack plugin](#webpack-setup)—but that's it.\n\n**We provide first-class support for [React](https://reactjs.org/),** but that layer is _entirely optional._ We also provide lower level APIs that could be integrated into other frameworks.\n\n## Webpack Setup\n\nTo get started, add the treat webpack plugin to `webpack.config.js`:\n\n```js\nconst TreatPlugin = require('treat/plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader).\n\nIf you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) via the `outputLoaders` option:\n\n```js\nconst TreatPlugin = require('treat/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```\n\nBy default, all class names are hashes. If you'd like more fine-grained control over the generated class names, you can create your own [custom interpolations](https://github.com/webpack/loader-utils#interpolatename):\n\n```js\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n localIdentName: '[name]-[local]_[hash:base64:5]',\n themeIdentName: '_[folder]-[name]_[hash:base64:5]'\n })\n ]\n};\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","gitHead":"0382ee87ce5a4e4da8efe328dba8bef529961891","_id":"treat@1.0.0-alpha.9","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-zSqG1l7141LjltbFl6t7sbtFc17xo/V3mfqYSSghWoi/82HM5nEIt2iM385BkSwy0byqADUfaCNLYofJPBa97Q==","shasum":"7b3eb432672a8baf66be05c51a5e229e241e73ec","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-alpha.9.tgz","fileCount":37,"unpackedSize":46078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckvRZCRA9TVsSAnZWagAAeFUP/0L9j6Zq5kc6xWdGopDX\nGmccD+sU+kjlI4v62TodokhEFz1TD/XrpNITZbQvvzjRcSpquRAkMCvNw+SV\nQ0dyk88ilsrCBNjBDYubSNL/yzzmGCmrwFgcn1iGqxk4YYd1ad993iPusgIG\nVt2Skmv+FjHRkls2R65OjXiIpbfXbE4VeXIW5ACW2B2cuKBG3kW5g8QLn7iR\nFISFU6Z/9TMUVlxT/SGGUK9vRHbxJdUPv6sJoEaZRkPqVH+XMm7BI+GDdByU\n7Z0BzGSQx6oozZe6zrGgPy+sReH80ac9gt0PsU5bMsj1+lLQ48UTmKC5X5bo\nOMUXWYA27x5gIjE0Xlr6MnilJdSbUfNNqAkQyGXsHfcGJmr4NO0s20U+SjEl\nXnhaiVhgj3n8hwzuhXj0TDtvkDjBXPiXHnVyzRvNB6044wMOmnBlr/6/OH2I\nKLGqShIzkZvzCZucnlc9RVRmCb8kqc6rJgHA7Tf3e4BZQELkyYVG0VMcXbsI\npXJJqdvDmFqAneG402xhS9XRSn3Asj6EMVY7sa9e5rgLtBA4CqWRVUhKSiDw\n6whlvBESvPQYzzzx9NteS3zj4n1jHtwkrr32nYtYQuhefb+COYMATe0hUDO0\n+5CmokUhAk1uBLkBiZk7weggEugMp1r+TUs56MjQ/YhcHR7kraiRlK7vQRP2\ndk9+\r\n=5SKn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAR0DbQMA/WvkQmsdhIh6R/n015sIAPc+w9EA4WQOOh6AiBJDm9nqj1Mzz2GJHrt7utNjDOy7MRLWz7/InlKYGnDHg=="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-alpha.9_1553134680656_0.8405851856361117"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-alpha.10":{"name":"treat","version":"1.0.0-alpha.10","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"start":"npm run build && concurrently 'npm run watch' 'npm run serve'","test":"npm run build","build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'npm run build:module' 'npm run build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'","serve":"webpack-dev-server","build-example":"webpack","prepublishOnly":"npm run build","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.13.0"},"devDependencies":{"@babel/core":"^7.3.4","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","classnames":"^2.2.6","concurrently":"^4.1.0","html-webpack-plugin":"^3.2.0","mini-css-extract-plugin":"^0.5.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.3.3333","webpack":"^4.29.6","webpack-cli":"^3.2.3","webpack-dev-server":"^3.2.1"},"dependencies":{"@types/lodash":"^4.14.123","css-loader":"^2.1.0","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"readme":"# 🍬 treat\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat\n```\n\nWrite your styles in **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing class names. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nTheming is achieved by generating multiple classes, which means that **legacy browsers are supported.**\n\n## Table of Contents\n\n- [tl;dr (React version)](#tldr-react-version)\n- [Requirements](#requirements)\n- [Webpack Setup](#webpack-setup)\n\n## tl;dr (React version)\n\nCreate a theme:\n\n```js\n// theme.treat.js\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nProvide the desired theme via context:\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nDefine some styles, using the theme:\n\n```js\n// Button.treat.js\n\nimport { css } from 'treat';\n\nexport default css(theme => {\n button: {\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n },\n});\n```\n\nUse themed styles in your component:\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClasses } from 'treat';\n\nimport styles from './Button.treat.js';\n\nexport function Button(props) {\n return ;\n}\n```\n\n## Requirements\n\nIn order to use treat, you need to be using [webpack](https://webpack.js.org/) with the supplied [treat webpack plugin](#webpack-setup)—but that's it.\n\n**We provide first-class support for [React](https://reactjs.org/),** but that layer is _entirely optional._ We also provide lower level APIs that could be integrated into other frameworks.\n\n## Webpack Setup\n\nTo get started, add the treat webpack plugin to `webpack.config.js`:\n\n```js\nconst TreatPlugin = require('treat/plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader).\n\nIf you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) via the `outputLoaders` option:\n\n```js\nconst TreatPlugin = require('treat/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```\n\nBy default, all class names are hashes. If you'd like more fine-grained control over the generated class names, you can create your own [custom interpolations](https://github.com/webpack/loader-utils#interpolatename):\n\n```js\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n localIdentName: '[name]-[local]_[hash:base64:5]',\n themeIdentName: '_[folder]-[name]_[hash:base64:5]'\n })\n ]\n};\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","gitHead":"1581b5e2749f60130af5575b088665146ad1b2f6","_id":"treat@1.0.0-alpha.10","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-62kUvMaVBRgB6dbYV+su9UiVhTMgFR8OFXuwzSF+ZjPvlc8F2rkDKMrm/ZwWsk4gZTZZyP6nDLH3+lpVfq0NCw==","shasum":"d4e5666feb1fbeeaeb3429ed3cad0ed09b2727c8","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-alpha.10.tgz","fileCount":37,"unpackedSize":46095,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckv/aCRA9TVsSAnZWagAAw5AP/1V4ibqZ7rwAo6V5SW24\nQ1PRutD0//otqViWV2J3rtl0XdvCPSgBT2FuLq5wtpACVylpLKHROa/uKhqp\n3LuKupmrXjmfnLCSB68J6z+YmbzGUnGKjIVJ9MEQWkvSEXWxxK6NqP2lbIUO\noM+FeHFENIAdnKmZ12FU41p38fUhCxEF5a4GyBB++uv+Nm5yJTA0AxHAGFH6\nKXMtrlpcn14sR+XDzVrwyVu0aF6WTyeCS7MILzP16wGHmjzAxnK9BHu8VvbC\nBGrGVHHKzCYmeu5gLsXHz2iCJKqU0/kjCWa78P2pJQeT+yynmES4IDwQWgZC\nosa61J2ImahXkqwNtksp+GxewXvjf+TuH2Oocb97a+rUcfCetBpubjxnYpY8\n6MCT+ga+qwrEL/pQJVzLXqnAvh1yS/4WNtFGRBq2h1r64cWSqU8/Gj3h+h/q\ncl45kduFfJ1FIlDgiUjJ+RQRJqBq0rkUJWzQTqp7xAafqKuszbRL14kz3d4y\ni8XVyT4pLxea0Tw5R53wTg8sz8SrLZizpd3AeTnIfEmao1PmAkFIzdMCBykq\ncIkMSzR+R+UOn1nt8eILbguVCzlV7yiyi/jjosWlZ6/TzNyL9qXSf6C3lD9p\n5iyOBR1p1VSVaO3VXtuU9QO21cShLIOAcK8/sjLajYb5wJv3kXai9kS8aMv/\nKYXb\r\n=n9Zn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFZpYpXsuvTBjEpnRcNkEm3oigBaLCZ+TEs6TT+9/YBUAiAEbTzfpbSwouKPmVOw7WaE0c+YQIjS/70mws/szX9j7A=="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-alpha.10_1553137625580_0.047099117632004806"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-alpha.11":{"name":"treat","version":"1.0.0-alpha.11","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"start":"npm run build && concurrently 'npm run watch' 'npm run serve'","test":"npm run build","build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'npm run build:module' 'npm run build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'","serve":"webpack-dev-server","build-example":"webpack","prepublishOnly":"npm run build","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.13.0"},"devDependencies":{"@babel/core":"^7.3.4","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","classnames":"^2.2.6","concurrently":"^4.1.0","html-webpack-plugin":"^3.2.0","mini-css-extract-plugin":"^0.5.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.3.3333","webpack":"^4.29.6","webpack-cli":"^3.2.3","webpack-dev-server":"^3.2.1"},"dependencies":{"@types/lodash":"^4.14.123","css-loader":"^2.1.0","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"readme":"# 🍬 treat\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **legacy browsers are supported.**\n\n---\n\n- [Requirements](#requirements)\n- [tl;dr (React version)](#tldr-react-version)\n- [Webpack Setup](#webpack-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [css](#css)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useClassNames](#useclassnames)\n - [useStyles](#usestyles)\n - [Low-Level API](#low-level-api)\n - [resolveClassNames](#resolveclassnames)\n - [resolveStyles](#resolvestyles)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**We provide first-class support for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ We also provide low level runtime APIs that could be integrated into other frameworks, if needed.\n\n## tl;dr (React version)\n\n> React is [not required](#low-level-api) to use treat—but it certainly makes it easy 😎\n\nFirst, create a theme. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, during render, provide the desired theme via context.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nDefine some [styles](#styles), using the theme.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen render themed classes via the [`useClassNames` Hook.](#useclassnames)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ className, ...restProps }) {\n return (\n \n );\n}\n```\n\n## Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration).\n\n```js\nconst TreatPlugin = require('treat/plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst TreatPlugin = require('treat/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```\n\nBy default, all class names are hashes. If you'd like more fine-grained control over the generated class names, you can create your own [custom interpolations](https://github.com/webpack/loader-utils#interpolatename).\n\n\n```js\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n localIdentName: '[name]-[local]_[hash:base64:5]',\n themeIdentName: '_[folder]-[name]_[hash:base64:5]'\n })\n ]\n};\n```\n\n### Webpack plugin options\n\n| option | description | default value |\n| -------------- | ------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. | `[hash:base64:4]` |\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`css`](#css) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\n**The following styling APIs are only valid within treat files (e.g. `Button.treat.js`).**\n\n#### createTheme\n\nType: `function`\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\nIf you need to define selector-based styles, you can optionally pass a selector string as the first argument.\n\n```js\nimport { style } from 'treat';\n\nstyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n#### css\n\nType: `function`\n\nThe `css` function allows you to create multiple class names at once, returning an object that maps to the generated class names (similar to [CSS Modules](https://github.com/css-modules/css-modules)).\n\n```js\nimport { css } from 'treat';\n\nexport default css(theme => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n```\n\n### React API\n\n> Note: React is [not required](#low-level-api) to use treat!\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useClassNames`](#useclassnames) and [`useStyles`](#usestyles) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useClassNames\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves treat classes relative to the current theme, returning a single `className` string. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage).\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n return (\n \n );\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves an entire object of treat classes relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n const styles = useStyles(styleRefs);\n\n return (\n \n );\n}\n```\n\n### Low-Level API\n\n> Note: If you're using React, use our [React API](#react-api) instead.\n\n#### resolveClassNames\n\nType: `function`\n\nResolves class names relative to a given theme. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage), but with the desired theme as the first argument.\n\n```js\nimport { resolveClassNames } from 'treat';\n\nimport theme from './theme.treat.js';\nimport * as styles from './Button.treat.js';\n\nconst className = resolveClassNames(\n theme,\n styles.button,\n {\n [styles.primary]: isPrimary\n },\n ...etc\n);\n```\n\n#### resolveStyles\n\nType: `function`\n\nResolves an entire styles object relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styles from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst themedStyles = resolveStyles(styles, theme);\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","gitHead":"6a2ba7d0380730918983d41c1ab3e6068b0c74eb","_id":"treat@1.0.0-alpha.11","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-JjAmHOS/cmsL4h246T5/KZlPHk+VHzWiGpz7/WBnnyxmBI9aURTAouO/53hvwBwRO4MxVwzqWwIVg/G0Ly0nRQ==","shasum":"a3db757a828d75c3e9a162c4def9a926df6c800a","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-alpha.11.tgz","fileCount":37,"unpackedSize":53339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmWJjCRA9TVsSAnZWagAAxVYQAI6rxI/7wMKzl063sEGh\nvRLoQdyfNOGeqUdIulQDdrIHZAvgxB6qtp/UscwdAb6aoKgBA2mG5YP6CtQR\nOVsO8tVodmh1l4Kz+oFpR5NQ6k3OoHWY0Q2oXKIdztF3s+v0Un8tBSpGwbo9\nFUzCWRJYMFM7TW2QF9B8rZzaTOSaaexYwTtCUvkR0M76qMa9i3z6IY1xUrr3\nQgBKDXujTrzn6+bxjxmwkcxIGAXmmunwPFWzSEkLeIsmw5z5vrwnS4FK+9/t\n9U6kOvxdOrcGjumJDsy1eE2KrjRuriF4CkFpJnB9I7YyxDyB+wvXdj3MrwoT\nd9ZHa0YKfYubStl/HlyK+JqCYgJ1+6I4E+Q7SSX/183XSB4TqDhL0QYLUREh\nmLzRwQRpr+mqL78LlhNicGtv3A/lt+Haa8wE/gHXwzFMvxIsyOgEmNl6ewDX\nmCWEHd18+CGL45lT3m4m23swkocnzf/T/w09rVwwNhiTwBW698wquWdFSM/C\nYaUo+caPP/sTwmtwNkZIq9KrGigjMSYt/Ofxp0TL4X4iip3uxphmY2csWnn0\n5Fv+ynMXWKvaXfsCNlM9LxcYbeIJo6Ou2dhDA7DvJPdurs5hyTu/00oIpRNE\nGS4/AseEe1pvpaMup4oCxr6h65aMbqosrkNKbnSJ+zh4Ccm0dMRlNvOdQSaw\nZPt/\r\n=lcCF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCzlbOTbVioumPZIHGu8g1ES3PW07gOl4fV1cPXY8McgIhAIEmUwllOx2vrq8nuXvQProC7MrSyVAQMYyOktL+hFJT"}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-alpha.11_1553556066492_0.5808682568038666"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-webpack-fix.1":{"name":"treat","version":"1.0.0-webpack-fix.1","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"start":"npm run build && concurrently 'npm run watch' 'npm run serve'","test":"npm run build","build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'npm run build:module' 'npm run build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'","serve":"webpack-dev-server","build-example":"rm -rf dist && webpack","prepublishOnly":"npm run build","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.13.0"},"devDependencies":{"@babel/core":"^7.3.4","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","classnames":"^2.2.6","concurrently":"^4.1.0","html-webpack-plugin":"^3.2.0","mini-css-extract-plugin":"^0.5.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.3.3333","webpack":"github:mattsjones/webpack#dc26688","webpack-cli":"^3.2.3","webpack-dev-server":"^3.2.1"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"32959f93e8c5af5a89ffa84cfadc00746128945e","readme":"# 🍬 treat\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **legacy browsers are supported.**\n\n---\n\n- [Requirements](#requirements)\n- [tl;dr (React version)](#tldr-react-version)\n- [Webpack Setup](#webpack-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [css](#css)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useClassNames](#useclassnames)\n - [useStyles](#usestyles)\n - [Low-Level API](#low-level-api)\n - [resolveClassNames](#resolveclassnames)\n - [resolveStyles](#resolvestyles)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**We provide first-class support for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ We also provide low level runtime APIs that could be integrated into other frameworks, if needed.\n\n## tl;dr (React version)\n\n> React is [not required](#low-level-api) to use treat—but it certainly makes it easy 😎\n\nFirst, create a theme. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, during render, provide the desired theme via context.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nDefine some [styles](#styles), using the theme.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen render themed classes via the [`useClassNames` Hook.](#useclassnames)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ className, ...restProps }) {\n return (\n \n );\n}\n```\n\n## Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration).\n\n```js\nconst TreatPlugin = require('treat/plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst TreatPlugin = require('treat/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```\n\nBy default, all class names are hashes. If you'd like more fine-grained control over the generated class names, you can create your own [custom interpolations](https://github.com/webpack/loader-utils#interpolatename).\n\n\n```js\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n localIdentName: '[name]-[local]_[hash:base64:5]',\n themeIdentName: '_[folder]-[name]_[hash:base64:5]'\n })\n ]\n};\n```\n\n### Webpack plugin options\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. | `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`css`](#css) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\n**The following styling APIs are only valid within treat files (e.g. `Button.treat.js`).**\n\n#### createTheme\n\nType: `function`\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\nIf you need to define selector-based styles, you can optionally pass a selector string as the first argument.\n\n```js\nimport { style } from 'treat';\n\nstyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n#### css\n\nType: `function`\n\nThe `css` function allows you to create multiple class names at once, returning an object that maps to the generated class names (similar to [CSS Modules](https://github.com/css-modules/css-modules)).\n\n```js\nimport { css } from 'treat';\n\nexport default css(theme => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n```\n\n### React API\n\n> Note: React is [not required](#low-level-api) to use treat!\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useClassNames`](#useclassnames) and [`useStyles`](#usestyles) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useClassNames\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves treat classes relative to the current theme, returning a single `className` string. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage).\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n return (\n \n );\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves an entire object of treat classes relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n const styles = useStyles(styleRefs);\n\n return (\n \n );\n}\n```\n\n### Low-Level API\n\n> Note: If you're using React, use our [React API](#react-api) instead.\n\n#### resolveClassNames\n\nType: `function`\n\nResolves class names relative to a given theme. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage), but with the desired theme as the first argument.\n\n```js\nimport { resolveClassNames } from 'treat';\n\nimport theme from './theme.treat.js';\nimport * as styles from './Button.treat.js';\n\nconst className = resolveClassNames(\n theme,\n styles.button,\n {\n [styles.primary]: isPrimary\n },\n ...etc\n);\n```\n\n#### resolveStyles\n\nType: `function`\n\nResolves an entire styles object relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styles from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst themedStyles = resolveStyles(styles, theme);\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-webpack-fix.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-WBo27ggOUSEBa20wBs4KznF8mPBPEDnPtWIoseaEZTiCTHZBxVdoDaFo4IodG++gs25bJtDILOvGpGtoj+1Zxg==","shasum":"e45d366d1265f165aa56020dee0c478dbb6ffc40","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-webpack-fix.1.tgz","fileCount":37,"unpackedSize":56404,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcoUYMCRA9TVsSAnZWagAA1tsP/2qJV4oqz/A7dwnajycl\nUXl9xVroWVdRZJznkqyhowyxAaqlX3xJ75HIb1H589wddoFcS/tbRifb0aIh\nDPLbJCszQrsNF16zUY+eiyl2xf/51vmbPKqZXM+kQWHQ5DVTD/vgNDAeKkAR\nz1//Rtcy619NaDt1kUlwfxCCqw4jxeYf1g5Xg4zPg9zlGGDjbR+UPwQ/HQvw\n8c1QSk2iMcJw3/jMiGBZulko4TDqNr4EcV3f1K4pmvyF7jH80PXdG0AonVw9\nRt59Bl5UQiuq2bUddtbu7Nudd3/O4hiUfx5ipMT25nHxusqKX76d8tBLY2Fk\nPeTe3wpabNxFmSyNYDvQPgzLDJkH1RIfRuyn5WZAXr+SXVEKnwHNfGhAbo7u\n567H4nbT0bA0GCUYJN4NPrxrQo+uOCy5YI22fh2GPsysZSbMWTfYP85Icajc\nn2iLU3Z9I7NUnjdZWrgwTYRzpx0icZ+PE6reO8FeReINSSIMDKmsixqtFnnL\nL0O2mWOjmn/WKPtAn8NR6CE17DK2BYlvt7ZWlWX7J8JMlo4yzjBGYaLL3SJi\nT/WvFueSzeOcn3msBhKpa03oCvxCDwSBJsrlt8mmJ2ZWATOXPlsGmzguB2PR\njE03svvMeOVEOmAHfn6T0R+jhSGHUbtd+nkJ2++6BP41+KV37Nxu4xI0Y1hz\ny69t\r\n=Rwk0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDj0rgDMHsT0pVAvBfYSmWEE4i3ezKEJnWf7ayFkp/RAQIhANsGfUuczh6YdsONcJ7CMZbCzXiBcnZWp0utGfdy+hJp"}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-webpack-fix.1_1554073100081_0.5229973603153644"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-webpack-fix.2":{"name":"treat","version":"1.0.0-webpack-fix.2","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"start":"npm run build && concurrently 'npm run watch' 'npm run serve'","test":"npm run build","build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'npm run build:module' 'npm run build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'","serve":"webpack-dev-server","build-example":"rm -rf dist && webpack","prepublishOnly":"npm run build","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.13.0"},"devDependencies":{"@babel/core":"^7.3.4","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","classnames":"^2.2.6","concurrently":"^4.1.0","html-webpack-plugin":"^3.2.0","mini-css-extract-plugin":"^0.5.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.3.3333","webpack":"^4.29.6","webpack-cli":"^3.2.3","webpack-dev-server":"^3.2.1"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"readme":"# 🍬 treat\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **legacy browsers are supported.**\n\n---\n\n- [Requirements](#requirements)\n- [tl;dr (React version)](#tldr-react-version)\n- [Webpack Setup](#webpack-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [css](#css)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useClassNames](#useclassnames)\n - [useStyles](#usestyles)\n - [Low-Level API](#low-level-api)\n - [resolveClassNames](#resolveclassnames)\n - [resolveStyles](#resolvestyles)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**We provide first-class support for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ We also provide low level runtime APIs that could be integrated into other frameworks, if needed.\n\n## tl;dr (React version)\n\n> React is [not required](#low-level-api) to use treat—but it certainly makes it easy 😎\n\nFirst, create a theme. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, during render, provide the desired theme via context.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nDefine some [styles](#styles), using the theme.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen render themed classes via the [`useClassNames` Hook.](#useclassnames)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ className, ...restProps }) {\n return (\n \n );\n}\n```\n\n## Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration).\n\n```js\nconst TreatPlugin = require('treat/plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst TreatPlugin = require('treat/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```\n\nBy default, all class names are hashes. If you'd like more fine-grained control over the generated class names, you can create your own [custom interpolations](https://github.com/webpack/loader-utils#interpolatename).\n\n\n```js\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n localIdentName: '[name]-[local]_[hash:base64:5]',\n themeIdentName: '_[folder]-[name]_[hash:base64:5]'\n })\n ]\n};\n```\n\n### Webpack plugin options\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. | `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`css`](#css) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\n**The following styling APIs are only valid within treat files (e.g. `Button.treat.js`).**\n\n#### createTheme\n\nType: `function`\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\nIf you need to define selector-based styles, you can optionally pass a selector string as the first argument.\n\n```js\nimport { style } from 'treat';\n\nstyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n#### css\n\nType: `function`\n\nThe `css` function allows you to create multiple class names at once, returning an object that maps to the generated class names (similar to [CSS Modules](https://github.com/css-modules/css-modules)).\n\n```js\nimport { css } from 'treat';\n\nexport default css(theme => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n```\n\n### React API\n\n> Note: React is [not required](#low-level-api) to use treat!\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useClassNames`](#useclassnames) and [`useStyles`](#usestyles) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useClassNames\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves treat classes relative to the current theme, returning a single `className` string. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage).\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n return (\n \n );\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves an entire object of treat classes relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n const styles = useStyles(styleRefs);\n\n return (\n \n );\n}\n```\n\n### Low-Level API\n\n> Note: If you're using React, use our [React API](#react-api) instead.\n\n#### resolveClassNames\n\nType: `function`\n\nResolves class names relative to a given theme. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage), but with the desired theme as the first argument.\n\n```js\nimport { resolveClassNames } from 'treat';\n\nimport theme from './theme.treat.js';\nimport * as styles from './Button.treat.js';\n\nconst className = resolveClassNames(\n theme,\n styles.button,\n {\n [styles.primary]: isPrimary\n },\n ...etc\n);\n```\n\n#### resolveStyles\n\nType: `function`\n\nResolves an entire styles object relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styles from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst themedStyles = resolveStyles(styles, theme);\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","gitHead":"e2df22d53ce0951282ce06ea18f7ba6451caffa5","_id":"treat@1.0.0-webpack-fix.2","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-61TuDbe5K2l+ey+l4tilFeIzDmHlmLNvi9CIKOAH9KORx6o3Hpc8Uxr0UlBa0xYPFxr+0DyE0ANVCIkStlhKzQ==","shasum":"ec049c59235640b4779e6c91f74e1dd09bac3994","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-webpack-fix.2.tgz","fileCount":36,"unpackedSize":56701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcoZCQCRA9TVsSAnZWagAAwZAP/igVyd3vHC93dKPWqjkD\nvOZC061rWFTdlfEWq7An0jPF7+6QR8WTvtubXqaGEztaWqJd5cRGaVaJcmqL\nOBluwghSgRLm/ARMCW+texfPG0BXgNVzim8cY0BIl2gNMrH0dQlTPc6aBnuD\n3wttGSwjdLFcL0juwk1HgxWLuwzuHJG50nHuKjirAe32kT9N4x9bfCTkpCfm\na2J0bT/EKL66KtKUXiFwJ5L8EWCglMKPJTn4sxok/oDmbMbvjtt3Qh7XwYiF\nRsKuQhU7d6KiwfrY95Tha67AKaJQdNLU1YX6jyzLL+ILfbBBJt/VEb0+6XSS\niZxmMayxgDxDP9K+1F6EsAi84eY39txpz2pDKSF9NK7g98p1wce0n1fjHSq5\nPhrQL/yt/vek6deZhCMw4w4g34Z/oTS/Rtjg9IGmYBP2MwTGTZ5dEV7hlkOy\ncw2sYB7nQqbWKb/tNGnDfn6mmoqFJa0wmyfaFS/smHqWBvXuOUTHZHOCkMJk\nRWJbb8+Z1WPj9cEh7wcVDzqHoSfMNZ9qeaDzDW/STdODm7D5iD1c0oNR2s6h\nsmAFDMxvWcfiNgZWvyiuye+Sq36Nanq7FikbjLLJ99oskvZMWMyAzpxsq+pZ\nxxLD6K6eMzcLe5wqmNf4z9bBsFYkg4o5bffe9qjuGo99Pw9xxXnyfMB9rPnH\nXKu+\r\n=Ee3T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICHNPZU52jmzcjY2OdcVMNs6XzvSWald9TnI3fGc8jJdAiEAu3Joz4AO2nPhRCZwjGX0lI6dvHHoKfha90SivZ0Uag8="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-webpack-fix.2_1554092176117_0.17018848260628316"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-webpack-fix.3":{"name":"treat","version":"1.0.0-webpack-fix.3","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"start":"npm run build && concurrently 'npm run watch' 'npm run serve'","test":"npm run build","build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'npm run build:module' 'npm run build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'","serve":"webpack-dev-server","build-example":"rm -rf dist && webpack","prepublishOnly":"npm run build","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.13.0"},"devDependencies":{"@babel/core":"^7.3.4","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","classnames":"^2.2.6","concurrently":"^4.1.0","html-webpack-plugin":"^3.2.0","mini-css-extract-plugin":"^0.5.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.3.3333","webpack":"^4.29.6","webpack-cli":"^3.2.3","webpack-dev-server":"^3.2.1"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"112f8c614bcbe75daefa71f363529fca17e89912","readme":"# 🍬 treat\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **legacy browsers are supported.**\n\n---\n\n- [Requirements](#requirements)\n- [tl;dr (React version)](#tldr-react-version)\n- [Webpack Setup](#webpack-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [css](#css)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useClassNames](#useclassnames)\n - [useStyles](#usestyles)\n - [Low-Level API](#low-level-api)\n - [resolveClassNames](#resolveclassnames)\n - [resolveStyles](#resolvestyles)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**We provide first-class support for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ We also provide low level runtime APIs that could be integrated into other frameworks, if needed.\n\n## tl;dr (React version)\n\n> React is [not required](#low-level-api) to use treat—but it certainly makes it easy 😎\n\nFirst, create a theme. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, during render, provide the desired theme via context.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nDefine some [styles](#styles), using the theme.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen render themed classes via the [`useClassNames` Hook.](#useclassnames)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ className, ...restProps }) {\n return (\n \n );\n}\n```\n\n## Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration).\n\n```js\nconst TreatPlugin = require('treat/plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst TreatPlugin = require('treat/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```\n\nBy default, all class names are hashes. If you'd like more fine-grained control over the generated class names, you can create your own [custom interpolations](https://github.com/webpack/loader-utils#interpolatename).\n\n\n```js\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n localIdentName: '[name]-[local]_[hash:base64:5]',\n themeIdentName: '_[folder]-[name]_[hash:base64:5]'\n })\n ]\n};\n```\n\n### Webpack plugin options\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. | `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`css`](#css) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\n**The following styling APIs are only valid within treat files (e.g. `Button.treat.js`).**\n\n#### createTheme\n\nType: `function`\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\nIf you need to define selector-based styles, you can optionally pass a selector string as the first argument.\n\n```js\nimport { style } from 'treat';\n\nstyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n#### css\n\nType: `function`\n\nThe `css` function allows you to create multiple class names at once, returning an object that maps to the generated class names (similar to [CSS Modules](https://github.com/css-modules/css-modules)).\n\n```js\nimport { css } from 'treat';\n\nexport default css(theme => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n```\n\n### React API\n\n> Note: React is [not required](#low-level-api) to use treat!\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useClassNames`](#useclassnames) and [`useStyles`](#usestyles) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useClassNames\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves treat classes relative to the current theme, returning a single `className` string. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage).\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n return (\n \n );\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves an entire object of treat classes relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n const styles = useStyles(styleRefs);\n\n return (\n \n );\n}\n```\n\n### Low-Level API\n\n> Note: If you're using React, use our [React API](#react-api) instead.\n\n#### resolveClassNames\n\nType: `function`\n\nResolves class names relative to a given theme. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage), but with the desired theme as the first argument.\n\n```js\nimport { resolveClassNames } from 'treat';\n\nimport theme from './theme.treat.js';\nimport * as styles from './Button.treat.js';\n\nconst className = resolveClassNames(\n theme,\n styles.button,\n {\n [styles.primary]: isPrimary\n },\n ...etc\n);\n```\n\n#### resolveStyles\n\nType: `function`\n\nResolves an entire styles object relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styles from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst themedStyles = resolveStyles(styles, theme);\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-webpack-fix.3","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-h2k3ZR9jpd2P6ql1jg6jocxXDQ7X24rppH7ereJUrkD6k49PWM5z7vH3uQ8vIZMQrAd+0jV7GiftTlzZTp5sEQ==","shasum":"e0d329c310cf169d1848540940d05dc871610468","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-webpack-fix.3.tgz","fileCount":36,"unpackedSize":56789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcoZ9QCRA9TVsSAnZWagAAd/wP/iR2bjo0WsNikgvUmIhm\nPX285YoZWgWvqBNw76+hjPVMW8N4/yY52+59PLEHsvFrwR35CdmYl56T1Afx\nTJaenBkIrgpjgbe8xQM41X93fyXeTjb3Uo9H4ljvdjc6I+Hdhya+MjGKBdoE\ndZzimHuVeAdksj+nj6kr7X92qT/bWK02DoCw9kC3yWxrBrDwfj7d+kKavDdG\npN4IuA2UMRn0hDMtkVvMZhUXt8Tm7dp+7oV6CjsvIiEa/fI+qsro/4DkRCPn\nDATM1s6p4Ud2t+9w8OMNiEJveBjdlg7nqugfPkcKm5kLtKgFtsvU1DuBjC7B\nuDFwtMTMsOZ4w6Fe7+8/7JVKzCPx8slbHfax8tmO9NYzHsPrqvWQI99esAYt\nUDbs1c9Elcm7+hQRGfHD/NmP3SaiEeTlXgTfPKdXUgsqBSYXtpzEeTsm4j4T\nNwWiNkNes++nNdXyYRfuKuoZkbBFJbYLpHczUNCDWfJ97T3PdactF6we+Cj0\nOfVtS4DLq4Ma977/sDms0ABlLmWoCvfNOi/ztaigGlRN4oAprsAvLehQFv9R\nM+CvpzN8wvhNykW4RYfuvMEZ7iNHDIAZ4eMdgDJGvJteuSicrhRM41DYHOk3\n9Tggfa0+kO7rafVj+JJGVALwnRwcGT8hf8qBDzV8MoozwhsFTLD1MVgGS3ts\nBYWW\r\n=A3dp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQFC/WHKXRd0EojFvrjL6WAc5DgyyTqiZJCGVURPhUDQIgTu9tAAz8dpeiZAeOSfU9A1tImd+GXaGvDYANoP5kcks="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-webpack-fix.3_1554095952287_0.3581766672998692"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-webpack-fix.4":{"name":"treat","version":"1.0.0-webpack-fix.4","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"start":"npm run build && concurrently 'npm run watch' 'npm run serve'","test":"npm run build","build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'npm run build:module' 'npm run build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'","serve":"webpack-dev-server","build-example":"rm -rf dist && webpack","prepublishOnly":"npm run build","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.13.0"},"devDependencies":{"@babel/core":"^7.3.4","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","classnames":"^2.2.6","concurrently":"^4.1.0","html-webpack-plugin":"^3.2.0","mini-css-extract-plugin":"^0.5.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.4.1","webpack":"github:mattsjones/webpack#a5f5c4d0","webpack-cli":"^3.2.3","webpack-dev-server":"^3.2.1"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"64603ea37d79a95cca3b857496d77a5556de600f","readme":"# 🍬 treat\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **legacy browsers are supported.**\n\n---\n\n- [Requirements](#requirements)\n- [tl;dr (React version)](#tldr-react-version)\n- [Webpack Setup](#webpack-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [css](#css)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useClassNames](#useclassnames)\n - [useStyles](#usestyles)\n - [Low-Level API](#low-level-api)\n - [resolveClassNames](#resolveclassnames)\n - [resolveStyles](#resolvestyles)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**We provide first-class support for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ We also provide low level runtime APIs that could be integrated into other frameworks, if needed.\n\n## tl;dr (React version)\n\n> React is [not required](#low-level-api) to use treat—but it certainly makes it easy 😎\n\nFirst, create a theme. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, during render, provide the desired theme via context.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nDefine some [styles](#styles), using the theme.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen render themed classes via the [`useClassNames` Hook.](#useclassnames)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ className, ...restProps }) {\n return (\n \n );\n}\n```\n\n## Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration).\n\n```js\nconst TreatPlugin = require('treat/plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst TreatPlugin = require('treat/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```\n\nBy default, all class names are hashes. If you'd like more fine-grained control over the generated class names, you can create your own [custom interpolations](https://github.com/webpack/loader-utils#interpolatename).\n\n\n```js\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n localIdentName: '[name]-[local]_[hash:base64:5]',\n themeIdentName: '_[folder]-[name]_[hash:base64:5]'\n })\n ]\n};\n```\n\n### Webpack plugin options\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. | `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`css`](#css) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\n**The following styling APIs are only valid within treat files (e.g. `Button.treat.js`).**\n\n#### createTheme\n\nType: `function`\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\nIf you need to define selector-based styles, you can optionally pass a selector string as the first argument.\n\n```js\nimport { style } from 'treat';\n\nstyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n#### css\n\nType: `function`\n\nThe `css` function allows you to create multiple class names at once, returning an object that maps to the generated class names (similar to [CSS Modules](https://github.com/css-modules/css-modules)).\n\n```js\nimport { css } from 'treat';\n\nexport default css(theme => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n```\n\n### React API\n\n> Note: React is [not required](#low-level-api) to use treat!\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useClassNames`](#useclassnames) and [`useStyles`](#usestyles) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useClassNames\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves treat classes relative to the current theme, returning a single `className` string. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage).\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n return (\n \n );\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves an entire object of treat classes relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n const styles = useStyles(styleRefs);\n\n return (\n \n );\n}\n```\n\n### Low-Level API\n\n> Note: If you're using React, use our [React API](#react-api) instead.\n\n#### resolveClassNames\n\nType: `function`\n\nResolves class names relative to a given theme. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage), but with the desired theme as the first argument.\n\n```js\nimport { resolveClassNames } from 'treat';\n\nimport theme from './theme.treat.js';\nimport * as styles from './Button.treat.js';\n\nconst className = resolveClassNames(\n theme,\n styles.button,\n {\n [styles.primary]: isPrimary\n },\n ...etc\n);\n```\n\n#### resolveStyles\n\nType: `function`\n\nResolves an entire styles object relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styles from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst themedStyles = resolveStyles(styles, theme);\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-webpack-fix.4","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-+VWT8dS5ttIeYNNG5Kav5S6m0DE8cztR67OqsXOefQS8WMMR52Nxqg3NTzn5/eBaHWG3aihPNcPGf/rJ0YYfMA==","shasum":"25bb62b06f7593023edb92a17f739e0662a61519","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-webpack-fix.4.tgz","fileCount":37,"unpackedSize":61626,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJco/LeCRA9TVsSAnZWagAA9NAP/0VAQJ66pniGbPr19T5D\nKzrbEByN2sIlcUtv7H6utomkA7y/N7txBuiQEiZjb8ItDsRVl9t7KhR5wxkH\nGqYT3T9vB0t8m2MQG9DjqP1VN1/AIcOU9y3JJ2CQ3b2vJW7l7n6zD8qGfSBt\nhCYrKKzK/4QpNaXSr5Z54+4e+TQb1/zpWjzU03hUxgAspaVLb4iKT2bZjH4P\nN6loy83pFL9jgPmAgjurU0eWrtwT8oqL8jeyXIOcQao0Lf840pr+2zyIKdZU\nuD/EHGr9/3TCgmTqzzSUrQJ0n8FZ5L7vGtlKLBI79Wd2PWPxs34QpWga+L46\nGSiIE3SlNt80QiNJ/whrf2dDXM6Qx1jhDN0BuNSFqYAvPwXoWw1wtR/U1v8z\nTQutEw/W4SjiWEI6vbhvSKdLrcwieY/nkFPJVzWevAaOyN0eUMa8caJStgE/\nHyVSKNoQvFabsGGNpVCoCb9bwryai6xZOCx1BX6HzYBinkvqE8oqiUOIEn8w\nm8PiJRudwA6z4kZ+JGQQIPxOVbifsmJq42l2tDjkIeTV3U2WH5Joz3Oo3Wni\nppzf5wB4ElKvODE0io5paDV2fJiYDBJ9hMYDb5gLfxTGJqo/7sBeM6CkXJoc\nIbTK8KtOYtk0Ukd1xwpw4g8OEXGgrm+/ARjK7LCVBsQvqzfyj0gHA4gQ8+3J\ncx5E\r\n=LRKQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC+1168CGoXXbfnhQm0HNNwWNcIKTtS525ynL9QvArukAiEAmu0aVqkVIvccVgLO0wl6tTBAC1VZrd+KKWICXWjinVk="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-webpack-fix.4_1554248413727_0.9710632091298277"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-webpack-fix.5":{"name":"treat","version":"1.0.0-webpack-fix.5","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"start":"npm run build && concurrently 'npm run watch' 'npm run serve'","test":"npm run build","build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'npm run build:module' 'npm run build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'","serve":"webpack-dev-server","build-example":"rm -rf dist && webpack","prepublishOnly":"npm run build","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.13.0"},"devDependencies":{"@babel/core":"^7.3.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","classnames":"^2.2.6","concurrently":"^4.1.0","html-webpack-plugin":"^3.2.0","mini-css-extract-plugin":"^0.5.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.4.1","webpack":"github:webpack/webpack#51174616b30eddf87c8acd72432d3ea7bb18fa90","webpack-cli":"^3.2.3","webpack-dev-server":"^3.2.1"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"readme":"# 🍬 treat\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **legacy browsers are supported.**\n\n---\n\n- [Requirements](#requirements)\n- [tl;dr (React version)](#tldr-react-version)\n- [Webpack Setup](#webpack-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [css](#css)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useClassNames](#useclassnames)\n - [useStyles](#usestyles)\n - [Low-Level API](#low-level-api)\n - [resolveClassNames](#resolveclassnames)\n - [resolveStyles](#resolvestyles)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**We provide first-class support for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ We also provide low level runtime APIs that could be integrated into other frameworks, if needed.\n\n## tl;dr (React version)\n\n> React is [not required](#low-level-api) to use treat—but it certainly makes it easy 😎\n\nFirst, create a theme. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, during render, provide the desired theme via context.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nDefine some [styles](#styles), using the theme.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen render themed classes via the [`useClassNames` Hook.](#useclassnames)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ className, ...restProps }) {\n return (\n \n );\n}\n```\n\n## Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration).\n\n```js\nconst TreatPlugin = require('treat/plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst TreatPlugin = require('treat/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```\n\nBy default, all class names are hashes. If you'd like more fine-grained control over the generated class names, you can create your own [custom interpolations](https://github.com/webpack/loader-utils#interpolatename).\n\n\n```js\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n localIdentName: '[name]-[local]_[hash:base64:5]',\n themeIdentName: '_[folder]-[name]_[hash:base64:5]'\n })\n ]\n};\n```\n\n### Webpack plugin options\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. | `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`css`](#css) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\n**The following styling APIs are only valid within treat files (e.g. `Button.treat.js`).**\n\n#### createTheme\n\nType: `function`\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\nIf you need to define selector-based styles, you can optionally pass a selector string as the first argument.\n\n```js\nimport { style } from 'treat';\n\nstyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n#### css\n\nType: `function`\n\nThe `css` function allows you to create multiple class names at once, returning an object that maps to the generated class names (similar to [CSS Modules](https://github.com/css-modules/css-modules)).\n\n```js\nimport { css } from 'treat';\n\nexport default css(theme => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n```\n\n### React API\n\n> Note: React is [not required](#low-level-api) to use treat!\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useClassNames`](#useclassnames) and [`useStyles`](#usestyles) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useClassNames\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves treat classes relative to the current theme, returning a single `className` string. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage).\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n return (\n \n );\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves an entire object of treat classes relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n const styles = useStyles(styleRefs);\n\n return (\n \n );\n}\n```\n\n### Low-Level API\n\n> Note: If you're using React, use our [React API](#react-api) instead.\n\n#### resolveClassNames\n\nType: `function`\n\nResolves class names relative to a given theme. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage), but with the desired theme as the first argument.\n\n```js\nimport { resolveClassNames } from 'treat';\n\nimport theme from './theme.treat.js';\nimport * as styles from './Button.treat.js';\n\nconst className = resolveClassNames(\n theme,\n styles.button,\n {\n [styles.primary]: isPrimary\n },\n ...etc\n);\n```\n\n#### resolveStyles\n\nType: `function`\n\nResolves an entire styles object relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styles from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst themedStyles = resolveStyles(styles, theme);\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","gitHead":"b41796198abb0d79934cef2e0b530e91c18eab53","_id":"treat@1.0.0-webpack-fix.5","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-SMga3IfYbbb752sR4pMQbfSsY/usJN8dIw362v/1kRNjhiE0xIwyK1aNuLi2qVvAh7gCT2KQXRsGg2BXYpJHfQ==","shasum":"67c0eb88ef1ddb01b66bb897871ba9d8934c77af","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-webpack-fix.5.tgz","fileCount":37,"unpackedSize":66870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcrAaLCRA9TVsSAnZWagAAEWAQAJlPuygcq+gGlI/GMU6H\n6v1+vYzAd3tI/QgtwYAK9m+S1PTmsLtcl1Fg058FrOudogXnhECE2h5hCxeP\n0PL+gY0GGa7JMkyFTaxwUEXBqWxNKSEjHpy0dJzMDdjul8fN3A8mS9rAmzXz\n79b76buWzw6xHH6fBsWmUHyDUITcwkN/wHll9G58MFoqLSwczFYfAG6afTAe\nhyrEbX4mGwcuUm/VW+NV7197FjFnVYQq5bzl2TvrXNzP4Wz49SzwutSVtaCQ\np0yhgT2mI1BTlBllb9nU/Nu11d+lfJC9NurAA/WWy5BFtqEkF6C/kFB701RM\nEw3uZNV1zhqD0h7ikvyI2HlsNx4niOa1sto1GNYLG8rpvxTEbVUD84qfom3u\nphRdv6r66JqWahEC7KnFCFhSz4KW79YRUXeWE7PgUVdmugQQyhPPE2t23jLF\nNqDIhfmeU1eF+iEY9EHXtdTuPZBDHauHAu15FwOaKVVGMCWiU+otRRnKXtRx\nj5GbLdCeCeERfuspx3DbRhjMErnKEWyEywvtYuWuKWm2xTLHiSZJEk9J5XSB\nfyBrAbTQjy+9pVi+5yz0jjUbK4geIvJgalRZLH7P8T5F/aopGI10bG2cnGnX\nHKBivgIpIklXb/ZXv4qRSa8juAaii6a4tfuIb4kJULVBbst2Qpy7SIRSilCI\n1ekY\r\n=z/PF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDk0ToOpNztQbU/McFnqOaXxv2mEHAYzUu+pGSl3C+w7wIhAKRDaepzN7c8u34d4TtWgOlpHWDFukWGy074andipwrj"}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-webpack-fix.5_1554777738515_0.15453015621649446"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-webpack-fix.6":{"name":"treat","version":"1.0.0-webpack-fix.6","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"start":"npm run build && concurrently 'npm run watch' 'npm run serve'","pretest":"npm run build","test":"jest --runInBand","build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'npm run build:module' 'npm run build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'","serve":"webpack-dev-server","build-example":"rm -rf dist && webpack","prepublishOnly":"npm test","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.15.2"},"devDependencies":{"@babel/core":"^7.3.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","bent":"^1.4.0","classnames":"^2.2.6","concurrently":"^4.1.0","express":"^4.16.4","html-webpack-plugin":"^3.2.0","jest":"^24.7.1","jest-puppeteer":"^4.1.0","mime-types":"^2.1.22","mini-css-extract-plugin":"^0.6.0","prettier":"^1.16.4","puppeteer":"^1.14.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.4.1","webpack":"github:webpack/webpack#5117461","webpack-cli":"^3.2.3","webpack-dev-server":"3.2.1","webpack-merge":"^4.2.1"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"readme":"# 🍬 treat\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **legacy browsers are supported.**\n\n---\n\n- [Requirements](#requirements)\n- [tl;dr (React version)](#tldr-react-version)\n- [Webpack Setup](#webpack-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [css](#css)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useClassNames](#useclassnames)\n - [useStyles](#usestyles)\n - [Low-Level API](#low-level-api)\n - [resolveClassNames](#resolveclassnames)\n - [resolveStyles](#resolvestyles)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**We provide first-class support for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ We also provide low level runtime APIs that could be integrated into other frameworks, if needed.\n\n## tl;dr (React version)\n\n> React is [not required](#low-level-api) to use treat—but it certainly makes it easy 😎\n\nFirst, create a theme. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, during render, provide the desired theme via context.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nDefine some [styles](#styles), using the theme.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen render themed classes via the [`useClassNames` Hook.](#useclassnames)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ className, ...restProps }) {\n return (\n \n );\n}\n```\n\n## Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration).\n\n```js\nconst TreatPlugin = require('treat/plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst TreatPlugin = require('treat/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```\n\nBy default, all class names are hashes. If you'd like more fine-grained control over the generated class names, you can create your own [custom interpolations](https://github.com/webpack/loader-utils#interpolatename).\n\n\n```js\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n localIdentName: '[name]-[local]_[hash:base64:5]',\n themeIdentName: '_[folder]-[name]_[hash:base64:5]'\n })\n ]\n};\n```\n\n### Webpack plugin options\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. | `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`css`](#css) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\n**The following styling APIs are only valid within treat files (e.g. `Button.treat.js`).**\n\n#### createTheme\n\nType: `function`\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\nIf you need to define selector-based styles, you can optionally pass a selector string as the first argument.\n\n```js\nimport { style } from 'treat';\n\nstyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n#### css\n\nType: `function`\n\nThe `css` function allows you to create multiple class names at once, returning an object that maps to the generated class names (similar to [CSS Modules](https://github.com/css-modules/css-modules)).\n\n```js\nimport { css } from 'treat';\n\nexport default css(theme => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n```\n\n### React API\n\n> Note: React is [not required](#low-level-api) to use treat!\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useClassNames`](#useclassnames) and [`useStyles`](#usestyles) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useClassNames\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves treat classes relative to the current theme, returning a single `className` string. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage).\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n return (\n \n );\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves an entire object of treat classes relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n const styles = useStyles(styleRefs);\n\n return (\n \n );\n}\n```\n\n### Low-Level API\n\n> Note: If you're using React, use our [React API](#react-api) instead.\n\n#### resolveClassNames\n\nType: `function`\n\nResolves class names relative to a given theme. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage), but with the desired theme as the first argument.\n\n```js\nimport { resolveClassNames } from 'treat';\n\nimport theme from './theme.treat.js';\nimport * as styles from './Button.treat.js';\n\nconst className = resolveClassNames(\n theme,\n styles.button,\n {\n [styles.primary]: isPrimary\n },\n ...etc\n);\n```\n\n#### resolveStyles\n\nType: `function`\n\nResolves an entire styles object relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styles from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst themedStyles = resolveStyles(styles, theme);\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","gitHead":"15861217c25827f2200af7f4d1f4555b8bfdaaa8","_id":"treat@1.0.0-webpack-fix.6","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-GJ0Dk7MVOcE3KyggdbAOJYDbO0Zo7VnvXK8GLfyxm5TWOcwYV2u5EuHSoH9AEBeEoTVPYW6Rq1afMhEdRukY6w==","shasum":"30a0bfb1f81c49ee662be8bab7ebf4c5ecab5428","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-webpack-fix.6.tgz","fileCount":62,"unpackedSize":206404,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcr/aNCRA9TVsSAnZWagAA8kQP/2osorPZHLijZMG8/B3p\nnkp/+RyeIaPrJrqq3DM5ypmaMjfrROFvt2Urip9pini0B3RTIObBMwXiHALz\n5tD1UlaM4KmWtjHGzmHsWZ6999t6eBUB0cZrxkZDJgbMwaiegV/pIAyszC9u\nsfpSfPr/2Vi7SRdjNaw4b9nZ5m/AAaFBUHd6/ew84Mibp3QVNHVna5Mmh0D3\nHkjZwgNJKBFa9RCDbeK2S5kZ2/XkR0oNOXzEXm1JRH3yDGqqW1oACAXoXhEr\nG5UqvW/8L3dEvxFmE2dzytj4u9eLBAWIopvcBFJifNjuicPwe2XqEK0HA175\n7Ve5B8TX4dl4JWTfDsNnL5+buL6+ZpEKk+UZEmUXx6y5sHppSP01m6pIWwox\nt61hXGtjnPxjgTomKAgjeqysMiQDlBP7angx5VzcsHmsOzDh5Pgl5gHSXYHZ\nPZ9wEjgdai0eW94gFwecDQo7rV4abwYBGC+Dz+OiYHP2CSkXqzCyzyPcLFue\nUdKXLBgp973Gc2MG20LMGyOhli9lI2+zaj66RF1+UW4I8xL4j3sr5TT72xAy\nLiHVbezGHzKFWi0Ghad9qr9gpR2TsDHv2eRYWoSdbCaEeU0boBqDY2BRWlFC\ns0HuwFl0HjOGO/1fSSJqMSOihmcpDxClkDVydcbokgYU65p7tY6uPhqNivE+\nGQPP\r\n=kfNh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGpjL25DE1NYbZjXui1XwQ9kxQAOYqaAlgiFZqDIXqkgAiAGE6k/gDCJvW3fxR191cgYTsHcIwVX9KHOMSTtqJvofw=="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-webpack-fix.6_1555035788551_0.5009345978592079"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-alpha.12":{"name":"treat","version":"1.0.0-alpha.12","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"start":"npm run build && concurrently 'npm run watch' 'npm run serve'","pretest":"npm run build","test":"jest --runInBand","build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'npm run build:module' 'npm run build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'","serve":"webpack-dev-server","build-example":"rm -rf dist && webpack","prepublishOnly":"npm test","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.15.2"},"peerDependencies":{"webpack":"^4.30.0"},"devDependencies":{"@babel/core":"^7.3.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","bent":"^1.4.0","classnames":"^2.2.6","concurrently":"^4.1.0","express":"^4.16.4","html-webpack-plugin":"^3.2.0","jest":"^24.7.1","jest-puppeteer":"^4.1.0","mime-types":"^2.1.22","mini-css-extract-plugin":"^0.6.0","prettier":"^1.16.4","puppeteer":"^1.14.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.4.1","webpack":"^4.30.0","webpack-cli":"^3.2.3","webpack-dev-server":"3.2.1","webpack-merge":"^4.2.1"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"readme":"# 🍬 treat\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **legacy browsers are supported.**\n\n---\n\n- [Requirements](#requirements)\n- [tl;dr (React version)](#tldr-react-version)\n- [Webpack Setup](#webpack-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [css](#css)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useClassNames](#useclassnames)\n - [useStyles](#usestyles)\n - [Low-Level API](#low-level-api)\n - [resolveClassNames](#resolveclassnames)\n - [resolveStyles](#resolvestyles)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**We provide first-class support for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ We also provide low level runtime APIs that could be integrated into other frameworks, if needed.\n\n## tl;dr (React version)\n\n> React is [not required](#low-level-api) to use treat—but it certainly makes it easy 😎\n\nFirst, create a theme. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, during render, provide the desired theme via context.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nDefine some [styles](#styles), using the theme.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen render themed classes via the [`useClassNames` Hook.](#useclassnames)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ className, ...restProps }) {\n return (\n \n );\n}\n```\n\n## Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration).\n\n```js\nconst TreatPlugin = require('treat/plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst TreatPlugin = require('treat/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```\n\nBy default, all class names are hashes. If you'd like more fine-grained control over the generated class names, you can create your own [custom interpolations](https://github.com/webpack/loader-utils#interpolatename).\n\n\n```js\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n localIdentName: '[name]-[local]_[hash:base64:5]',\n themeIdentName: '_[folder]-[name]_[hash:base64:5]'\n })\n ]\n};\n```\n\n### Webpack plugin options\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. | `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`css`](#css) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\n**The following styling APIs are only valid within treat files (e.g. `Button.treat.js`).**\n\n#### createTheme\n\nType: `function`\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\nIf you need to define selector-based styles, you can optionally pass a selector string as the first argument.\n\n```js\nimport { style } from 'treat';\n\nstyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n#### css\n\nType: `function`\n\nThe `css` function allows you to create multiple class names at once, returning an object that maps to the generated class names (similar to [CSS Modules](https://github.com/css-modules/css-modules)).\n\n```js\nimport { css } from 'treat';\n\nexport default css(theme => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n```\n\n### React API\n\n> Note: React is [not required](#low-level-api) to use treat!\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useClassNames`](#useclassnames) and [`useStyles`](#usestyles) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useClassNames\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves treat classes relative to the current theme, returning a single `className` string. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage).\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n return (\n \n );\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves an entire object of treat classes relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n const styles = useStyles(styleRefs);\n\n return (\n \n );\n}\n```\n\n### Low-Level API\n\n> Note: If you're using React, use our [React API](#react-api) instead.\n\n#### resolveClassNames\n\nType: `function`\n\nResolves class names relative to a given theme. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage), but with the desired theme as the first argument.\n\n```js\nimport { resolveClassNames } from 'treat';\n\nimport theme from './theme.treat.js';\nimport * as styles from './Button.treat.js';\n\nconst className = resolveClassNames(\n theme,\n styles.button,\n {\n [styles.primary]: isPrimary\n },\n ...etc\n);\n```\n\n#### resolveStyles\n\nType: `function`\n\nResolves an entire styles object relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styles from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst themedStyles = resolveStyles(styles, theme);\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","gitHead":"fb5d3dd1e89f74ce22f980195e1b868761c24157","_id":"treat@1.0.0-alpha.12","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-of5ygqLtBJBXpw7SQbnAz2aYA3RpWbhYwUloWS8XWbH1fxjAhw8NXMlf1mE8TIhybGC7XrsKwleR+5yR4X1Wbg==","shasum":"30d705259ced0f8f60f2d8aa9a2615a87fa1b7c2","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-alpha.12.tgz","fileCount":62,"unpackedSize":206437,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcsWK2CRA9TVsSAnZWagAANgEP/1g9gqmUXSdD1sFzbtxY\n+il/RR4CizMJBvZCX3dirlBATkYicisgvRFlJGCO62xd18k8Z2AfBISnLLuI\nxwiHy4NUiQnpSWafU8gKL9O+E975lddp9m5gxwmODo4zAbvZ1UCNx2tTerXi\nZKD+3FouRZHJeFIkSELjjH/5LIiCyyMu0unvhzbf8UQxF44QsBPP/gUkGijO\nBdCZLJjw5+Ea5t+FxPIjAt7M8UoJAVFDUjZ7ukqXFgpA4g+Q7+kliuhTtdkV\n+OsWqqsvJpPS28QHSzAGZYDEQ2CjM/ALbDKIg/IJItj3HZ7NIrp/gz2hUK2I\nyFPMRxuhwp1wp7Bgu6Uu5XLn3K3X7XudoFG/WWjQIazstILPIfcBBxvBdnNs\nwKv7t3Zpf5NWQafanBq29wVJtmWfo+5/23/jklqX3Gb8YVIjdXYvbXLqn2id\nrvZFLZe3o7pLiyx6c3Zbh7vFrPb9WN3ifoEGZ0mdS/tID4gIv6KTOTxlMlff\nIy3Xqg71t1FiZnaA54S1rrI3PjpH1ytBZ3BT11dOI1NmAqaBNA2eWD81W74H\nVNinBQReet8Nzk3MAWYHVZKMs0a4KDWV/VyQuXnkCt1cIUg2Rd3+HQMDNQcK\nasXq/G/hUu8s+31dqbsTVZttIZ8DqFdLbK5408+15SUzkD7GNJ6AQg5fm8Gn\nh+Qj\r\n=niUK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZ8ia+dgMrcILkJgr40cwUOIEyg7StfkFfFVWQHmSJDgIgKvHa7fh3u2URAL8pfHb4EpUFd38Wfy///gRIy3QLC5o="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-alpha.12_1555129013978_0.8027289578472296"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-alpha.13":{"name":"treat","version":"1.0.0-alpha.13","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"start":"npm run build && concurrently 'npm run watch' 'npm run serve'","pretest":"npm run build","test":"jest --runInBand","build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'npm run build:module' 'npm run build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'","serve":"webpack-dev-server","build-example":"rm -rf dist && webpack","prepublishOnly":"npm test","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.15.2"},"peerDependencies":{"webpack":"^4.30.0"},"devDependencies":{"@babel/core":"^7.3.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","bent":"^1.4.0","classnames":"^2.2.6","concurrently":"^4.1.0","express":"^4.16.4","html-webpack-plugin":"^3.2.0","jest":"^24.7.1","jest-puppeteer":"^4.1.0","mime-types":"^2.1.22","mini-css-extract-plugin":"^0.6.0","prettier":"^1.16.4","puppeteer":"^1.14.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.4.1","webpack":"^4.30.0","webpack-cli":"^3.2.3","webpack-dev-server":"3.2.1","webpack-merge":"^4.2.1"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"51f1b8fd0edda6216c43f0fa8cbac8a30c4554aa","readme":"# 🍬 treat\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **legacy browsers are supported.**\n\n---\n\n- [Requirements](#requirements)\n- [tl;dr (React version)](#tldr-react-version)\n- [Webpack Setup](#webpack-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [css](#css)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useClassNames](#useclassnames)\n - [useStyles](#usestyles)\n - [Low-Level API](#low-level-api)\n - [resolveClassNames](#resolveclassnames)\n - [resolveStyles](#resolvestyles)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**We provide first-class support for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ We also provide low level runtime APIs that could be integrated into other frameworks, if needed.\n\n## tl;dr (React version)\n\n> React is [not required](#low-level-api) to use treat—but it certainly makes it easy 😎\n\nFirst, create a theme. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, during render, provide the desired theme via context.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nDefine some [styles](#styles), using the theme.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen render themed classes via the [`useClassNames` Hook.](#useclassnames)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ className, ...restProps }) {\n return (\n \n );\n}\n```\n\n## Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration).\n\n```js\nconst TreatPlugin = require('treat/plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst TreatPlugin = require('treat/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```\n\nBy default, all class names are hashes. If you'd like more fine-grained control over the generated class names, you can create your own [custom interpolations](https://github.com/webpack/loader-utils#interpolatename).\n\n\n```js\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n localIdentName: '[name]-[local]_[hash:base64:5]',\n themeIdentName: '_[folder]-[name]_[hash:base64:5]'\n })\n ]\n};\n```\n\n### Webpack plugin options\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. | `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`css`](#css) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\n**The following styling APIs are only valid within treat files (e.g. `Button.treat.js`).**\n\n#### createTheme\n\nType: `function`\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\nIf you need to define selector-based styles, you can optionally pass a selector string as the first argument.\n\n```js\nimport { style } from 'treat';\n\nstyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n#### css\n\nType: `function`\n\nThe `css` function allows you to create multiple class names at once, returning an object that maps to the generated class names (similar to [CSS Modules](https://github.com/css-modules/css-modules)).\n\n```js\nimport { css } from 'treat';\n\nexport default css(theme => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n```\n\n### React API\n\n> Note: React is [not required](#low-level-api) to use treat!\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useClassNames`](#useclassnames) and [`useStyles`](#usestyles) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useClassNames\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves treat classes relative to the current theme, returning a single `className` string. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage).\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n return (\n \n );\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves an entire object of treat classes relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n const styles = useStyles(styleRefs);\n\n return (\n \n );\n}\n```\n\n### Low-Level API\n\n> Note: If you're using React, use our [React API](#react-api) instead.\n\n#### resolveClassNames\n\nType: `function`\n\nResolves class names relative to a given theme. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage), but with the desired theme as the first argument.\n\n```js\nimport { resolveClassNames } from 'treat';\n\nimport theme from './theme.treat.js';\nimport * as styles from './Button.treat.js';\n\nconst className = resolveClassNames(\n theme,\n styles.button,\n {\n [styles.primary]: isPrimary\n },\n ...etc\n);\n```\n\n#### resolveStyles\n\nType: `function`\n\nResolves an entire styles object relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styles from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst themedStyles = resolveStyles(styles, theme);\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-alpha.13","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-JHZoxQCPUvzeYCdmAKesrnT2vSc4fGxGc6vOVE+sEx9S3VukhR49VjZoGGQxXNxZThTTMgUjsCNuD8osuiKesg==","shasum":"f68d74e3197900f9eb255762bf9343370787f83e","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-alpha.13.tgz","fileCount":63,"unpackedSize":209387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcuBGbCRA9TVsSAnZWagAAG+MP/1Ox3JnJt+epvARX46fM\n7CSdPusk4NW7SmWyL9GVQwuysQxwp5K2US+kWZP1GoZQMHhpvRQFpRcb1jMJ\nWtmd0RcSSDE8bMAykiZuwgDWxKVL9Kwv/ExYVW8hMbe3zRAsIHLVdYLYtw2o\n4aRyN2ExvHBhqLQaioxtM0IxQPNwk+mUSUtb+vfXSTNl4MZTf0ZFn/TPOIl1\nFrOwTZtXsy6OE+3Uq3Fy3qIaX7rBrK9hF1TH7SqJDw7vXKsL404mxDlgAR5A\nePVqWZdR3Vnwku60Ok8mhCy33kZ9a2en1lZw/9G6scGoscog3SzqaqS+m6Vg\nzeFSRf5xV4XJM4lqqZlF07lSjyjtawRqZNuKnKpJbfELaPBSX9LNJ8wqsjJV\nu14FuCkJcZHjUIQPifFDyo84ZHUYbK68A/O6kYl6OZY2smeEWUz1gRVON+k5\nOs/Voyd7ipLDPX/nq0ovjOxcLhv2s6pHMso/omZyJaSzBCRSGuE8RcE4djOH\nf0Ph3lr/HLtpFikAhp+QUpcDLShIuuo7JLIDzQk3C66IgL6pmySQG5jOuTvZ\nJHeKX/H1PKHqpGJyMo71Am0MIESXSSmnO3P+TXgnPDmVXkTbiEya8A7bV9Xu\n3X25CYpccuZ48tEEmXmKyTtgFc5e2EwS/3Q2OW35eE0Ej1M6Oex4LgZuAfze\nIry1\r\n=Q/qe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9UoLqPJ5bX1xGhSCNkNQACHulzTXgLnkjWCD/KgDnhgIgOnPyk4tO1AbpebLayfACf2eZhbG/CuFXolmAL4YE1QI="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-alpha.13_1555567002834_0.16418111020380777"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-alpha.14":{"name":"treat","version":"1.0.0-alpha.14","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"start":"npm run build && concurrently 'npm run watch' 'npm run serve'","pretest":"npm run build","test":"jest --runInBand","build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'npm run build:module' 'npm run build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'","serve":"webpack-dev-server","build-example":"rm -rf dist && webpack","prepublishOnly":"npm test","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.15.2"},"peerDependencies":{"webpack":"^4.30.0"},"devDependencies":{"@babel/core":"^7.3.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","bent":"^1.4.0","classnames":"^2.2.6","concurrently":"^4.1.0","express":"^4.16.4","html-webpack-plugin":"^3.2.0","jest":"^24.7.1","jest-puppeteer":"^4.1.0","mime-types":"^2.1.22","mini-css-extract-plugin":"^0.6.0","prettier":"^1.16.4","puppeteer":"^1.14.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.4.1","webpack":"^4.30.0","webpack-cli":"^3.2.3","webpack-dev-server":"3.2.1","webpack-merge":"^4.2.1"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"readme":"# 🍬 treat\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **legacy browsers are supported.**\n\n---\n\n- [Requirements](#requirements)\n- [tl;dr (React version)](#tldr-react-version)\n- [Webpack Setup](#webpack-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [css](#css)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useClassNames](#useclassnames)\n - [useStyles](#usestyles)\n - [Low-Level API](#low-level-api)\n - [resolveClassNames](#resolveclassnames)\n - [resolveStyles](#resolvestyles)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**We provide first-class support for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ We also provide low level runtime APIs that could be integrated into other frameworks, if needed.\n\n## tl;dr (React version)\n\n> React is [not required](#low-level-api) to use treat—but it certainly makes it easy 😎\n\nFirst, create a theme. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, during render, provide the desired theme via context.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nDefine some [styles](#styles), using the theme.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen render themed classes via the [`useClassNames` Hook.](#useclassnames)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ className, ...restProps }) {\n return (\n \n );\n}\n```\n\n## Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration).\n\n```js\nconst TreatPlugin = require('treat/plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst TreatPlugin = require('treat/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```\n\nBy default, all class names are hashes. If you'd like more fine-grained control over the generated class names, you can create your own [custom interpolations](https://github.com/webpack/loader-utils#interpolatename).\n\n\n```js\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n localIdentName: '[name]-[local]_[hash:base64:5]',\n themeIdentName: '_[folder]-[name]_[hash:base64:5]'\n })\n ]\n};\n```\n\n### Webpack plugin options\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. | `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`css`](#css) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\n**The following styling APIs are only valid within treat files (e.g. `Button.treat.js`).**\n\n#### createTheme\n\nType: `function`\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\nIf you need to define selector-based styles, you can optionally pass a selector string as the first argument.\n\n```js\nimport { style } from 'treat';\n\nstyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n#### css\n\nType: `function`\n\nThe `css` function allows you to create multiple class names at once, returning an object that maps to the generated class names (similar to [CSS Modules](https://github.com/css-modules/css-modules)).\n\n```js\nimport { css } from 'treat';\n\nexport default css(theme => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n```\n\n### React API\n\n> Note: React is [not required](#low-level-api) to use treat!\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useClassNames`](#useclassnames) and [`useStyles`](#usestyles) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useClassNames\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves treat classes relative to the current theme, returning a single `className` string. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage).\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n return (\n \n );\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves an entire object of treat classes relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n const styles = useStyles(styleRefs);\n\n return (\n \n );\n}\n```\n\n### Low-Level API\n\n> Note: If you're using React, use our [React API](#react-api) instead.\n\n#### resolveClassNames\n\nType: `function`\n\nResolves class names relative to a given theme. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage), but with the desired theme as the first argument.\n\n```js\nimport { resolveClassNames } from 'treat';\n\nimport theme from './theme.treat.js';\nimport * as styles from './Button.treat.js';\n\nconst className = resolveClassNames(\n theme,\n styles.button,\n {\n [styles.primary]: isPrimary\n },\n ...etc\n);\n```\n\n#### resolveStyles\n\nType: `function`\n\nResolves an entire styles object relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styles from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst themedStyles = resolveStyles(styles, theme);\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","gitHead":"a068f2222e6702eea82f166d4472704adf207ea8","_id":"treat@1.0.0-alpha.14","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-gBWxjOTbKEJlM/Gyr7aUhGbpye5pqJeIB0uYPVI/+sTTf2uSbZ6MZr/LtxQhAXh3R2OD2Y7bu18FiEnzxiIM6g==","shasum":"ba47a8a2bff06da0fd4afc443054069d1c02faae","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-alpha.14.tgz","fileCount":69,"unpackedSize":217470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcwnETCRA9TVsSAnZWagAAE8cP/24oJf0YPWGmVtvbmZ64\nSt7a0bXpSUVRPH4usLGSBfHi8gVAsiNTX2w+ADh4C3kvVxKgx95NEcUzLPIy\nQeMYoa+KarzRpFGyH8TIb21iQmzVpPU1zXPO3ru8v+MnkvzNpSncH3DY20E8\nw+tlk1WGJb2u41+moq14btcog3kI8s3aiHFeAOChdWPKs9DTgs46qCHjit3D\nbFcl3MKFujSTPqcC8577Q1MeDJeaxhbVKrAdyUZx7w2uUFpmrgRnzJMtNNzz\n2GPUenQAIXv/O3oUHuQ6jmnYl2Y9H30sXmHINnQEHgVOD5ARgJPRIRNPpVIk\nqYhtANuKQ9noOgZyfouDQq/CjnXNwRx9z9fQAtHBQdVQVtILzbjBJX0RG0Rb\n9AxjV0aDYPfnGjWDtWTbutaNbRDy4a7iGltZvhQiL6/5GeUzMbDmQTD4SZfR\nlyUL2+BFW5PZzhvBps9ZMLKtsvDZjTRoRljwNQb7s7W6d3uPRg0Ljmbwx9dC\nqoHkSqn76/ewDAYeZyzi77M7QUF4Mx2dvFnz2FLSyH+HEto0f9stn/UNRvOd\nmQEitHIVlCxaw2e0gbmvooMkrxnAxklRbS1oKz5VfxyVpLq967eCCxOaagfl\neuohYuWfna0oEvLDZScKYaHTKYr//mNyUuQ1uB2fYc4dNkiUWNDC+DLSFcOR\nn/s2\r\n=loPu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1qqoZ416weFcV8W6E3kDwElH0IHt4ARp0FyiHBtURlQIhAPpTtSTqDLz7DU8M9OVaQft6KHcB1LFxUj2N5lYsZIq0"}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-alpha.14_1556246802463_0.528684697112453"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-alpha.15":{"name":"treat","version":"1.0.0-alpha.15","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"start":"npm run build && concurrently 'npm run watch' 'npm run serve'","pretest":"npm run build","test":"jest --runInBand","build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'npm run build:module' 'npm run build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'","serve":"webpack-dev-server","build-example":"rm -rf dist && webpack","prepublishOnly":"npm test","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.15.2"},"peerDependencies":{"webpack":"^4.30.0"},"devDependencies":{"@babel/core":"^7.3.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","bent":"^1.4.0","classnames":"^2.2.6","concurrently":"^4.1.0","express":"^4.16.4","html-webpack-plugin":"^3.2.0","jest":"^24.7.1","jest-puppeteer":"^4.1.0","mime-types":"^2.1.22","mini-css-extract-plugin":"^0.6.0","prettier":"^1.16.4","puppeteer":"^1.14.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.4.1","webpack":"^4.30.0","webpack-cli":"^3.2.3","webpack-dev-server":"3.2.1","webpack-merge":"^4.2.1"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"readme":"# 🍬 treat\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **legacy browsers are supported.**\n\n---\n\n- [Requirements](#requirements)\n- [tl;dr (React version)](#tldr-react-version)\n- [Webpack Setup](#webpack-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [css](#css)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useClassNames](#useclassnames)\n - [useStyles](#usestyles)\n - [Low-Level API](#low-level-api)\n - [resolveClassNames](#resolveclassnames)\n - [resolveStyles](#resolvestyles)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**We provide first-class support for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ We also provide low level runtime APIs that could be integrated into other frameworks, if needed.\n\n## tl;dr (React version)\n\n> React is [not required](#low-level-api) to use treat—but it certainly makes it easy 😎\n\nFirst, create a theme. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, during render, provide the desired theme via context.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nDefine some [styles](#styles), using the theme.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen render themed classes via the [`useClassNames` Hook.](#useclassnames)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ className, ...restProps }) {\n return (\n \n );\n}\n```\n\n## Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration).\n\n```js\nconst TreatPlugin = require('treat/plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst TreatPlugin = require('treat/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```\n\nBy default, all class names are hashes. If you'd like more fine-grained control over the generated class names, you can create your own [custom interpolations](https://github.com/webpack/loader-utils#interpolatename).\n\n\n```js\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n localIdentName: '[name]-[local]_[hash:base64:5]',\n themeIdentName: '_[folder]-[name]_[hash:base64:5]'\n })\n ]\n};\n```\n\n### Webpack plugin options\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. | `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`css`](#css) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\n**The following styling APIs are only valid within treat files (e.g. `Button.treat.js`).**\n\n#### createTheme\n\nType: `function`\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\nIf you need to define selector-based styles, you can optionally pass a selector string as the first argument.\n\n```js\nimport { style } from 'treat';\n\nstyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n#### css\n\nType: `function`\n\nThe `css` function allows you to create multiple class names at once, returning an object that maps to the generated class names (similar to [CSS Modules](https://github.com/css-modules/css-modules)).\n\n```js\nimport { css } from 'treat';\n\nexport default css(theme => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n```\n\n### React API\n\n> Note: React is [not required](#low-level-api) to use treat!\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useClassNames`](#useclassnames) and [`useStyles`](#usestyles) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useClassNames\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves treat classes relative to the current theme, returning a single `className` string. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage).\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n return (\n \n );\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves an entire object of treat classes relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n const styles = useStyles(styleRefs);\n\n return (\n \n );\n}\n```\n\n### Low-Level API\n\n> Note: If you're using React, use our [React API](#react-api) instead.\n\n#### resolveClassNames\n\nType: `function`\n\nResolves class names relative to a given theme. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage), but with the desired theme as the first argument.\n\n```js\nimport { resolveClassNames } from 'treat';\n\nimport theme from './theme.treat.js';\nimport * as styles from './Button.treat.js';\n\nconst className = resolveClassNames(\n theme,\n styles.button,\n {\n [styles.primary]: isPrimary\n },\n ...etc\n);\n```\n\n#### resolveStyles\n\nType: `function`\n\nResolves an entire styles object relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styles from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst themedStyles = resolveStyles(styles, theme);\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","gitHead":"b80df63a828a676e3a58577074039ce0e9ad0cca","_id":"treat@1.0.0-alpha.15","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-Pmvh3rD2iURj85Ht44f9uYE5sd3iIQEuU9jRbZIiJ9FGEHp7aN+RkjGVkTpHHuSgRyPT3pCq7aKq7cvRQL+3Fw==","shasum":"11f4b8116c0dd1f47ab5f7321186c9d6d212d45c","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-alpha.15.tgz","fileCount":69,"unpackedSize":219179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcwnZ0CRA9TVsSAnZWagAAAp8P/R0dq9OhqHrEUsfEvQn8\ntTJ/YYYyhrHjTT393af382Zvh7lTzVuMWLh2yM+d0/uqtx+eg68rzcSqB0q2\nWSB8PkadNwb/AgMdZvl9PPQ5MyULY2a6/96NH8aypXoVLU4PxrerFWWCx0nh\nKgvqNf1O1F5mY++rTl0DhDU9/eYEdAKe9zRT6OntDRzp52/YCIm+BrNVq7Hm\neFBtsjbGBM0LlsPMVQI2ZDLbljF2D6FSIZmY+ifTzF6oG5/dajwN+dmQXdac\notREweYYISJpFjIbCFWONXKoeKzYtD+cV251NKSB8OVOfamBnUrHZ0lra52I\nI0GWlJqloWHaDBz60mtCCV50vd+z7xPp9wzhL+iw3CMBQUpPb88ZUmcczQCk\nWHeIrz/q5J2tK0VdgbuUrHm85oiotDDbGNZuDzsQfIQ9HOEtJ1UrJkV9MD2l\nGILB/8PffI6UT6B+sjryfgzxTmB6u3QGxgLJHK/dr8REgtHQLsWRJfBt+GpX\noRaPlwmMdPV5mwEhtsRs7Za+LQa/AQpOHahvMjYoujyJuli45LY4neG+B+eY\n94UYe9TxokGARUcejy9n6WHRu68NcAhWNoiVC5tvKDWpg7GgFRi58KDOeYzv\nUxREF4F6ChQ2ZLuCZzb86adV36CTWCx4+utczHUe1nRvkkmHvGKEc0st3kVV\nrVRH\r\n=+P8W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCw/rqxJKVnsy4vnv1nsX/0mu+hSGPYituI+GYpBaPmfQIhANNA8/l7mEBLCpHWRyFRw7IefEivLuuWIuJKtHdAqFyL"}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-alpha.15_1556248179709_0.9152091751224549"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-alpha.16":{"name":"treat","version":"1.0.0-alpha.16","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"start":"npm run build && concurrently 'npm run watch' 'npm run serve'","pretest":"npm run build","test":"jest --runInBand","build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'npm run build:module' 'npm run build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'","serve":"webpack-dev-server","build-example":"rm -rf dist && webpack","prepublishOnly":"npm test","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.15.2"},"peerDependencies":{"webpack":"^4.30.0"},"devDependencies":{"@babel/core":"^7.3.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","bent":"^1.4.0","classnames":"^2.2.6","concurrently":"^4.1.0","express":"^4.16.4","html-webpack-plugin":"^3.2.0","jest":"^24.7.1","jest-puppeteer":"^4.1.0","mime-types":"^2.1.22","mini-css-extract-plugin":"^0.6.0","prettier":"^1.16.4","puppeteer":"^1.14.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.4.1","webpack":"^4.30.0","webpack-cli":"^3.2.3","webpack-dev-server":"3.2.1","webpack-merge":"^4.2.1"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"readme":"# 🍬 treat\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **legacy browsers are supported.**\n\n---\n\n- [Requirements](#requirements)\n- [tl;dr (React version)](#tldr-react-version)\n- [Webpack Setup](#webpack-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [css](#css)\n - [globalStyle](#globalstyle)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useClassNames](#useclassnames)\n - [useStyles](#usestyles)\n - [Low-Level API](#low-level-api)\n - [resolveClassNames](#resolveclassnames)\n - [resolveStyles](#resolvestyles)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**We provide first-class support for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ We also provide low level runtime APIs that could be integrated into other frameworks, if needed.\n\n## tl;dr (React version)\n\n> React is [not required](#low-level-api) to use treat—but it certainly makes it easy 😎\n\nFirst, create a theme. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, during render, provide the desired theme via context.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nDefine some [styles](#styles), using the theme.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen render themed classes via the [`useClassNames` Hook.](#useclassnames)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ className, ...restProps }) {\n return (\n \n );\n}\n```\n\n## Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration).\n\n```js\nconst TreatPlugin = require('treat/plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst TreatPlugin = require('treat/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```\n\nBy default, all class names are hashes. If you'd like more fine-grained control over the generated class names, you can create your own [custom interpolations](https://github.com/webpack/loader-utils#interpolatename).\n\n\n```js\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n localIdentName: '[name]-[local]_[hash:base64:5]',\n themeIdentName: '_[folder]-[name]_[hash:base64:5]'\n })\n ]\n};\n```\n\n`themeIdentName` can also be a function that receives your theme as a parameter. This allows you to minimize the characters in your theme ident for production.\n\n> Warning: Ensure all themes have a unique ident value.\n\n\n```js\nconst themes = ['light', 'dark'];\n\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n themeIdentName: (theme) => themes.indexOf(theme.name)\n })\n ]\n};\n```\n\n### Webpack plugin options\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`css`](#css) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\n**The following styling APIs are only valid within treat files (e.g. `Button.treat.js`).**\n\n#### createTheme\n\nType: `function`\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### css\n\nType: `function`\n\nThe `css` function allows you to create multiple class names at once, returning an object that maps to the generated class names (similar to [CSS Modules](https://github.com/css-modules/css-modules)).\n\n```js\nimport { css } from 'treat';\n\nexport default css(theme => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### React API\n\n> Note: React is [not required](#low-level-api) to use treat!\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useClassNames`](#useclassnames) and [`useStyles`](#usestyles) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useClassNames\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves treat classes relative to the current theme, returning a single `className` string. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage).\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n return (\n \n );\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves an entire object of treat classes relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n const styles = useStyles(styleRefs);\n\n return (\n \n );\n}\n```\n\n### Low-Level API\n\n> Note: If you're using React, use our [React API](#react-api) instead.\n\n#### resolveClassNames\n\nType: `function`\n\nResolves class names relative to a given theme. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage), but with the desired theme as the first argument.\n\n```js\nimport { resolveClassNames } from 'treat';\n\nimport theme from './theme.treat.js';\nimport * as styles from './Button.treat.js';\n\nconst className = resolveClassNames(\n theme,\n styles.button,\n {\n [styles.primary]: isPrimary\n },\n ...etc\n);\n```\n\n#### resolveStyles\n\nType: `function`\n\nResolves an entire styles object relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styles from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst themedStyles = resolveStyles(styles, theme);\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","gitHead":"6444c79beffcdbf5cad89ee38a5aa1a27863801c","_id":"treat@1.0.0-alpha.16","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-ki1ucJac2e1GnhwbUNcyiPYhXPSheqnEOqUwXTrTMgDRyg0UY4w2eiaPB/9UhNP9TDYWeT9oGddsKAY/EdCLOA==","shasum":"a69b712c396e3832b6ac05e6d0d0c205ee308954","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-alpha.16.tgz","fileCount":42,"unpackedSize":194886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcz8JrCRA9TVsSAnZWagAA9DAP/RFSiposNU7aJQeK8D3p\nvqaY1a+t6dXpn2zyNFGn8jwwngdiKHLonBDsg/pBfbJLKiR1etH1k+1CsTg3\nB0suy2VN9p0H0eK7fpHcl4SeBVyOYrolrT92wH6zphreMUPOLax+VD41YqOl\n/eywulk9q9+Qo5BJ4hM2fS00xgdYJAdUE7KsQgG7Q8nBsE1QzvsLUGnZwYCx\nNELXBJFhwDjKS81TpHKfig6IXH4l3ovheAKwlBdIAVRtbOF6Vk36TiTDkmq7\namipw1BKPXCKsjCGtNIMPzrR/j+h//n666Cz7r8XtV06M9a0X9iqlCa2i+M0\npNaXM/2veQ/BgmvoHDwTva10IqPYdvtii+QNFRsNTjG6T5xCgBxNZyjcXAvC\njKTTuOlexSj+XB2hUXipKcXmhn4NwFewhQaLfvb4Z65BmWZpAenQOmq3ZbLK\ngN24nvAGpngZ/nF+kEB8aL+ooLqIOMIaZnwA566dyRy7SgrIRZis8HSNgesq\noR3Fckend/LOd0AKGv/pYoPiKo8QQaGNPMPoUN8liCaqNAHirCOX+rQplgyZ\ng3zts3b+VhXDjkom4bZbOtTdDZKxVIapm1u2eyNWlVPgoLWpDZoM4qNp7sDB\nLHgvdpIq3nLteqYM6KOxAkn/yBYqMQHsJdn58nD+shB1yVVzljjMVV0kam8i\nfG0U\r\n=SP1Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICphdeAG/Vvdo8wXsxpqzDd8+lwqd7lOfWQSRMrLQPEUAiBlg4oo8NmM3iN9otAKLMZFylet90oeUT28THEHKeEnGA=="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-alpha.16_1557119594451_0.18279672776902522"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-alpha.17":{"name":"treat","version":"1.0.0-alpha.17","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"start":"npm run build && concurrently 'npm run watch' 'npm run serve'","pretest":"npm run build","test":"jest --runInBand","build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'npm run build:module' 'npm run build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'","serve":"webpack-dev-server","build-example":"rm -rf dist && webpack","prepublishOnly":"npm test","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.15.2"},"peerDependencies":{"webpack":"^4.30.0"},"devDependencies":{"@babel/core":"^7.3.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","babel-loader":"^8.0.5","bent":"^1.4.0","classnames":"^2.2.6","concurrently":"^4.1.0","express":"^4.16.4","html-webpack-plugin":"^3.2.0","jest":"^24.7.1","jest-puppeteer":"^4.1.0","mime-types":"^2.1.22","mini-css-extract-plugin":"^0.6.0","prettier":"^1.16.4","puppeteer":"^1.14.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.4.1","webpack":"^4.30.0","webpack-cli":"^3.2.3","webpack-dev-server":"3.2.1","webpack-merge":"^4.2.1"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"readme":"# 🍬 treat\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **legacy browsers are supported.**\n\n---\n\n- [Requirements](#requirements)\n- [tl;dr (React version)](#tldr-react-version)\n- [Webpack Setup](#webpack-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [css](#css)\n - [globalStyle](#globalstyle)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useClassNames](#useclassnames)\n - [useStyles](#usestyles)\n - [Low-Level API](#low-level-api)\n - [resolveClassNames](#resolveclassnames)\n - [resolveStyles](#resolvestyles)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**We provide first-class support for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ We also provide low level runtime APIs that could be integrated into other frameworks, if needed.\n\n## tl;dr (React version)\n\n> React is [not required](#low-level-api) to use treat—but it certainly makes it easy 😎\n\nFirst, create a theme. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, during render, provide the desired theme via context.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nDefine some [styles](#styles), using the theme.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen render themed classes via the [`useClassNames` Hook.](#useclassnames)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ className, ...restProps }) {\n return (\n \n );\n}\n```\n\n## Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration).\n\n```js\nconst TreatPlugin = require('treat/plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst TreatPlugin = require('treat/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```\n\nBy default, all class names are hashes. If you'd like more fine-grained control over the generated class names, you can create your own [custom interpolations](https://github.com/webpack/loader-utils#interpolatename).\n\n\n```js\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n localIdentName: '[name]-[local]_[hash:base64:5]',\n themeIdentName: '_[folder]-[name]_[hash:base64:5]'\n })\n ]\n};\n```\n\n`themeIdentName` can also be a function that receives your theme as a parameter. This allows you to minimize the characters in your theme ident for production.\n\n> Warning: Ensure all themes have a unique ident value.\n\n\n```js\nconst themes = ['light', 'dark'];\n\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n themeIdentName: (theme) => themes.indexOf(theme.name)\n })\n ]\n};\n```\n\n### Webpack plugin options\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`css`](#css) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\n**The following styling APIs are only valid within treat files (e.g. `Button.treat.js`).**\n\n#### createTheme\n\nType: `function`\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### css\n\nType: `function`\n\nThe `css` function allows you to create multiple class names at once, returning an object that maps to the generated class names (similar to [CSS Modules](https://github.com/css-modules/css-modules)).\n\n```js\nimport { css } from 'treat';\n\nexport default css(theme => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### React API\n\n> Note: React is [not required](#low-level-api) to use treat!\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useClassNames`](#useclassnames) and [`useStyles`](#usestyles) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useClassNames\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves treat classes relative to the current theme, returning a single `className` string. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage).\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n return (\n \n );\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves an entire object of treat classes relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n const styles = useStyles(styleRefs);\n\n return (\n \n );\n}\n```\n\n### Low-Level API\n\n> Note: If you're using React, use our [React API](#react-api) instead.\n\n#### resolveClassNames\n\nType: `function`\n\nResolves class names relative to a given theme. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage), but with the desired theme as the first argument.\n\n```js\nimport { resolveClassNames } from 'treat';\n\nimport theme from './theme.treat.js';\nimport * as styles from './Button.treat.js';\n\nconst className = resolveClassNames(\n theme,\n styles.button,\n {\n [styles.primary]: isPrimary\n },\n ...etc\n);\n```\n\n#### resolveStyles\n\nType: `function`\n\nResolves an entire styles object relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styles from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst themedStyles = resolveStyles(styles, theme);\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","gitHead":"10e798137b86c8b6b703dbee5c2cd489e566ebc5","_id":"treat@1.0.0-alpha.17","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-IeHorMz6Q9XPAxlIRN2GzYvbMysaRLXXaT60hay5SVnTdCyxsqbYDlZu9tmc1lyMbL4muLEVUSjutZmY67gaBQ==","shasum":"50fe5d206e3075af004ad62940524e86c9e78687","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-alpha.17.tgz","fileCount":46,"unpackedSize":197034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc0liOCRA9TVsSAnZWagAA9L4P/RBcLkGIuckigf2Bwwiq\n8Wk6ROBURFayWUtnCIQn4IxvwvYeuT/4U9CIT+j5a4zs726nrbHAutpagTUQ\nCQyFVFchv6Rtlt3TQuC5LbcAjAfRzzrRolsIrqMQ5JTAPooyVtuEkB8eFiNg\nfaubfZhVwYtmAsEY5qh6cEZGPPf734aw5lPWj5i6b5mg0OKRuTLPDwKqFyz4\npVpKUUstaFVGRO3QRPH7b6qunBUsk3Rri/UN2o9vA6jeMwOtPlshdYXunVL3\nr816EL/T6FWR5CBMBMim//EMyhyfjeArndj2eSKBXUYZYSRXFGKg1pCyCC7J\nFFueH/0bSqgy32fxmON2jYkRb0l6fgB1xlvxDqc6woq+0xgcja8+CnLiq/Mv\nJDiFCsoDi0KAh3Vh0n/HAwLGHjHWboVF6m/01KdFZFsHX9cEFu6uxWAl3aBP\n9D6K//bxVZwztBzPiTpQNgltM5oOYUD/YExyRfu2C2D6UovejRopXS0envG4\nSIfMg8i0Bzwh9ZDaPuIHL/ctPCTzPdw9xhJCBECUFzftfps4LT7eGt7CBy7k\nnFG+dRUIUf9Vh53hh1YhccGQZOGF4XLBkokpcdb79aT+1zqWWmQtPvsydKWc\nFwyY5jhiEgu2J1kBf908+pdYcSHrbdoNVo4dhv2cVxmi2/e0oEmwvTbYN/mS\nnVIX\r\n=U/sA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCldSzgQDs2VcZ/jlPGNHZg8CeVy3ysbQ1BRS9KLkgtswIhAKdeecwUdeoxghuwSkv2jGkRQa5oflMovTotIvlfkeby"}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-alpha.17_1557289101751_0.5974336446938635"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-alpha.18":{"name":"treat","version":"1.0.0-alpha.18","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"start":"npm run build && concurrently 'npm run watch' 'npm run serve'","pretest":"npm run build","test":"jest --runInBand","build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'npm run build:module' 'npm run build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'","serve":"webpack-dev-server","build-example":"rm -rf dist && webpack","prepublishOnly":"npm test","publish-alpha":"npm publish --tag alpha"},"author":{"name":"SEEK"},"license":"MIT","toolchain":{"node":"10.15.2","yarn":"1.15.2"},"peerDependencies":{"webpack":"^4.30.0"},"devDependencies":{"@babel/cli":"^7.4.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/preset-env":"^7.3.4","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@types/react":"^16.8.7","bent":"^1.4.0","classnames":"^2.2.6","concurrently":"^4.1.0","express":"^4.16.4","html-webpack-plugin":"^3.2.0","jest":"^24.7.1","jest-puppeteer":"^4.1.0","mime-types":"^2.1.22","mini-css-extract-plugin":"^0.6.0","prettier":"^1.16.4","puppeteer":"^1.14.0","react":"^16.8.3","react-dom":"^16.8.3","typescript":"^3.4.1","webpack":"^4.30.0","webpack-cli":"^3.2.3","webpack-dev-server":"3.2.1","webpack-merge":"^4.2.1"},"dependencies":{"@babel/core":"^7.4.4","@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","babel-loader":"^8.0.5","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"49e7bfffa16c1222a64f9e871d86a33bf10b8a76","readme":"# 🍬 treat\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **legacy browsers are supported.**\n\n---\n\n- [Requirements](#requirements)\n- [tl;dr (React version)](#tldr-react-version)\n- [Webpack Setup](#webpack-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [css](#css)\n - [globalStyle](#globalstyle)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useClassNames](#useclassnames)\n - [useStyles](#usestyles)\n - [Low-Level API](#low-level-api)\n - [resolveClassNames](#resolveclassnames)\n - [resolveStyles](#resolvestyles)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**We provide first-class support for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ We also provide low level runtime APIs that could be integrated into other frameworks, if needed.\n\n## tl;dr (React version)\n\n> React is [not required](#low-level-api) to use treat—but it certainly makes it easy 😎\n\nFirst, create a theme. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, during render, provide the desired theme via context.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nDefine some [styles](#styles), using the theme.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen render themed classes via the [`useClassNames` Hook.](#useclassnames)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ className, ...restProps }) {\n return (\n \n );\n}\n```\n\n## Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration).\n\n```js\nconst TreatPlugin = require('treat/plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst TreatPlugin = require('treat/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```\n\nBy default, all class names are hashes. If you'd like more fine-grained control over the generated class names, you can create your own [custom interpolations](https://github.com/webpack/loader-utils#interpolatename).\n\n\n```js\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n localIdentName: '[name]-[local]_[hash:base64:5]',\n themeIdentName: '_[folder]-[name]_[hash:base64:5]'\n })\n ]\n};\n```\n\n`themeIdentName` can also be a function that receives your theme as a parameter. This allows you to minimize the characters in your theme ident for production.\n\n> Warning: Ensure all themes have a unique ident value.\n\n\n```js\nconst themes = ['light', 'dark'];\n\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n themeIdentName: (theme) => themes.indexOf(theme.name)\n })\n ]\n};\n```\n\n### Webpack plugin options\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`css`](#css) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\n**The following styling APIs are only valid within treat files (e.g. `Button.treat.js`).**\n\n#### createTheme\n\nType: `function`\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### css\n\nType: `function`\n\nThe `css` function allows you to create multiple class names at once, returning an object that maps to the generated class names (similar to [CSS Modules](https://github.com/css-modules/css-modules)).\n\n```js\nimport { css } from 'treat';\n\nexport default css(theme => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### React API\n\n> Note: React is [not required](#low-level-api) to use treat!\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useClassNames`](#useclassnames) and [`useStyles`](#usestyles) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useClassNames\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves treat classes relative to the current theme, returning a single `className` string. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage).\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n return (\n \n );\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves an entire object of treat classes relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'treat';\n\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n const styles = useStyles(styleRefs);\n\n return (\n \n );\n}\n```\n\n### Low-Level API\n\n> Note: If you're using React, use our [React API](#react-api) instead.\n\n#### resolveClassNames\n\nType: `function`\n\nResolves class names relative to a given theme. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage), but with the desired theme as the first argument.\n\n```js\nimport { resolveClassNames } from 'treat';\n\nimport theme from './theme.treat.js';\nimport * as styles from './Button.treat.js';\n\nconst className = resolveClassNames(\n theme,\n styles.button,\n {\n [styles.primary]: isPrimary\n },\n ...etc\n);\n```\n\n#### resolveStyles\n\nType: `function`\n\nResolves an entire styles object relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styles from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst themedStyles = resolveStyles(styles, theme);\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-alpha.18","_npmVersion":"6.4.1","_nodeVersion":"10.15.2","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-jIQSxJIM1AhTs+jzVId8f65U5MjhnpzoFPImUs2fRIZvRwmog2NrE+5tYlJjsu+BgQ/PP8fPuC5BQCmAsSXz0w==","shasum":"88242cb1e0883fa5de65453ac7a2cccc1061b454","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-alpha.18.tgz","fileCount":47,"unpackedSize":199062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1K9ECRA9TVsSAnZWagAAhLIP/05XssqQQNCNZiS++VUt\nCQFOtDB1cLkzmsCpsBReSaEdG5SyOn3uvu8G7ysLSta0SZ641oTuLypgP9y6\nTH/tHMJjLuzm0FzGVctpGg2ZZXVitDX+7+jZ1dN2eVgoTUppNvSTbrcW3Q1q\n7NNJs3idiyS01BLOLQ+ULlWTfq1zT1JPjTetLJRMZSy78plaKcRpiy3BRmTT\nkeSvheHfhNteD2bncN41M84L4y45UZHgRnkodU4aaf023nu2R4n3DNSM94VL\nSY8OvIuV81i/5m2UVN0fZBYk8tA5/sOaMR+4MrBZz5WxyAAtkf5Fo+MPQrRc\n3rNYvh+qx9RuaM99uZgv7rmpu2yp1HWHU/P39KB2l0OAPszlsPsQuXDK9Tgp\nOr1lTjDNjYjIpTfTYl/QSxaNAhqupYiu3HBc0VQoYh3cGw+mdWAyzsaPIhM8\neY6TPuZOtHiOE4Y6KY8tKM5yEzczudouEa1hTf2pXRJB8pypC82Xu1hsgUIq\nzn1NHJlWVdH9yGRgwqu0h/GbUm+vyp/KINKoDUq9R5y/CKZmFUYOWH+PMXve\nMBqswix43KPS9mZS/obpWp/9BurIG+oihwIx9/SVaefPI0Cr27GnVNVxEFTB\nHm0NrXhPLNNDIrnxLAWCRN0sdIzL6oF2wBm8wsbcJqhSHutSarJyk+KECmSo\nkf4Q\r\n=ZwsQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7ZTJ+TuUO52UNe10N2K89Nz8fHEyCpOmCFpAvr86lUQIgFuyGMFHvil8A+zk4iwVNe+riS8VwaXFBq9zRCYGpNM8="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-alpha.18_1557442371622_0.050815156382939985"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.1":{"name":"treat","version":"1.0.0-beta.1","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-jobs/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"e1fe959841a287f5f0309c2dcc053964c1c353da","readme":"ERROR: No README data found!","_id":"treat@1.0.0-beta.1","_nodeVersion":"10.15.2","_npmVersion":"lerna/3.13.4/node@v10.15.2+x64 (darwin)","dist":{"integrity":"sha512-Ho5LEv/NbG7WldvuNiW743HZ1V5eIwdUufPHLTEabUNWmYpmEt764cVmWHSqL874zR5KFoWRgEDNoF3OCeEN5Q==","shasum":"4faaeca5774b27ced1d7b84e22b0a355d60f6bc8","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.1.tgz","fileCount":79,"unpackedSize":233007,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2hCOCRA9TVsSAnZWagAA160P/3u8jh9C9CVitXnqzo+p\nL+5aHx8ribXt3PBtFT7L92yhxgq6n5OF2Nk1t6jOPSCf3t/XYNyiF74Mm3oF\nYiU2gC74kGFtNm4I6lGBDDpMRt8LVwTHh7T072C9WnLVeuFyNVAgHUA/BfvE\niU2MnlwYhWkdVRG1GiqJLcjs/6gEUqydyKmlZj/bCz5v0u0GOD+gwTb0P/BH\nwLtjo7AKv8+c0h/Gmttpo18NZuJjXDy482UX0B0+MEtImGQpvOy71txAN/vU\n4vWI0m06+2ylE6GY+ySHNC1yI01i1ehzEYZE6c2+4LtMr8gbrVG3+ZqFI333\nbft/fQJk8S75zAqYLEMI6j4NfeQL56CCKDtXcv+A3kIcrSdcyh1l0m1jqvR7\nC0OapLdnGoEjK9oj2mD+ERsTf2Ak1WggDyIGzixoEA4oS04S7g7kCi0J68Dq\nm0DmTRUWB3mdmFIP9Nn6W0T2GE67o8SHq7O+tTpFPGRkPx9hXooWkADwCu/k\nM+mfJ0oZrTk33/x22/pojvM1HV9hUdOD27Fxpt9lVSDdzgcmd21PMGfG3z5y\n7C1wm81v3PE08F4WciEP64MQODm1nt+d2vfSDixye2duwEDHhBXNpg+bLW2L\n6Zm7nwLTB85j5dYJlbAXN731Rr42ypZ1piGjvHNt/mf+u2yCi+koiuKmctJe\nPXMU\r\n=a+rz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCD9kadNS++lYYOl3BsZhYjUFqOKvAt2NwZIqV3zg/v+wIhAI5rJ2qbOTwuq/CfHAcAvRYNH/f3eanydVkb4mgC3xzc"}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.1_1557794958013_0.4295140192679878"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.2":{"name":"treat","version":"1.0.0-beta.2","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"a272c3c9b7c9194fc658b00792690399e0c51304","readme":"# 🍬 treat\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **legacy browsers are supported.**\n\n---\n\n- [Requirements](#requirements)\n- [tl;dr (React version)](#tldr-react-version)\n- [Webpack Setup](#webpack-setup)\n- [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [css](#css)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useClassNames](#useclassnames)\n - [useStyles](#usestyles)\n - [Low-Level API](#low-level-api)\n - [resolveClassNames](#resolveclassnames)\n - [resolveStyles](#resolvestyles)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**We provide first-class support for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ We also provide low level runtime APIs that could be integrated into other frameworks, if needed.\n\n## tl;dr (React version)\n\n> React is [not required](#low-level-api) to use treat—but it certainly makes it easy 😎\n\nFirst, install all dependencies:\n\n```bash\n$ yarn add treat@next react-treat@next\n```\n\nThen, create a theme. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nDuring render, provide the desired theme via context.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nDefine some [styles](#styles), using the theme.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen render themed classes via the [`useClassNames` Hook.](#useclassnames)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClassNames } from 'react-treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ className, ...restProps }) {\n return (\n \n );\n}\n```\n\n## Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration).\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nBy default, all class names are hashes. If you'd like more fine-grained control over the generated class names, you can create your own [custom interpolations](https://github.com/webpack/loader-utils#interpolatename).\n\n\n```js\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n localIdentName: '[name]-[local]_[hash:base64:5]',\n themeIdentName: '_[folder]-[name]_[hash:base64:5]'\n })\n ]\n};\n```\n\n`themeIdentName` can also be a function that receives your theme as a parameter. This allows you to minimize the characters in your theme ident for production.\n\n> Warning: Ensure all themes have a unique ident value.\n\n\n```js\nconst themes = ['light', 'dark'];\n\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n themeIdentName: (theme) => themes.indexOf(theme.name)\n })\n ]\n};\n```\n\n### Webpack plugin options\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Babel Setup\n\nWhile entirely optional, treat provides a Babel plugin to improve the [debugging](#debugging) experience.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`css`](#css) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\nThe following styling APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### css\n\nType: `function`\n\nThe `css` function allows you to create multiple class names at once, returning an object that maps to the generated class names (similar to [CSS Modules](https://github.com/css-modules/css-modules)).\n\n```js\nimport { css } from 'treat';\n\nexport default css(theme => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for this style will be `style` by default.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nThis is because treat doesn't have access to your variable name at runtime.\n\nTo fix this, you can pass in a debug name that typically would mirror your variable name:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n**Note: This debug name can be automated via our [Babel plugin](#babel-setup).**\n\n### React API\n\n> Note: React is [not required](#low-level-api) to use treat!\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useClassNames`](#useclassnames) and [`useStyles`](#usestyles) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useClassNames\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves treat classes relative to the current theme, returning a single `className` string. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage).\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'react-treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n return (\n \n );\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves an entire object of treat classes relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'react-treat';\n\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n const styles = useStyles(styleRefs);\n\n return (\n \n );\n}\n```\n\n### Low-Level API\n\n> Note: If you're using React, use our [React API](#react-api) instead.\n\n#### resolveClassNames\n\nType: `function`\n\nResolves class names relative to a given theme. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage), but with the desired theme as the first argument.\n\n```js\nimport { resolveClassNames } from 'treat';\n\nimport theme from './theme.treat.js';\nimport * as styles from './Button.treat.js';\n\nconst className = resolveClassNames(\n theme,\n styles.button,\n {\n [styles.primary]: isPrimary\n },\n ...etc\n);\n```\n\n#### resolveStyles\n\nType: `function`\n\nResolves an entire styles object relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styles from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst themedStyles = resolveStyles(styles, theme);\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.2","_nodeVersion":"10.15.2","_npmVersion":"lerna/3.13.4/node@v10.15.2+x64 (darwin)","dist":{"integrity":"sha512-O8B2ALbBtAr/EbCOsVurSjUnV8O3hg9zhiP49E9344eFOMv/SWWsVt0eGvoAoCnxZbYgCrRnRtcmXr9ou4y14w==","shasum":"c0c9ba38dad3369533667a78e3dcd18dd6442e27","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.2.tgz","fileCount":43,"unpackedSize":197182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2kdhCRA9TVsSAnZWagAAaygQAJ93Hq8c8bBI0hsatyit\njrbxWSBNMyVqyh902AlPIEP+unSTienDxtaseeXVb8up1PhikShpUhyDsnN3\ndUMlprG7mc0T8PKEcZwVwhemIFfTphrxtA98IqEi+ESomcF5pXENambeqZ+L\nSrLz2cvdcnkpNeUtPk6F09fCXcvTgTBO7kkd2XLvwJsmlTS7nJZTvi4EtG1T\nyTVNO8luBr99e70RvOenN2l1RqgFmJJokALUYl6fx2wwjwE11tMi5dYuZF4y\nKWrxZNM7A+fxLmpJiIjcdIGkd02BdKhi3c9G4NIJfSwZhWgd6upPw+/jJRg1\nKdLUC98Qf/bk7JqUYLG5xjB2k1JQQbqiwclA+zten/RXYFf2TwbUmn3SSsA2\n3kAdo76Q8lwZxa5kx8pMHjdxRIHNx+S/acWfBw4imNJB5RAgxL1ZufS2Fi+f\nQO1s4AGBywi0wXpkHUv5s8x+bs3n7ZmSsg5oaq5EgVamZ0wWQqCpP6vMs+u9\npoLkaNpcwS7ckZ5fY890V8+nKV8h/e4ltFSEu3/b/qsXKSQ0gXXYCPBubxWI\netTHG+BXhRuq/FEBf8SytlhMtBXd9RM38NxM795kc5pGxrvJRIGSJrSGMhIu\ncBCe8QJVqJx/0Sn94DTqF6somoLPsH+KYN+Cxm1W/fRksXx9z7DLk7VoTjvc\ntAMX\r\n=LM1f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICDfSBpUmi44gYArkYc4xBCAkkhjLorzPlG/J+O/oOq8AiEA+4qiABw5zNFZ6Hb1cx8j9IE9DcHvJ0JhZ2Y7Fd8CXzY="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.2_1557808992619_0.9104160737637548"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.3":{"name":"treat","version":"1.0.0-beta.3","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"8393fed42ba0627e97d7fd660faadd04bea7853d","readme":"# 🍬 treat\n\n[](https://www.npmjs.com/package/treat)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **legacy browsers are supported.**\n\n---\n\n- [Requirements](#requirements)\n- [tl;dr (React version)](#tldr-react-version)\n- [Webpack Setup](#webpack-setup)\n- [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [css](#css)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useClassNames](#useclassnames)\n - [useStyles](#usestyles)\n - [Low-Level API](#low-level-api)\n - [resolveClassNames](#resolveclassnames)\n - [resolveStyles](#resolvestyles)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**We provide first-class support for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ We also provide low level runtime APIs that could be integrated into other frameworks, if needed.\n\n## tl;dr (React version)\n\n> React is [not required](#low-level-api) to use treat—but it certainly makes it easy 😎\n\nFirst, install all dependencies:\n\n```bash\n$ yarn add treat@next react-treat@next\n```\n\nThen, create a theme. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nDuring render, provide the desired theme via context.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nDefine some [styles](#styles), using the theme.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen render themed classes via the [`useClassNames` Hook.](#useclassnames)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClassNames } from 'react-treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ className, ...restProps }) {\n return (\n \n );\n}\n```\n\n## Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration).\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nBy default, all class names are hashes. If you'd like more fine-grained control over the generated class names, you can create your own [custom interpolations](https://github.com/webpack/loader-utils#interpolatename).\n\n\n```js\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n localIdentName: '[name]-[local]_[hash:base64:5]',\n themeIdentName: '_[folder]-[name]_[hash:base64:5]'\n })\n ]\n};\n```\n\n`themeIdentName` can also be a function that receives your theme as a parameter. This allows you to minimize the characters in your theme ident for production.\n\n> Warning: Ensure all themes have a unique ident value.\n\n\n```js\nconst themes = ['light', 'dark'];\n\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n themeIdentName: (theme) => themes.indexOf(theme.name)\n })\n ]\n};\n```\n\n### Webpack plugin options\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Babel Setup\n\nWhile entirely optional, treat provides a Babel plugin to improve the [debugging](#debugging) experience.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`css`](#css) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\nThe following styling APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### css\n\nType: `function`\n\nThe `css` function allows you to create multiple class names at once, returning an object that maps to the generated class names (similar to [CSS Modules](https://github.com/css-modules/css-modules)).\n\n```js\nimport { css } from 'treat';\n\nexport default css(theme => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for this style will be `style` by default.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nThis is because treat doesn't have access to your variable name at runtime.\n\nTo fix this, you can pass in a debug name that typically would mirror your variable name:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n**Note: This debug name can be automated via our [Babel plugin](#babel-setup).**\n\n### React API\n\n> Note: React is [not required](#low-level-api) to use treat!\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useClassNames`](#useclassnames) and [`useStyles`](#usestyles) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useClassNames\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves treat classes relative to the current theme, returning a single `className` string. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage).\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'react-treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n return (\n \n );\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves an entire object of treat classes relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'react-treat';\n\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n const styles = useStyles(styleRefs);\n\n return (\n \n );\n}\n```\n\n### Low-Level API\n\n> Note: If you're using React, use our [React API](#react-api) instead.\n\n#### resolveClassNames\n\nType: `function`\n\nResolves class names relative to a given theme. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage), but with the desired theme as the first argument.\n\n```js\nimport { resolveClassNames } from 'treat';\n\nimport theme from './theme.treat.js';\nimport * as styles from './Button.treat.js';\n\nconst className = resolveClassNames(\n theme,\n styles.button,\n {\n [styles.primary]: isPrimary\n },\n ...etc\n);\n```\n\n#### resolveStyles\n\nType: `function`\n\nResolves an entire styles object relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styles from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst themedStyles = resolveStyles(styles, theme);\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.3","_nodeVersion":"10.15.3","_npmVersion":"lerna/3.13.4/node@v10.15.3+x64 (linux)","dist":{"integrity":"sha512-ou3bToIspVupYm6QjyXRXx5qGyRhhOdIVam/GNDVdrvOwEgmBNRYgcGs3Kc9hZA1tUEwsAbBq/PZgtyu3phYtA==","shasum":"755dda70a593bb0eb1d42fc3662004ae2190131d","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.3.tgz","fileCount":43,"unpackedSize":204044,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3O/7CRA9TVsSAnZWagAAAMMQAJyG61886TGEWKEDzX/C\ne64P8pyTB/jnAZCvzrlLTsB7IhysjGrExyW/LwJbByppUhd4+3lo59XUxtUG\nmi+7zDHXoOmKRa8Cs+2pQoHIvt8MidJdIJExDuDmUcJYp6JFSQbexjIVp/aV\nvfIqX4LH0PMHkq8iBUq6DOlVKZzdZwwjQ2t5J5iDiyO8hmSAC4W2SF0wtpIe\nmfTDkS0gD+cD995OKwU1AvbRhxZoz/hFJwX8SsxqVXFGcZ9Aike/pobhd224\nHTG9pJWTA8w72Rj7/4CsB+TsfpfQghs9+PIJYDQ2VGc0ri/pqhUl+Bg8JnC5\ntRK0zQojrQgIfJOLorqN6mjOgVVkeqE5o/PvIPNHv4QuAbf7z4gnzN+AHMY1\nwgqAf0/oadf7UKaCfPKYGrIYfNJ2MlpnzHJt4mjJImWFc3p+gvbfC918FENN\nrU98QgemoBItHF00F5+RhXbNGK5ldthu3NCiVmpsx5Fg9vlzBXAIv86+3d1V\n7qJFqJP53IjGIClFlXM91/Elk/RNyMZZbAuDBBj60yopMAFUKy5SNrxyeIBJ\noyx8O0Bbfs5L7VD7J0FUpkahch4J4PAm8L8BA5yeEfL83IIizX0k779L06ej\nUxHZo0FJ0AVnZa28r3nt03z050I96ZMnb0GBTCabcSV+Og54GSKCMAjUYLd6\nPfS+\r\n=zEge\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCF8k2xI7K7o7QBMl3E6g1CyiRwh21aA6h3DyfjPyMnZwIhAKh3LQpbh3V7mCnICBBk6gT8YvgC6AjVHu4GRBgyl8eZ"}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.3_1557983226590_0.9976480032792836"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.4":{"name":"treat","version":"1.0.0-beta.4","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"7957554dacbb066958066df67607b67829231d07","readme":"# 🍬 treat\n\n[](https://www.npmjs.com/package/treat)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **legacy browsers are supported.**\n\n---\n\n- [Requirements](#requirements)\n- [tl;dr (React version)](#tldr-react-version)\n- [Webpack Setup](#webpack-setup)\n- [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [css](#css)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useClassNames](#useclassnames)\n - [useStyles](#usestyles)\n - [Low-Level API](#low-level-api)\n - [resolveClassNames](#resolveclassnames)\n - [resolveStyles](#resolvestyles)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**We provide first-class support for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ We also provide low level runtime APIs that could be integrated into other frameworks, if needed.\n\n## tl;dr (React version)\n\n> React is [not required](#low-level-api) to use treat—but it certainly makes it easy 😎\n\nFirst, install all dependencies:\n\n```bash\n$ yarn add treat@next react-treat@next\n```\n\nThen, create a theme. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nDuring render, provide the desired theme via context.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nDefine some [styles](#styles), using the theme.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen render themed classes via the [`useClassNames` Hook.](#useclassnames)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClassNames } from 'react-treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ className, ...restProps }) {\n return (\n \n );\n}\n```\n\n## Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration).\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nBy default, all class names are hashes. If you'd like more fine-grained control over the generated class names, you can create your own [custom interpolations](https://github.com/webpack/loader-utils#interpolatename).\n\n\n```js\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n localIdentName: '[name]-[local]_[hash:base64:5]',\n themeIdentName: '_[folder]-[name]_[hash:base64:5]'\n })\n ]\n};\n```\n\n`themeIdentName` can also be a function that receives your theme as a parameter. This allows you to minimize the characters in your theme ident for production.\n\n> Warning: Ensure all themes have a unique ident value.\n\n\n```js\nconst themes = ['light', 'dark'];\n\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n themeIdentName: (theme) => themes.indexOf(theme.name)\n })\n ]\n};\n```\n\n### Webpack plugin options\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Babel Setup\n\nWhile entirely optional, treat provides a Babel plugin to improve the [debugging](#debugging) experience.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`css`](#css) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\nThe following styling APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### css\n\nType: `function`\n\nThe `css` function allows you to create multiple class names at once, returning an object that maps to the generated class names (similar to [CSS Modules](https://github.com/css-modules/css-modules)).\n\n```js\nimport { css } from 'treat';\n\nexport default css(theme => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for this style will be `style` by default.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nThis is because treat doesn't have access to your variable name at runtime.\n\nTo fix this, you can pass in a debug name that typically would mirror your variable name:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n**Note: This debug name can be automated via our [Babel plugin](#babel-setup).**\n\n### React API\n\n> Note: React is [not required](#low-level-api) to use treat!\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useClassNames`](#useclassnames) and [`useStyles`](#usestyles) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useClassNames\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves treat classes relative to the current theme, returning a single `className` string. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage).\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'react-treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n return (\n \n );\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves an entire object of treat classes relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'react-treat';\n\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n const styles = useStyles(styleRefs);\n\n return (\n \n );\n}\n```\n\n### Low-Level API\n\n> Note: If you're using React, use our [React API](#react-api) instead.\n\n#### resolveClassNames\n\nType: `function`\n\nResolves class names relative to a given theme. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage), but with the desired theme as the first argument.\n\n```js\nimport { resolveClassNames } from 'treat';\n\nimport theme from './theme.treat.js';\nimport * as styles from './Button.treat.js';\n\nconst className = resolveClassNames(\n theme,\n styles.button,\n {\n [styles.primary]: isPrimary\n },\n ...etc\n);\n```\n\n#### resolveStyles\n\nType: `function`\n\nResolves an entire styles object relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styles from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst themedStyles = resolveStyles(styles, theme);\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.4","_nodeVersion":"10.15.3","_npmVersion":"lerna/3.13.4/node@v10.15.3+x64 (linux)","dist":{"integrity":"sha512-gz2zq8StCzfVURChMe44fn27wyBzN7IvuSoeGJ76AZMFUZg07CP0QnG1nCAvwY0lkmDr2l+nuLW5RVEQiB4R2A==","shasum":"47d09fd8023f680b5f07ecb3dc5ca091416cd075","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.4.tgz","fileCount":43,"unpackedSize":204092,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3PdOCRA9TVsSAnZWagAA/vIQAJ1Qm/yyRrOZ8QWj4S9m\nSJvldzdY+66P//FluQ/4+Gt/C8HiXjz6vN61A5dZmUcJhSh28bAgOgMNx3b7\n+Ho5v8B4u09OUbsU+ZkES0hwBgpVcL6UpaLVFXd/C6r+6GjCqGMZOaFWun6+\nb92nqUk92lroPqBsiO2pUiFpSPOC8nXUsk7jV6YHL9NWtNhu9nRYrO3xlT39\nZr3jCAV8ucq1ITGqzAcJngn8JrC4keCxFjA4m81+egCxxb/b/5RO/Z59jbt5\nTgn30Jci/71dwKyMEhctjFYeEuV4HVVlfLhwNHp89CWyhpAM5Iks9lKpQ9Wg\not0ppSFKIGCejbESZGd+vSMBqog66JApCL2Hr8Oaert9+e87EPEBHGO3Wo08\nDHHKGr//SNWVExXC1Eyq1s13IWGQKLeRkAAUcbaWKd6msUXK7/6Iux79J7nQ\nM4wIzQp2y2EC0RZ+1z6poalOz/Mm3rQkLVUlJNqCCXZjEMucJ/yMr8rK8luI\nU+ud9d4wklQSmsmYu6uhrNNdUOr3Y0T+TrEpkHYWUN1SpuYXujMQrA4B2cGD\ngFkCVDFh/zXV15CN/oFr+2RCfITsGBYdYyyyHtcoo4T4Xa4N1IUxItR3PUEw\nt8eh5KYztJophv32iBH/UxeksNOLQ9i/6qQ3O0hsKnq9tqRRmrGh9bQtq7hn\n1BC8\r\n=u/tE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzmJegOerqgnmJf5CJxp3PKMWwhkvP4ClRrWEufhz3XwIhAJfBIPgDnsSGoQGUhxuF/7snTx9rZFebbAZH81hIUaln"}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.4_1557985101834_0.17429290740613101"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.5":{"name":"treat","version":"1.0.0-beta.5","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"114fcf6d9a76e53652f694b2e4bcb78725ba2d21","readme":"# 🍬 treat\n\n[](https://www.npmjs.com/package/treat)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **legacy browsers are supported.**\n\n---\n\n- [Requirements](#requirements)\n- [tl;dr (React version)](#tldr-react-version)\n- [Webpack Setup](#webpack-setup)\n- [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [css](#css)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useClassNames](#useclassnames)\n - [useStyles](#usestyles)\n - [Low-Level API](#low-level-api)\n - [resolveClassNames](#resolveclassnames)\n - [resolveStyles](#resolvestyles)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**We provide first-class support for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ We also provide low level runtime APIs that could be integrated into other frameworks, if needed.\n\n## tl;dr (React version)\n\n> React is [not required](#low-level-api) to use treat—but it certainly makes it easy 😎\n\nFirst, install all dependencies:\n\n```bash\n$ yarn add treat@next react-treat@next\n```\n\nThen, create a theme. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nDuring render, provide the desired theme via context.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nDefine some [styles](#styles), using the theme.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen render themed classes via the [`useClassNames` Hook.](#useclassnames)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClassNames } from 'react-treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ className, ...restProps }) {\n return (\n \n );\n}\n```\n\n## Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration).\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nBy default, all class names are hashes. If you'd like more fine-grained control over the generated class names, you can create your own [custom interpolations](https://github.com/webpack/loader-utils#interpolatename).\n\n\n```js\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n localIdentName: '[name]-[local]_[hash:base64:5]',\n themeIdentName: '_[folder]-[name]_[hash:base64:5]'\n })\n ]\n};\n```\n\n`themeIdentName` can also be a function that receives your theme as a parameter. This allows you to minimize the characters in your theme ident for production.\n\n> Warning: Ensure all themes have a unique ident value.\n\n\n```js\nconst themes = ['light', 'dark'];\n\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n themeIdentName: (theme) => themes.indexOf(theme.name)\n })\n ]\n};\n```\n\n### Webpack plugin options\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Babel Setup\n\nWhile entirely optional, treat provides a Babel plugin to improve the [debugging](#debugging) experience.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`css`](#css) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\nThe following styling APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### css\n\nType: `function`\n\nThe `css` function allows you to create multiple class names at once, returning an object that maps to the generated class names (similar to [CSS Modules](https://github.com/css-modules/css-modules)).\n\n```js\nimport { css } from 'treat';\n\nexport default css(theme => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for this style will be `style` by default.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nThis is because treat doesn't have access to your variable name at runtime.\n\nTo fix this, you can pass in a debug name that typically would mirror your variable name:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n**Note: This debug name can be automated via our [Babel plugin](#babel-setup).**\n\n### React API\n\n> Note: React is [not required](#low-level-api) to use treat!\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useClassNames`](#useclassnames) and [`useStyles`](#usestyles) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useClassNames\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves treat classes relative to the current theme, returning a single `className` string. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage).\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'react-treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n return (\n \n );\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves an entire object of treat classes relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'react-treat';\n\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n const styles = useStyles(styleRefs);\n\n return (\n \n );\n}\n```\n\n### Low-Level API\n\n> Note: If you're using React, use our [React API](#react-api) instead.\n\n#### resolveClassNames\n\nType: `function`\n\nResolves class names relative to a given theme. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage), but with the desired theme as the first argument.\n\n```js\nimport { resolveClassNames } from 'treat';\n\nimport theme from './theme.treat.js';\nimport * as styles from './Button.treat.js';\n\nconst className = resolveClassNames(\n theme,\n styles.button,\n {\n [styles.primary]: isPrimary\n },\n ...etc\n);\n```\n\n#### resolveStyles\n\nType: `function`\n\nResolves an entire styles object relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styles from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst themedStyles = resolveStyles(styles, theme);\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.5","_nodeVersion":"10.15.3","_npmVersion":"lerna/3.13.4/node@v10.15.3+x64 (linux)","dist":{"integrity":"sha512-1+ch4yuSOSvToBJAx7N3BT5M/oQYRaMrDamWSx3EKj57yp8NLvan02+oigva2mXN+Huz8BGF3tUFeihMrA4nwg==","shasum":"5c842fffc86bd07eb5b3efab8d872ceaf8c48dc1","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.5.tgz","fileCount":43,"unpackedSize":204627,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3PpQCRA9TVsSAnZWagAAd1wP+QE0sGt+zPDPYf68lILn\n1nANNCn/addY/wmBkU77cRz9/vmHC24TUZ7QThfh1ljhAQStDHRTF3jgZy8Q\noYDxLwpyrSUSUNfqtqsMo1/UmOKN77lh2CQD3Zo5+UKZj7v9lrAs1SVNI5Ez\nz57qBZYbrEpC/2rx7ck9DBhBMxMG/4rcGYige+bvVNPqYztFO06zEn1MUslT\nCU2BD3ZeYcWGAUxaKkZQCIeUYSIbdrEwyQD7Wcc7FlpXVY6dJ5Jkx34yPNir\nid2pUOjWqvUfpgFSlolagaALycHExEXDrLFtRlfqANgvZR+jluXMVxJONwy9\nuB7YqDifAXZQj0EWgCLPhuX+Bj9orjDGOo2agfCVbRAbrrxkZJSXNyVMg04e\nGrDOsUGaSNb/ddHMTb5ZLfluhG9B3d7HwL5IMX/aOwcxS1Jus3kJZ1IswfcL\n856/RvjFEv4nacgtn34gW0Tf0LLo6HstJ+GvOeHaHiofss3kl0h41miWOQDq\nQ2VrZqshtZSPKn6RbdmqM/vfNEsgaVhFtlzr+hajICtGhGozKwxC8IrAg2wg\nZKTgTQBRAW5zvq6S35m1Vs9cXBJOVxt2uq9VZogbgWmBuOKS0tgDUtFNjuWH\n78ZFERuRw51h0dtOy49yN3Tlend0fUioM9vLnxqeIH+BCfmqMPsjhCcxcmzp\n0R1T\r\n=ZSYR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBJ/yZOkVOkRS0HaMy7qnBErbRpQ3sbEPBUn12DwLj6UAiBfscWQ3znp5UaEmpDPk7Waf/Eo0mpZcyoqoKos+yvBxw=="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.5_1557985871468_0.585276144962771"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.6":{"name":"treat","version":"1.0.0-beta.6","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"4e141ccdabf26088a2e64310471eaa4808af1dd4","readme":"# 🍬 treat\n\n[](https://www.npmjs.com/package/treat)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **legacy browsers are supported.**\n\n---\n\n- [Requirements](#requirements)\n- [tl;dr (React version)](#tldr-react-version)\n- [Webpack Setup](#webpack-setup)\n- [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [css](#css)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useClassNames](#useclassnames)\n - [useStyles](#usestyles)\n - [Low-Level API](#low-level-api)\n - [resolveClassNames](#resolveclassnames)\n - [resolveStyles](#resolvestyles)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**We provide first-class support for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ We also provide low level runtime APIs that could be integrated into other frameworks, if needed.\n\n## tl;dr (React version)\n\n> React is [not required](#low-level-api) to use treat—but it certainly makes it easy 😎\n\nFirst, install all dependencies:\n\n```bash\n$ yarn add treat@next react-treat@next\n```\n\nThen, create a theme. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nDuring render, provide the desired theme via context.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nDefine some [styles](#styles), using the theme.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen render themed classes via the [`useClassNames` Hook.](#useclassnames)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useClassNames } from 'react-treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ className, ...restProps }) {\n return (\n \n );\n}\n```\n\n## Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration).\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nBy default, all class names are hashes. If you'd like more fine-grained control over the generated class names, you can create your own [custom interpolations](https://github.com/webpack/loader-utils#interpolatename).\n\n\n```js\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n localIdentName: '[name]-[local]_[hash:base64:5]',\n themeIdentName: '_[folder]-[name]_[hash:base64:5]'\n })\n ]\n};\n```\n\n`themeIdentName` can also be a function that receives your theme as a parameter. This allows you to minimize the characters in your theme ident for production.\n\n> Warning: Ensure all themes have a unique ident value.\n\n\n```js\nconst themes = ['light', 'dark'];\n\nmodule.exports = {\n plugins: [\n new TreatPlugin({\n themeIdentName: (theme) => themes.indexOf(theme.name)\n })\n ]\n};\n```\n\n### Webpack plugin options\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Babel Setup\n\nWhile entirely optional, treat provides a Babel plugin to improve the [debugging](#debugging) experience.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`css`](#css) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\nThe following styling APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### css\n\nType: `function`\n\nThe `css` function allows you to create multiple class names at once, returning an object that maps to the generated class names (similar to [CSS Modules](https://github.com/css-modules/css-modules)).\n\n```js\nimport { css } from 'treat';\n\nexport default css(theme => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for this style will be `style` by default.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nThis is because treat doesn't have access to your variable name at runtime.\n\nTo fix this, you can pass in a debug name that typically would mirror your variable name:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n**Note: This debug name can be automated via our [Babel plugin](#babel-setup).**\n\n### React API\n\n> Note: React is [not required](#low-level-api) to use treat!\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useClassNames`](#useclassnames) and [`useStyles`](#usestyles) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useClassNames\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves treat classes relative to the current theme, returning a single `className` string. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage).\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'react-treat';\n\nimport * as styles from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n return (\n \n );\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves an entire object of treat classes relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassNames } from 'react-treat';\n\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button({ primary, ...props }) {\n const styles = useStyles(styleRefs);\n\n return (\n \n );\n}\n```\n\n### Low-Level API\n\n> Note: If you're using React, use our [React API](#react-api) instead.\n\n#### resolveClassNames\n\nType: `function`\n\nResolves class names relative to a given theme. Serves as a treat-enabled version of the [Classnames API](https://github.com/JedWatson/classnames#usage), but with the desired theme as the first argument.\n\n```js\nimport { resolveClassNames } from 'treat';\n\nimport theme from './theme.treat.js';\nimport * as styles from './Button.treat.js';\n\nconst className = resolveClassNames(\n theme,\n styles.button,\n {\n [styles.primary]: isPrimary\n },\n ...etc\n);\n```\n\n#### resolveStyles\n\nType: `function`\n\nResolves an entire styles object relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styles from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst themedStyles = resolveStyles(styles, theme);\n```\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.6","_nodeVersion":"10.15.3","_npmVersion":"lerna/3.13.4/node@v10.15.3+x64 (linux)","dist":{"integrity":"sha512-crVwk44EhW4IKOZm8EZRMKsNpgc0anaL2riacsy7naFYTPZCshwarH0+OjvziPgTo33TSr3yp9UE4QBjCsZb0w==","shasum":"5d23f01a045689a97d0d272e65322ab931994ea8","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.6.tgz","fileCount":42,"unpackedSize":204566,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3feRCRA9TVsSAnZWagAA7DsP/2Dd/Ny9DJi+EMvVtOoi\nw7QLp7e9AD6kCLxyfoa5bDvdb4Rd1lwBDf7n/rmx2rDzzQH9tRIkqm9WVSDU\nzbIMebTkSR00zF0kM3ox/DxwkpNUrwir94Y6PoKXqEk/jA4TVz/qHYdbU0YV\nNjBkyeXQlrnEI/eOqnNo/xE21kCw6XRQQspj2W08rq9z7YCbmIYxa/QvA8BN\nuH8InoNtmk1rmfQZyl0PGmK8J4nvpJtdpmQkSELcioP+RZMuLwT0WaNkQKko\nh6SOJ/zQIp2vL9qTvrzkeptpC9octMxuMdlHLsw3++xYkYHUu9lwa4RvS6p1\nUkvlBN00riyIjEUEkBGW+SEczoJk5J1YrDle32Y0dUbELADdXQU/xxgTgFry\n6e4+gCkrKYo+IuEgamQlLy1eYK+bW0AuXDF3Pa9/h/ShIVTvQEfF0r+uX8LH\nizmgfcqYgdyOoxi2aovMKRiu8qNngW9u5xXto4d579tcnsPDLIC9zLz/8+nh\nHKzj9uVvQfvu/OuCuXNE1JbdUEm/7HQ2Oc7Fs/yVtR5DfsTSBZxgg2fgfTTI\nnyD0BpuBakQn7aENWuLBZdrtjh0I/0+hOD2YM62adluD60YxwvMwEXyzf1tA\nWKyuGB90xXdTUeYTJv6bKvqV8y06BcWX7/1mRNNaGpGUdcIympYV3HtFO/De\nU9vL\r\n=wri2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGt0fGEdQqIAsaP4b2H+94HWOjrjqjBDy9hsp6jMs2LAIgOFzxjz8G8ZUoO0dzLW6NIddEFFtsj9SmiXZUPBqef+c="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.6_1558050704934_0.5665730100263973"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.7":{"name":"treat","version":"1.0.0-beta.7","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"a94d920f8bef6a6d42fa6c5aad89391ec503f838","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://lerna.js.org/)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **legacy browsers are supported.**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage (React version)](#themed-usage-react-version)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [css](#css)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#styles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport const buttonTemplate = ({ text }) =>\n ``;\n```\n\n### Themed Usage (React version)\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`css`](#css) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\nThe following styling APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### css\n\nType: `function`\n\nThe `css` function allows you to create multiple class names at once, returning an object that maps to the generated class names (similar to [CSS Modules](https://github.com/css-modules/css-modules)).\n\n```js\nimport { css } from 'treat';\n\nexport default css(theme => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.7","_nodeVersion":"10.15.3","_npmVersion":"lerna/3.13.4/node@v10.15.3+x64 (linux)","dist":{"integrity":"sha512-Y3nmM8WdZcZKoOQN34aExEs7UUOfpkvW1ZwRYbVzvdwYFWQlMZlbKZJ4Coo0KFPethCqHjjb96PUvr21Rl2UHw==","shasum":"00f8413c8007fcbecf0925ce469b1d96035a48f8","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.7.tgz","fileCount":50,"unpackedSize":212381,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc4xt9CRA9TVsSAnZWagAAq3AP/iAE5dDutDwF7u1xvS7z\nkMI0iHtzwjIARH/O9O2Tov7uZxx1BA2H93dk8oy++zHt8un6sDdTd/XOq9o1\nP/aaKUJMEzlNioMyTSQTPAMy1YTChHXvBKsfUn8K4I9in9yoh0pPnvPWFb7H\nJZ4c1ksz+Pzupk4uduqge90xpwDPVmL+mRW/di/uK3EG+qz9z2hTrwwS2J7W\npot7YCNqMvv3vUJEfxBur61rGh1u74l1wY90uqo1D/9een/4gx/Qg08wfO7f\neXp7ILahMEz167DxbEOeHfiQvk/YEeS11kxGlcZe81eUG9TcwAnU1Q/X6AuP\nsc6bNKrImOOSHXoYMqGz7A2NWLZc7U0uFKV7P+wJxM0Y7R8CYsd+8/imj1ry\nfJO8K1pzvwCx5BkZJG+0nCxF8y7kVlnR+GVtoy7N4p1FDNGC37kQ+VD+A+Lr\ngTw4bWvtVmWeX7zp/4xwIkXWlr/PE18EBoxVniJK/Q9AmrFE287C/5MzApFM\nV7Sg3Fwdy114YWClJNHAXw/0zPSz5jNFUDN/iIxBS4dRtGo4hJbsPHEersKN\nmPR8Ritb6S0Y6LL5z82bobObQiq2x8WlUIyeeJik9mLNPjBxuaWY152mYSuA\nZzE6TValdV1d+gTJwR3B95grSpPPvU5aGhKHTHs7QgGDOYBhgKr77bgpMCzu\nYr6v\r\n=u3Ir\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCX9pjr5XFwLhF7ozCj7CGbcME6XO0WzBG3iA6EqSJr7wIhALrfwIO2kzHLrkKRJAbE1dpocshPyTlk5UsQJtx/B+Xt"}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.7_1558387580089_0.5689709520933357"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.8":{"name":"treat","version":"1.0.0-beta.8","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"110848b9b5a8a91638016ccc5b96f7fc080b0feb","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://lerna.js.org/)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **legacy browsers are supported.**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage (React version)](#themed-usage-react-version)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#styles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport const buttonTemplate = ({ text }) =>\n ``;\n```\n\n### Themed Usage (React version)\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`styleMap`](#stylemap) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\nThe following styling APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file. This is particularly useful when mapping component props to separate style maps.\n\n```js\nimport { styleMap } from 'treat';\n\nexport const backgrounds = styleMap(theme => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.8","_nodeVersion":"10.15.3","_npmVersion":"lerna/3.13.4/node@v10.15.3+x64 (linux)","dist":{"integrity":"sha512-4hXz50GRCEEeyc1mP1DDVh44kPbyuCIKzIXbJ9F93swuN4dAXGXaR7FdkZXYrF7qLRwghS2tHixUOLVA9m1zSQ==","shasum":"a8461a4ee3acc8e1a54fef2d51ecb06dc390d9d9","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.8.tgz","fileCount":50,"unpackedSize":212799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc4yC6CRA9TVsSAnZWagAAfZQP/3LLIFzbrQ20f+KNcjHl\nTEA9KpAuY8gPgoIVZvNM4o53NC22TJse9r4aOnePcwET0wxWV9xotNyn7cM2\nutoaZGH2DYW+EftMWbypuR4NFCAE79sMUNNx51PXz6R6VIVIleSzFu6lOJQ9\nPv5nR55WCA+5iVYERVGT70ipHSpQ+rBh1WAeeKSxo+mBV5RyUmOpnF3pP0gk\ndQFwDfYknxFpBzz54eC8KM+TSg/R1g2fWJ37XMMuGA54alEix8F9JOV2h8ZP\n69nmvGT1NlR7YOiGUjOGmaU9Kd4g2LFBeMiWySxERo1xPgWIKmcJ8XhBtUou\nenStbpzY0+FOOzB8mkqndLJUmu2V6CjAh+Jul/3NzAeyy+u9WrcGGT2tRlBu\nTe08KP1swVOq5anmORT5gbfXqvKWNLjaYz1iArxFdxfWaZ4p3FWS0vwnKrUI\njvWe2v4z1xC44O/4HwXNzjSKJXPNWIJXLMiIvIchYRHMeLcbpMc0GfE6Z7aU\nEZ/K7R0wflCTEi/H/Ng2A1I/vnYVghrr7dZOQ2qPwrPjNFxOi7CKpCS4ucYI\nh1scann6Vk712QIPVZvGLmrYingBNJy78cPnC+qKuR39IvVSNkFX1lMK4W50\ny8oxLkSN+wYAoXpJxqdqwrvs8/QfHvG+qEgtvKHMVoJB2462qh7GQyuTLPwF\n5JyK\r\n=GoXD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTqa5kqp0NXSAZuWV1/J5AJBlhJOyycCn2Z9T7FjFLBAIgU75rKFLU++LAcLEZK0+PK8H0UdMsJ+/HwFoDPq8fFhg="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.8_1558388920743_0.053881132568406764"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.9":{"name":"treat","version":"1.0.0-beta.9","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"f115e7828d9a572cb3208bdaa4af80bb41bc3c1b","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://lerna.js.org/)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _very_ lightweight—only needing to swap out pre-existing classes. **All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **legacy browsers are supported.**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage (React version)](#themed-usage-react-version)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#styles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport const buttonTemplate = ({ text }) =>\n ``;\n```\n\n### Themed Usage (React version)\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`styleMap`](#stylemap) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\nThe following styling APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file. This is particularly useful when mapping component props to separate style maps.\n\n```js\nimport { styleMap } from 'treat';\n\nexport const backgrounds = styleMap(theme => ({\n primary: {\n backgroundColor: theme.colors.brand\n },\n secondary: {\n backgroundColor: theme.colors.accent\n }\n}));\n```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.9","_nodeVersion":"10.15.3","_npmVersion":"lerna/3.13.4/node@v10.15.3+x64 (linux)","dist":{"integrity":"sha512-h3B45Gt1p1SEQctK+0CnKQfLTqewixeSrQz+G3So9mj4OSjAL6JTEenyo8/F+99RolEqENNdSgj+jdatA1GT8A==","shasum":"0056599a3071d4a5d8820e938d3108a2cd80e82d","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.9.tgz","fileCount":54,"unpackedSize":391417,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc43j7CRA9TVsSAnZWagAAjXcP/i2IdYyd2v90QzxcuvG7\neQIJj/rEE+i3XbHXg9ncLdDhcC8Rzi9eEQ9BAysdJMKWS3GCKsFVc913RT6w\n0A63zNjYDZ1ggdVAxdQTdm6Y/ZV8qnxTTiKfuAvj6/UA/e37I6J+zpmBUdDH\nvQyFaDTYAaE9JgRdRQpBRGstFW4iiCoKOVGjeOOx3+6IKrdcO4J8epm1hTyK\ncfStiNXBgfdwI5vwOuOAVTE/ELqq4C90LHEwIfbih4rzXApXI1L/nzT3QmoF\nzXEQBhLF2W3ep3aalGz+Bz5yZ9+muroQhdQlAORyyD4TF9eeSqz88aRXt8o1\nIGhozJcutNmoEXIMltIny4JqFvMVQ2hT1FBonhkxI8uty3q1/+gsO7ICdjCC\nAtmHVEqZsyurFwwDfreX1pe8XZDU+Eej18zrCOE6HP0wFXOZna+eUKNOKLUB\nkt3rR+ggD9KSTGl2/E4JUFsU+IPXc4Acu2ea5NPRDGbE7gHAjNKm9fEPzmHi\nd8xb54MPtFQIzk7hBAVt/UNZ4kywJBx/yr1CEM2/2jihNW/0/xserNINjclt\nPK2OoSePWfvyIFuGZeiv+Aofqkz1I1Pu3kYkhcibtZW1yucWqLKUJkroW+wt\nmPGha++8qYRoMBA0+Bjo05VKtJN2hryguRJJtL6XeI0LvN6aPBfa/7ymPwYY\nhB3E\r\n=kmF3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5du0hcXVGSwt+w+otG756RJ9Oi21Fcgk3ypO8rqbkVgIgYlGM3M0XlSC8nhvgTpWamtinOA47owP68yUnPKtC+OE="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.9_1558411515054_0.17164526078828368"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.11":{"name":"treat","version":"1.0.0-beta.11","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"f973d5bc70a0c26920958b9a6746df302ecfa70d","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://lerna.js.org/)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **_legacy browsers are supported._**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage](#themed-usage)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#styles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport default ({ text }) =>\n ``;\n```\n\n### Themed Usage\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`styleMap`](#stylemap) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\nThe `@keyframes` property allows the creation of keyframes that will automatically be attached to the style as your `animation-name`.\n\n```js\n{\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```\n\nThe animation shorthand is also supported via a `@keyframes` placeholder.\n\n```js\n{\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```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\nThe following styling APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file.\n\n```js\nimport { 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```\n\nThis 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:\n\n```ts\nimport 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 \n );\n}\n```\n\nThis pattern scales extremely well to [atomic CSS patterns](https://css-tricks.com/lets-define-exactly-atomic-css/). For example:\n\n```js\n// 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```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.11","_nodeVersion":"10.15.3","_npmVersion":"lerna/3.13.4/node@v10.15.3+x64 (linux)","dist":{"integrity":"sha512-v80yfxd/Qsug+r7P8/wUDHkIjjhwEZu9Z7z7zVlHRtIxQqWCrSM1nCyJPRXI2QPYNLcBnQC+QRz0HgPnls+Z9w==","shasum":"bcc1c89aa623069582268e715b536512f5d278bf","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.11.tgz","fileCount":54,"unpackedSize":394188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5Hu0CRA9TVsSAnZWagAA7ioP/jJSrv6BcnbcokztjKql\nANA/SWANpQKf80S5s7tUW9EN62wO3cBrUEdU/qvzjU0HoazxdiEUYmVOmrbV\n0EQTERFH1KDy0lwLcwaeM3SFOTQlLLWRN12HQl63nzegLohaQS5XtLRD+a+M\n4MgjRcG+D7Kq5ASJ8kWwGh2yom59nPjztM6/llaGB37Yj+XdsaeAC24r46ez\nScJck9FxGBoE/3zH8pCWG9s7zB121PqwC0sKZ19jpD+pTPsxBrouYCq0l2wB\n2HdQi34s2WhxOL8/jHb8ybI68xeUTrnZEdeOsX5wGcFXKPXFeaaAc4S22h7M\nSTy4aQ2MbHJf84TrO8nGwMo9KyYOuyJqDCZhtcjjm0LJ7WzeXeftWr3uX/sI\nvye6zXrZqFVpL3pfVjpjhiCmtxj+RyMxRR1NTNRbRUKoMv7sD+66qCLTbM8A\nwT700dTKY8XGBPnebRKqu1Hvt1KjzhohjoH019rncOWRlROGbY8AzlOwoto2\n6xW3rJqTLJYZdYAneaP1ltBQkwCkkxg8vBLnjFLrisNbbbRqoSQQqcqmfXwZ\n5X89TF3kIcS/lmLbYPw7YqjpvkpEct68ls1/bxA4D5rBqzak9rRw2gDrvzGk\noxvKX/sGyiePwyj3fbCHEi6KAMbBTPP/SSDQvKfJHIFg7hkCd6Q/xwFXVI8a\n7jr3\r\n=bFI+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrSOfDYazCoRPGkXrnr7rzjPSk0Sc8Oq3F1QP9POkfDgIgElye8do8ebtYfHaq4ymHD4la5a9qI0SNGPEWLrRO9jU="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.11_1558477747773_0.1607713888191915"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.12":{"name":"treat","version":"1.0.0-beta.12","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"09d80d0c03a67e10b7f6e10e3a40e77035d35dcf","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://lerna.js.org/)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **_legacy browsers are supported._**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage](#themed-usage)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#styles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport default ({ text }) =>\n ``;\n```\n\n### Themed Usage\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`styleMap`](#stylemap) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\nThe `@keyframes` property allows the creation of keyframes that will automatically be attached to the style as your `animation-name`.\n\n```js\n{\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```\n\nThe animation shorthand is also supported via a `@keyframes` placeholder.\n\n```js\n{\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```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\nThe following styling APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file.\n\n```js\nimport { 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```\n\nThis 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:\n\n```ts\nimport 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 \n );\n}\n```\n\nThis pattern scales extremely well to [atomic CSS patterns](https://css-tricks.com/lets-define-exactly-atomic-css/). For example:\n\n```js\n// 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```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.12","_nodeVersion":"10.15.3","_npmVersion":"lerna/3.13.4/node@v10.15.3+x64 (linux)","dist":{"integrity":"sha512-Qk9tJb+dHBTkIN1RsPhz3dDjYR2atbCvWgeAjhNHalR8NECMxHiM71rAgEKiqpPvzp0LrJ+vc7UQ2ijh9DdQJg==","shasum":"27777839f2a6c03b86e892d93cad0a11f7d107fe","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.12.tgz","fileCount":54,"unpackedSize":394458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5JWDCRA9TVsSAnZWagAApmYP/1Gln3GIJyaK1x2Jmn2n\nRKpPCCzJJ96X/KAzx+VUGX94f8D+qLX1kcPZEGjgj4jP6WyryBL8LmZ4S/20\nlkHHG25jxT/KFdlh8XbHLodzOvbFoSFcDrS0uYWQ4Q+w8kjCGJp/vUKCnK+W\n9f12xRJLzQu43k1HxUJqd0iFZKIGMqwj69sjp3H20VzNqUo+p6r3MmQWonP9\nDdLBoJDee2EKjQJm8ywO5sBpqJWWtpJLWd+VsP+DIEuLdTr+lumKYZG5knLo\nXyXvONhLRrwGdj4YsWdHxTC5RcGJYj/bPYMrcHVvD1AHIDlzImEBNR+bGvFv\nthYw5fl0gN34X/bCaxVubXAKEi33qRCrMEGXryyjdnQ2iQV4rU3aYGh+1Gso\nxy5k11ltWzVl5vHYGuvXr0RvO+uIWjFE20LDp7t1ybLMLRihk/mtSpc2ywf/\nFsreK7O7yuKgpsfcW82+eXMtYVCLhrRYAwct+w4InOy6+Vy8KR3bsQyuHJyD\nAcJLZNt2/Qb+sg+y1iRjJ7B00mF98s4d97cALMdIKAEoyA949ujDZAkSICjO\ng+BLYNmt40RHAVb3kkebzEMGp3xs1gHMOHSSXMAbUynJq+AVi9YdF6a76QK0\n0lZIQdUFC9zwDDG1FhbwZ+N62eQzOUG7EPdqkrC4wtuKJ7EY08VqEPEEFf/u\nDuIl\r\n=xdWR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBGmNjtq08nxOWZtG4GKkmoeYkknqGFpmmR3DFZ6yCyWAiEAkE4mx+DtiC5kytSDkE8RKwHJqA99CD63A2fGBBPgtOY="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.12_1558484355110_0.338849429449372"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.13":{"name":"treat","version":"1.0.0-beta.13","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"5c01c96193957b6d2ac0cc676036ced602775e03","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://lerna.js.org/)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **_legacy browsers are supported._**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage](#themed-usage)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#styles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport default ({ text }) =>\n ``;\n```\n\n### Themed Usage\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`styleMap`](#stylemap) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\nThe `@keyframes` property allows the creation of keyframes that will automatically be attached to the style as your `animation-name`.\n\n```js\n{\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```\n\nThe animation shorthand is also supported via a `@keyframes` placeholder.\n\n```js\n{\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```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\nThe following styling APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file.\n\n```js\nimport { 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```\n\nThis 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:\n\n```ts\nimport 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 \n );\n}\n```\n\nThis pattern scales extremely well to [atomic CSS patterns](https://css-tricks.com/lets-define-exactly-atomic-css/). For example:\n\n```js\n// 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```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.13","_nodeVersion":"10.15.3","_npmVersion":"lerna/3.13.4/node@v10.15.3+x64 (linux)","dist":{"integrity":"sha512-FGsEM+b1vOip/5TyUipnOqgV/kphF4zx+dHz58/zlm8KLe1JUZcil2sqfNXyt8j74mJwu5fVghM5fwgqvyeBNA==","shasum":"26169a024eda69f02f3c16322fb3e01c691cf310","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.13.tgz","fileCount":54,"unpackedSize":394762,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5bKtCRA9TVsSAnZWagAArzEP/jRZBuuIS4UKDwPk+iXY\nv70w3U7fbW9iTDrhpJwvVsRHpLbiOY3YKpaFzElvPzdkOVjYPUQqEA/Tjjcv\n6tk0AAU24XfSHjy7bcIPyGYMXdLpOMNaDcPHEn21UtsmWrdtNZzpPxFs5iGl\nD1nOKDdtG/XB8/6PWla3uDgm3xHKgfziWYHf+TbFerxFlGq9gjItb63S7Fud\nMthhGNgKH6XZv0lgPwu/e4Jr3xYj4LxfKw9fW6dt1Ap2udj4helCGqXFhMlh\nzclR3YVAgQQ532JXj/DCnI/MgAui/fFMgmOz7AsEPnANWOZeIqHSXXGdz9+Q\nxDYLRRuWBZdb5SRzK1+zHMe/ZpbBaqV/SwqOg3O804/vPpZh1VuHP/LeOJv4\n23pK2wtIyTchc4vV5CPOxuWgmeSCviwAJSzbhT/dQPZpxy76b/iJ/G02SJDs\nhEe0emVK6lCPYYYv0F974XEeZnpKdlwOAne45HpCBnpaVZlueqStG0CUdAS0\nIAyOTQ+of3mCAn7poGRoUM8RooqzG3DY+KKS8LmrgDLnysUpMzpNY13r8Dwf\nPowM2dBsJgow3VV6FtDHq5yxznUo00EtyJQpsMe85czPpvP8sEnK1Cz1ysx8\n9lX41nX7XS7WHWnkFHJkUriH5VT608BUPdvImoR+AsH227C9kb/HMPJwnh2+\nHB+/\r\n=sWAc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDD3pAdMYIuo/Is6/dVhdyU+j9YxoZ1+gHRC1Tf2T7H4QIhAPG3pORy+/S7HsEugqJoCrf5tu/LURPo1n6V7FUjxN6Z"}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.13_1558557356233_0.7816153592104971"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.14":{"name":"treat","version":"1.0.0-beta.14","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"ed4a1cf80f6a16f822b75a542c11620e9c4f075f","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://lerna.js.org/)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **_legacy browsers are supported._**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage](#themed-usage)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#styles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport default ({ text }) =>\n ``;\n```\n\n### Themed Usage\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`styleMap`](#stylemap) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\nThe `@keyframes` property allows the creation of keyframes that will automatically be attached to the style as your `animation-name`.\n\n```js\n{\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```\n\nThe animation shorthand is also supported via a `@keyframes` placeholder.\n\n```js\n{\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```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\nThe following styling APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file.\n\n```js\nimport { 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```\n\nThis 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:\n\n```ts\nimport 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 \n );\n}\n```\n\nThis pattern scales extremely well to [atomic CSS patterns](https://css-tricks.com/lets-define-exactly-atomic-css/). For example:\n\n```js\n// 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```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.14","_nodeVersion":"10.15.3","_npmVersion":"lerna/3.13.4/node@v10.15.3+x64 (linux)","dist":{"integrity":"sha512-FiR5TEUv3AMrSZC0VSIVz2POWyd+s/lMd5Iic6kdizW2XNb3aALnyv2LmHe2DjDQkxiawEFxU6F+brNlx9oP9g==","shasum":"30a3b5b05ad8a9054eb3160522678655c2f988a4","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.14.tgz","fileCount":58,"unpackedSize":399802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5c0CCRA9TVsSAnZWagAAHdsP/jpbdJgoFQGtXnJD9Nw1\nta8z81ybAgoUnUe3lr80rm715WDkbDJ1UpXzCmHV5jWfxfHE8pNUeKkbbkOF\nToZJCjXmnX/zyrEUvzTNHbSad4OkAY/I9T3axYimKPhZ3DaKncaoEM4/dzel\n2H1HROXJzf/PKfR6DAKpuH3OrMom3UUDga6h+fBJMmDfcq8liqIDBvfn5l1s\nfF8sybWLGTjpJ2ljk8DHDbRyb2v7E6ygWgQ0k2S6o7XZxxczSfXZIhIe6Iv+\nlsMZUp/5k14Y1aHe8hDfArGozMfj3wKLNZQkHGxqNCm4s+OzbEY9N/4dr2Uo\nAt0kNrH/90c9dnnphcY8wYhvLI2j4qDjYD5e26fZDADCtYkyCJGOUYOYzZAv\nj/MKqKcszm+/GFylZzGRXgmALfGLfsNbfc0xX02QmhBqo+2XeYcrFSshUp+z\nGnXYXqPKThAXbNDzU74/YluECVtc3n2olVb2sHO1ySP0hlWdra0YwFoZcsnE\nQSv443scmA2ednVTT/j10U7ftMZzrGgOncUkaVo8x99+JWW607MC8fnPysjU\n412hLY0si0aJA7/MazkrlbLHDFg6ZKTuDL83qYvWFGhUv/JZK8a3U5k19g0z\ni1kmkjthgJGLrMloORxkBVaOuStacwfxr0PE4KTPvAr+FsK34o+XFU7xm2Au\nfKPV\r\n=rh5g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAEs64G2KdHwrNRvlpS7Zz+iuiqSp7tMsPR54vnJ1rn5AiAhEOejeSbm4jfaB7nzq6QYY0/rKTPS3hz5Zg2qU9b5PQ=="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.14_1558564097706_0.9641744676121347"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.15":{"name":"treat","version":"1.0.0-beta.15","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"791fb89b32cb0293051672013328ca908a51b4ce","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://lerna.js.org/)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **_legacy browsers are supported._**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage](#themed-usage)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#styles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport default ({ text }) =>\n ``;\n```\n\n### Themed Usage\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`styleMap`](#stylemap) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\nThe `@keyframes` property allows the creation of keyframes that will automatically be attached to the style as your `animation-name`.\n\n```js\n{\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```\n\nThe animation shorthand is also supported via a `@keyframes` placeholder.\n\n```js\n{\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```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\nThe following styling APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file.\n\n```js\nimport { 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```\n\nThis 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:\n\n```ts\nimport 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 \n );\n}\n```\n\nThis pattern scales extremely well to [atomic CSS patterns](https://css-tricks.com/lets-define-exactly-atomic-css/). For example:\n\n```js\n// 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```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.15","_nodeVersion":"10.15.3","_npmVersion":"lerna/3.13.4/node@v10.15.3+x64 (linux)","dist":{"integrity":"sha512-MMWxgIkBmAOQs20Tnny8FBBbyrmSQAKVkeRA2GtzzHh43Wb0Wazc9G2gBuTlCwm4yRhVHnaFQU136QY+pCwBUw==","shasum":"a883d40948c7e5e7f08e9650602db3ce71ee59c6","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.15.tgz","fileCount":58,"unpackedSize":400076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5e9gCRA9TVsSAnZWagAA7AsP/RJv0Qsrxvw6j7AsLMCR\nZGYCILyQ/rQSbZRY38764QOrimb4Xexln8AVtkbwy6Goe2ggHkFryYU1fTbi\nGyrWFkXYFEl+omaQajNJ3Sw1LWnbSxfaiWXplQ+Hbto381IiR7S2+pwRzCl3\nuWS9fwP7T9qpsZmlqjC5CuBBNZ9Q/d8iscuYIC38Im34ZtBXPNrAXU3M/ZgF\nu+3oFY8N+CtkVYdBPH1sbb9m8OWmP3y94ij6g+9I+/L+w+HpQ6oXiYHLwi0/\nO6FKuucf8JojbUhabJXIpgWpv/NmdOiv8vvruyUOTKMzATmERM9iK0s7iUvk\nwXFhEakOuklfR8PZ3bloTUAWYMhUOAFBjkE089PGZ/AbS/sBPcMb/I6q2n+V\nU1MXvdG7BYI0vgXY5xqgwNxobMLbzhjAjRXoSFPL6U6SPqln+Qw3dC61vcI6\n4PXDJa4iM6us9n/KHdqN2QuJaleNRTedm0msDQaLZVul0Pdgx5lvX4DxXtX6\n+mIbQ9ba/RMfzgHFAHpVSuw0tD6ED9RVFRn8MT6bHq6omJvshgz9HmkVMvMn\n7dClaChzc2/vvFgLVlUtFqra7T7ZM7BCbjDzl/WqAzhmCCYMjem0chHI4iXs\nw/gQIp5a+nWo9bq5co+awH9x1Ai3QZoMQFTIFTX+DsjWe++V9m691gMZk+0Z\nijB1\r\n=xGy5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGb+Dft9ngOEHX9yUjOI8hWTSjsidY5/+GrxBZ0ZIAaNAiEAuoZQkqJQhuVfSbqObBRa7vgEtgUu4sliT3mkN0/U8Qg="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.15_1558572896151_0.5585713524971487"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.16":{"name":"treat","version":"1.0.0-beta.16","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"1b7d025101085f3c647b53cdd65c3634ebe33725","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://lerna.js.org/)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **_legacy browsers are supported._**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage](#themed-usage)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#styles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport default ({ text }) =>\n ``;\n```\n\n### Themed Usage\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`styleMap`](#stylemap) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\nThe `@keyframes` property allows the creation of keyframes that will automatically be attached to the style as your `animation-name`.\n\n```js\n{\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```\n\nThe animation shorthand is also supported via a `@keyframes` placeholder.\n\n```js\n{\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```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\nThe following styling APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file.\n\n```js\nimport { 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```\n\nThis 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:\n\n```ts\nimport 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 \n );\n}\n```\n\nThis pattern scales extremely well to [atomic CSS patterns](https://css-tricks.com/lets-define-exactly-atomic-css/). For example:\n\n```js\n// 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```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.16","_nodeVersion":"10.15.3","_npmVersion":"lerna/3.13.4/node@v10.15.3+x64 (linux)","dist":{"integrity":"sha512-vGb0PiDQy70RkTxMV7SfK2FHBUcT3pNEFOXT6eRHeiSszVbhHRDmTnQEZn8UkwdPPFDbbdyHl5q5scT8imQ8Mg==","shasum":"8f7e408e86d8259d5607f3d369df0f9279aef0f6","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.16.tgz","fileCount":58,"unpackedSize":400134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5gCdCRA9TVsSAnZWagAAYisP/38Hh3WrA2x9pLeaD7D+\na+5MCNTjUCO+ZRkMwcFQ89CaR/Cp4VfR4bzcV76pbJk+46sjFbArY6k3Udmk\nAT8ycO8KsOrm8L6y8hplcKOOEthHDWoyduDx5ftSHuNmP7w7IZ5PgHxbP2sE\nOun53JdyslS6IP+di6iLC08xdHwXZZ2MwBBQfJy6FjwrppEdz86DeMQY/yLW\ni9i44xJuU/7Rid0JcocW9DghkT+cKDFf09UFGAC0y2PmpDpQv+kxLEHjyowZ\nf02yEFkeLkcrRQKCQAJ/aV0R9lHTUpLmeyjpZ/yVNm0EU8uTe7zjMDAyBgCB\nNV6qtbCTgmM1MFmHylMIi2DJJkp4qVb3KxcgZ32TNyQfR8L8SI8UaxQezwyo\nPqdiXEsGPrHg9gZFi/wsbX4Ipn4Dnqcp0WxOPyAjpOYcSTSRIEbozIwNsRdX\nE6Dtgvj6UZyejns1Bqfrkflu2m13Ps/OSjVEeoD/fkw65c/Ml2or7ASqjFo0\nsPHZm7/0aTpEKHSdnnD+McGnddZzxJTSnJsQP/feLV0PQ6YLZAcI4Ilge/bL\nIVd7uDs4zC1z6QN8CwXvovv+1DL12ewVhAM3X89TjuhHu+WxVfUPZmGiIxBB\nrEC4SYjuB1wETuycgnj/kUn1dwQV0ddngTlAcyIO4xf+6hEycWZzxyPD4PX4\nWOA+\r\n=5lG+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8Vgp9rAfg4CkMbt4RiFMB+QggK7gY+HeGSHh14m2ffAIhAN/CQTfg17XYHQGBDLXj+3/t86k8WlzQjAx5esd+7NVT"}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.16_1558577309201_0.6224368352960141"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.17":{"name":"treat","version":"1.0.0-beta.17","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","cssnano":"^4.1.10","csstype":"^2.6.3","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"828a1dd425df3a1febad647ca7953ee057398fec","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://lerna.js.org/)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **_legacy browsers are supported._**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage](#themed-usage)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#styles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport default ({ text }) =>\n ``;\n```\n\n### Themed Usage\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`styleMap`](#stylemap) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must provide the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\nThe `@keyframes` property allows the creation of keyframes that will automatically be attached to the style as your `animation-name`.\n\n```js\n{\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```\n\nThe animation shorthand is also supported via a `@keyframes` placeholder.\n\n```js\n{\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```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\nThe following styling APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file.\n\n```js\nimport { 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```\n\nThis 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:\n\n```ts\nimport 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 \n );\n}\n```\n\nThis pattern scales extremely well to [atomic CSS patterns](https://css-tricks.com/lets-define-exactly-atomic-css/). For example:\n\n```js\n// 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```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.17","_nodeVersion":"10.15.3","_npmVersion":"lerna/3.13.4/node@v10.15.3+x64 (linux)","dist":{"integrity":"sha512-9NX0MeIJuaRuANJjqO1WmtiqKkZ2fJQodXNmw5CjN2klRTQ92EKluVM3QD6uyr3FGQbI0eQDyW4z8fualoLLhA==","shasum":"effbe05a44d93783ddcc97d763e32c6470f89c2c","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.17.tgz","fileCount":58,"unpackedSize":400133,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc5jWZCRA9TVsSAnZWagAAhSEP/2t4lHIypwXOAjyNgj9v\nxxTyAZXqqIK8Vm7tZwbRpiR6g3/koJobinZfuY+WeLPY1V6S3JvUAMTM72VY\nlTp3hUS36MDARAgxGfzz6+B4IHeAz0iJZqgdpgvYpUslZaHewJQsDmLKeE2R\nQhFHMjRXo6eH19wkmgVDZ6swtV7UZ2yCWiwfLARhUDBPikyVFoDb0oW3/Yo/\nLxB6oX4CvqhEJqgy4Ae4IRd46m3tXoHrNWEjBS76TjzUOYNAqbAZYn2kSEUZ\ngBhbBXBp0zXY1jYq4P9xOwfEzDJQ+H/xyNGZcOYTh9QHaJ1UPVLIevA4eKRX\nZfUr/HJQWaAWeev/8AJlFNv5t9I/jVHmWDivaBsB9ZbqYuaXbFnv4LTLvY7i\n58bWj4lSJ341x6X8THZj8I5Nxeuk7vp0UcFWR6SSanjH3vtJjOMAvjP5N5F4\nLZCgDU5dK+0bhi1zTYh/4p5j+3nyOz2ywytULVDW/bqzTV6ovt6xARUxNrjQ\nm0iqbsLoerXxCz58PUpI/qjadg/PYQYQmJzfU2bh9J3wd/V7ATYe54tnfWSM\nNdxJF4/vGYEvS6o2v8AGTvJNdEhC+8Lykztl5c/Kb39vH1vwYtj8CO/sMBbm\njNO2mTTCPV0Z7nWUIGT4mA3Uq52pGVZ78bNML9XLIamm6uth8OJ8BrZ6uCwF\nFWYO\r\n=UWQg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUmsaQLrXj0ANb/l7TvjYZPb4G3wVBt0nQ+D0UJjT/lQIhAJpK5ljohIYTRXoRb7KLthbbII361i/FHTfgaN4KBvAE"}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.17_1558590872362_0.8797023268059834"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.18":{"name":"treat","version":"1.0.0-beta.18","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"728c9fa5a0266a177ca486acf5517f1e26e9ec1c","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://lerna.js.org/)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **_legacy browsers are supported._**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage](#themed-usage)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#styles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport default ({ text }) =>\n ``;\n```\n\n### Themed Usage\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`styleMap`](#stylemap) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must target the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\nThe `@keyframes` property allows the creation of keyframes that will automatically be attached to the style as your `animation-name`.\n\n```js\n{\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```\n\nThe animation shorthand is also supported via a `@keyframes` placeholder.\n\n```js\n{\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```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\nThe following styling APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file.\n\n```js\nimport { 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```\n\nThis 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:\n\n```ts\nimport 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 \n );\n}\n```\n\nThis pattern scales extremely well to [atomic CSS patterns](https://css-tricks.com/lets-define-exactly-atomic-css/). For example:\n\n```js\n// 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```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.18","_nodeVersion":"10.15.3","_npmVersion":"lerna/3.13.4/node@v10.15.3+x64 (linux)","dist":{"integrity":"sha512-Bm9vz4beMkLYW1wmVL1hfXX10bDth6LfDcurdu79A6i/Uigoi5kDhqFilCu/lp1hdXUmIOD22SsziriGrm13iw==","shasum":"9da755c75e833740147dbbcd6350b24f979adcf1","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.18.tgz","fileCount":62,"unpackedSize":412803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc64C0CRA9TVsSAnZWagAAT+UP/3Or9CLOtf/yWEUaZonM\nU+mKCaXJBH6bEWwmV2RM7PQ12eDO2wP50AhzD3W0ocLhp6+A3jr6dQNwi/Ha\n5lAR9oVwiDiGHj+8ZcmE5J4TZ4Obzev1Z0scwr8ujkpVvkpxNH+t/1tPe/27\nq/5Zv6D3qPpFHvbkFuhgBrVgtPL8EkMXpP8ROKZqlVBoarBgXzLlQ5/H//Tm\naPbf3aaN35Wjq+YJ4AbPdTfP+ZHIftC6nPQRdaWXoMP8ikRHS0jPiesy3pie\n2Qsf221av7aDZOFlCQpgvSpcgbJTPDe4WJG8Sd1I2ZT5HCT9PxkCNQXMGXvV\nxoZxeDVAOQvN9EQngQG2h3sxyxd3do/R5vtFwhBNTVZMFcDzCaGO4FF4BNzK\nDRhuhDDesc1GxAnU3zpJzlitmO7QipAjCLo98+nylGEVJJ0olQkyRvg48VHb\nCEzmHMWOvyOK6Ms3Z8Izef/x+ShmhzPVscOwDYXd/xxx0qvFmtnOn0yS9EVl\n9LatExufHbLs/u9zyXPt4lLuX9aWCpIZE0QileWtgpTGCNnnKz8IY3Nv+foC\nUY8hP4shNhQvIIZ0xvBSyLgnGmKFWkwenaceYzE9zz3HPS8PAKOMD4UjXwXV\ndOST0EuKAN1a+Hrl8F4cL/XYQEqBId5omfeM1fYP0y6XKkqhH00JF4zgo3lw\nkN93\r\n=S0Ik\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyqRfge5rCu5w6byWMREpYBxP04cGaykpZtLaRJQMRSQIhAJD54gsnJInsFAz61nKUuXyohU8Irtqzctg90J0Quw9w"}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.18_1558937779741_0.9962263915727976"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.19":{"name":"treat","version":"1.0.0-beta.19","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"5018046ebcae9a059776f180feecb64786ef6475","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://lerna.js.org/)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **_legacy browsers are supported._**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage](#themed-usage)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Styles](#styles)\n - [ThemedStyles](#themedstyles)\n - [Theme](#theme)\n - [Styling API](#styling-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#styles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport default ({ text }) =>\n ``;\n```\n\n### Themed Usage\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyles) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Styles\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`styleMap`](#stylemap) functions, or returning styles from a [`ThemedStyles` function](#themedstyles), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must target the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\nThe `@keyframes` property allows the creation of keyframes that will automatically be attached to the style as your `animation-name`.\n\n```js\n{\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```\n\nThe animation shorthand is also supported via a `@keyframes` placeholder.\n\n```js\n{\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```\n\n#### ThemedStyles\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Styles` object.](#styles)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyles), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyles` function.](#themedstyles)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Styling API\n\nThe following styling APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file.\n\n```js\nimport { 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```\n\nThis 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:\n\n```ts\nimport 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 \n );\n}\n```\n\nThis pattern scales extremely well to [atomic CSS patterns](https://css-tricks.com/lets-define-exactly-atomic-css/). For example:\n\n```js\n// 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```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.19","_nodeVersion":"10.15.3","_npmVersion":"lerna/3.13.4/node@v10.15.3+x64 (linux)","dist":{"integrity":"sha512-EQgmvqZK1odQWXHVmZnS77j3iVwf6ibi7F7f4WAazNTkPRO5hdXUy9flBTcZ7kySAjeArlyj0NxL98Ie5i5B7Q==","shasum":"0155423d72b7da4119a6b2efe20b0aa11548d4d1","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.19.tgz","fileCount":70,"unpackedSize":428363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc65CnCRA9TVsSAnZWagAA6uEP/0sAijur4Z5gbwl0EoUU\nm1wQjaRvHuNXud7ra1HSkbHAAhMBM4PZDEVwsys2rs3LHbiSdDPVPhAY0BJ0\nxfZZv2c1nCFfS64K16ZyTBm6qyENzumjXYNgCBFLIT5fC1gjFO7VuW77ZAPk\nJ/X1Ny+YtpP7U/d6VzCMq8YaA65HjLtYf3suYsQbTz6dCXjfi3QkKob3Rf3S\nztSZKpJ+iiW2wPKVIfI0gP7FMj8uAk0oXrsFcLSKftG16TGs3t4GwyU3zGxn\nQFbVpjc7VC8kJaWceUgk09urAEezhPziI3jr0OvpdBhfH7XntNlKHnr3dvT4\nS1UcojdDTdXKwjGci0EzLel3vav5Ib5jKjtBKMCs1B13hCVnTUQWze+VEojC\n1SdbRZxsddsLTkIGxPbYc+NKTmXm17TFrVP8wBknzxNdZB87YkJxJNbko7VU\n+hQff3NdCjifw0eQdVBwIk4eKrItQPvg9hQiIA9oq2MQaDIRsBCiaTkIGpnp\ntOjKU2PSQtY6/KErVToYmPe/ycfPuSgT7wu6IoAH3uYWBBDGUFrCY47QBloD\nKoSG0hKWAjZuD5Hac2TP6+AgZdtaKbcIj9dS6rETfqnk7l0o6RGFKPvZNfGV\nzTK9EwY1r9ZXWtFZvJy6Z3PJVrawNyWVI/EDHBY4wracUrIb7Xc2rUMkdiaZ\nClQX\r\n=B8xX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/O4mKQE7uHZQAGMApaFlj+/4UzE4iMOXvlyclNvO8GQIgVoeG63a6X3/NcNdrWLTIUOOgXjlidKpOOK407W3qlqc="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.19_1558941862532_0.33109600068627265"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.20":{"name":"treat","version":"1.0.0-beta.20","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"1da4b890ca76523a2dafedbeecf9e3a9d842da7d","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://lerna.js.org/)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **_legacy browsers are supported._**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage](#themed-usage)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Style](#style-type)\n - [ThemedStyle](#themedstyle)\n - [Theme](#theme)\n - [Style API](#style-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#style-type) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport default ({ text }) =>\n ``;\n```\n\n### Themed Usage\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyle) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Style type\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`styleMap`](#stylemap) functions, or returning styles from a [`ThemedStyle` function](#themedstyle), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must target the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\nThe `@keyframes` property allows the creation of keyframes that will automatically be attached to the style as your `animation-name`.\n\n```js\n{\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```\n\nThe animation shorthand is also supported via a `@keyframes` placeholder.\n\n```js\n{\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```\n\n#### ThemedStyle\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Style` object.](#style-type)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyle), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyle` function.](#themedstyle)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Style API\n\nThe following style APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file.\n\n```js\nimport { 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```\n\nThis 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:\n\n```ts\nimport 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 \n );\n}\n```\n\nThis pattern scales extremely well to [atomic CSS patterns](https://css-tricks.com/lets-define-exactly-atomic-css/). For example:\n\n```js\n// 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```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.20","_nodeVersion":"10.15.3","_npmVersion":"lerna/3.13.4/node@v10.15.3+x64 (linux)","dist":{"integrity":"sha512-U0dZvLHTOheM47UnbgOdnyBn4/3zRq/5p3zV9uILap6iwSIAuSaK50dtlftchJNicFtlMXBITTLF0YBJBlP12Q==","shasum":"1e3e405cd8d99013dc7e5abbdf6ee1ddc690c4b9","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.20.tgz","fileCount":70,"unpackedSize":432547,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7L/wCRA9TVsSAnZWagAA0sgP/0YXqJPPkWOxi2GNaCsU\n0c+WvXjNIb/jhTCz5JkYYVsexntCdCh6hV7U/pUwwPcCajoqDELiy5ecN/yE\n1jjxXHBoPFE1qUWKIlUF4uh5+uuXRzQgh+dolOHwpjZYm6akdQLmC4zbilkf\nPuvomFPxAN5RhmSjJRFFQxHXqYjMpDnWRqQtL8mexZmoEKDWctClzqh9EsHB\ndkvGfTNkMV3lOjeSDoXLjtkT85Ot8IV3+/WHCXLEbiHJI/3kvgl7DkNTe4ch\nw9B4j7xU1ZgwMNxI/bvKjqDrmYHpAPf0E1HEJtNCua7aDrw1nP/wBODyAYVh\nj58oiPa7cGNHMjGrn6pXutP22TP7v2AgxCEB37lIuhsDDDDksKShekAB1Lbw\nVZZGG+X2ngiP3gtEIYyKxQrXuxUh6XUtr1TYcVXlv2vUtnTn6qcCgMYNUK52\nQfmOHY0sYSVtVVd1H9DvsDVrvnDZWHR3zVVpfDyTQLIPdfXEwY80q2NkSNDe\nVMAuaiPi/WLsMt9KhBZr3kPEoP6TDiL4tDMfGFc+4QhheJtN46T3vd9Ui1kR\nUUuEwR1v8ZAkEiqJqK55+ShfZ4h0UqqtQQjC43LHwD8mDTnCBjmCZlKSATmg\nCCm9NaZzF44Tbz+wD0kaVs9FQ5YDqkqdN6dfHNI1YKkmMtGA8VwBaT5U/nf6\nN/sY\r\n=CNAU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICsDeAwcCdGK7UnHkcQSjaWC38CmtrtKYK2TnFWbLT4VAiA4fusR5QwpfDywyu4Ca6iJaZ3kewJpvyPKSHU4jPH6IA=="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.20_1559019503867_0.554827487423537"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.21":{"name":"treat","version":"1.0.0-beta.21","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"f5e5049d12cf9cf090fdc7fc5f4f3ee5d34ff551","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://lerna.js.org/)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **_legacy browsers are supported._**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage](#themed-usage)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Style](#style-type)\n - [ThemedStyle](#themedstyle)\n - [Theme](#theme)\n - [Style API](#style-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#style-type) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport default ({ text }) =>\n ``;\n```\n\n### Themed Usage\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyle) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Style type\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`styleMap`](#stylemap) functions, or returning styles from a [`ThemedStyle` function](#themedstyle), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must target the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\nThe `@keyframes` property allows the creation of keyframes that will automatically be attached to the style as your `animation-name`.\n\n```js\n{\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```\n\nThe animation shorthand is also supported via a `@keyframes` placeholder.\n\n```js\n{\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```\n\n#### ThemedStyle\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Style` object.](#style-type)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyle), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyle` function.](#themedstyle)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Style API\n\nThe following style APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file.\n\n```js\nimport { 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```\n\nThis 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:\n\n```ts\nimport 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 \n );\n}\n```\n\nThis pattern scales extremely well to [atomic CSS patterns](https://css-tricks.com/lets-define-exactly-atomic-css/). For example:\n\n```js\n// 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```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.21","_nodeVersion":"10.15.3","_npmVersion":"lerna/3.13.4/node@v10.15.3+x64 (linux)","dist":{"integrity":"sha512-C+STda55kuGDRP7pttThJ8olAqSr9AGrkzYZKNfv+pLwcHcPCuVYh1OPS/kFQikBoO4JySWLVavVUVLMH7aAjQ==","shasum":"a16b0b55cdfe2d2472e99c9137b1e17444586085","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.21.tgz","fileCount":70,"unpackedSize":437383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7OZVCRA9TVsSAnZWagAAdVcQAJwWtV++BPUTcWMGHdYS\nz5H54tp1jUJBA97wyvUuMrB/XUqDz8NsdsOBnTbyxGhgPwhmSshJBdDPTwUp\nBqlO3qJ2QU3hTGbR+XNM9Xj4my2oaTzsug3Zd6gISPA0nTz00u8Pr9E6o3pX\nlOMMvHI8EwbtlnSTtnoGjgreaeW7It9rYo9ox82ZHyvyUznuknEIV/v9BKm9\nwDzM/0gmsSwXe1LnZ3Ucom9+t7ChyM0TogD/XjADg7Qkb5pcGZGAtg7r8D32\nV4cIA1fO8JAOfJn33Znh1x/VJuOlcOmlbEE3IK+V8nq3Mp3jN/yohCnhgQ8I\nLw2QzGiBy0AcQ7ZdVUWdxZDe6Mk3v6RVTKvKuRdV2Y0wd+5Rc2Ei3IJzUfcF\nMkAQID3ZO+4bAc5leSxb1DGS/8WKDZQsQJ89bCEfVJ7u0iR4M6Jwf8NQNPCn\n0h1u55wb/IgHMQHLX2aHyjS8WCwXRibB6jKyDPtqMwN+gDR54tYqifOh8Yzj\nECO6ijZBusGibGpi9ek5X2zROdBMLsjKzU/Ua9uq8RjpgFxm54Fro228uUi1\nTpyTD2hXJiGkYtzYb84K07a0z9qmKpZI/7RTYp9cbTg2scTEzbG1ffw9Wf3u\nme/JgqIO4edOZcPCrWMW2m9dg3qxWXiDenvaChf697nahMdDZtNppYPJWzQ4\ndmoh\r\n=2w8d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF2CfuvC6LRtlp8WGCyu+AhQ1BW9+X8ll61gM1umFKnhAiEA4kqEqqDxYyruRnx4+If8XNmDaZNolgyMCzPgJ6spWVU="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.21_1559029333269_0.8994278509643763"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.22":{"name":"treat","version":"1.0.0-beta.22","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"ba4cf40dbe037c19fc610c4803abc88e83610278","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://lerna.js.org/)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **_legacy browsers are supported._**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage](#themed-usage)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Style](#style-type)\n - [ThemedStyle](#themedstyle)\n - [Theme](#theme)\n - [Style API](#style-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#style-type) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport default ({ text }) =>\n ``;\n```\n\n### Themed Usage\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyle) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Style type\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`styleMap`](#stylemap) functions, or returning styles from a [`ThemedStyle` function](#themedstyle), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must target the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\nThe `@keyframes` property allows the creation of keyframes that will automatically be attached to the style as your `animation-name`.\n\n```js\n{\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```\n\nThe animation shorthand is also supported via a `@keyframes` placeholder.\n\n```js\n{\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```\n\n#### ThemedStyle\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Style` object.](#style-type)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyle), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyle` function.](#themedstyle)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Style API\n\nThe following style APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file.\n\n```js\nimport { 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```\n\nThis 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:\n\n```ts\nimport 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 \n );\n}\n```\n\nThis pattern scales extremely well to [atomic CSS patterns](https://css-tricks.com/lets-define-exactly-atomic-css/). For example:\n\n```js\n// 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```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.22","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.13.4/node@v10.16.0+x64 (linux)","dist":{"integrity":"sha512-rkHohrFHJRMticA/rYTvdaUHBG36eo4LAeAIHbLh0Z5BaNMIdcypOzXCIC3O7YeJ5uroOm+RDH7y5FT4WbBReQ==","shasum":"a836854d0bd0e3359e2075ae6eb9265e5627d518","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.22.tgz","fileCount":70,"unpackedSize":450193,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7b4bCRA9TVsSAnZWagAAChIP/i4hxLv8uuOLecGtHH1A\nzb407JzDtG199ScpS4YWmDelaEcij+330GjFoFOhulnfAjNzg/9xu/UHFh8a\nNFA8MfvuaJe1JQT9gdy6pZxyaDZA62i66iyA5qF6wD599KStWgQKWJ+maCza\n3g13jL17emhQOQDcfnOlZ2BMJyznFsTNyBa6wILO4SGVo5tzey1E0jpYp/eL\nATF7JzX9SLDIooLb5AYdBxymg1F5o1Bu+HXlpQjI8NktTFtaE9aRgp9vCrjw\n8gMSMWZGDvzvm+JmjFrjelfB+GCWiM2TDpppNzPd1Xh88uDeBv2YKBvWUpji\npeeumI51V8P5gYyQ7pHHNi1E1W5mZEUONoMkRznwiweyE5LrTJqJb8C58oty\n0eiWomhipNgRue9ebs5RtulIWfGfLU/o/RfEm6hPRKS6zZ2Sy2nSeVmTSKMp\nqsQi36wJje/WCdufuAG0pLqKqeIzZ8IuG+QUzXPxyrKN8Kmm+Q6RalTCzh1y\n/hutnquo1N+Eif4Hq8mTAfv6lI5jrGiGUkv5PL0gmWKbWN19aRwlzoXecc11\nJIbyzFgmxqlIfKdLZuWlJBTbmPexJbdBBDf0ZiQbXmlpoAla7wwTcsf8AgE3\nSiSzTT1zWgvW3idI+gux678FTAHA9V/V1Cm6M5PscHFNqnqPLUuSFgskWyZk\nj4Q0\r\n=j8cd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+8Y73om4dCi5k/dul0XOr0YV1M5AvC/JKhMPCHQi4WQIhAOnPbSZJVflMrFJ0Zbbd0kP/mxuOEQUJsqov3+zVEooq"}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.22_1559084570523_0.9818122625516692"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.24":{"name":"treat","version":"1.0.0-beta.24","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"53cd2ddfcf8263aebbffd93a8a19b26cb2dc47b4","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://lerna.js.org/)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **_legacy browsers are supported._**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage](#themed-usage)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Style](#style-type)\n - [ThemedStyle](#themedstyle)\n - [Theme](#theme)\n - [Style API](#style-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#style-type) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport default ({ text }) =>\n ``;\n```\n\n### Themed Usage\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyle) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Style type\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`styleMap`](#stylemap) functions, or returning styles from a [`ThemedStyle` function](#themedstyle), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must target the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\nThe `@keyframes` property allows the creation of keyframes that will automatically be attached to the style as your `animation-name`.\n\n```js\n{\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```\n\nThe animation shorthand is also supported via a `@keyframes` placeholder.\n\n```js\n{\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```\n\n#### ThemedStyle\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Style` object.](#style-type)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyle), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyle` function.](#themedstyle)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Style API\n\nThe following style APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file.\n\n```js\nimport { 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```\n\nThis 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:\n\n```ts\nimport 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 \n );\n}\n```\n\nThis pattern scales extremely well to [atomic CSS patterns](https://css-tricks.com/lets-define-exactly-atomic-css/). For example:\n\n```js\n// 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```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.24","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.13.4/node@v10.16.0+x64 (linux)","dist":{"integrity":"sha512-dqP3EsL/Of+iMmbVYQeWhrwwpsdQaRWOcjCzbXWaJJF0PcVE/MnRSD22484SZ2wkDbGuL0jdKHZc/pIF2HtY3w==","shasum":"d85719ea9b2cb81187a74317cd525309b2c03132","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.24.tgz","fileCount":70,"unpackedSize":450191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7wgnCRA9TVsSAnZWagAAdmUP/i8V1EdSoZU+VCBfjY7I\nU2DTTXCmemXgOTMwaFHoDax2MZdBkMt0MhXXd5vzJ+xbBhTPumChmmCclL7s\nSchS8Jl8u8aiw5KNR7QYX1btwoOXTnAhLf4lnPDcUcbSYotZQ+EFEJk8eu8a\nUuo4EABTpK0ElNwNPzq2ygkurAnxQquH249xUXj1f6MosmSjx72jhqAHOJsW\nWY+Q6c3uC5933XBfFZcfgWik4fuZJ9BA6BxCxJUn8c/9Qp7TXr7xQe7cmc9P\nLQ0cnSIQlZWIr0clTLpxbB9OijKo9nphwgvP69Bcbr4yfsYEzsbKuxXD2xBv\nbTPW12LM//qpKP7vxDcnlFYG1fMjUZkj1qpAWWq1L7CtwjKnqyYXgGlyv1Zu\nZalc4+e9YrV1cK7WJo5Pw8WxzY4/T7RrLJKoUiF7CCtDbjDChPJPxbdPINzA\nxchfbs9lGvtveo1pgbXx2Yvf4rR1fMQ5IvD0OgdFP6nrurHutPAVhVZ3wLIX\nSAULdW8RrxU3JPepU+P6f4qib/k1iivPCHGq+HbdAHV5B8U5CAkR8MWEHh4m\nlH6Dvsg+SAxk+e2I1I5efsFet/B5AeyFFaje5kMoZ8rP6zoyWVGoZkI1r/hg\nNQo/HH57veSd0hJCwA22te5gtaLR0LZ6+3KcCXqFuLOCdLrwyS20IbwVXa2t\nMvrD\r\n=WmOB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNVhYSxj7CrEDoUwul5au2yxhU0PM7vc1tzh8c6okmwAIgJAcZFGtYolsmVJsL16WudSFmgxZkM0E8iX+v3hyh+00="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.24_1559169063254_0.9029066178071112"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.25":{"name":"treat","version":"1.0.0-beta.25","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"64c994eb4f99d835decaa024ae7dcd0692f25615","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://lerna.js.org/)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **_legacy browsers are supported._**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage](#themed-usage)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Style](#style-type)\n - [ThemedStyle](#themedstyle)\n - [Theme](#theme)\n - [Style API](#style-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#style-type) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport default ({ text }) =>\n ``;\n```\n\n### Themed Usage\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyle) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Style type\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`styleMap`](#stylemap) functions, or returning styles from a [`ThemedStyle` function](#themedstyle), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must target the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\nThe `@keyframes` property allows the creation of keyframes that will automatically be attached to the style as your `animation-name`.\n\n```js\n{\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```\n\nThe animation shorthand is also supported via a `@keyframes` placeholder.\n\n```js\n{\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```\n\n#### ThemedStyle\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Style` object.](#style-type)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyle), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyle` function.](#themedstyle)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Style API\n\nThe following style APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file.\n\n```js\nimport { 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```\n\nThis 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:\n\n```ts\nimport 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 \n );\n}\n```\n\nThis pattern scales extremely well to [atomic CSS patterns](https://css-tricks.com/lets-define-exactly-atomic-css/). For example:\n\n```js\n// 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```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.25","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.13.4/node@v10.16.0+x64 (linux)","dist":{"integrity":"sha512-eQ8YpKqAnRqeqmuol1rS7SiQBJBfFBLUlu+7mLQvTmt4UvXsfIXl94N5DKN3idTL3KUeVeuB2ujhRKvGeLN/+g==","shasum":"4c72c58dc52cbe8ee3ee035e7df02881f63d7e85","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.25.tgz","fileCount":70,"unpackedSize":450536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7x/0CRA9TVsSAnZWagAAOcIP+gJnlj8X4mulKI7blQAT\nHsBvFuTCoVlmPvzV1gGBGFG/payCttMrUySoWtofXx9W0cPlYJg18GcQN96D\n44ViRev9zXuMe/P7qjXDIgzlMrY/JhO0zjvhN2+uvJ0ztQsBFj0T4J2fObK+\nrC1SU2iijBUZjQectyKug5uM4BKEAhZitdnEbU4STK8IBCaf5Pm4kHQ8whpH\nqpTY7qSZJ8pf+jpH1RffQVV/kxyZU2d8f1nHZ1CiJoqC1mDutPXuOTY1U61W\n29wH+tftmIDBh/8lzfaptFnzOWHLzhT8ZDhZxIwNajOc+Fn/S0JMC/QeZrC+\n3vL/2LSjoDAxzVIqTcqMPl9kP8nRXtBcJpkIY88akz1lYlBtDts5A9yTutPq\n3XlNIrcwSITh7iYQmKBnnAVPadY+dwFR2pemW9P+QAwI1nWcn8GvqdBlTKtq\nUMg/kiYIdJRDleP+0rvq3PlVVtpH/8GqXT/S2wmZP1dU+XMnKEnmjkZXV6Oe\nMyvbvwlUbkHekQXldsTsk+tLCJwDmdh3aS7ReGTZVFQ9LbeqNDQBT0SPeUKJ\nZCAHXhJOOmgoiS42ujt3wUaDpVXgAAnPw05zG0H7W3LqlAx2PUkjJzYv/ALe\nlhaLTZ5HwRJEF3sYkLrh4Unrw6UMvRq9o5NaY2D2WpRyVIvxvSzDFmP+glDu\nGZME\r\n=hf6y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDv3pF/h8nmayqD4QWDyiUauBF0b/UNySqlAB7htz2mhwIgVILwpHqjklSyomO/cWjvS1FAX/AZH7M0in0BgJ5IlW4="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.25_1559175155399_0.5350584436127563"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.26":{"name":"treat","version":"1.0.0-beta.26","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"616627ac428956f740897905fc7a6be3535b434b","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://lerna.js.org/)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **_legacy browsers are supported._**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage](#themed-usage)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Style](#style-type)\n - [ThemedStyle](#themedstyle)\n - [Theme](#theme)\n - [Style API](#style-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#style-type) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport default ({ text }) =>\n ``;\n```\n\n### Themed Usage\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyle) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Style type\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`styleMap`](#stylemap) functions, or returning styles from a [`ThemedStyle` function](#themedstyle), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must target the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\nThe `@keyframes` property allows the creation of keyframes that will automatically be attached to the style as your `animation-name`.\n\n```js\n{\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```\n\nThe animation shorthand is also supported via a `@keyframes` placeholder.\n\n```js\n{\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```\n\n#### ThemedStyle\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Style` object.](#style-type)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyle), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyle` function.](#themedstyle)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Style API\n\nThe following style APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file.\n\n```js\nimport { 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```\n\nThis 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:\n\n```ts\nimport 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 \n );\n}\n```\n\nThis pattern scales extremely well to [atomic CSS patterns](https://css-tricks.com/lets-define-exactly-atomic-css/). For example:\n\n```js\n// 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```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.26","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.13.4/node@v10.16.0+x64 (linux)","dist":{"integrity":"sha512-Gae9I/5frO6O0oQ1QUWrmxpi6IPopnahGNBpKWFm7eakRlDIx1k7/Q7T/paAEUjNyhgLpL197j8klhfjBRfVFA==","shasum":"6aa325b2da7773bdd050b41ee6dc9ca52de412dd","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.26.tgz","fileCount":71,"unpackedSize":453814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc8FqqCRA9TVsSAnZWagAAD7MP/j+oHTTZVkM3a5so+ssd\n8TVktOruYBD5+NdS6Mr7Ect7RXv5nLTGVnzZb6AktwGbKEpmwNYntQEzJoR2\njfRHUjTxoQN9WEwdjvaSWUXc177tysStvXB07gBXNFFaDJ1H5q1SA6479yTr\nKj7mrfgn+Hy2/T+9OmdYCiSlCTXWp64OLzTGGwf6oliDvbvB0m6JiyJF7T/M\nAkvlJYwKse5Po8nj9z9wAT2N0OYYBaRUa4niu2J+emQYxjuxk7tST+NKmH6b\nOdZ6cLXCbh+UGjUzE9nPHL7ypw0HGiwuKSuZH3BMWV6X+9WYUXJ2sLWSZJsz\nQF4/bfawfZsO2ACUqr9Zg59t1/0bRZbJ0/F84/1xBmxVyYrgOZCdkOY89Ter\nYBAI0cnFHxCa+hAgVWG8kck2ciJN06WfPd3bsdKIIKZG/JgbmDkt6o/yw4nJ\ntl/K4477324yiuzxdE+wDdWaESvWLodD+0jN9LFo4OBF4JoUPKQjQTFLAXah\n455kXXslBGQ2c8LGHc+fo9t5IrujkKRkEgAqiKakT0AeNVvWIbwjUOfr3a/X\nVDdewta9f9pjb8pJQHFP1Xm79hMIKocfKf1UrajR4wTpBT4yGf8Xn+Vswi/B\naLfjXONTGs/PODJIQ3Udnsn57GizQLDw/YHPsP43EbeHR+fmVaq0NCArgANh\nJxmV\r\n=YReP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/OnHl2zjF3nTJmZ5taVTFVVd4ijEV54o7K2e6MCGIvAIgRvz5GbUUjlV79GlKX92Jo+1PNKDsQGwp118EqywVCbM="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.26_1559255721272_0.3414244263535786"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.27":{"name":"treat","version":"1.0.0-beta.27","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"2f03b8e627cb92c41e0132cdc319bc478f508d19","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://lerna.js.org/)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **_legacy browsers are supported._**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage](#themed-usage)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Style](#style-type)\n - [ThemedStyle](#themedstyle)\n - [Theme](#theme)\n - [Style API](#style-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#style-type) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport default ({ text }) =>\n ``;\n```\n\n### Themed Usage\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyle) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Style type\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`styleMap`](#stylemap) functions, or returning styles from a [`ThemedStyle` function](#themedstyle), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must target the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\nThe `@keyframes` property allows the creation of keyframes that will automatically be attached to the style as your `animation-name`.\n\n```js\n{\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```\n\nThe animation shorthand is also supported via a `@keyframes` placeholder.\n\n```js\n{\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```\n\n#### ThemedStyle\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Style` object.](#style-type)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyle), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyle` function.](#themedstyle)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Style API\n\nThe following style APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file.\n\n```js\nimport { 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```\n\nThis 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:\n\n```ts\nimport 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 \n );\n}\n```\n\nThis pattern scales extremely well to [atomic CSS patterns](https://css-tricks.com/lets-define-exactly-atomic-css/). For example:\n\n```js\n// 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```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.27","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.13.4/node@v10.16.0+x64 (linux)","dist":{"integrity":"sha512-jHHtgUE0aet8YBT/5OMnzzwHwR/Osj+wlY//oZeX4wPOrN83C7MRvDfXkLFz81lIHl/73WJSRw7zYtlwr5M8Fg==","shasum":"fbb6398a94b56c31895e0b2137e38bff81496d15","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.27.tgz","fileCount":71,"unpackedSize":453910,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc9ldhCRA9TVsSAnZWagAA4esP/0hmb7iD6KP40qdRzu4q\ncumPrQIexQXJ9mdblEQdzE2OIbxTndp+R4nh9Z8wMUhCbL9Eiy6Ebm7dOWly\nYyo54y2wCitudkmIJgcZv3RIQ1VCLZVVG/GZnDF9D4NcEjCNyALvGZ1vfhtL\n//y8z1K51QM1q0kCRwYC8W6KjMds58xTX8xUElJeO7XVcIH5RSWkaYGj8lgA\ntRJtvE753CemzxOrvF4iDxI+us98FlP5ycd7SKQokQkzpplfICdfXs0+qHTt\nrFUnIRUcMWBvhNJcy/Zlz2fS51B9eT1lc37Dawatsh5NqN9v4Gf6VIQvyQZq\nXGhdLS0UOMvpLlo7d78D3YEci1/3HsSVfOVN9adJA3ExgoDDSi+b6fVTPmLf\nFp93EdFz+nrJ7mTLBxW3nj+JSCzdXVkUqgTcAl/A9z3yCutThQ3uvwatD0Ai\nxlmGZXfMdgu7iAzp9icDEX98TTAUbyyRpxloSa/O8dItZTGSEhf4CxhCqN2H\nzlH3ATWDSJ7cfHHn81OzIcg91lvQVAxRtryJOsbHmzWuLqhZn/Q2unmqSOzp\nE8BNg8SL6z1uHdF7TqpVaDCWVhmivTXWv3UCDzC02surcbPxwkCOt1c1P9Q3\nq+FSzLbUQrUDhyWnNpOzaFPMMm5SRjVGnLjQ0VrQhTQzfHh+mj9hvph9ug4M\nStCq\r\n=9Sc+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICEAz7X2d73qZwjadzIci27hSStAXlecEf90zkgkOJHdAiBw/7dRq0d+k7wPir2T4AamwdZt61HkojpypgVLek0fVw=="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.27_1559648096873_0.9248748380021365"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.28":{"name":"treat","version":"1.0.0-beta.28","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","@types/lodash":"^4.14.123","autoprefixer":"^9.5.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","loader-utils":"^1.2.3","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"88ff843959e8919196e25d252a21ac89e8bb8094","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://lerna.js.org/)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **_legacy browsers are supported._**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage](#themed-usage)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Style](#style-type)\n - [ThemedStyle](#themedstyle)\n - [Theme](#theme)\n - [Style API](#style-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [styleTree](#styletree)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#style-type) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport default ({ text }) =>\n ``;\n```\n\n### Themed Usage\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyle) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Style type\n\nType: `object`\n\nWhen passing styles to the [`style`](#style) and [`styleMap`](#stylemap) functions, or returning styles from a [`ThemedStyle` function](#themedstyle), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must target the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\nThe `@keyframes` property allows the creation of keyframes that will automatically be attached to the style as your `animation-name`.\n\n```js\n{\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```\n\nThe animation shorthand is also supported via a `@keyframes` placeholder.\n\n```js\n{\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```\n\n#### ThemedStyle\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Style` object.](#style-type)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyle), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyle` function.](#themedstyle)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Style API\n\nThe following style APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file.\n\n```js\nimport { 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```\n\nThis 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:\n\n```ts\nimport 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 \n );\n}\n```\n\nThis pattern scales extremely well to [atomic CSS patterns](https://css-tricks.com/lets-define-exactly-atomic-css/). For example:\n\n```js\n// 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\n// etc...\n```\n\n#### styleTree\n\nType: `function`\n\n> Note: This is an advanced feature that you _probably_ don't need. Only use this if you've exhausted all other options.\n\nThe `styleTree` function allows you to create complex, nested data structures based on your theme.\n\nFor example, if you wanted to create a nested atomic CSS structure (e.g. `atoms.padding.top.desktop`), which requires iterating over _both_ your white space scale _and_ your breakpoints:\n\n```js\n// 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```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.28","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.13.4/node@v10.16.0+x64 (linux)","dist":{"integrity":"sha512-9FEZ50xzQymrIdASzT6wWnGHbbAWC+v0wJbcdrVCIBcg239xMOeYrMO/jyi4Ssh7n8WjgEIHFG+FMWJ1z7HchA==","shasum":"78dc212fd367feb23392d14face6063604575b5f","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.28.tgz","fileCount":71,"unpackedSize":458590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+mL6CRA9TVsSAnZWagAAR/gQAJXZ/JmniKaC5jpxawWY\nV4fJwlegGecTYEgqe2CpEX4BtNUG8l0OnZlNFMLgVYUBh9TmoxfanXiFKroq\nAq8qbGQEXtCCEafjJ1uDj5H6A24n2v8omHSYy//ysg9uI+Jj8gOjXriZwzy8\nLUDrl1NDVHX4ao3tIvK5ZOPRlNC2vzWlyGdfg/Wk5TO6+Q5UtDW+thTp0G/M\ndacvH/g6axSDuvhgvFb2ljEN58WCfbP3o21K3t3z84A2lknT9nNRhUs+Ilkl\n+EZWnZho+QVJvLDiNQdCkLVX30FxstuZPsWOHYuWciXRebiTsqsrWoeF/SWH\ncSXm3Iz7pGZPJiGrhN1HEPs/oC5HuCge1Nk1WG4zf/+lZNqFxJHOt8m9Xewy\nNHnK5P+gIM+Y6ZFXt12N2vFnTQDMi+UcfrCUb3wSCXQeZVEa8NafOFM63BIL\nyoSoLYcHhCr/asZBKyQjLgemDV2KynG6JnoPZB5fivnjKUklDVDKuFCV2D57\n/LiawEcKzaq53C2rs2Qu0IDq2F1rB0XyR8BJ6KAUuMnbUBfN+lFTG/6w42KS\nUTwqUIjHtTG/qBNG35/77hKuukEbTLmJPFlVrIIJUfYICHfWPMngCuOthC6i\nwfm0A8l7y2tMfX8L8s7GnQdjKSebFJlIXESNIumDJnCcIBiqr40XU8BxCI6Q\nK9yD\r\n=+9Pn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF6lpApW1APYKZO7x1Mydxiw8La5MwG63M07FYP6k0JSAiEAzUCQEkb+x6BUmxOAMVh/TxJJIjAN5Lo1dtPLetp6GV8="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.28_1559913209986_0.7812465180628809"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.31":{"name":"treat","version":"1.0.0-beta.31","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","autoprefixer":"^9.5.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"d302abd037cbefd2eaa79771459fe8e28055556a","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://lerna.js.org/)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **_legacy browsers are supported._**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage](#themed-usage)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Style](#style-type)\n - [ThemedStyle](#themedstyle)\n - [Theme](#theme)\n - [Style API](#style-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [styleTree](#styletree)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#style-type) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport default ({ text }) =>\n ``;\n```\n\n### Themed Usage\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyle) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Style type\n\nType: `object`\n\nWhen passing styles to the [`style`](#style), [`styleMap`](#stylemap) and [`styleTree`](#styletree) functions, or returning styles from a [`ThemedStyle` function](#themedstyle), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must target the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\nThe `@keyframes` property allows the creation of keyframes that will automatically be attached to the style as your `animation-name`.\n\n```js\n{\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```\n\nThe animation shorthand is also supported via a `@keyframes` placeholder.\n\n```js\n{\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```\n\n#### ThemedStyle\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Style` object.](#style-type)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyle), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyle` function.](#themedstyle)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Style API\n\nThe following style APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file.\n\n```js\nimport { 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```\n\nThis 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:\n\n```ts\nimport 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 \n );\n}\n```\n\nThis pattern scales extremely well to [atomic CSS patterns](https://css-tricks.com/lets-define-exactly-atomic-css/). For example:\n\n```js\n// 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\n// etc...\n```\n\n#### styleTree\n\nType: `function`\n\n> Note: This is an advanced feature that you _probably_ don't need. Only use this if you've exhausted all other options.\n\nThe `styleTree` function allows you to create complex, nested data structures based on your theme.\n\nFor example, if you wanted to create a nested atomic CSS structure (e.g. `atoms.padding.top.desktop`), which requires iterating over _both_ your white space scale _and_ your breakpoints:\n\n```js\n// 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```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.31","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.13.4/node@v10.16.0+x64 (linux)","dist":{"integrity":"sha512-GG9lH8v+jrI7b86G0BLAHGHza/YDLdrBUYtin++pdqy/wrCqSqCruXpXo9aSScfIBBzkSd8wWKbcqnggR/3s2g==","shasum":"db90414d120fa0fb1badac7e6a71ae97dc1c576d","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.31.tgz","fileCount":71,"unpackedSize":468115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCEJ+CRA9TVsSAnZWagAAv4IQAJ4XJPHh27BKJIG5OzY8\n11AV7xKbRFNeSDUP6XfWbGLzOxSr7OLjBRmD9t2Xm8l/9DzwRHR/jpNKK8Zu\nzbtKmCSys0BNpdaRfLX3fNAOOJpOWALNNWWXBXMMT2ExiUFdFsLu5F+pINN6\n/RXzCNPNQP+jrSrlc+nfvSyOwo0nd91ReR/5Rk08GdZzg2EqbB1W0BHYWMNE\nlRInONIcsv6eiFuTZVJqHFFgqE8ijO68tQEQH90X124AUkgi+hiJQ7nUwriB\n5MUQGqkZWs7EwO6XbQoQQE1qdKajenJwCSvmQFl2556q+Vnofdhh8ZS3Hfuz\nnKAaw/hylhB2sJ/zDnEZ6Kbt7JPzyIDiojq/fuIJAqy1ovUBKnustP8nQAr9\n4G2KH7j2oipP0rxBwwtB7ckmgGEL0kdKLgEEIz6O2hIiDrHfGpJyoO6BwT8a\nVV2ZFT5dvTi+MyWGfExU2QhQbaeEhBJVMGWe9wWCr93oPKAYKBMZUFSulqy9\nCaxmvSZK2Ji3vH3GVys2Bu6EsICnbHoUFn4E2BN0dTPc4cSM87bymiGcPlnL\nyXbR0ty3H2qCUE2KG3mmltMuz4v20xvLrmfVlF7x7R3R+DSgf1v6vNSDqbsN\nyqQL7v9yd1MbSqeCRv6SNb5DUDk2OQD4vmpOSd5gYhXBpZ8szto5Ivnp2f5l\nLlM9\r\n=pbJD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBUwQIbthlawVx+fbc5lgWVZWuyYXawjkGl9TuPKoXRdAiBtB6QPNVYsBTdv7AQ5CKg7sExVSpf69ZgzThmPP8Zdow=="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.31_1560822397714_0.20870595010803727"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.33":{"name":"treat","version":"1.0.0-beta.33","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","autoprefixer":"^9.5.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"a40e7aadcc64fc83caa7e7542dfe8a865ec31254","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://spectrum.chat/treatcss)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **_legacy browsers are supported._**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage](#themed-usage)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Style](#style-type)\n - [ThemedStyle](#themedstyle)\n - [Theme](#theme)\n - [Style API](#style-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [styleTree](#styletree)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#style-type) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport default ({ text }) =>\n ``;\n```\n\n### Themed Usage\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyle) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Style type\n\nType: `object`\n\nWhen passing styles to the [`style`](#style), [`styleMap`](#stylemap) and [`styleTree`](#styletree) functions, or returning styles from a [`ThemedStyle` function](#themedstyle), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must target the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\nThe `@keyframes` property allows the creation of keyframes that will automatically be attached to the style as your `animation-name`.\n\n```js\n{\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```\n\nThe animation shorthand is also supported via a `@keyframes` placeholder.\n\n```js\n{\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```\n\n#### ThemedStyle\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Style` object.](#style-type)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyle), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyle` function.](#themedstyle)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Style API\n\nThe following style APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file.\n\n```js\nimport { 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```\n\nThis 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:\n\n```ts\nimport 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 \n );\n}\n```\n\nThis pattern scales extremely well to [atomic CSS patterns](https://css-tricks.com/lets-define-exactly-atomic-css/). For example:\n\n```js\n// 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\n// etc...\n```\n\n#### styleTree\n\nType: `function`\n\n> Note: This is an advanced feature that you _probably_ don't need. Only use this if you've exhausted all other options.\n\nThe `styleTree` function allows you to create complex, nested data structures based on your theme.\n\nFor example, if you wanted to create a nested atomic CSS structure (e.g. `atoms.padding.top.desktop`), which requires iterating over _both_ your white space scale _and_ your breakpoints:\n\n```js\n// 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```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.33","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.13.4/node@v10.16.0+x64 (linux)","dist":{"integrity":"sha512-B8C86wTaLEn+atU8wZh2JsvS9iK2Hrxq0Mu4Hm6/OhPjyq+nrKpkDeRiAUbxgC43DoXy8xXSCmS9AlmvuYyolQ==","shasum":"6f16e0b3cdf4dbb9d3025131406209b343d5f079","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.33.tgz","fileCount":72,"unpackedSize":469002,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCsO8CRA9TVsSAnZWagAAhacP+gNVLqyT/U74/os9GPcZ\nB+G2pugsrkZIoZDZYTztw/23ivCJBBRqjevA1q1EuB9Y7dGzrNHC+fybFWnt\nFxOJ8IEsf0CAgYifmWxA0k8mq8uX0ioOKgDvMI2peJQGlGrytyMDC/2YBZVH\ndWOpWGXa03SHt6+iA3yhmm/yoHXHVb8cV4fm3n7jln1cW8UqVagBth40bsg3\nRPTuzwBVepTP9F20eGIi7JJAcV4pUcjx3mSQ6KZ61GKzplO7NAsboppi500x\nNsBzLaAj5lC4IZ4WOtAicPbqUyzrH29NSPl07Pq77DvytkGo6CaqMGxNNDy7\nCC92YnDjg5p1W4/shz1/B/q4SziYmZLLqRLw4mb/Qb828QKTb8UdkHz37RDP\n1yu8w2Q+SD7mAzeYE+ia6jEDle23cEIQrLrw46wm0SL4PbZ/2ajYT+lcCGZY\nSOjJ0q+iznCIvrmUkHSHOp+NSvgvAkweWAj4ZRi48Vl5DlJLyxRIWguxkRly\n3Db5BwyLcm+8GozrDM6nSnxm9+k7yatQcfnIZmI8ekAqVg7CEYItpCNvxca7\nCToSWxcfehgVehhhuWSS+24Q7+q2vfII1BUVIGeeV3HN1PDqzLIA+1Rfwgm/\nHcBLQDU1A0KlXf6LA7SaaMQgBns+PE2nfi8Qwn4szSEQ/6lEPKg9ZOLmlYb2\nlB5Q\r\n=5Pc7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGo+0qMreSkxeIbACflvgtyhkgAZM5C/HICmx08ruJvUAiEAmqUokTsVjAEFtnyC7wKDfzO1tVdlrOi6OWxTMW7WCFs="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.33_1560986556236_0.07860364291253363"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.35":{"name":"treat","version":"1.0.0-beta.35","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","autoprefixer":"^9.5.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"64862ebd7555a1140f820037b149c102d7354b3e","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://spectrum.chat/treatcss)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **_legacy browsers are supported._**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage](#themed-usage)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Style](#style-type)\n - [ThemedStyle](#themedstyle)\n - [Theme](#theme)\n - [Style API](#style-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [styleTree](#styletree)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#style-type) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport default ({ text }) =>\n ``;\n```\n\n### Themed Usage\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyle) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Style type\n\nType: `object`\n\nWhen passing styles to the [`style`](#style), [`styleMap`](#stylemap) and [`styleTree`](#styletree) functions, or returning styles from a [`ThemedStyle` function](#themedstyle), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must target the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\nThe `@keyframes` property allows the creation of keyframes that will automatically be attached to the style as your `animation-name`.\n\n```js\n{\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```\n\nThe animation shorthand is also supported via a `@keyframes` placeholder.\n\n```js\n{\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```\n\n#### ThemedStyle\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Style` object.](#style-type)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyle), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyle` function.](#themedstyle)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Style API\n\nThe following style APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file.\n\n```js\nimport { 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```\n\nThis 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:\n\n```ts\nimport 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 \n );\n}\n```\n\nThis pattern scales extremely well to [atomic CSS patterns](https://css-tricks.com/lets-define-exactly-atomic-css/). For example:\n\n```js\n// 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\n// etc...\n```\n\n#### styleTree\n\nType: `function`\n\n> Note: This is an advanced feature that you _probably_ don't need. Only use this if you've exhausted all other options.\n\nThe `styleTree` function allows you to create complex, nested data structures based on your theme.\n\nFor example, if you wanted to create a nested atomic CSS structure (e.g. `atoms.padding.top.desktop`), which requires iterating over _both_ your white space scale _and_ your breakpoints:\n\n```js\n// 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```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.35","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.13.4/node@v10.16.0+x64 (linux)","dist":{"integrity":"sha512-FQ6y72pOzK50G/dFofVZlOdjctqMM5GIac0h570THfHzuZtxRvTGdqIdb0NXhugLXsh+AUWy2he/bq11fx2hFQ==","shasum":"3608d6e2f4d4d7839e3af08a9ce54c1226c95696","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.35.tgz","fileCount":72,"unpackedSize":469436,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJuMfCRA9TVsSAnZWagAAfKYP/31TTUun40o0wPZaZR1e\nLYDfr6rJ/djGzKV0qwQ/FpcSk278IRerN/dIM4l9qvRBqzJliF5E0nnjf3AM\n1rav4AWmBVVTZ5LYtQM5oolONDXRqbbyxVKItRA25ecNgocc1ezpwUg2ow7t\nclX4XdkJ0O1wstB/kjZuNoI36iYHDIlvwAuDqRvZcouwNgGns1szVVMt3NJq\nq5kZPoy5RSI9+sdk/UUvkr6YFV2v+FAy8sFy3fiwMl24zQ10mdFgTikX/vsw\nIpqfbytfauNjnrvFThLdkV2yreCe0KxnkyQ1/3EE+H3hdbWShLc2t3fo7UZU\nmeggPL1iZn319ImzSqZM06mh3SgaDCDaLxcqFwcmm1ZwGnnbgSqcJPjeEj6x\npTMvD9cDMBIp97kgYxcBEHkWVsEXHeS9BAZmhYEU2pGn7r6Vi7VEJUSyBrG8\nr/S23PEUzbp6Gd8eRBDTQnld1TgVqDcdQcOaT3k1q/Rdl+LTB0fnJBOeAhXg\n6g/Bur/yYZ3IApe+NjmOjJ+kF0QPLZyN0ASVn5Lvz6g6au1RmDmKLAQHL1e1\nVjsC5vK1N1AxgeiwjwjlZGZx2PH58+Ixz3FoP/RtohwrbDgaYK3o2UkgKJ/1\neXMIAzTix0tME8e4lefGx5DvNIXdvXW/pR4IYRZkdhOEq/2U4WDd10oPNz7P\nM6YP\r\n=wTkL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDszeQ1t571W0ynDgsBqeHw8ZIgAd2gAtZZ0tPvQh4RdAIgJoqrxfDgaAjjTcCD8sT2QwPNWeaVIg1cNKt5JbgPATA="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.35_1562829598890_0.4806333281491102"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.36":{"name":"treat","version":"1.0.0-beta.36","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","autoprefixer":"^9.5.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"fc36761e6b6bcd97ccdf9a50bb5fee06216d8272","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://spectrum.chat/treatcss)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **_legacy browsers are supported._**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage](#themed-usage)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Style](#style-type)\n - [ThemedStyle](#themedstyle)\n - [Theme](#theme)\n - [Style API](#style-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [styleTree](#styletree)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#style-type) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport default ({ text }) =>\n ``;\n```\n\n### Themed Usage\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyle) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Style type\n\nType: `object`\n\nWhen passing styles to the [`style`](#style), [`styleMap`](#stylemap) and [`styleTree`](#styletree) functions, or returning styles from a [`ThemedStyle` function](#themedstyle), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must target the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\nThe `@keyframes` property allows the creation of keyframes that will automatically be attached to the style as your `animation-name`.\n\n```js\n{\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```\n\nThe animation shorthand is also supported via a `@keyframes` placeholder.\n\n```js\n{\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```\n\n#### ThemedStyle\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Style` object.](#style-type)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyle), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyle` function.](#themedstyle)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Style API\n\nThe following style APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file.\n\n```js\nimport { 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```\n\nThis 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:\n\n```ts\nimport 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 \n );\n}\n```\n\nThis pattern scales extremely well to [atomic CSS patterns](https://css-tricks.com/lets-define-exactly-atomic-css/). For example:\n\n```js\n// 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\n// etc...\n```\n\n#### styleTree\n\nType: `function`\n\n> Note: This is an advanced feature that you _probably_ don't need. Only use this if you've exhausted all other options.\n\nThe `styleTree` function allows you to create complex, nested data structures based on your theme.\n\nFor example, if you wanted to create a nested atomic CSS structure (e.g. `atoms.padding.top.desktop`), which requires iterating over _both_ your white space scale _and_ your breakpoints:\n\n```js\n// 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```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.36","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.13.4/node@v10.16.0+x64 (linux)","dist":{"integrity":"sha512-ADxBhU33G4ECkfQagCvM/GqHz9z51kt7mX1ZEzClrOgKJgpuQsv2aqJj8lgjhYgEClHNuqeOXaMFw7Q55zMDUQ==","shasum":"8f765119c62a7709be3b26f1a05ed9f0dc1ffb63","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.36.tgz","fileCount":72,"unpackedSize":469434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLq1jCRA9TVsSAnZWagAAnsUP/0z6Z9jsAd49JvrcIfBT\nP8owv6aNCtYXHuMfJv/J2JVLPRxTciorcpnOunHA3WTZ7vY6ZqIuN+7y3KjF\n9p48hkjDIWvHs5e+0cmUiFxxCwNaW/X0LxzV6+l0DR9QiqTn6NyDlCKsaYcX\neVaadnyLk5DAB9z/uWlUtZ32n8lAJuR4Rarv71Ph6vc/TenHH7pjXnDOnYlq\nlglqbmvPsnIYCI4tWYq5x7mrid8ZE+3KD5U53Ch5/6BB90r37itq3dbxzyxF\nOyZEEYH+gsLaDib8i8Cz47n0aWdHdDEuu6gy8h1hLS+u+8xzzBg3yLQldVF1\nbW/+ybsjAgJ7qgxp20SncW61xgIVzCHfhabzWywLeV6P7woA0ZdminGo9FnD\nz8HPs7E8C0ZeJDTd2of3Pt+ShmykrjmZHf0BGj+Jrv023pbhkaAio+VVxFZf\nd7d/4Ab5ULQUT1WB8Y4FHTGo+4eQWZxzWe0OZ86ge5dGB0IavksgvB/jHgg5\nSSuXAGpgIMu8AF+kPURilNxpbBgg0JePwF4PTHAjzNlrmirKv4KNjss28R0b\niFbpSkLjLNZYGEeqrAb5M0VW6HMmJ7ygH3+qR07d0+Ah0nw+v/KZx/ka5yVb\nFVjCl0XWkDklNCTQzhyBGr1Ge1u5miAjNVqbCmSO+ew6gW2FCpe6khKAgK3Z\nT6xE\r\n=Bt2V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHXfCGQzsK2TtYiRAU+7kaK4AwQglRxmC4EfIi6jowtuAiAWqTnpXhHfi2CPPp+xpbjA5jPjkjsIthfdmfAKBjuXng=="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.36_1563340130791_0.6856286998140582"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0-beta.37":{"name":"treat","version":"1.0.0-beta.37","description":"Themeable, typed CSS-in-JS with (basically) zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","autoprefixer":"^9.5.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"8f9b7db05ac32ccfcb7399be80ba5da238827465","readme":"# 🍬 treat\n\n[](http://travis-ci.org/seek-oss/treat) [](https://www.npmjs.com/package/treat) [](https://spectrum.chat/treatcss)\n\nThemeable, typed CSS-in-JS with (basically) zero runtime. What a treat.\n\n```bash\n$ yarn add treat@next\n```\n\nWrite your styles in JavaScript/TypeScript within **_treat files_** (e.g. `Button.treat.js`) that get **_executed at build time_**.\n\nAll CSS rules are created ahead of time, so the runtime is _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.\n\n**All CSS logic, including its dependencies, will not be included in your final bundle.**\n\nBecause theming is achieved by generating multiple classes, **_legacy browsers are supported._**\n\n---\n\n- [Requirements](#requirements)\n- [Example Usage](#example-usage)\n - [Basic Usage](#basic-usage)\n - [Themed Usage](#themed-usage)\n- [Setup](#setup)\n - [Webpack Setup](#webpack-setup)\n - [Babel Setup](#babel-setup)\n- [API Reference](#api-reference)\n - [Data Types](#data-types)\n - [Style](#style-type)\n - [ThemedStyle](#themedstyle)\n - [Theme](#theme)\n - [Style API](#style-api)\n - [createTheme](#createtheme)\n - [style](#style)\n - [styleMap](#stylemap)\n - [styleTree](#styletree)\n - [globalStyle](#globalstyle)\n - [Debugging](#debugging)\n - [Runtime API](#runtime-api)\n - [resolveStyles](#resolvestyles)\n - [resolveClassName](#resolveclassname)\n - [React API](#react-api)\n - [TreatProvider](#treatprovider)\n - [useStyles](#usestyles)\n - [useClassName](#useclassname)\n - [Webpack Plugin API](#webpack-plugin-api)\n\n---\n\n## Requirements\n\nYour project must be using [webpack](#webpack-setup) with the supplied [webpack plugin](#webpack-setup), but that's it.\n\n**First-class support is provided for [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/),** but those layers are _entirely optional._ The core [runtime API](#runtime-api) can also be integrated into other frameworks, if needed.\n\nThe core runtime makes use of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), so you may need to provide a [polyfill](https://www.npmjs.com/package/es6-map) for [pre-ES2015 browsers.](https://caniuse.com/#feat=es6)\n\n## Example Usage\n\n### Basic Usage\n\nFirst, define and export [styles](#style-type) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { style } from 'treat';\n\nexport const button = style({\n backgroundColor: 'blue',\n height: 48\n}));\n```\n\nThen, import the styles.\n\n```js\n// Button.js\n\nimport * as styles from './Button.treat.js';\n\nexport default ({ text }) =>\n ``;\n```\n\n### Themed Usage\n\n> Note: React is [not required](#runtime-api) to use treat.\n\nFirst, create and export a theme from a treat file. Normally, you'd define multiple themes, but let's keep it short.\n\n```js\n// theme.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE! **\n\nimport { createTheme } from 'treat';\n\nexport default createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\nThen, import the desired theme and pass it to [`TreatProvider`](TreatProvider) at the root of your application.\n\n```js\n// App.js\n\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\nNow that you've configured the theming system, define and export [themed styles](#themedstyle) from a treat file.\n\n```js\n// Button.treat.js\n\n// ** THIS CODE WON'T END UP IN YOUR BUNDLE EITHER! **\n\nimport { style } from 'treat';\n\nexport const button = style(theme => ({\n backgroundColor: theme.brandColor,\n height: theme.grid * 11\n}));\n```\n\nThen import and resolve themed styles via the [`useStyles` Hook.](#usestyles)\n\n```js\n// Button.js\n\nimport React from 'react';\nimport { useStyles } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport function Button(props) {\n const styles = useStyles(styleRefs);\n\n return ;\n}\n```\n\n## Setup\n\n### Webpack Setup\n\nTo get started, add the treat [webpack](https://webpack.js.org/) plugin to [`webpack.config.js`](https://webpack.js.org/concepts/configuration). Since webpack is required to use treat, the webpack plugin is provided via the core `treat` package as `treat/webpack-plugin`.\n\n```js\nconst TreatPlugin = require('treat/webpack-plugin');\n\nmodule.exports = {\n plugins: [new TreatPlugin()]\n};\n```\n\nBy default, this will inject styles into the page via [style-loader](https://github.com/webpack-contrib/style-loader), but this can be overridden via the `outputLoaders` option.\n\nFor example, if you'd like to **export static CSS files,** you can wire it up to [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).\n\n```js\nconst 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```\n\nFor more configuration options, view the full [webpack plugin API](#webpack-plugin-api).\n\n### Babel Setup\n\nIn order to improve the [debugging](#debugging) experience, treat also provides an optional Babel plugin.\n\nFirst, install the plugin:\n\n```bash\n$ yarn add --dev babel-plugin-treat@next\n```\n\nThen, add it to your Babel config. For example, in `.babelrc`:\n\n```js\n{\n \"plugins\": [\"babel-plugin-treat\"]\n}\n```\n\n## API Reference\n\n### Data Types\n\nWhile 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.\n\n#### Style type\n\nType: `object`\n\nWhen passing styles to the [`style`](#style), [`styleMap`](#stylemap) and [`styleTree`](#styletree) functions, or returning styles from a [`ThemedStyle` function](#themedstyle), you'll need to define them in the following format.\n\n```js\n{\n color: 'red',\n fontFamily: 'comic sans ms',\n fontSize: 24\n}\n```\n\nSimple psuedo selectors are supported at the top level.\n\n```js\n{\n color: 'red',\n ':hover': {\n backgroundColor: 'pink'\n },\n ':active': {\n backgroundColor: 'tomato'\n }\n}\n```\n\nMedia queries are also supported via the `@media` key.\n\n```js\n{\n fontSize: 24,\n '@media': {\n 'screen and (min-width: 768px)': {\n fontSize: 42\n }\n }\n}\n```\n\nFor anything more advanced, you can provide a set of custom selectors. Within each selector, you must target the ampersand character (`&`), which refers to the generated class name.\n\n```js\n{\n marginRight: 10,\n selectors: {\n '&:nth-child(2n)': {\n marginRight: 0\n }\n }\n}\n```\n\nWithin selectors, existing treat classes can be referenced.\n\n```js\n{\n backgroundColor: 'white',\n selectors: {\n [`${parentClass} &`]: {\n backgroundColor: 'aqua'\n }\n }\n}\n```\n\nThe `@keyframes` property allows the creation of keyframes that will automatically be attached to the style as your `animation-name`.\n\n```js\n{\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```\n\nThe animation shorthand is also supported via a `@keyframes` placeholder.\n\n```js\n{\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```\n\n#### ThemedStyle\n\nType: `function`\n\nAccepts a [`Theme`](#theme) and returns a [`Style` object.](#style-type)\n\n```js\ntheme => ({\n color: theme.brandColor\n});\n```\n\n#### Theme\n\nWhen [defining themes](#createtheme) and [consuming themes](#themedstyle), the provided theme object uses the `Theme` type, which is `any` by default. This means that any usage of a theme will not be type-safe.\n\nThe simplest way to fix this is to override this type at a global level. For example, you could create a `treat.d.ts` file in your project with the following contents.\n\n```tsx\ndeclare module 'treat/theme' {\n export interface Theme {\n brandColor: string;\n grid: number;\n }\n}\n```\n\nIf your `Theme` type is already defined elsewhere in your application, you'll need to import it with a dynamic `import` expression within the module declaration block.\n\n```tsx\ndeclare module 'treat/theme' {\n export type Theme = import('./types').Theme;\n}\n```\n\nAlternatively, if you'd prefer to avoid global types, you can manually annotate the theme object being passed into a [`ThemedStyle` function.](#themedstyle)\n\n```tsx\nimport { style } from 'treat';\nimport { Theme } from './types';\n\nconst themedClass = style((theme: Theme) => ({\n color: theme.brandColor\n}));\n```\n\n### Style API\n\nThe following style APIs are only valid within treat files (e.g. `Button.treat.js`).\n\n#### createTheme\n\nType: `function`\n\nThe `createTheme` function allows you to register individual themes within a treat file.\n\n```js\nimport { createTheme } from 'treat';\n\nconst theme = createTheme({\n brandColor: 'blue',\n grid: 4\n});\n```\n\n#### style\n\nType: `function`\n\nThe `style` function allows you to create individual style rules within a treat file.\n\n```js\nimport { style } from 'treat';\n\nexport const brandColor = style(theme => ({\n color: theme.brandColor;\n}));\n```\n\nIf your styles aren't dependent on the theme, you can provide a static object instead.\n\n```js\nimport { style } from 'treat';\n\nexport const green = style({\n color: 'green'\n});\n```\n\n#### styleMap\n\nType: `function`\n\nThe `styleMap` function allows you to easily create multiple namespaces within a treat file.\n\n```js\nimport { 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```\n\nThis 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:\n\n```ts\nimport 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 \n );\n}\n```\n\nThis pattern scales extremely well to [atomic CSS patterns](https://css-tricks.com/lets-define-exactly-atomic-css/). For example:\n\n```js\n// 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\n// etc...\n```\n\n#### styleTree\n\nType: `function`\n\n> Note: This is an advanced feature that you _probably_ don't need. Only use this if you've exhausted all other options.\n\nThe `styleTree` function allows you to create complex, nested data structures based on your theme.\n\nFor example, if you wanted to create a nested atomic CSS structure (e.g. `atoms.padding.top.desktop`), which requires iterating over _both_ your white space scale _and_ your breakpoints:\n\n```js\n// 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```\n\n#### globalStyle\n\nType: `function`\n\nThe `globalStyle` function allows you to define selector-based styles. This function is purely a side effect and does not create a new class.\n\n```js\nimport { globalStyle } from 'treat';\n\nglobalStyle('html, body', {\n margin: 0,\n padding: 0\n});\n```\n\n### Debugging\n\n> Note: This can be automated via our [Babel plugin](#babel-setup).\n\nAll styling APIs (except for `globalStyle`) have an optional argument that allows you to provide a local debug name.\n\nFor example, the local name for the following style will be `style` by default because treat doesn't have access to your variable name at runtime.\n\n\n```js\nexport const green = style({ color: 'green' });\n```\n\nTo fix this, you can pass in a debug name as the last argument:\n\n\n```js\nexport const green = style({ color: 'green' }, 'green');\n```\n\n### Runtime API\n\n> Note: If you're using React, you should use our [React API](#react-api) instead.\n\n#### resolveStyles\n\nType: `function`\n\nResolves styles for an entire treat file relative to a given theme.\n\n```js\nimport { resolveStyles } from 'treat';\nimport * as styleRefs from './styles.treat.js';\nimport theme from './theme.treat.js';\n\nconst styles = resolveStyles(theme, styleRefs);\n```\n\n#### resolveClassName\n\nType: `function`\n\nResolves a single treat class name relative to a given theme.\n\n```js\nimport { 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```\n\n### React API\n\n> Note: React is [not required](#runtime-api) to use treat.\n\n#### TreatProvider\n\nType: `Component`\n\nIn order for the [`useStyles`](#usestyles) and [`useClassName`](#useclassname) Hooks to work, you'll need to render a `TreatProvider` higher in the tree.\n\n```js\nimport React from 'react';\nimport { TreatProvider } from 'react-treat';\n\nimport theme from './theme.treat.js';\n\nexport function App() {\n return ...;\n}\n```\n\n#### useStyles\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves styles for an entire treat file relative to the current theme.\n\n```js\nimport 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 ;\n}\n```\n\n#### useClassName\n\nType: `function`\n\nA [React Hook](https://reactjs.org/docs/hooks-intro.html) that resolves a single treat class relative to the current theme.\n\n```js\nimport React from 'react';\nimport { useClassName } from 'react-treat';\nimport * as styleRefs from './Button.treat.js';\n\nexport const Button = props => (\n \n);\n```\n\n### Webpack Plugin API\n\n| option | description | default value |\n| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |\n| test | [Webpack condition](https://webpack.js.org/configuration/module/#rule-conditions) targetting `treat` files. | `/\\.treat.(js\\|ts)$/` |\n| outputCSS | Whether to output CSS into the bundle. Useful for dual config SSR apps. | `true` |\n| outputLoaders | Array of webpack loaders to handle CSS files, they will be placed after `css-loader`. Strings and objects with options are supported. | `['style-loader']` |\n| localIdentName | Template string for naming css classes. Should always contain a `hash` option to avoid clashes. | Development: `[name]-[local]_[hash:base64:5]`
Production: `[hash:base64:5]` |\n| themeIdentName | Same as `localIdentName` but for themes. Useful for debugging which classes belong to which theme. Can also be a function that receives your theme. | Development: `_[name]-[local]_[hash:base64:4]`
Production: `[hash:base64:4]` |\n| minify | Minify the output css | Inferred from [webpack mode](https://webpack.js.org/concepts/#mode). Defaults to `true` if `production` mode. |\n| browsers | A [browserslist](https://github.com/browserslist/browserslist) query to pass to [autoprefixer](https://github.com/postcss/autoprefixer) | By default, your browserslist query will be resolved from your [browserslist config](https://github.com/browserslist/browserslist#queries) |\n\n## Thanks\n\n- [Johannes Ewald](https://twitter.com/Jhnnns) for letting us have the `treat` name on npm.\n- [Nathan Nam Tran](https://twitter.com/naistran) for creating [css-in-js-loader](https://github.com/naistran/css-in-js-loader), which served as the initial starting point for our approach.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.0.0-beta.37","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.13.4/node@v10.16.0+x64 (linux)","dist":{"integrity":"sha512-tNA/0mUCWjD5/jw/fIs/70d9+sFLGT5u76jgVW6UUrSTy+g1EhUb74wtsWfCY4iSDgaBV9h1Kjc5Rdf6hAvBrw==","shasum":"1645c046f18b6425048f975bc474e9e023180339","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0-beta.37.tgz","fileCount":68,"unpackedSize":462803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdN/4mCRA9TVsSAnZWagAAjWwP/0agmR9oBuC3ki0LZfxX\n6pcvQWqu385J5E9mEmBpPCSyo+wyVJgpQBz/9sl5tFyYdZL+iyV57kK7rG2K\n7jNSTuYd8yFBgsG+3bpzMeGQjImA3f+BfOFijeVGyXKoMhgwecnDks+T20O2\na6MJYk2Uept3Zr2dRxwy15lg/40f403WfX0S6popFnSGCzNsvot35zvyCwP0\n+vsMgVjXZoOHTfM2VCS1fWscNQ5+U45LNebC5LiHkCTZ0bAse57jO00hWi4M\nvs4W5AoAx6OPHuFZ0minvMrnH4Tw2GSPlswOeGRIoUHVa9aEcdKiD9ctyCt+\n/onUB6zBrIaOKCyoia20pTpCJrnsaQOzZ4bW9zoUVcl8OBl+VOPY/o8WUC7D\nl+aPONVu8G1LdrHy/W5vXUUPf4624Cq9hGNzE47bMJQckkYaLOAbxjsTTEeg\nExVJ8Mwpif2eVUmZfrsHuwj3+Dlo8f8P+4oTpn49lb+k63WPVKysd6gpV2Cb\nIJ2CETZe6clEtoqXSJgVRA7Xtw9o5TWaC7JdUEbx4TgTbs7epgaPuq2vXZrz\nFTQotCGL+f70qzSgZf/towMPC/Nwe8dK/pZiXGh3k7w67zvo3kur9wYHUZ3p\ny1jX/R+31HvGllDx3gYLz26g8pKde7PuuCrCnCqSo887l/tsPxMtpUqvtQ2/\n9OGs\r\n=KKHT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDX6YijZY6MJNHM9JEVCHq4rU9F30pLCQiqZNxXeHNRQAIhAJIA0cw6fqNqKenA9guTCXQXwhCItPJb6VWUEH3DcXPW"}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0-beta.37_1563950629276_0.1722391714158411"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.0":{"name":"treat","version":"1.0.0","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","autoprefixer":"^9.5.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"c387e108db8a84683f8650e6a1c02fd27ba9e5a8","_id":"treat@1.0.0","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.13.4/node@v10.16.0+x64 (linux)","dist":{"integrity":"sha512-P6oSaU7vgezuczklKrjcXSlDDmYgSjm8M3MLtvayH9oojtFNPYiuhyZ1M5J++AFA0Ik+ZxATbuyGGcB52aexnA==","shasum":"11b4221fd15e5ee1a347a08c852bf7193724c937","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.0.tgz","fileCount":69,"unpackedSize":495831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdODz1CRA9TVsSAnZWagAA7xcP/1A6KRsBq14E/9ySx8v2\n1PncZrhVneNbtkGbjDjKZKTuY/2Y0JQqhJcX5xDT9Lo79cW+RTLNLZSc03GJ\nEmlSSl6B+v4vn8DChPO3yv8a1+A5b+BSkgO3SRuLp5pOwl/nxS4WJ8VS4jY3\nKiuIRGTqNyFj+7T5W4pqkbSfH/lDqKlbJo90ohLYSXSq9avzZtfr/YxnEsNm\nRgScXi/EAEGSxMj+P0EAAiMXs9x0oenazLI0SYyKLdx+2pBMOaxG9f5OtOZu\nXGcPXBJRagN7JOiw1855qnMBvLQdRPHxXp7I9AzUkufXRzIPElcT6W0fCaAg\nrszW2GpPgweiBQN1YZvsjXDtcKBim9119OrTBLxSaxXZ6C4MmF2swvln8p02\nfvVPEfZ6vNzLOsUVZHwumAceccmr5ttrN77CoC0AZGKCf/ow86LU7dC5iQS9\njuSBjKcJs5/9vUnSk9JogLCL+0sEn79sBFDhWt770EhUn/TKAB1V023NyQln\ntgomS4CzdKVN/6t40OCKT3vOatdBw4CuD0qS0HbPtm9XLDlbyfNw+5gwVBb0\nugiKzpaTx5VMUvJPve3Q/YiqCSeOul7K+pRcl+vLOhGZ8Ir8ZBGOE4bwmdRD\nwIXc+l7tI1sK0Mbnt+PzHdCWgunfGkdFRbun+HCQVm8lZDVXCtTTRZIzRTZi\ncPOA\r\n=m98h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFR2TPuUkX09/szy/Y7/0R8+CxcY4623oOtEzIOXuR4aAiEAxcFPvoiHrvwv8K9fq5pU7FSM+4WvYGjQabk2fV5T904="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.0_1563966708300_0.1907265009406336"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.2":{"name":"treat","version":"1.0.2","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","autoprefixer":"^9.6.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"2909eb0a1ce1ca23e80fbdb378c8f1c543477a9f","_id":"treat@1.0.2","_nodeVersion":"10.16.1","_npmVersion":"lerna/3.13.4/node@v10.16.1+x64 (linux)","dist":{"integrity":"sha512-799sOo3uwSr1IR5MzLdJ6WKRGmdoeOtTgTyyb4SQtTY+N6hPgi8xfYRHeOAi7R8HdIuzidVj9g0v8rdTTqcdrQ==","shasum":"72d827b9e59f27a6c25430986efe751d4a0317a2","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.2.tgz","fileCount":69,"unpackedSize":496219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdQj6JCRA9TVsSAnZWagAAo6oP+gIp72hDzG3DOc9/mKhx\nnM0NbffXenawiPokAEqc+hkGnliLbs0KRfwgbYBLznT1JEDPELx6ozNDEOvX\nrbJMpqwsw4W7MUEDS96eC5EYtkV0O2pKVmDmVws51hXXPPbWaK4VZVwysp1F\nTJ1Q3jvPaZT9pulXYzFYWaytfWAV93BZ1mrnmpvHaIOCAuBZ/8RXRT7QGsCN\nlkepUtvIa/EuGalR1/8E5/6hdolnXHutDvaFkoc0zwu+jYl0KzrPWqGGyghB\nRt4PXqCZwZcBmljyYlDX0zW+eWNcTbUnaDMDRSoWq7R4PG/4PG0Clb5HvAZS\nmlkIhIfxJp3iZCbbAbOOMtOaEMmjMfGjcwG9OlkPotgwOApxZzvC9deuxr4c\nn6BFdeTHJYAWSZpEaw469RGVMNCPg/jqWDjs157OTiWm3llit3+FpqRwUN9D\nUEZbxnJPYjpUReuNdStBxRE1NKTGwp/7uFLD+JoomCaYSzktZQdlSLCLrVxE\nR17/QRPnpzf4uXHywasewQmLwEZs2a6n/iuvGeMg7Unqcdtrd9J0kzzs8KaA\nK/vR5xjAg8PIbxcYgboQiF1/RlHY0VU+EwzcT5qn8ga3bHhDsauv2VQuEsYa\n9bewaQwqjFG5W0kgUEyORNp7NFyHl75e1ABT4ZJfsTf6kQXtWcbQzTeQ7gtU\nyh/W\r\n=fYxJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID0PYDIIlNN26/pPGUHZ3OBifJ9v2wHn5bvYVeUB84TQAiB7HB45tb1H51/YpnBCCFmi7HdeqWkv6NTlfEodRHoXsw=="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.2_1564622470440_0.7810133252566427"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.0.3":{"name":"treat","version":"1.0.3","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","autoprefixer":"^9.6.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"d87606f1411a53289818fd2058d9e7e2c8b9c378","_id":"treat@1.0.3","_nodeVersion":"10.16.1","_npmVersion":"lerna/3.13.4/node@v10.16.1+x64 (linux)","dist":{"integrity":"sha512-Ou7s+L0IEH/saVpZuoM+Ta+DAuQ0svV3smjN/CqDCgZpmHsoZAVR091k9XaQ1tRgj8PXUB4YSRE3QKf2P8Nm+w==","shasum":"bf93c97b9ece36ba48c789d37d38fbdeaf459552","tarball":"https://registry.npmjs.org/treat/-/treat-1.0.3.tgz","fileCount":69,"unpackedSize":496603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdQmmdCRA9TVsSAnZWagAACkgP/1pTCCn3Ofr0ihi2ubPc\nLZxayfmFTUBWbj/8RgS9W3KCBW8cqk2B4YJOc93lgUJHJr3OgeHGtajvAGV0\nYCnZNSq8GOlV7Z8Bgamn8WuMmGJrYU9vkE3f6CExE9LqAup9xjethMO6layW\n/nNPQcMpV5QFlCviCTEIFgZrpFjnAoVJO7A0oCTUeXOyBVmpDK6CmFWX4Y+h\nzU3doDJnR8K56u/YZ78dx6M0C7CA3eCcalZyTj/Dbf9zx6OvgDVe241fcD7e\nMl/FkpoeN21eoJH+GnAokg6n9Mtf0J5U//ygu2TOIORR8G7btdJ5wFCxjtG1\nmGlgONxEZ72yLtm6LX1RlPNW2V5VwDGB2gQLVGiqTYDwQMGrnAEhEzcLn0gU\nO4//Nrj2E5eIOrS05R514QCsMwR4il/5N1q3S/KbzLx8iC5GUwmTlttwkz1u\n2FMDnYp59//2vqteeepJeO9dOGigZpkQUnVEHsYbs0zaHFM5vxgoVnHMUxNs\ngCZL8I51HAuahwv2YUxb0/F4Niwi4Cdd9nZEGCQk+Qv/3QjpEJN1lbuQwxyS\nK5wGzC72ZkXPqR3PLnxw3x9oNM23TqY64eniVbixdndDhAPsUHtTRx5Akp3Z\nhdxj1tRSv716qawUhhia6Y6Kqpr6lUeqJhsUOP6nOpEX1/JIvSEvQLfqSEq+\nZYe2\r\n=74ag\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAsCHtfRTvKJc7k345MreyMz6a9hE12ULmtUv2DlwffRAiEA8vf39XSwfJri6eKsmN91RteUtN1rYvEEAnqfTQLTKg0="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.0.3_1564633500832_0.5835829438466695"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.1.1":{"name":"treat","version":"1.1.1","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","autoprefixer":"^9.6.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"26ebc4a6f84c19580d06ff8fee79a5144c8853cf","_id":"treat@1.1.1","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.13.4/node@v10.16.3+x64 (linux)","dist":{"integrity":"sha512-ewb96Ng4q1ad3idH6gjVXSvEUOn4SJdYcsfJYvEJ2blDwpzuPWf91xzgjutpB1vaA3laXpw2rSBqZ7PIb4C8fQ==","shasum":"7c521cb856e6db223d7bfc8a31be11af9e5c6ae7","tarball":"https://registry.npmjs.org/treat/-/treat-1.1.1.tgz","fileCount":69,"unpackedSize":509039,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgv8xCRA9TVsSAnZWagAAeCcP/2IXJx1la40bo+HQpSij\nFT6cMZUzVu8kqRzxZTY4nh57SjNqh8A7Ajq+b2wfDZWOPqQJivGigaWvGqAv\n1EokpiTjusINFdoe5bf9qSDztk7+Zcz4KvRAHJYwDJ3NnVpHOXZYzyUDucBB\nkNFtWN/r4753Q3GOx/skLt+gUDETC4kZl060li4SWPxUkLN+JGKnbbw1vztH\nqnT5nwW7QISowGPCL2EJhPrHlZaXMednCiuZZJ6H927sVtIzz47pRUoK+EJw\nJ1pfQvRwwzIutirlYAIGoBqSOUrWz6TSM+8BLti+zNX/bqsbVV7qJJqrbim7\nupcyN/8eyGT0TC7SyDcLDMf8Fy/0GmlC1Ls2AIjwN/CCeBFJbGYdUBsS/NZT\noPRRjBPRspRFf4FcjWV9cMAd/QnIVA2IvjXkiRRtEPOKOCoSNBaWu9zxzE5T\nIxsR6KIUL0NGgiaU9nMACPBmI4HZIRzVlKRs2j7txP6pDVTxnGtIabUbNCv3\nVZ3HxsycW7hZnkG5EpBrKqmnm+pVzOlFFGA1kp6bWkcmJ0v4HEKNXBcfySMU\n7bZb/U3UpBXhZuzRAIPXkbnEtUkbQYon8bUGpaWazLr01Jc5MvoGc2bm2lgc\nwOJDa7fd5UrzPh8Mkn3he4R6dAOLEx/r/cXLtoGRnfXNmgLva1oJJYJ+uKZ6\nbIQV\r\n=JHP7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFAe+I0+z6XTX8Cu7bPsgZUsY+IEH/hCmvuz1ivMmoy7AiEAu2zi+02/zTiYlRHIzNdXIoY9MSYIsS7RL4XMtkFeZfM="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.1.1_1568866097055_0.5286863038443552"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.1.2":{"name":"treat","version":"1.1.2","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently 'yarn build:module' 'yarn build:commonjs'","watch":"concurrently 'tsc --module commonjs --watch' 'tsc --module module --watch'"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","autoprefixer":"^9.6.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"70a7e73fb80fad81158799e88213f57245a3cf50","_id":"treat@1.1.2","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.13.4/node@v10.16.3+x64 (linux)","dist":{"integrity":"sha512-wC5IoRN7w+4VzYTokh/NOeDitSE83c4uYDmZKb9758xmkwUW4/n3R26LxwQmtnPnDAaoC77N+BKyw3GNOoMxjw==","shasum":"1e407175aa432fe7cf5e21e40086361e8c6025aa","tarball":"https://registry.npmjs.org/treat/-/treat-1.1.2.tgz","fileCount":70,"unpackedSize":509669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdhBorCRA9TVsSAnZWagAAaK4P/R/aVEl+NRgZc7/2YzLb\nWCh+W/KTO2tPwCWYNN/V09v/vX2P/3GsTz0/6XpGjvK6wCxpdKKhkEmD3/x4\nlqyOfucnBf+UC0IlfGwGVQa0CWwKplHNT8ebRxj1ZUc27hyR5JKfV0ONG3s4\nAq5FX1sh19WOI8Lg7DfLB/biklpRCgS0g9aVvWR7yumewM0fSufc55RZzW6E\neW6cgkrVEN7ObCBaSRfnx8SeXw2FQ5waoIievKnxUqSEzNiTTNvay8D639vv\n2bmXyKnm+oTmsYexX8wHe3bnmU2Rgv2LS1mRZumfGOEYIQUUWVu5BWTxbOmt\nyGCsEhFpaX/s2k5AoQ1gjn3ZwPfE6JJbkYt8g9DkpJfNCNSkogLWho4ZdHQp\nl97y4gPQ1dgpnxwHkG8HxJ/otIT6FTH/aNxvGsCCOEPxG1bjgC0a9c2USdyU\nISnR9KUPlvA8yL92wTgdg4SUUx+pxpHpHg8tZ51dcaOODalMEcRSx3b71fTK\nodXDEBzcbeJZMQaz1M08CJAI4hEJ01ZnqtYuYYQkWEiyhlb0ZWVn1CVQKzqW\nrJdWIzfTQnc1mUPji60W6zlC9qam1kv18ypyU5HYH5BfQe+6hcVCVe6WurJ5\nhmNxp7/ZBL6MkB9zhabqPDe1XOzGx7gh9PPEA2cKCWUxTqBFHPZ+8jFkONgx\nETTw\r\n=4PJ+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGwwR8jEgstimPhQvWvoP/fEhXiRwz8Efhk+AYL3+gdVAiEAvSk+eQT1CpuPSsK8IyQ3xWaVoYs9Y/LvCcByL2N2fD8="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.1.2_1568938539235_0.30582244679968373"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.1.3":{"name":"treat","version":"1.1.3","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently \"yarn build:module\" \"yarn build:commonjs\"","watch":"concurrently \"tsc --module commonjs --watch\" \"tsc --module module --watch\""},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","autoprefixer":"^9.6.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"16f77aa0af7239fb37e6a9a026b13a913ba0b76e","_id":"treat@1.1.3","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.13.4/node@v10.16.3+x64 (linux)","dist":{"integrity":"sha512-CAZ1MDP0zLc4Mo7YXIJmvFEcyR/XL9QYXA91qZTdNh9mnIBSvC4WMj36uZRpDvH7yVFMSae2K4M8tpxFZM+6Hg==","shasum":"822290a9d43fa253f046f12c4dff878d1c305e7a","tarball":"https://registry.npmjs.org/treat/-/treat-1.1.3.tgz","fileCount":70,"unpackedSize":510062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdhE1qCRA9TVsSAnZWagAA62cQAIGJinxRPgGP4Dx/IVBx\ns4lro4PrGBN+ofuFXNB2cOiU+lu45bRafm4p485iOHftb5GBhv+ocH66EK1k\nFCm67xU0pjbgE0Sus6BO/TCv3n7980nJYPYVCc6JzxFbGq+I3Xi9KFhuHaO7\nXgtcze5Mj1eL9fsfKKWwoLYR5kb7ZWlDZYHGe/Fj5ZpZRMxhzuSGpgRHvqyS\nC1LyHYMQvFNDJWFK499PI6Y+yREfCt/VTTmhhSvlXmmK6K3NZP78Dp4k+cZ6\ngSjZDy44hoPokNeB2nwooXGE3j8BqIRVZJkGPv0FHtlD5/crPQeWb2spBrZQ\nmg+YjSpRxTci/072u8YdRIL4WA4Z24i7XS9zvJCSb47JH9E/nTsUdpbb619G\n3tXIXl90JdxRfvQ2FXzOf/o6YE/TEcVyIsDlyMFlzb1IPPVPoce6qOOyjx0X\n0lqN98DQR8jN7M7nDtvaiPHswmlpa+MHW7tWtVMiCcyRlUPGsMXYfCf+SWSL\nIyBmAQ113NW8DBrgkaejmGuHuF6PYHR5jCGmawyXCN8Nojl8l1Ci0yhOeP2m\nn/NufqNtPe8efXXYmtM45+N6U8N15bZMS/omQLZ4lcWJ2NqZ8CXZ06w6Zv0n\n+0448EtfcAmEHhO6DzArabpfTxA2CUUx1hkfEXNF5hGILgv8ctgGXzhlnHFe\npE2w\r\n=2YfW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAwPIWfnwQTR4EFaVIAkQcxfJcrgXS2TZpgdNlvwSlkwIhAMkcQMg/aMyBBtHgqDCe5lKDtINQmikgISPW7bwhBHlD"}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.1.3_1568951657670_0.5367723402158029"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.1.4":{"name":"treat","version":"1.1.4","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently \"yarn build:module\" \"yarn build:commonjs\"","watch":"concurrently \"tsc --module commonjs --watch\" \"tsc --module module --watch\""},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","autoprefixer":"^9.6.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"d649add6892c0152e8cbc6845899bd90bdf8f239","_id":"treat@1.1.4","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.13.4/node@v10.16.3+x64 (linux)","dist":{"integrity":"sha512-AzAo1agBmqXK2y/zjPC3MPU+kawfZicXJSTdilmg1Q7Y6mjL1Rjnaw0rycXUvgFGu3tSYTMKMC8VkuOecSq81w==","shasum":"b7795e0f34cde5cfa2164826bc1f21c81c67b4a4","tarball":"https://registry.npmjs.org/treat/-/treat-1.1.4.tgz","fileCount":70,"unpackedSize":511257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnRn5CRA9TVsSAnZWagAAHGwP/35iqisfJtCe7GzD6mKJ\n867WxTLPDzvls0JapjIfoxBFgw4bVg1GOifU5j7TMyltsY50wEpf6K1VeWYf\n0gezuEVNMTnbALnP1PCaAywuZ5QGYVp7EkJVqpKLBH9546KFXBEiulMFKj3C\nffb55JGoZ20I04R4IlIiKLKuoy4Za3NUrDhvAmKeZJljtV29L0tXP2rkt1/J\nXqB6XqTPFxa4YRaio/eeLvRMrcLF7OWNNL4UkLrPGBYNFbmSamMb/2bZPjX0\nVORHM6STbTkSYJzClhHFtvBUO66taFVmq56TKnW4R6u8/je+bTQLKc5EX6tG\nVhZfBxNToBEOA+6/ZsTBFFPas6Xuxy82HXvwlgHyYzdh48/UsaZYgt8FiIaB\nrUttyd8U+voBTxt0tPuVxWwe1J7BiqrRiBCimJ1thaDEPihB+RuMmvF1yBi6\n666Vkg9975D4OzfO0zOmqly6Dx3EGGvW4Q7A01kfH6FO/KrUSfuCrvg8SJy0\nEc1oqquFxrIp86JyUVxVafjvRrAa3S70D8qfarsCEcuJPvzV0jLx9NYV8d5f\nATJbwxzEHzsQVDJezPM/YXGfdglJN5MIT4IlmC27VvztkuIV+mPMxRZO2hUW\nSX9XrcpcU6cgLvigwRmfrdXAUM3tueZoBoBBOPWY2Ygv8guLlSNHcSrfw/EP\nxXJK\r\n=IckV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFVVjGntzOQzNq371/HzqZQUzpPOW6ZbsadfkwAJyurSAiBq6h+8vNySqwPUHOYYwmM41KF3YheAS4KAwNQexDjcTg=="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.1.4_1570576888676_0.8580701352199616"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.1.5":{"name":"treat","version":"1.1.5","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently \"yarn build:module\" \"yarn build:commonjs\"","watch":"concurrently \"tsc --module commonjs --watch\" \"tsc --module module --watch\""},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","autoprefixer":"^9.6.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"5cc578822ca9b325156567b841ee78240c32a784","_id":"treat@1.1.5","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.13.4/node@v10.16.3+x64 (linux)","dist":{"integrity":"sha512-XYiBQVQpvrhKi/JYTGwIzBsRbJ7KO8ogjDWrJnOtHlbuKV4rUB7HRH3/sAfdVaZOH4GdCOin8ly60UCa1G6fvg==","shasum":"b911083d585d40ddd7f0fe19ce3566c6615a9d9f","tarball":"https://registry.npmjs.org/treat/-/treat-1.1.5.tgz","fileCount":70,"unpackedSize":511804,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpVdfCRA9TVsSAnZWagAAO7wP/0Q9xjSQfmWWC0xixIv1\nb7L5UIoJiSfFbkdNWfBH9xdGAU0FtKOLS4hk4ptV3Ih4zARxXla3ZBUSZTXJ\nfQ42U3Kn0DtSddNAuXADjBlapC49w/i7qFEg6dEV8D4jvrgannas+uQbOaIE\n0xGHsoV7xUEuvSapWxfsw9wIIHjaoSC/Ms7C/YFOK7UwlLmeRm8XWyvP3zaf\nnUa7eovp8iMXiickaC8Dp3p/mTtXDDmrEvELa5y7kkfAZJ9+94Bh21tSzisN\njuBLva+avNk8LaeiUJdaEZkpBenXS70QrVRmxykpDnxeq/xb0/MII4KPDuB9\nEWOnw+0o3dynyk4COTZUVRPCvh2R+A4QP6d7Cq39xuEx3KroE4AEfljX1aeE\n50Wj/lOqvCNETa7MxWuoIcu7mU0RlnqkDkFjduAPXha3PCOX+Fm2NlG4e4VY\n3eCpk/or8wf29CO6TsaVTaCrswxJmAmgy76ySyfcLtANmRZQwxc/sWZbJSoZ\n7ehohDiwD/+SQ+yyqCT6f9DYHTeLJAvSBVGuL6NhItuoWB8q87gNdfqqUHpR\nUUK8XF1bJFEt/EdSR5C0yi+wBADXidjQ2iuCIhVwoQuwsSg43BxdCwconYO5\nL8RfMewAE82f3ya6YU6OmKXjBIjSGf8C0o0Dhwyv4vMJ3QLsHJmRoLfsJLZf\nWPb0\r\n=mcwS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGZHQ46rC272l8RC/8q0jD9nkwEW1jDqdozZHIDH0JyCAiBEnGu2RtWoN83vaaEJivmhxez5foN3xiLT/GQFiGwl2g=="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.1.5_1571116894989_0.06934434605492168"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.1.6":{"name":"treat","version":"1.1.6","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module","build:commonjs":"tsc --module commonjs --outDir lib/commonjs","build":"concurrently \"yarn build:module\" \"yarn build:commonjs\"","watch":"concurrently \"tsc --module commonjs --watch\" \"tsc --module module --watch\""},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","autoprefixer":"^9.6.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"fa307d1d1692285e4f25e1c36effb5db709148d5","_id":"treat@1.1.6","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.13.4/node@v10.16.3+x64 (linux)","dist":{"integrity":"sha512-NyxdjttFOyz0YAhR64GvSbdkj/RditQzVsGE1irbOgUuJ7vtd+eidMzw6o+ONkhWoTCn8Ol7K1wUWWyur1aC5Q==","shasum":"fa0a473e1264e4c3a184df02f2b6b78064b203f1","tarball":"https://registry.npmjs.org/treat/-/treat-1.1.6.tgz","fileCount":70,"unpackedSize":512146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdrOftCRA9TVsSAnZWagAAnuYP/RszI/DzZ35onLOpDMDo\nFxPDJgX/BqnXJX91qHwwQEZfFxOPTRb/WPenGeOd1D7tY4rmBkyYTZUYoTYs\nBM/aGwkB4DHaAEHolOuGYc7XtOWDVOql0MDjil48Uv3RH0Cno6KWhvTG9Vqi\nujKnr2BY5LlUQoLT7dlYArcLdpScpdrI85q/7W1KUrkjS3hMmMz5nQ4qeiBb\nHgY/F0RIo2Vxnshqt0JehFPj34gwCWFQnMRCwRd2izPowOJYOga0r0PwKBbT\n7yeI2BxXnOMSgd2YDeAWynktg79csl97d1efHMTSJUqOKd54RgOD9ZfcetQU\nrYOclBR842/8Ks1o4nghZO137IqSDEcNfBWNbOTovGl0xapPoWgixbhhft0H\n3zg9kweVlbwweBYFqd8aQV07NaIG1gUeHIQ50lAwa/TAeSEwD3359b8tV23s\n/uSuw/R35+FgIS9cS8RQZJxFEJZCpV3M3Bkjp1p1mt0qwL9b/Oys+wGKqq1F\nB94ulXxuO9sbl9UQlRLCN6puxV1RJhxCBJfcFFwA/w5sRrZhyyY509dq7/yN\nrEV1FJ8Sl+8m/KrzGXupedRwXME+pEMFKGM5TO+0RkomgFg2tJV9GMDyk6Ih\nx9bmeXzjVnCW9svq0j7XQR9sLDBvvnaPl98Q5RBMXlQFFWE1RcSwHppj//Iw\nqzh5\r\n=57Up\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB1nXiV7Ey9uW2y5HyWznpaXyLrh79e3KP+rPFuOioGzAiAKqcZR/wsFz+HFJcZR7LElvSpyKiyhtycJrQuQsLhQ0w=="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.1.6_1571612652915_0.8982339372869408"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.1.7":{"name":"treat","version":"1.1.7","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","types":"lib/types","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module --declaration false","build:commonjs":"tsc --module commonjs --outDir lib/commonjs --declaration false","build:types":"tsc --emitDeclarationOnly --declaration true --declarationDir lib/types","build":"concurrently \"yarn:build:module\" \"yarn:build:commonjs\" \"yarn:build:types\""},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","autoprefixer":"^9.6.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"37c288726afca202573c1dccc02182d193471499","_id":"treat@1.1.7","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.13.4/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-9YD41MgnI8Ul0Mt09Ohalo4gRvViWMnusyKLWBIyW5INc0a75EHptGOJge0DPRqwrCOd+Sqm9DyWGjBqQ6KoDQ==","shasum":"2117c84fc993b4f505ab471dd6a1e0f8461d4813","tarball":"https://registry.npmjs.org/treat/-/treat-1.1.7.tgz","fileCount":55,"unpackedSize":106587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5ZKkCRA9TVsSAnZWagAAohsP/jz5rhL8LFcgMwmZOavo\nJl9zWoaSqheedggt01yfSWFu6oaedk1oXUDI+WLqHjX1rE9VPMec84RKRfCH\nckh+AeeHyms8BeCi54YpwqSEGDgl9N2nTCQmJRhAqAjWfgBbUQc7T86odYVb\n/DwnGojvy7ButWP6ggqVp5YxWIVanOUFKuDiNuPLg8XovHjpo9RNSTNK/Kg2\nWAI7i9+8Ptz8TOmGuGxqZkJb4Om1DklZLc3vFTTJW1RvcaMgP3M0GsZVAMuS\nx5/fUDy5VHzWw0JT11Fkcc6AWi/zzt+SGVxB2HAIdYQ3bOx64chpyDdjzL/a\ndjqQxJfTukMagU7zDG8xEIxudhQCqOmWKPnsAFchLrY0TAqLl4ZmpdVxNJz0\nJ4gok/0gC9mPF6MDnR1hion6NqKzMmlj1/nBK2lB8HN0Oz47aiWBDoFCNpHQ\nYaGWEa7AAQhssnfUhVXu1ZreMeINRuHj3W7BTSW9m1T1IWQNJOobNtTcI9B4\nH/PbyuiKlmgp0itW6FU7+xRB2T8Ajyvf1PEXcWKX1xHJlVoZE/tKehYPyM8a\nLPr/NHoLiSxBEDKcf/WE4yMOuY2DRblFdDKFFzmqPsfygxageS35aM7pUWze\nqIUBI+BNZDvVKppjEj5K76ZAP6hDkIYfrP2P9vwXnEgyAMhCrg04KQg+Gv5G\nmfbr\r\n=qGH8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICRWHzYa7R+SFh6Ilsb3p/f+AtZyMVFBbvQOTwG56DdPAiEAvM9olgHv3LTM2h2T7hoeRVSMCorDlPueLUdXsNAPlvM="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.1.7_1575326371915_0.023855705179292697"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.2.1":{"name":"treat","version":"1.2.1","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","types":"lib/types","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module --declaration false","build:commonjs":"tsc --module commonjs --outDir lib/commonjs --declaration false","build:types":"tsc --emitDeclarationOnly --declaration true --declarationDir lib/types","build":"concurrently \"yarn:build:module\" \"yarn:build:commonjs\" \"yarn:build:types\""},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","autoprefixer":"^9.6.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"042935c35d84142635d3744caec6d9e9ab9c0d05","_id":"treat@1.2.1","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.13.4/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-kNAF/cb8KMP4F5ttJRWaTMSG/mIwgdFK80BoYtVBFRZKlhOU7wcuKHmemTPWFRwk6ehgmgUgJYNXcmHNWHPbag==","shasum":"347a2015f3625abbc90ac21b34cec4a0de9c4a7d","tarball":"https://registry.npmjs.org/treat/-/treat-1.2.1.tgz","fileCount":55,"unpackedSize":107257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeG5inCRA9TVsSAnZWagAAqMwP/08fzwQc5v1B8iSh8dSq\nmonJ4csOcMwkfFE7U98loyaL4zGDA6umN9CuqZgB01PAS7fsXgj0zEad0xx+\nqNStZQWUNfdVhw8TXO+9XQT8Lpat8Pk89spUtYqDrN+sFglI1+oDTDFpe2XD\n6Xb1q7Edg34lxCPjAYWKF0ywkFzRgbJ/Rg09un+NlFUzhE51XVOP4OhEITgj\nhJfJBEOJt+g6ImarKRjfklFxvzL/mO9lo7rR///BpuGOkPrEu1haK/GvQXcx\nPm1eJ9Tr6WQLDcYPDIG0RCyLVM/TXFzZ2HZOae6xHPnOxKOv4GxMdzcWHNme\nCu2VFDfxb8885viAtJB67epp42lD9Vcw7u9P0FFFIROEZij345dyb93qP9CI\n6qv++bjO7WWDJbQdTgJZR8+aqEUVwBsz8a1/ZRUQuPY0QwCWhK3tZQar8bfm\nV8Dg3oFKuWPtNAf4q6YX6t6ZwxBG1UgLTXLoUUdlXq6u/cWm9F/PjCz9QCSM\nO0KTUuuG7QRT0RuQ5pZTwisJiQz7IofgK6V94AiPNyZR4P2vwhnITHrFS91o\nfjvX7hZjtDXpt5krZYRZJeQV96nJW6hpLcF5gVz+KqdkPRWSvctG3JTZJkg0\nprx9yKMJnk5tax+zJ7F914C4I5P7i8oL10gH/Ywz/sQ51KdPFUIoOWjyXPJr\nRR5s\r\n=rBJW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7nT8UKaJSXi5jAzw+rNaccX0wF/bpz3I0Hw6PWi9rLgIgV7GK++Aa9hSoRlHIn8qM6o82z7gi/AVIOo9tL6DsDq0="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.2.1_1578866855116_0.029525403458984467"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.2.2":{"name":"treat","version":"1.2.2","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","types":"lib/types","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module --declaration false","build:commonjs":"tsc --module commonjs --outDir lib/commonjs --declaration false","build:types":"tsc --emitDeclarationOnly --declaration true --declarationDir lib/types","build":"concurrently \"yarn:build:module\" \"yarn:build:commonjs\" \"yarn:build:types\""},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","autoprefixer":"^9.6.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"a36694bdee4ebd0595e27f18c746be2fe8f63f82","_id":"treat@1.2.2","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.13.4/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-nh00I38EoIpD/ZSmNd01rJeyLiHcuMN87rmXrkJJ5RMiaHvnKXWFQ2JqRM9Tqas47iTokYN1e8SXpKrC5lAdUQ==","shasum":"6b5f3cefb8674fcd6e7c99e91366a9aeedc1f055","tarball":"https://registry.npmjs.org/treat/-/treat-1.2.2.tgz","fileCount":55,"unpackedSize":108371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHpSbCRA9TVsSAnZWagAAFJcQAKDEOZZT+5qQMCAli4JR\nxNnhj6dkuTT+U4kIgMKyeUfK855cnq+RbgwcFQr/WI/vyHnG4Rxs0CQjnSQl\nxpPhh8ttZ6wZQhvSDwcLcZGs62p2mXz1sHi/D9OkWg6POPi7BQkoJw+9N0tt\n5QaRoKZ4DdW8BV9jKGODx/CPuwD3w9vSKpJFz6JQiEik6qTmuVm9gA9jm6hi\nhPqIU8z8bXpOz3KAEChLn5be0S2t79Trd9waoDSXxFx3qLTtfup5koAmQOqR\nzazP+UB4hVWx/4KRDG4JJCaj7untUCx+iX++3kWiUMD2AmjKk2JSDQrZercp\n854zlrWjpW1uWf/n1oOS5Ldkvx8yL+JUYsR3S8zzBFcAK/BK2QhvdhkzHANm\n3/l2WG/5L6PgHMQCIkGPL/YJ1GUoqdllCF84Pn11oCo9C1VoxmpHHZsZAN1z\ncfu57QRKSb0dyYLEQNct7dTiPv5knhj0GN2Kgc5kITOI7cQq0HNELOZS7Bzy\nELfMj1ekh5/9lKqMNlt8FD9T8bnAkGYlT/R7QnNxVXEV30SYgw3YGwnmVj0Y\nsmS+YQueoqx9os/XgfClUCX+kc4LnsY8kJgF1GQ/MaOy7FtXrW9vmQO4+90S\nKFEU8/Amu39zQcHdsIckDvDGeApOL0KqUzslTvKNRRgcjiYIpk5Evv8mnzTG\nrcKY\r\n=vJgI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAY1bO+Nbj1FjZmtpxn8DKOcjRsEy6WJcrueB8VQhIVmAiEAoT3Sf65J4QQD3yZw1IkpLIfKgHZHjwsO7ixEYNhBzVI="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.2.2_1579062426545_0.17046834788124388"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.2.4":{"name":"treat","version":"1.2.4","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","types":"lib/types","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module --declaration false","build:commonjs":"tsc --module commonjs --outDir lib/commonjs --declaration false","build:types":"tsc --emitDeclarationOnly --declaration true --declarationDir lib/types","build":"concurrently \"yarn:build:module\" \"yarn:build:commonjs\" \"yarn:build:types\""},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","autoprefixer":"^9.6.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"e1e61dff5d458889c4aecd224f896f27ac8ac0fe","_id":"treat@1.2.4","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.13.4/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-xT/lvdaIiTIA/nmJ7xRoGabCxN3AoWEbUoX67OG1z5DJHHV29J5v73fngJfHzfGcT6RgWfKWsWUKNWYTL/2teg==","shasum":"c3757badd131a0b91eb951960607b5a83b27264d","tarball":"https://registry.npmjs.org/treat/-/treat-1.2.4.tgz","fileCount":55,"unpackedSize":108770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM3urCRA9TVsSAnZWagAAegYP/0oYPEHumlG/x7yHreuB\np0J1GeCsLQNVly22nE197cTvsYeFykdrN3M0XwTxK/olxGHJpB8py6Lw870l\nowEJMh7UUHUkH4+UfvhdHhD9/ZrFEDRS22AhM1jv6QMlN+oy5XQ4QwE/Ec/Z\n0iOuaXF+0eUuOSgHfvUxjAJQO+POortwFp3a8AKpIAaOqdaTuGZho3EoGYjV\nchrWonkzkhJgily+edPVV63Jr9HzV+rLQ/+/KyEiHwRVoGag42YM/krkjCyX\n4qJRVmpQWS9JdGFRVgCAfSvkbopSAtdEkfbvs3ItwhoTt1ec+GobvRLBjKed\np+uixk8gAL9nO9Xv5TdkCg8to1jZOEiWWArLm2k7YbCWUwHfIQsVLtiV342q\nfXRDB50/I3ricCPozicJXXOEHqbTYLcMoZ9zFztph3PHS8cFSC5obdaer1+x\nTSFIbqMKaB7ZRZqQSg6/Zu2gwj+t1MsgD9LsgrLThyoz2jbd1uEYjmfVjkC9\nflYk0f9snwbPOfASvrmS8eSAPEalbXYsIAxzN80kJXxPxJdJArJqxrW2ueSX\nBlMwlg0IRKfqdxlhIrkbHA83SPZgS05IB/5CY8EzIki7y5byaLhXAUGm7WBC\nsB04EOuXYPEv/2jZGtkfLMBbfF4KApf1hdD3umGvb+MTgbXBAX2hzOw0cKKt\newid\r\n=SJF7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6WJuokwoHCbmW5VA7fIrb119nzO6/iMLtBpt7hoYwowIhAKscjgw+cg0U5QTrlqpH04pRVwt722gd206nAMIwWVRg"}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.2.4_1580432299270_0.3282278193608492"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.4.1":{"name":"treat","version":"1.4.1","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","types":"lib/types","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module --declaration false","build:commonjs":"tsc --module commonjs --outDir lib/commonjs --declaration false","build:types":"tsc --emitDeclarationOnly --declaration true --declarationDir lib/types","build":"concurrently \"yarn:build:module\" \"yarn:build:commonjs\" \"yarn:build:types\""},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","autoprefixer":"^9.6.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"ceef0fa675eadc0fc1891e94bdba4e4fe83ed3e7","_id":"treat@1.4.1","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.13.4/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tkQyAgs4QqflZg55061VAgsr0fyVdF2Y5cYbUHmyjBn/MD/C4Sa9mAkRDkHR5oC97BePlIevACVbew5GrWLbyA==","shasum":"42ab9d65404fff5e1e0600fe5d5bbadc4b434edd","tarball":"https://registry.npmjs.org/treat/-/treat-1.4.1.tgz","fileCount":55,"unpackedSize":109126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepg+OCRA9TVsSAnZWagAAd8IQAIVnVa27D4FUlI/Wn7lE\nxVyQji/FRj/L2D/18qYBk3V+q6v46YPeXB5O4OJds5JSQA3f+xNKSGXFAfzb\nc1h015GlVxaNiXQk/2pHkWFYvbvGNYan33XFJzKe8Ik/tQQ7d/UVHQuc7dIq\nWQfmhxlprzZJKvARFFSJqT1eVKYWWtiiuBUAgg/PSy8F3FoChOJL4cQSxQVc\nfTApUFvzbBmLaBpHgK16VQUlP7+PcHs1RSKu5QAH1hlskEXWJmAIEuJCdTxn\ney+2FOancp50YEJdYrTfUvYptutTf/OqQHSJ2R9GaiX6V8BZGYSd+r7JhRDZ\nlPUXX3QDTn2kB5nW6HTbg3rqtLGmwX8tEHiI9JXxaMTItv6Kn49GoqMxny6u\n708n0q/JK7qvd83FWYhxwt84Qz2lQSCIdcYGl0UVGkgibOaNYlFxeHxYsoDW\nmdt7xZPq0fcddZhuDcG8GzhLJ8vgU2LtDO81DeRL0TwwptXdcOIZrlT2ZyXn\nxcQjZHDtwh8sOv0Z0oOH1opsnvd/k9M00CPm17IfMaClScxIm4Fn87ojJ8GD\nACdufK8g85T05wRMizW1fLL9mcy/R9PlwEx9Ibc36sht+GpWe1NqfDfcYLfT\n2X4+pDroGLpw/nx1Yumwpf9xO7V0rQRaMwWddXAV+WWSEZSlLc4wP6r2wAjY\nsyPi\r\n=j9S4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDRBczccc0itZ+emjQUdx8ZVony3RxrL1syV1+1d7pYQIgITD32lHXk8dAKVt50EGka+2oI0NlTQku6ae72dqrL+I="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.4.1_1587941261544_0.7360407499162851"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.5.0-alpha.2":{"name":"treat","version":"1.5.0-alpha.2","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","types":"lib/types","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module --declaration false","build:commonjs":"tsc --module commonjs --outDir lib/commonjs --declaration false","build:types":"tsc --emitDeclarationOnly --declaration true --declarationDir lib/types","build":"concurrently \"yarn:build:module\" \"yarn:build:commonjs\" \"yarn:build:types\"","watch":"tsc --watch --module es2015 --outDir lib/module --declaration false"},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^17.1.1","autoprefixer":"^9.6.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"3379013fedc6b08384ba79ecd18d4a996c9b1912","readme":"# 🍬 treat\n\n## [Docs](https://seek-oss.github.io/treat/)\n\nSee the documentation at seek-oss.github.io/treat for more information about using treat.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.5.0-alpha.2","_nodeVersion":"10.15.2","_npmVersion":"lerna/3.13.4/node@v10.15.2+x64 (darwin)","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-8YO9wl+ufut6BF8E6xYLVA/A6RE1b0JckjhH10bqA5E1ZK29qDSa0iH9bG8hMPuuyBr5wXqTHa3U4kWc9G4fbA==","shasum":"a23a880beefe9b4f0939f2c5f30eb61c57f35a22","tarball":"https://registry.npmjs.org/treat/-/treat-1.5.0-alpha.2.tgz","fileCount":64,"unpackedSize":143291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1zO7CRA9TVsSAnZWagAAN48P/0+OnUB4RLSUFNxP29IX\nBaaXCQ3Bx4MOUrT/QklsI0Ixd6lwpezcZ2m2fzDvPA1p/jAiBB12kj1bKBZ2\nzuCK8NzlfouSlDeCiFQbfxUnE/ZKDtOoi33T5Nzr89sWEjjfHALMOTfcOXWg\nFlULrj6l3mI7I9Y1oKA9uPIuwulR/LWOMpfo4CLW0Xo2x5Ik8T1aTinkkoZd\nIkLgiGb2MTksZeSGyOxEJbtOXIaLMk35wOd0ZExw/4HapFBqkuY9RJ95EeE+\nWnNREsZRHC2aj0pw7sLE3MBtyMJwy+4c56eU1hw+0iaLsLfX4I4RXVhUk3tH\nN8TluhNYmMOFI2UK7JsIBut5h62sn+BHQLHR1+grfaPi3esJ3NzXwJN6QfeU\ns8C4+k6ftHjerK1eQ2221nmkv8l1eeQB7gXVVEXKaWiM82qvTqaMQD45Q9Uz\np1ZA+ENFaoVyy7c4eQA5wXjcNg656Q5e0CdM0AAoY2fJWw7TSBcHWbmlrfmX\nz/gNyFGQDcicGELVNunTq0A7kbnVXm0ZeODBo5OfWcfcr1VB3v+gte8bKaoo\nS8J44TujtyRwFFy57GeXFMp9pcUdFQd/y/1Q6jRjY4CXeRs7vusScOpbBGEH\nVMufOQOAOnWEZNm/+Dcrns+OAJ4p9LmB2m24NozOW7YGMaYtmIjoUu0dECFv\nmjNT\r\n=oeAc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHtacS7EyXLAtOtWcFrn4CB6fi9wqZBkLKhXqx4AiW6uAiEA2kuJqjhYKypG1jIJSQH0Pf9ZZhlEMaj92X2xhyJvARg="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.5.0-alpha.2_1591161786963_0.14717663869418307"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.4.3":{"name":"treat","version":"1.4.3","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","types":"lib/types","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module --declaration false","build:commonjs":"tsc --module commonjs --outDir lib/commonjs --declaration false","build:types":"tsc --emitDeclarationOnly --declaration true --declarationDir lib/types","build":"concurrently \"yarn:build:module\" \"yarn:build:commonjs\" \"yarn:build:types\""},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","@types/object-hash":"^1.2.0","autoprefixer":"^9.6.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","object-hash":"^2.0.3","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"948dd6d6f9df4cbb920def21d3843ba6f0d7beb8","_id":"treat@1.4.3","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.13.4/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-+LajJja73v1TDf367+axjuDR4nWn3FhvPkPSxvDaQUewJMILYVm3CEw+JuWXCIm6mGiQ1miVDpRrFuQ/FtKfYw==","shasum":"d634766fb8b8b29a5f8ffd69ab1f587b0d60457d","tarball":"https://registry.npmjs.org/treat/-/treat-1.4.3.tgz","fileCount":55,"unpackedSize":109497,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfC7M+CRA9TVsSAnZWagAA6ZwQAJwFEMKXQaZUgLw7jOmW\nvzfaLsoHkIsKIMoDfVHdawWTD32C3DpcbNXLGv1w0pRNbFySP9hH4PNwNaSN\nKqX0ajSCxeIQm3wwnTeiMRTEeZSNMPbDe4cvMsGObee9USHNTVrNb2kIe95y\n1Pe5R3ETrA9OPm3h5MK0piGsPgIwBlFKMJiHRiIiCacLUObyI/jzzW7f3nlF\n/Os05PjoT5iYxo+87RVWmZi1JY0jh8+yo3HOoxxHrv8VaBqGKS5Ve6Y1yq0S\noP+erOPnTMBXsk8Xu7Mf7F1reLEgvwjLyQcCUjU0x25l0BbcMx4yZ9MpD/OO\nhq3+mHwUw4ST+IIIxB/h74ZUxSA8LU6Wtci1I3eHKMd0NmMLgUCJPGeyKX+a\ns+5o1j7vHd4SwpsYzFGBJ7+R/wyEZOGDDlTu/iaDfqv43vibj+S6ZQbfn0P3\nS41+MqXe7HDA7NM3MAHdXEhbR4cIUlS8cYo3CCGVpcA44BLHSG0A+dTBmIPV\nLb9YlErFf8AmFbLN9g8M3DXetjCqD3wZytw+AMo7XFtUFoq9BJtn1FF/3g6m\nf0SXQyjbve7kkQiPYpM4apPHh/7T8Fsu0FH7RIaHMVQvYgSHeJ8fLYDi7Fnw\nR4bM2YNusNMyftUJbFv2ndrDKgd8q13yw9IIHXNKn/sFGYwsR+v0UPs395wr\nAyJq\r\n=fM4C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCX6lTX0+e+P57u3R1MN8l3AuA62l+FbNcVHLMApnRovQIhAJrrevHhfvRRjo5O40NOnCFsYIDjs+d6F084r25gAme2"}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.4.3_1594602302299_0.3704385678624986"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.5.0":{"name":"treat","version":"1.5.0","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","types":"lib/types","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module --declaration false","build:commonjs":"tsc --module commonjs --outDir lib/commonjs --declaration false","build:types":"tsc --emitDeclarationOnly --declaration true --declarationDir lib/types","build":"concurrently \"yarn:build:module\" \"yarn:build:commonjs\" \"yarn:build:types\""},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","@types/object-hash":"^1.2.0","autoprefixer":"^9.6.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","object-hash":"^2.0.3","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"533938194a5e4fdcb31bb34edb14479144b1b6b0","_id":"treat@1.5.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.13.4/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-9XMZJKi+gOo9aG52d78ghIDR7xT0Xhszp+I76NFd1gjaz+zX5w5dFeKbB+MhrjG9yaf0BK477/6nTMKd294c/A==","shasum":"216e1134fb0ab3e3b6ef79e3cab26fcd08f8eea8","tarball":"https://registry.npmjs.org/treat/-/treat-1.5.0.tgz","fileCount":55,"unpackedSize":110515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGRXMCRA9TVsSAnZWagAAPtAP/0hjZa6tq50eC/uy1ZXB\ndDhZ6QBYtNSy0mnZ7uQuZQ57pfURnpmz5tQjCoAfW6o5iIPymJWEv4s4QQ8K\n4PlHsBwuix7TKmIudFJd/zizu/DQzdSFYU/MauCmtvau054UoTKSejDoujrX\ndI7oat0QcH8Q7sW3wVFDE3nSdcxd1xEFpr5FN65v8BlqRM9JRjTlEQnfZp5o\nW26A9PHFFXaNle+2YSpj/NR7uTIDht1WEjLRZlw/Vgdmpzw6g5MrWRbarER1\nyFauIa1KM/D5soyTgK2IORkt5Rdnj0aBcx1sM4e90uIB6WIWvE+tvl3sctSZ\ntAok41ldckJ+LkIBz02DCJPQguraLDk0NbENyt/ZERq5z3XxBHZvygowDvBf\nrp8jVIO54ygOirlEZQIMKmFylL73c4pxdMPFXl7j0GtDK5jtzs7saT4Pa41P\n0bTOor+/QZPeAPnMh1k7zxEKkhbX3RYNnEDM6HMPZGcGQaN2byiyldKP96lY\ngjjZ8w7RgWtESrK/YLJtU6b0hpoW8xRrJM0uaawRPQ+o2/KV+VzqELVO/k1t\nQ2QjE2/5+10CZyyeHpxU985CJ8PrkG3je4dhtq0QRjCGaq6I3jpGucEoppup\nAJo+2YeH8FyN+wLGDev82dKIps21IWUFBcWj1riKoxxjYF48YepL1gpGFGhg\n7MTU\r\n=15Sq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwkgcoPwrnl5S+FXTsWyAcnRQJDXa39V/QhIue36VVCgIhAJ52gf3+CronItbXniOq6zKODTtnGet7rMher6ESlpPS"}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.5.0_1595479500037_0.7405619037403384"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.5.1":{"name":"treat","version":"1.5.1","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","types":"lib/types","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module --declaration false","build:commonjs":"tsc --module commonjs --outDir lib/commonjs --declaration false","build:types":"tsc --emitDeclarationOnly --declaration true --declarationDir lib/types","build":"concurrently \"yarn:build:module\" \"yarn:build:commonjs\" \"yarn:build:types\""},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","@types/object-hash":"^1.2.0","autoprefixer":"^9.6.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","object-hash":"^2.0.3","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"3e24c4287335acd1f71b99a7f5615c9bfc850c15","_id":"treat@1.5.1","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.13.4/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-roVEhNzudKgGjZoNFbvTqIsGZVu2LwDuU9d9LeSHDSWWkvFDwxniq/J67LPipnT/KkXaWH0lKsaQmeHXxHigcg==","shasum":"ff17af14f466400723a5f9fbe5040e1f97bbbf49","tarball":"https://registry.npmjs.org/treat/-/treat-1.5.1.tgz","fileCount":55,"unpackedSize":111013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHljUCRA9TVsSAnZWagAAIGUP/0Xug74WlQl8vG/W4d79\nHuYRrBPVNPUqAe3gUPCpoVSW4e6f642nsCb9ONvl8saW8CZoEaS/2mVuOeBF\neQ/373Q9EmU04ZZdbTtPr3ta8Obno3+ntmZR6yjjM7t5a9ReZIHOZfgQTQCk\nU8Vt+uMzNm4Whusziyv5Op/e5iM6n6O7uvFOfKtQ5WzdpgvUJ0Fogq5hu6xk\nEOxd9FNxuE7KKy4DT3ihHU71Fl8YnMCaA/EA3DgmZPF5yZgHephgqrogaoZ1\nrqTzoxtjYP0FQWd2IDif4YWC1/LrMdegB9z/HEQu3OMHxFcVKD86kUP+Z/VP\nYNMgY0Di5FkIYlWue8z0NLiIukWEvITtax/XTWOiw0TRRjL5OdkATAhafdLv\nJdeC3uZyXij/Bw4SaN1iN4cIhL8RkXWaxPKDSqInX5REiBe4p0s8FFKOMSll\neRMOxvQTJ8pnVTNpmtM2B477UA0LKcOG+rEFbyGsoL6bkux4/b3j6bkcSWtF\nHcYOUlpb2Et2SiMOx4volqp0Do1n0xmdocfXbCllMZTAx3McY9GcyGwLnbgr\nQkVLdzBdfLUn2sUMyK40SnDv8453teP6jk3X0UcIGZFGocsn737WN8cggFk9\nhlOh0nMNsJ/B0zgqeUrmfaRveONAE9ZkesTDNKGT6DXyvyJry+wfRZ2Zm1Di\nD3L0\r\n=WX2H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC716IArh1xF/sVnq4DqDHSsCu6niF0cVXYS23t8EY+lgIhAKd9Dhg9zuXISphXk+bjBi3Zrwu+K9GV0sasw32VAMZT"}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.5.1_1595824339871_0.8896700299721598"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.6.0-alpha.0":{"name":"treat","version":"1.6.0-alpha.0","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","types":"lib/types","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module --declaration false","build:commonjs":"tsc --module commonjs --outDir lib/commonjs --declaration false","build:types":"tsc --emitDeclarationOnly --declaration true --declarationDir lib/types","build":"concurrently \"yarn:build:module\" \"yarn:build:commonjs\" \"yarn:build:types\""},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","@types/object-hash":"^1.2.0","autoprefixer":"^9.6.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","object-hash":"^2.0.3","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"95cc3d04957f42449554b5169b06d5cfa84b30f7","readme":"# 🍬 treat\n\n## [Docs](https://seek-oss.github.io/treat/)\n\nSee the documentation at seek-oss.github.io/treat for more information about using treat.\n\n## License\n\nMIT.\n","readmeFilename":"README.md","_id":"treat@1.6.0-alpha.0","_nodeVersion":"10.15.2","_npmVersion":"lerna/3.13.4/node@v10.15.2+x64 (darwin)","_npmUser":{"name":"mattsjones","email":"mattjones701@gmail.com"},"dist":{"integrity":"sha512-PrKzT5fMmxqz9hF4+aY2xty5AszukXNMSpa9/PUOFLb9Z9Bf6ksKa0ztxHRyz0UzzOWjUM8z6h65bsZa4f5L3Q==","shasum":"d53dc1709078640aefeab59a4398ab734d99b8fd","tarball":"https://registry.npmjs.org/treat/-/treat-1.6.0-alpha.0.tgz","fileCount":64,"unpackedSize":138848,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI2g1CRA9TVsSAnZWagAAEmsP/0lrsjo2F1MX/OIiXey+\nmyPPdN+2KqW/KEDXGqrLqxLTtBcUGGDOIL43WAts0DsjCRnRQ3v6aa6l8GfR\nlAkjJKfP2Vaqp0Rv3giF52xxHEH1E4CPGQ0jV+3hlz5Z9M539POZSJTrcrdp\nuVxybpOXMTqF54Q894AXRafv5jShIj6OylY6UCK9w6YQ9mXjhNqN1ZVKf6+9\nRF7HVj0c7bz4NY5eES/8zpVTovLMcPy7wTib/Dg4f7ThLoUZc1dsSDTSBCti\nakIkkLZ5lg+pK0JhlNiUGSuZZIiZ/5wfA4EvMjy76h5/oDJzbdk6EOhD2j1Q\nJGMzD+80JTf7ZCTgBQPCplTvTRs2x1vw+vrce1XJlqcRNpGZ0kidAP2DHlqq\nqlD+GADEZFejxu+35k8ivwriHoKT4HSMb6FTbvnjkZW+pJ1rJauWlz7EvqCY\nI4bqQkGj40twCOjhHJZq91TEl7+d/lXhsGrRwzg1gc/yqAbxbF7P2nSuKGDd\nLKuQzwu0FglZzWiuoPRtJtsyYedgWiT5HYbR1MyRStQqlZKnF+GTJBfhMeSD\ndrzy0vRF6cGhUNdhveC54sVLm51iuzWUe+3LOtIpT863ICx9Ko9RC5iShzrJ\n7D6JyoD/f5detKMEsHIOxr2kKAvjMvIbGDvRCrGc9G3gAUWnueTuXOHtGACz\nJAeG\r\n=13m9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCLnptbG6lN5dKL21gGBhYth0zRLJW8jMxEoDi3yLZlgIgSFkRYhkRHohWoibqxcqb+MCUaKoiHMa0E789dCL2rBU="}]},"maintainers":[{"name":"jhnns","email":"mail@johannesewald.de"},{"name":"peerigon","email":"developers@peerigon.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.6.0-alpha.0_1596155956853_0.9037365695725588"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.6.0":{"name":"treat","version":"1.6.0","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","types":"lib/types","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module --declaration false","build:commonjs":"tsc --module commonjs --outDir lib/commonjs --declaration false","build:types":"tsc --emitDeclarationOnly --declaration true --declarationDir lib/types","build":"concurrently \"yarn:build:module\" \"yarn:build:commonjs\" \"yarn:build:types\""},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","@types/object-hash":"^1.2.0","autoprefixer":"^9.6.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","object-hash":"^2.0.3","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"9df9603264c1ad1ead788ca6959b793824a0802e","_id":"treat@1.6.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.13.4/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-H0Iww0XYXywtRNHbsHL60USxyuLDG+KGifGRLqExV3yB4ZdhaZrxj06v9LYhhPQxwpG+s+6hkqQFjoDCkmD1Ew==","shasum":"13342719ea215e36ded3433d1c940e2efda3b1b6","tarball":"https://registry.npmjs.org/treat/-/treat-1.6.0.tgz","fileCount":55,"unpackedSize":112714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYpTUCRA9TVsSAnZWagAASosQAI+hDO9hASwPPMG+WpMJ\nGJ/nHQxTrrM7dhfISGonjOaiPchAmeAP2dRGRz5y05m8YotRgeJKna+9Rv54\n1HR/a7YEbOYxiSQZ/EHEfv1vcO94Nd17IK/EJw0g80kiVvbhcY5HiAVKPu9b\nBuRAWqol19S3ytzfkzsDbuCLPdPKBvB6KITqmBTpd1Kbvi+WPXpfMViZi5d0\nKeOX1EjehhLYoD6qNPpXQT8zoLW+KjE2aIMcvhyOgXLPFbVRj3XLLfVuBLWN\nB29nLfa3POxKdswOEW8qHauoGNEpHlCNICDTqGZsnXzokMGAgzt6Gr5gxYfI\n/H21U7T/foNnEaOgGjB606vIFgNe3bY1sQM6qlkORpdGVZ13y5zwYtyZZP4m\nkf2/E+gZhDv2Vfg3SB3F0EFuiadS5YizQS+fy7SzU8XaOM5MhZsRX+ibUWxG\n9G9AMDWAD1FBW/e88/x0R/DYdCKwAMh4gG5S/rPkcg6WibZ7uaW4f3AwHQ88\nAD4C9keBDevLe8YfyJl98moptQMAhC6+5dcyudp+exgeu1dXw/mxY7Wgpgjr\nKqeINN2KDVYXx/6vwHga88gquZiHVdWajdXftPPMnGGuG7b8iPGWCKGscuxu\nJFzG/l7phQGOntTKn+f+oR/S0RMqIP6UoMep/bFyX+sBrovxJEqu8R6HuqSx\naNxj\r\n=AzfT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB16VwQmjiRO8BqHQEHWzYJ6kfGDyE5ix4XY2SewgzdTAiEAhBBA/NYsL3ikSxUC3uuSEDFI0qSgTKeq/o0YpCPSvrM="}]},"maintainers":[{"name":"markdalgleish","email":"mark.john.dalgleish@gmail.com"},{"name":"mattsjones","email":"mattjones701@gmail.com"},{"name":"seek-oss-ci","email":"opensource@seek.com.au"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.6.0_1600296148195_0.475690465252985"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"1.6.1":{"name":"treat","version":"1.6.1","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"lib/commonjs","module":"lib/module","browser":"lib/module/browser","types":"lib/types","sideEffects":false,"scripts":{"build:module":"tsc --module es2015 --outDir lib/module --declaration false","build:commonjs":"tsc --module commonjs --outDir lib/commonjs --declaration false","build:types":"tsc --emitDeclarationOnly --declaration true --declarationDir lib/types","build":"concurrently \"yarn:build:module\" \"yarn:build:commonjs\" \"yarn:build:types\""},"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0"},"dependencies":{"@hapi/joi":"^15.0.3","@types/object-hash":"^1.2.0","autoprefixer":"^9.6.0","bluebird":"^3.5.4","chalk":"^2.4.2","css-loader":"^2.1.0","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^2.6.3","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^1.2.3","lodash":"^4.17.11","normalize-path":"^3.0.0","object-hash":"^2.0.3","postcss":"^7.0.14","postcss-js":"^2.0.0","style-loader":"^0.23.1","webpack-virtual-modules":"^0.1.10"},"gitHead":"405dc4e69fe536738e16f3f804e5aed633821c92","_id":"treat@1.6.1","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.13.4/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-4/GJpq9E1oNtknWv57GTnpxdiZ8JrKhWsrM4gnVDqPPsufnGPpEInVHnWE2Xe7QTfQkuqTRKzIm/6l/2g0FMSQ==","shasum":"4f1c2d357408d5a2e2824b6c4fda1e91145045c3","tarball":"https://registry.npmjs.org/treat/-/treat-1.6.1.tgz","fileCount":55,"unpackedSize":113122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjgh4CRA9TVsSAnZWagAAvOkP/3JBO/VL4npIkTd06jLj\n3XVQuFHPKr2taFrHnUWzCB92TLbDeYWxD1agrxMNX6kwpu4Tpo3b9Famv8mn\nbnU5yvDZrIQLejzVPlQLn0NeUEv3Cs89q2fNkzZp1Qug8YHKB7kRqwr8WPg3\nWlBNAWxbo0/CY+FRwLRwA5g1OgYvLfCko1vcy6m7GlpxpEpJn4hSFdh2XABj\nwiF8cy03fF4JmaDYC3anp7rHTSGeK+euZjbpWxSH0dLCy1bL2zqRdyp5xjuX\njOwG+Z/+IvaV+sZE42Nl/7KTcHvwE3RoAJpcsEvLKCfyBXarKiSahxmLNP33\nnKciNEvCw/JnkOdOODRgWez1X9NbWiyCk1Iqd+WX5p4D15gBdAOwufmDeWQO\ndRNlFTqiyPsU3PWB3K93I8zO1wjE/VxZRtZtHtfqaAuV3PMyWFAPXXuOIFyT\nTZR83yy8sVAzMO0sGCvOx2d7MyxU5H8qNhjxCjsK47kgv1nEqlgN0XsUh5KJ\nkNI2EU9rZZkctHjSOEneiPzoU9zQcQV0qqio9MIB6D2Ns/Q2EGZlzGMp+Exr\nXG8klqXiPVaxniJgisU+LRraICGkn4QGKVCNvIJHpPprOLvf6+bbg4Ns02ZR\n9hKDqeR4STsGJtIq4h1cDWqrKYXaDhpbJLpImFfI092ckk7AR2OnpoSwYCAd\nqRuE\r\n=BEgs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGA6ByOIgCj97sifcHuoUPqXQtunMbI8Ny1JyBIR1g6KAiEAybW3wJkfIJP3pW7A4VW+58CM8jVlDBgLMbMJla6r81U="}]},"maintainers":[{"name":"markdalgleish","email":"mark.john.dalgleish@gmail.com"},{"name":"mattsjones","email":"mattjones701@gmail.com"},{"name":"seek-oss-ci","email":"opensource@seek.com.au"}],"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_1.6.1_1603143799649_0.9664897115186231"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"2.0.0":{"name":"treat","version":"2.0.0","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"dist/treat.cjs.js","module":"dist/treat.esm.js","browser":{"./dist/treat.cjs.js":"./dist/treat.browser.cjs.js","./dist/treat.esm.js":"./dist/treat.browser.esm.js"},"preconstruct":{"entrypoints":["index.ts","adapter.ts","webpack-plugin/index.js","webpack-plugin/loader.js"]},"sideEffects":false,"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0 || ^5.20.2"},"dependencies":{"@hapi/joi":"^17.1.1","@types/object-hash":"^1.2.0","autoprefixer":"^10.2.4","bluebird":"^3.5.4","chalk":"^4.1.0","css-loader":"^5.0.2","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^3.0.6","debug":"^4.3.1","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^2.0.0","lodash":"^4.17.11","normalize-path":"^3.0.0","object-hash":"^2.0.3","postcss":"^8.2.5","postcss-js":"^3.0.3","style-loader":"^2.0.0","virtual-resource-loader":"^1.0.0"},"devDependencies":{"@types/bent":"^7.3.2","@types/hapi__joi":"^17.1.6","@types/lodash":"^4.14.134","@types/mini-css-extract-plugin":"^1.2.2","bent":"^7.3.12","classnames":"^2.2.6","mini-css-extract-plugin":"^1.3.5","webpack":"^5.20.2"},"_id":"treat@2.0.0","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-5WIqv6LzE90nDkT43s2Ft7ePPzlinZqFSqsGfXCnQ4A9lYciTyXYRJXBTcQx4DwgTKWrPX46lRvvHEuhWq0XsA==","shasum":"4cd860cec11054c491c946fb51874545f56e4456","tarball":"https://registry.npmjs.org/treat/-/treat-2.0.0.tgz","fileCount":46,"unpackedSize":291132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgAtCRA9TVsSAnZWagAADUkQAKECf3f4971MLoepSDTS\nglkUrwb4cy8AWGA77guUaXhvuH+V6eCyp4OVpoXjeUnL1RFCMfjbGrKPjOAC\n/ZRGQHQKx9m7GoghZ1b+qdDI7AkNGmCmgXiIX7+BPV27tcoioflaptozsKaT\noxubaVAFnh/vYHBMrWb8aecWB28TrlUtOrGbMjhj27SdT9oy2Fcsbn0kAZ1b\nAGsNo2Btt5dfQW+Ugq2SU3eAxHCUQqJORahPb8F+sAqsfHLRvoD+F3u+RaAE\nhKLwFftLcuWETMJLRpr/ivd98kVJdudlcybC1RGdWtilnsdv2T923e4yuKae\nOHRPaNJcE8pQ4stuFkzrLf+TgG8oNouXknd+fdUcp5sg7hNpztj+2AgVB6YN\nWTas0zqzVR+szwqijt8A1dGEli87u6iCeyUWv6F277grc7o95ie3bUv11ORC\n69pcg0Va9R5nd0g/8eBrPpL/gAphmPsOiOPYktfSUlK0RiKmV+Ekh1M8sZjZ\n5zmI7zbNIVGmZBWF2pmtmaMg+/m8MTpvlYxeu0MM4cpcJvz51Lkr5+Ll5Xyl\nLdCHIT4JJbRkr7c/TzXbLsYIte+/iLyjmBHXhRP0oElHLR96Gj0jhc8Y8f8k\naAqOakyoGsYjNvMGtYpb7eP2F/W4QI2sJ3kxgQFMUhsDCUzql8J5IazNdsNq\nAB1+\r\n=KVGK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBn4P7R/6IIJTQ1n8ypNx4G/l3R+KOJhM7SBWhsjiB87AiB40RTfCg5omLu1nI9XluIdrtgqDssnRAg6hYKcZx7yGA=="}]},"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"maintainers":[{"name":"markdalgleish","email":"mark.john.dalgleish@gmail.com"},{"name":"mattsjones","email":"mattjones701@gmail.com"},{"name":"seek-oss-ci","email":"opensource@seek.com.au"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_2.0.0_1613103148926_0.2318831297706192"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"2.0.1":{"name":"treat","version":"2.0.1","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"dist/treat.cjs.js","module":"dist/treat.esm.js","browser":{"./dist/treat.cjs.js":"./dist/treat.browser.cjs.js","./dist/treat.esm.js":"./dist/treat.browser.esm.js"},"preconstruct":{"entrypoints":["index.ts","adapter.ts","webpack-plugin/index.js","webpack-plugin/loader.js"]},"sideEffects":false,"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0 || ^5.20.2"},"dependencies":{"@hapi/joi":"^17.1.1","@types/object-hash":"^1.2.0","autoprefixer":"^10.2.4","bluebird":"^3.5.4","chalk":"^4.1.0","css-loader":"^5.0.2","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^3.0.6","debug":"^4.3.1","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^2.0.0","lodash":"^4.17.11","normalize-path":"^3.0.0","object-hash":"^2.0.3","postcss":"^8.2.5","postcss-js":"^3.0.3","style-loader":"^2.0.0","virtual-resource-loader":"^1.0.0"},"devDependencies":{"@types/bent":"^7.3.2","@types/hapi__joi":"^17.1.6","@types/lodash":"^4.14.134","@types/mini-css-extract-plugin":"^1.2.2","bent":"^7.3.12","classnames":"^2.2.6","mini-css-extract-plugin":"^1.3.5","webpack":"^5.20.2"},"_id":"treat@2.0.1","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-nujCBCRC6DNXHd4vmom67kMdeFnEvPjBxKeEmFMQ28qlXk1JLxsydqJk8N8/DIuGO/zNk+uIGHCM3QweSmlnkw==","shasum":"ed57ba60b761af20b9740425460bb8b239b21ee5","tarball":"https://registry.npmjs.org/treat/-/treat-2.0.1.tgz","fileCount":68,"unpackedSize":303500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLaKECRA9TVsSAnZWagAAqTYP/RPMRN5XZDtCyMc+e5AS\ncxxO8oWqBAiYCr5E7NOUPi32+Iaq9V7rlw6FOl+lcxDzEnI07E1Ch9miXUZ3\nVmEdO0AhnyRoMjldTxF7IJs2EOvuRFOAuCANewXwYSbUK7kcSUyirtBuMvKS\nDBae3X87EPmkpbzUhg/wWN299h62SMhJ7LrYiDZVvTvGjR65rtoWJ39JZWYo\nC33hONvEojPz2Js2xL4pV4efgpxG88KdlM7rNHUEy+lcPi9aU0kpg8lXFRPq\nmWxPrtFnZeTZeoZJETqZ0u0ZCWQVRH9sRsPaGo0D74JR5Q2cCqK7qVcGujm6\nkLNadpGp7TaT+akjyveGSNKKExDncS8BZEsaCfzyStwyM6/xKD0QAvM0aUWr\ncXS98wl0+LaVTpqC//gtb2eHbVLT3BGIjL67hHgj5x1/462C7e0cO0KS0h7W\nPMML6eWBhQCRViq4SSe1RHJauSqICNoe6AiwnZ7iZlPbPjz3M1uSl7y0Ggz6\nXHxbKXoocnxanUPfVT+2ujO15I+3ewe+d0MEavrY2Xr84OjAEztUeRsLWAup\nGyu5u1xumFB5oSbEMV7IKkxhqqe9QSJJLmrUJU1k/AYSNoGtJAkMHqhWD62G\nqV5TBWwX3SaY0Kt3aPK86TRJXXbe6yQtDVngLyGXi6N7ZmiuqzTfNOzn5q8/\nX3yJ\r\n=w5Tf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDVCndUiCZpAyq/qeo62jItdC9vzG6r7lfOQhm2iXzOoAiAq4gurcLeSa56KLa+0Bi0MGkVKLw1U/M+JSzOaMCaQWw=="}]},"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"maintainers":[{"name":"markdalgleish","email":"mark.john.dalgleish@gmail.com"},{"name":"mattsjones","email":"mattjones701@gmail.com"},{"name":"seek-oss-ci","email":"opensource@seek.com.au"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_2.0.1_1613603459675_0.15401113648868803"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"2.0.2":{"name":"treat","version":"2.0.2","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"dist/treat.cjs.js","module":"dist/treat.esm.js","browser":{"./dist/treat.cjs.js":"./dist/treat.browser.cjs.js","./dist/treat.esm.js":"./dist/treat.browser.esm.js"},"preconstruct":{"entrypoints":["index.ts","adapter.ts","webpack-plugin/index.js","webpack-plugin/loader.js"]},"sideEffects":false,"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0 || ^5.20.2"},"dependencies":{"@hapi/joi":"^17.1.1","@types/object-hash":"^1.2.0","autoprefixer":"^10.2.4","bluebird":"^3.5.4","chalk":"^4.1.0","css-loader":"^5.0.2","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^3.0.6","debug":"^4.3.1","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^2.0.0","lodash":"^4.17.11","normalize-path":"^3.0.0","object-hash":"^2.0.3","postcss":"^8.2.5","postcss-js":"^3.0.3","style-loader":"^2.0.0","virtual-resource-loader":"^1.0.0"},"devDependencies":{"@types/bent":"^7.3.2","@types/hapi__joi":"^17.1.6","@types/lodash":"^4.14.134","@types/mini-css-extract-plugin":"^1.2.2","bent":"^7.3.12","classnames":"^2.2.6","mini-css-extract-plugin":"^1.3.5","webpack":"^5.20.2"},"_id":"treat@2.0.2","_nodeVersion":"14.16.0","_npmVersion":"6.14.11","dist":{"integrity":"sha512-zskWr5rFWQSq3plYf/ZtetjWm1sI3vyBN1zzWZicQyMmM1tgF0CueYi8tLXh1St7ebvOF7l1WyUKJrmZEgHMpA==","shasum":"0f12fbb919dfe89c5af9f5e611c9c3f959fe7927","tarball":"https://registry.npmjs.org/treat/-/treat-2.0.2.tgz","fileCount":68,"unpackedSize":303213,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR+fGCRA9TVsSAnZWagAA5ioP/0N8ePVctSAAxIQeV7qY\nIkKffKc6gNv/AWydEVefUMcLadpLLBI77YWml5EM2BZFVW2iV8GVpQihzLD4\nLxVyTn9YToPB7ZiASNbB/Bei5JSegveIpL4PGUDUfcLgQFj4q2dq3lMzjaa3\nTPwznTczg7iUDWziBBv3INuavQPOBhv++W5O+vISNO2Q8NkCGFMyeDaOp7ZA\nd762rWZAbZEtcznuhTy3UuodD8V4x2LqLTwpPoo2NgnIsurPWqzZj3Q5268q\nUKo3vLhcdawmtZeJTnyVQ5cu8di2bZMAK6tgkzv9NvwXrxaPPR0x3iq2cLcz\n/6f+JJc5p6CvFkCKNr0DcWX7smZqxD9xClILn01x4puusuLCpXdyu9N8D0Bu\nvPBpGPPkBjlvac9HYXI/Ga7+xVW7FONPipMJHESC/QbFr5Etro0rHEe5MOWW\nU+iKDDCCYkHCCyaL94KNnGzBF3VC2T+SxVM/Y452kWDElBFd62PudnOKsAJF\ncOBa42azOB9dzJ/oTpKaQyS/XHGfEv8fP7Z2azCHGF5jGjw/DdkAF+x+Wl87\nXWzIQSpmG7wuzWOY9ylNz8b7K4QlApmx7M8LA28X5NGN1amqaKHqfRSgouAV\n814R7Tp4i5jnhL6Y03BfVYhMubF5EuHXH5D99Rjq6Ep2lxHqgrf8+4XgYh4F\nuAnL\r\n=EQIp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHdiFMloCeeBc6qPLOD7AC1hv45lte9N7R4UG3YtHLajAiAFvwyk/Wu6FkR6VzlrOPVXiES2UzOE+spCBBGncHSGYw=="}]},"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"maintainers":[{"name":"markdalgleish","email":"mark.john.dalgleish@gmail.com"},{"name":"mattsjones","email":"mattjones701@gmail.com"},{"name":"seek-oss-ci","email":"opensource@seek.com.au"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_2.0.2_1615325125631_0.13023577191000935"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"2.0.3":{"name":"treat","version":"2.0.3","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"dist/treat.cjs.js","module":"dist/treat.esm.js","browser":{"./dist/treat.cjs.js":"./dist/treat.browser.cjs.js","./dist/treat.esm.js":"./dist/treat.browser.esm.js"},"preconstruct":{"entrypoints":["index.ts","adapter.ts","webpack-plugin/index.js","webpack-plugin/loader.js"]},"sideEffects":false,"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0 || ^5.20.2"},"dependencies":{"@hapi/joi":"^17.1.1","@types/object-hash":"^1.2.0","autoprefixer":"^10.2.4","bluebird":"^3.5.4","chalk":"^4.1.0","css-loader":"^5.0.2","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^3.0.6","debug":"^4.3.1","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^2.0.0","lodash":"^4.17.11","normalize-path":"^3.0.0","object-hash":"^2.0.3","postcss":"^8.2.5","postcss-js":"^3.0.3","style-loader":"^2.0.0","virtual-resource-loader":"^1.0.0"},"devDependencies":{"@types/bent":"^7.3.2","@types/hapi__joi":"^17.1.6","@types/lodash":"^4.14.134","@types/mini-css-extract-plugin":"^1.2.2","bent":"^7.3.12","classnames":"^2.2.6","mini-css-extract-plugin":"^1.3.5","webpack":"^5.20.2"},"_id":"treat@2.0.3","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-A9T5Hv4AUt36BPekmz449zQ+IAbaXCbgvwMnaCwRPYXI/o46T81AzwqavBY9p3jFxHsVoke+S0KRWkzjSa5rOA==","shasum":"ed313c57404b44ce7cd74a4a1952aa613762447e","tarball":"https://registry.npmjs.org/treat/-/treat-2.0.3.tgz","fileCount":68,"unpackedSize":308987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgf11qCRA9TVsSAnZWagAAjfsQAJrF0GC4fjQ4YJXV1Z3K\n16F3c/o2znJ78ABNF2NDkkeXQeQYZV1jjl+ZLwR2VWQj2viqUgTu+vWKeroE\n8lHlkadlgCKEPuL/cZA4XoPuJqfqaEsa7B4+plxRtOoftte30Ie3Wi2u0ELi\nB3FQ2o71daJ0CxbmuDM1rgBoAKe6kYAhuRWu+17j344s53LwrOZEaMlyw2a2\nl2KsocaOYSQ1uYX9QfrIJOm9+tx3QEGS17/A5V7YyFOGHix7NFXt5nMKlcQ2\n4Ky1aLKSK0t/fxx6EvE8cLnapC959DbG2DnkzXvdc5JTRM/dWm585RSV9QXP\nCfAyi1XUbYu907Bgb8Rn1tvnyM/B3RvqWIZxvb2ggFGYfai6GAyZRRN/P3Lu\neoFskAVE+Ydsr/6jkP34x47Gt25waVmFDnWTSmLMd1j3XpktDTRh2sxy6G/K\nlur45piciEA+pNGHHeECLNT110qaJeRT9yxRDhvAkua6CZzuqfUQk3RZcIh/\npMcDN9gsVoaUw33xnkEUh02yPax++mvIFsIO12liMD1U6WdxDKHSKnMgctbw\no8JETqjuQJzcXbOCU9lDfAKzyw+8Iami3dxYvy6FUjaHuByCyBBJO8kOKgnI\nYx/taVzqfl9xAvFqJWJPm15A5485GbUI9HMWSl+57zIZ7cbm/0sYXbli2b4E\nY242\r\n=Pa0W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHH050e/r6Ck7ixkXbQL4ZjTSby6q6zW1iDClPs2k0KJAiA1rtLFfJGJq3gncLU+qAoOnuMqCcy28vD4tPg1VA7NhA=="}]},"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"maintainers":[{"name":"markdalgleish","email":"mark.john.dalgleish@gmail.com"},{"name":"mattsjones","email":"mattjones701@gmail.com"},{"name":"seek-oss-ci","email":"opensource@seek.com.au"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_2.0.3_1618959721959_0.4817397789291735"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"},"2.0.4":{"name":"treat","version":"2.0.4","description":"Themeable, statically extracted CSS-in-JS with near-zero runtime","main":"dist/treat.cjs.js","module":"dist/treat.esm.js","browser":{"./dist/treat.cjs.js":"./dist/treat.browser.cjs.js","./dist/treat.esm.js":"./dist/treat.browser.esm.js"},"preconstruct":{"entrypoints":["index.ts","adapter.ts","webpack-plugin/index.js","webpack-plugin/loader.js"]},"sideEffects":false,"author":{"name":"SEEK"},"license":"MIT","repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"peerDependencies":{"webpack":"^4.30.0 || ^5.20.2"},"dependencies":{"@hapi/joi":"^17.1.1","@types/object-hash":"^1.2.0","autoprefixer":"^10.2.4","bluebird":"^3.5.4","chalk":"^4.1.0","css-loader":"^5.0.2","css-selector-parser":"^1.3.0","cssnano":"^4.1.10","csstype":"^3.0.6","debug":"^4.3.1","dedent":"^0.7.0","eval":"^0.1.2","javascript-stringify":"^2.0.0","loader-utils":"^2.0.0","lodash":"^4.17.11","normalize-path":"^3.0.0","object-hash":"^2.0.3","postcss":"^8.2.5","postcss-js":"^3.0.3","style-loader":"^2.0.0","virtual-resource-loader":"^1.0.0"},"devDependencies":{"@types/bent":"^7.3.2","@types/hapi__joi":"^17.1.6","@types/lodash":"^4.14.134","@types/mini-css-extract-plugin":"^1.2.2","bent":"^7.3.12","classnames":"^2.2.6","mini-css-extract-plugin":"^1.3.5","webpack":"^5.20.2"},"_id":"treat@2.0.4","_nodeVersion":"14.16.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-YDeTflrFi+CksIiPMlSrQT0A3nzAu82r2IkTEO1aczluFtVIu0+yJDhPNqSEDDLZ8e61UUQSusfez4phLF68uQ==","shasum":"7ba35cdf639ac2d2239061f6ca09621344f9c58d","tarball":"https://registry.npmjs.org/treat/-/treat-2.0.4.tgz","fileCount":68,"unpackedSize":309255,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiJMqCRA9TVsSAnZWagAAlpgP/RZORdjIc6T7Gw31KI3b\nVaPrQ7mYfcgd5jwdEk63V+RG2BCGOiymeIiBg9Dx2c6D6/HzU+j0Sfsvopka\nBmkc1vZ4c9Yv90u6FUSNgkjnkOFFDPaa8fOCaqgIkMhJCNa6lzzFWBZXVgzk\n7mBlCVINB/UFMI4Sl5CzBdO7PfG1/MSmhD3PvQxwnBm8Nb/cRgX+7lS2JlzE\nJVJxuajAXNfZimL+kVJUePSmu2wnAYD4djbWns4AbJ4OF6V0ZOqtv+AurVQY\nq+Jk0ykA7CZBtbivuWuDRbDGVfxgY0+SvAyyDZAfqa8HWFyGmY5BqAylkK8a\no63T8kMd8dQ924mvO/7mV2jz+UK6LtaBoqmGNBKHkoxPL2QqjElCHVbQnCTh\nKpCNJpbBnMZ1YP3e4PATFhr9vslQsi+H8uK4cChbdDmZmxjZlkEi68zpUcp9\nWVe1AjmL7qHP91aynIDQIrU0om9Y9uAppEoxhdL4h6Xh87nBvlQ6jkbH0vfC\naiPTCd6UIcJnTMx+JsnQ74VOl7EUJdoiLKXH8SZ/qW5BdlULcnOT00yyPXzD\nD2A7fXVYA75WaOEq2orbiahPPgvW1wddLDpZ3q6lykAp1C61yKrZZVY2uq/f\nrA/aDHFELu41Iem3AuhnjR5oXRNc9jnp7cfsRAKC80dbRVKyUHcb35Vk9JKa\n4698\r\n=pZ85\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmhELwz/GyfnAuNl7Ga7XAoPnobPS6vFk4RVRLG2WmjwIgGwOUoje/WkLhZ6CmwCz7UcZ3iexTy7nRuDiSP6oiBE8="}]},"_npmUser":{"name":"seek-oss-ci","email":"opensource@seek.com.au"},"directories":{},"maintainers":[{"name":"markdalgleish","email":"mark.john.dalgleish@gmail.com"},{"name":"mattsjones","email":"mattjones701@gmail.com"},{"name":"seek-oss-ci","email":"opensource@seek.com.au"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/treat_2.0.4_1619563305785_0.6189581061371237"},"_hasShrinkwrap":false,"deprecated":"Treat is no longer maintained, please migrate to @vanilla-extract/css"}},"readme":"# 🍬 treat\n\n## [Docs](https://seek-oss.github.io/treat/)\n\nSee the documentation at seek-oss.github.io/treat for more information about using treat.\n\n## License\n\nMIT.\n","maintainers":[{"name":"markdalgleish","email":"mark.john.dalgleish@gmail.com"},{"name":"mattsjones","email":"mattjones701@gmail.com"},{"name":"seek-oss-ci","email":"opensource@seek.com.au"}],"time":{"modified":"2022-11-17T23:13:46.042Z","created":"2012-10-13T14:56:51.307Z","0.1.0":"2012-10-13T14:56:53.929Z","0.1.1":"2017-04-03T13:42:58.758Z","1.0.0-alpha.1":"2019-03-13T23:40:10.406Z","1.0.0-alpha.2":"2019-03-14T03:57:20.746Z","1.0.0-alpha.3":"2019-03-14T23:40:04.134Z","1.0.0-alpha.4":"2019-03-18T03:44:39.733Z","1.0.0-alpha.5":"2019-03-19T04:12:13.340Z","1.0.0-alpha.6":"2019-03-19T04:22:12.307Z","1.0.0-alpha.7":"2019-03-19T04:24:48.906Z","1.0.0-alpha.8":"2019-03-19T05:14:56.021Z","1.0.0-alpha.9":"2019-03-21T02:18:00.791Z","1.0.0-alpha.10":"2019-03-21T03:07:05.717Z","1.0.0-alpha.11":"2019-03-25T23:21:06.666Z","1.0.0-webpack-fix.1":"2019-03-31T22:58:20.223Z","1.0.0-webpack-fix.2":"2019-04-01T04:16:16.301Z","1.0.0-webpack-fix.3":"2019-04-01T05:19:12.429Z","1.0.0-webpack-fix.4":"2019-04-02T23:40:13.898Z","1.0.0-webpack-fix.5":"2019-04-09T02:42:18.670Z","1.0.0-webpack-fix.6":"2019-04-12T02:23:08.681Z","1.0.0-alpha.12":"2019-04-13T04:16:54.258Z","1.0.0-alpha.13":"2019-04-18T05:56:42.947Z","1.0.0-alpha.14":"2019-04-26T02:46:42.629Z","1.0.0-alpha.15":"2019-04-26T03:09:39.869Z","1.0.0-alpha.16":"2019-05-06T05:13:14.659Z","1.0.0-alpha.17":"2019-05-08T04:18:21.908Z","1.0.0-alpha.18":"2019-05-09T22:52:51.810Z","1.0.0-beta.1":"2019-05-14T00:49:18.219Z","1.0.0-beta.2":"2019-05-14T04:43:12.708Z","1.0.0-beta.3":"2019-05-16T05:07:06.772Z","1.0.0-beta.4":"2019-05-16T05:38:21.984Z","1.0.0-beta.5":"2019-05-16T05:51:11.638Z","1.0.0-beta.6":"2019-05-16T23:51:45.148Z","1.0.0-beta.7":"2019-05-20T21:26:20.255Z","1.0.0-beta.8":"2019-05-20T21:48:41.636Z","1.0.0-beta.9":"2019-05-21T04:05:15.192Z","1.0.0-beta.11":"2019-05-21T22:29:07.932Z","1.0.0-beta.12":"2019-05-22T00:19:15.290Z","1.0.0-beta.13":"2019-05-22T20:35:56.429Z","1.0.0-beta.14":"2019-05-22T22:28:17.886Z","1.0.0-beta.15":"2019-05-23T00:54:56.311Z","1.0.0-beta.16":"2019-05-23T02:08:29.347Z","1.0.0-beta.17":"2019-05-23T05:54:32.529Z","1.0.0-beta.18":"2019-05-27T06:16:19.937Z","1.0.0-beta.19":"2019-05-27T07:24:22.830Z","1.0.0-beta.20":"2019-05-28T04:58:24.025Z","1.0.0-beta.21":"2019-05-28T07:42:13.434Z","1.0.0-beta.22":"2019-05-28T23:02:50.825Z","1.0.0-beta.24":"2019-05-29T22:31:03.383Z","1.0.0-beta.25":"2019-05-30T00:12:35.622Z","1.0.0-beta.26":"2019-05-30T22:35:21.791Z","1.0.0-beta.27":"2019-06-04T11:34:57.160Z","1.0.0-beta.28":"2019-06-07T13:13:30.210Z","1.0.0-beta.31":"2019-06-18T01:46:37.837Z","1.0.0-beta.33":"2019-06-19T23:22:36.364Z","1.0.0-beta.35":"2019-07-11T07:19:59.096Z","1.0.0-beta.36":"2019-07-17T05:08:50.947Z","1.0.0-beta.37":"2019-07-24T06:43:49.504Z","1.0.0":"2019-07-24T11:11:48.541Z","1.0.2":"2019-08-01T01:21:10.586Z","1.0.3":"2019-08-01T04:25:01.064Z","1.1.1":"2019-09-19T04:08:17.316Z","1.1.2":"2019-09-20T00:15:39.413Z","1.1.3":"2019-09-20T03:54:17.841Z","1.1.4":"2019-10-08T23:21:28.837Z","1.1.5":"2019-10-15T05:21:35.120Z","1.1.6":"2019-10-20T23:04:13.096Z","1.1.7":"2019-12-02T22:39:32.121Z","1.2.1":"2020-01-12T22:07:35.283Z","1.2.2":"2020-01-15T04:27:06.697Z","1.2.4":"2020-01-31T00:58:19.404Z","1.4.1":"2020-04-26T22:47:41.717Z","1.5.0-alpha.2":"2020-06-03T05:23:07.262Z","1.4.3":"2020-07-13T01:05:02.451Z","1.5.0":"2020-07-23T04:45:00.201Z","1.5.1":"2020-07-27T04:32:19.971Z","1.6.0-alpha.0":"2020-07-31T00:39:17.001Z","1.6.0":"2020-09-16T22:42:28.385Z","1.6.1":"2020-10-19T21:43:19.840Z","2.0.0":"2021-02-12T04:12:29.029Z","2.0.1":"2021-02-17T23:10:59.834Z","2.0.2":"2021-03-09T21:25:25.880Z","2.0.3":"2021-04-20T23:02:02.076Z","2.0.4":"2021-04-27T22:41:45.934Z"},"author":{"name":"SEEK"},"repository":{"type":"git","url":"https://github.com/seek-oss/treat/tree/master/packages/treat"},"readmeFilename":"README.md","license":"MIT"}