{"_id":"@amokrushin/astroturf","_rev":"3-968ef4370b456306c93fdf1135fb7134","name":"@amokrushin/astroturf","dist-tags":{"latest":"0.9.15"},"versions":{"0.7.3":{"name":"@amokrushin/astroturf","version":"0.7.3","description":"Extract and process inline CSS literals in JavaScript files","main":"lib/index.js","scripts":{"lint":"eslint .","precommit":"lint-staged","test":"jest","tdd":"jest --watch","prepublishOnly":"npm run build","build":"rimraf lib/* && babel src --out-dir lib --delete-dir-on-start","start":"npm run -C ./example start"},"lint-staged":{"*.js":["eslint --fix","git add"],"README.md":["doctoc","git add"]},"prettier":{"printWidth":79,"singleQuote":true,"trailingComma":"all"},"eslintIgnore":["test/*/**"],"repository":{"type":"git","url":"git+https://github.com/4Catalyzer/astroturf.git"},"author":{"name":"4Catalyzer"},"license":"MIT","bugs":{"url":"https://github.com/4Catalyzer/css-literal-loader/issues"},"homepage":"https://github.com/4Catalyzer/css-literal-loader#readme","peerDependencies":{"@babel/core":"^7.0.0-beta.42","webpack":">=2"},"jest":{"setupTestFrameworkScriptFile":"./test/setup.js","roots":["/test"]},"devDependencies":{"@4c/babel-preset-4catalyzer":"^3.1.1","@4c/rollout":"^1.2.0","@babel/cli":"^7.1.2","@babel/node":"^7.0.0","babel-core":"^7.0.0-0","babel-eslint":"^10.0.1","babel-jest":"^23.6.0","babel-loader":"^8.0.4","css-loader":"^1.0.0","doctoc":"^1.3.1","enzyme":"^3.6.0","enzyme-adapter-react-16":"^1.5.0","eslint":"^5.6.1","eslint-config-4catalyzer-react":"^0.4.4","eslint-config-prettier":"^3.1.0","eslint-import-resolver-webpack":"^0.10.1","eslint-plugin-babel":"^5.2.1","eslint-plugin-import":"^2.14.0","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-prettier":"^3.0.0","eslint-plugin-react":"^7.11.1","html-webpack-plugin":"^3.2.0","husky":"^1.1.0","identity-obj-proxy":"^3.0.0","jest":"^23.6.0","lint-staged":"^7.3.0","mini-css-extract-plugin":"^0.4.3","prettier":"^1.14.3","react":"^16.5.2","react-dom":"^16.5.2","recompose":"^0.30.0","rimraf":"^2.6.2","style-loader":"^0.23.0","webpack":"^4.20.2","webpack-cli":"^3.1.2","webpack-dev-server":"^3.1.9"},"dependencies":{"@babel/core":"^7.1.2","@babel/generator":"^7.1.2","@babel/template":"^7.1.2","@babel/types":"^7.1.2","classnames":"^2.2.6","common-tags":"^1.8.0","fs-extra":"^7.0.0","loader-utils":"^1.1.0","lodash":"^4.17.11","memory-fs":"^0.4.1","postcss-loader":"^3.0.0","postcss-nested":"^4.1.0"},"release":{"publishDir":"lib"},"publishConfig":{"access":"public"},"gitHead":"30c45585e03c0d023bc8be829ec2cb4bcdbd0fdc","_id":"@amokrushin/astroturf@0.7.3","_npmVersion":"6.4.1","_nodeVersion":"10.4.1","_npmUser":{"name":"amokrushin","email":"anton@mokr.org"},"dist":{"integrity":"sha512-4QxyKtSmP7cXjUhMpFtGKFqSo/SGX0TqPeygkK0OPLxfBM7+mk2h/6ptFGWu4og0HwN5ZY/2PssUosnFNJW3pg==","shasum":"839ae77652797d232efaebfee2ef23bddfd38a55","tarball":"https://registry.npmjs.org/@amokrushin/astroturf/-/astroturf-0.7.3.tgz","fileCount":15,"unpackedSize":41731,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbzmqDCRA9TVsSAnZWagAAJBYP/1RcgPvnVmHwmgYV9vu5\nF0/fqz4C++yhrhNR46ylcGd990bHwPvEj1cNgr2zX8PlrvUcPHLPTftjZs1N\nUnMJGibvIFzBCi7PGxX3ReC2Q1HgYNf0Ljc7q9MittjyVOmAxFc4enzIME75\ny+n+fun0KCQhtHAjROj5C8u/Vz1WxJP76Aox83cHu8WQpsgTGY4qVUK7t+/m\nMDxfzh1yznMkfKYLtbgbT2L2m0g8Dis8Acfk9FbEZbJ9zagKmQ6rQBPaflqZ\nc5rpYU1/hnDC1TDPGruurGuz7W8nO4UAPolrCODlC6B59u41mHRPVvtoq/NZ\nlvOrpmp5cTYZ7Bfn3n6ES4dKTPhtcfBs5PKlqft07007C6T7M42jBOvDD5TD\ngfotWsNhKVXXHq2H0vUo08tpvcgAXAEONPiBBlFC6BcgUbzDKBG0fpUkHoX4\nhcnPN873BCg9wXpo/N+C7Y9XEP+YGPBdA5wPu8j30Trtq5lv51mxMAhzNovQ\n2cxpm3ue0meq3fXPY+aR8kSLRx0yorw6SjcuGxUx+JToM7bQAogQzNx4Mycc\neFyEsQNuioV+W9WPjlYT6lqdPm53waUXyrcQcjFOYITmoJGeoZi1I0QEyMYX\n1jVT72d/YLjLgPT1HJ04XjzkfsPcbaoAt0zRLmG49n2KlQT1L5r7FugLoFWB\nGozf\r\n=LxZc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkF/sViEhZTn1VWw7ZDnj0tYtH+tpXD0PD0GG1QQKyZgIhAM4wKn21buLdua4NoyQkjix++ZDSOEXW8Eq3nDsy21RO"}]},"maintainers":[{"name":"amokrushin","email":"anton@mokr.org"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/astroturf_0.7.3_1540254338892_0.39235518319948826"},"_hasShrinkwrap":false},"0.9.14":{"name":"@amokrushin/astroturf","version":"0.9.14","description":"Extract and process inline CSS literals in JavaScript files","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"lint":"eslint .","test":"yarn test:ts && jest","test:ts":"dtslint types","tdd":"jest --watch","prepublishOnly":"yarn build","build":"4c build && cpy types/*.d.ts lib","release":"4c release","start":"yarn --cwd ./example start"},"repository":{"type":"git","url":"git+https://github.com/4Catalyzer/astroturf.git"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"!(__file_snapshots__/)*.js":["eslint --fix","yarn 4c format","git add"],"README.md":["doctoc","git add"]},"importSort":{".js, .ts, .tsx":{"style":"@4c/import-sort"}},"prettier":{"printWidth":79,"singleQuote":true,"trailingComma":"all"},"jest":{"roots":["/test"],"setupFilesAfterEnv":["./test/setup.js"],"watchPathIgnorePatterns":["build","__file_snapshots__"]},"release":{"publishDir":"lib"},"author":{"name":"4Catalyzer"},"license":"MIT","bugs":{"url":"https://github.com/4Catalyzer/astroturf/issues"},"homepage":"https://github.com/4Catalyzer/astroturf#readme","dependencies":{"@babel/code-frame":"^7.5.5","@babel/core":"^7.5.5","@babel/generator":"^7.3.4","@babel/helper-module-imports":"^7.0.0","@babel/template":"^7.2.2","@babel/types":"^7.3.4","chalk":"^2.4.2","common-tags":"^1.8.0","css-loader":"^3.0.0","errno":"^0.1.7","fast-levenshtein":"^2.0.6","fs-extra":"^8.0.0","loader-utils":"^1.2.3","lodash":"^4.17.15","memory-fs":"^0.4.1","postcss-loader":"^3.0.0","postcss-nested":"^4.1.1","resolve":"^1.11.1"},"peerDependencies":{"webpack":">=2"},"devDependencies":{"@4c/babel-preset-4catalyzer":"^4.1.1","@4c/cli":"^0.8.1","@babel/cli":"^7.2.3","@babel/node":"^7.2.2","@babel/plugin-transform-react-jsx":"^7.3.0","@babel/preset-react":"^7.0.0","@types/react":"^16.8.23","@types/react-dom":"^16.8.4","babel-core":"^7.0.0-0","babel-eslint":"^10.0.1","babel-jest":"^24.1.0","babel-loader":"^8.0.6","cpy-cli":"^2.0.0","doctoc":"^1.4.0","dtslint":"^0.9.0","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.10.0","eslint":"^5.14.1","eslint-config-4catalyzer-react":"^0.9.0","eslint-config-prettier":"^6.0.0","eslint-import-resolver-webpack":"^0.11.0","eslint-plugin-babel":"^5.3.0","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-prettier":"^3.0.1","eslint-plugin-react":"^7.12.4","html-webpack-plugin":"^3.2.0","husky":"^3.0.0","jest":"^24.1.0","jest-file-snapshot":"^0.3.6","lint-staged":"^9.0.0","mini-css-extract-plugin":"^0.8.0","prettier":"^1.16.4","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^3.0.0","strip-ansi":"^5.2.0","webpack":"^4.36.1","webpack-cli":"^3.2.3","webpack-dev-server":"^3.2.1"},"publishConfig":{"access":"public"},"licenseText":"MIT License\n\nCopyright (c) 2016 4Catalyzer\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@amokrushin/astroturf@0.9.14","dist":{"shasum":"c8c6eccc65dbc17bf038a91b34b0538e5bf530b5","integrity":"sha512-V3xt9H1FmjpKabtvMDzyP4hmKtdUwwUs18rIwfcs+BsG6h7nVbHbmei1gv9p3tHNd/TZvdK09KiWMlqluuBVjw==","tarball":"https://registry.npmjs.org/@amokrushin/astroturf/-/astroturf-0.9.14.tgz","fileCount":160,"unpackedSize":686203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdYfhKCRA9TVsSAnZWagAAtMgP/1hkZFBeEAVFqxmUAq1z\nKiu51ZagEXWSgI1cJq/8DjqsTvhxeRJBK2lbGyrK/GiNadOq0NvOyGdrgu+R\nj2GIKndeu4HCBZSIuWze1MT4EQW2Px8o85Durj2x7qpuxhiNHhl9ZdOyg0wh\n5yKUYZCzf/q+JxnorPmR/kqA7mQ8vS1pqs0UQQ8nTnXIEzMWJDsLWrq79I1D\n9U5TuAUfe/RqFEdgB07ckdJ1wPJ6S+IL1orphwNXZ0/76D6SCzFnFj1lYK7x\ne8lP95ixnNVVIUtHnXWU1HiA0L2jC+ZpQYhS6ctmN7vLLHa+aSfG1HbiY5ZU\nAPjq+JL+y2xHrWtk+uUajdokhshDFqoE7XRXOb0zDPFQ4/uBPBgUxWAgjJ9R\n+jOE0sLfiPYx1ujOlD08LXrgowkZ8Onbh8uf58emT9ZhevP/yoED/vuf60Fw\nLsu/wKpOf7prigMkHLm4tFHs+feTCiNHe9TPmS+BpHIeXacJ7aou0LYRExYV\ncdEMVnji94gtKDZGrExzR/DIeHlDlmKYTGl7TMR+PdMxBVvkIV/7oqBBil2Z\n24wAroUE6ACOa7p/M3YpavAEoyyu5ps97kqv3LGT2Hxo/Yb/TUxxgB89nvts\nu/R1cCXvQXPs0ea1krEPn80NhFLyI6+Q7458MphIu45rSCFitAUqXgKn92fE\nswS0\r\n=NSmt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDawKMtZjnvqgM7fIOTQc+8LRyWST0cHupwpx16hmzo3wIhALHAcItZEToQglhcpbbEVvZtosRMNU1axdTVsd7USkfm"}]},"maintainers":[{"name":"amokrushin","email":"anton@mokr.org"}],"_npmUser":{"name":"amokrushin","email":"anton@mokr.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/astroturf_0.9.14_1566701641713_0.012447859555013707"},"_hasShrinkwrap":false},"0.9.15":{"name":"@amokrushin/astroturf","version":"0.9.15","description":"Extract and process inline CSS literals in JavaScript files","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"lint":"eslint .","test":"yarn test:ts && jest","test:ts":"dtslint types","tdd":"jest --watch","prepublishOnly":"yarn build","build":"4c build && cpy types/*.d.ts lib","release":"4c release","start":"yarn --cwd ./example start"},"repository":{"type":"git","url":"git+https://github.com/4Catalyzer/astroturf.git"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"!(__file_snapshots__/)*.js":["eslint --fix","yarn 4c format","git add"],"README.md":["doctoc","git add"]},"importSort":{".js, .ts, .tsx":{"style":"@4c/import-sort"}},"prettier":{"printWidth":79,"singleQuote":true,"trailingComma":"all"},"jest":{"roots":["/test"],"setupFilesAfterEnv":["./test/setup.js"],"watchPathIgnorePatterns":["build","__file_snapshots__"]},"release":{"publishDir":"lib"},"author":{"name":"4Catalyzer"},"license":"MIT","bugs":{"url":"https://github.com/4Catalyzer/astroturf/issues"},"homepage":"https://github.com/4Catalyzer/astroturf#readme","dependencies":{"@babel/code-frame":"^7.5.5","@babel/core":"^7.5.5","@babel/generator":"^7.3.4","@babel/helper-module-imports":"^7.0.0","@babel/template":"^7.2.2","@babel/types":"^7.3.4","chalk":"^2.4.2","common-tags":"^1.8.0","css-loader":"^3.0.0","errno":"^0.1.7","fast-levenshtein":"^2.0.6","fs-extra":"^8.0.0","loader-utils":"^1.2.3","lodash":"^4.17.15","memory-fs":"^0.4.1","postcss-loader":"^3.0.0","postcss-nested":"^4.1.1","resolve":"^1.11.1"},"peerDependencies":{"webpack":">=2"},"devDependencies":{"@4c/babel-preset-4catalyzer":"^4.1.1","@4c/cli":"^0.8.1","@babel/cli":"^7.2.3","@babel/node":"^7.2.2","@babel/plugin-transform-react-jsx":"^7.3.0","@babel/preset-react":"^7.0.0","@types/react":"^16.8.23","@types/react-dom":"^16.8.4","babel-core":"^7.0.0-0","babel-eslint":"^10.0.1","babel-jest":"^24.1.0","babel-loader":"^8.0.6","cpy-cli":"^2.0.0","doctoc":"^1.4.0","dtslint":"^0.9.0","enzyme":"^3.9.0","enzyme-adapter-react-16":"^1.10.0","eslint":"^5.14.1","eslint-config-4catalyzer-react":"^0.9.0","eslint-config-prettier":"^6.0.0","eslint-import-resolver-webpack":"^0.11.0","eslint-plugin-babel":"^5.3.0","eslint-plugin-import":"^2.16.0","eslint-plugin-jsx-a11y":"^6.2.1","eslint-plugin-prettier":"^3.0.1","eslint-plugin-react":"^7.12.4","html-webpack-plugin":"^3.2.0","husky":"^3.0.0","jest":"^24.1.0","jest-file-snapshot":"^0.3.6","lint-staged":"^9.0.0","mini-css-extract-plugin":"^0.8.0","prettier":"^1.16.4","react":"^16.8.3","react-dom":"^16.8.3","rimraf":"^3.0.0","strip-ansi":"^5.2.0","webpack":"^4.36.1","webpack-cli":"^3.2.3","webpack-dev-server":"^3.2.1"},"publishConfig":{"access":"public"},"gitHead":"1cf5ef8724c540554b87893b372bd20420d9116f","_id":"@amokrushin/astroturf@0.9.15","_nodeVersion":"10.4.1","_npmVersion":"6.9.0","dist":{"integrity":"sha512-HH/6jPAJrIO9ttMhNLuN0rBaNTqLQPa+OY5m4uwku5V5pvBCxnGpgkb4+L8qGXPzab3hWuYf69/n6UHgeyxLSg==","shasum":"47b5fe6c95c73c10cd65f1faf4ec32ede211bcf9","tarball":"https://registry.npmjs.org/@amokrushin/astroturf/-/astroturf-0.9.15.tgz","fileCount":165,"unpackedSize":423780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdYfuxCRA9TVsSAnZWagAAWlAQAJswVs+oEMGidq6kkzwb\nDlhF7YqlN5LFfo3oR6axj+ZX6eFXXSVSi+V+RiU9TpDI7pvsp7PX00FewaxI\nN7BY0iIIXBqhI1AdYjlNAmN2ybTqEV+Qugq6ShzUVDM9DuSMKxSlqAt4fq2T\n07lI59XOx/67qo9n2X0ib7Cjk8qnwTlh0eFANkBqyp3qlErAE6gGHU90aGUr\nWzDvUGk65ZiCrefa2ULTPtTvPaS5VzyTc8vaNmf1dGagMJ6VKO9y6IwHXcUv\nSUP7AqHO7Oca9pcWtE/OQ0v1tauLZvh0hJHp8FpvpK4wuf2ELdOVAvhGYVgj\nBdWq5xvBRvgkKk7Ob940C2Fh2KLmeT6lPR+lCrL0ZHq373kPHcYUGvg4DqrG\ncEWTVM5jUt6NF80GK5xtix6INo7oMBLYeezvKZXp2PaTdm3PNJFCXDDyXOUT\n0rQK2W5AZzDJv9v1CTQuzVJ9VCEVJG4ZnTY4e/AQFsibZ731ZaBWvvjTS/bq\nIpCAf80htHb4xPWxN6gJsDOIP7nwnnnBiJ/7EREMhEP/NSGn/4REIpPFbn7u\nXj6nsU+iQvZEjkcEz71d2brMqVrgjkJtlrAoxgDuIMKMiKAgJBC85Yr8Y9Gh\ncsO6uLQ5hmzLJKfB6SB4zOYlcRfizn7EuQBhWCdbP16+BjLWYSxzZ2h48n9V\nEGIF\r\n=HZH3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtVLLlmMo0rHXhGqkuIYKMKLPWk9SXoCIe9f5fXRgHbwIgBHFVQI3NKq28+n2ViY5yidP1z5okI+/05w/ydY8XJPg="}]},"maintainers":[{"name":"amokrushin","email":"anton@mokr.org"}],"_npmUser":{"name":"amokrushin","email":"anton@mokr.org"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/astroturf_0.9.15_1566702513113_0.5229455459069554"},"_hasShrinkwrap":false}},"time":{"created":"2018-10-23T00:25:38.732Z","0.7.3":"2018-10-23T00:25:39.032Z","modified":"2022-04-04T13:50:33.285Z","0.9.14":"2019-08-25T02:54:01.959Z","0.9.15":"2019-08-25T03:08:33.261Z"},"maintainers":[{"name":"amokrushin","email":"anton@mokr.org"}],"description":"Extract and process inline CSS literals in JavaScript files","homepage":"https://github.com/4Catalyzer/astroturf#readme","repository":{"type":"git","url":"git+https://github.com/4Catalyzer/astroturf.git"},"author":{"name":"4Catalyzer"},"bugs":{"url":"https://github.com/4Catalyzer/astroturf/issues"},"license":"MIT","readme":"# astroturf\n\n**astroturf** lets you write CSS in your JavaScript files without adding any runtime layer, and with your existing CSS processing pipeline.\n\n- **Zero runtime CSS-in-JS.** Get many of the same benefits as CSS-in-JS, but without the loss of flexibility in requiring framework-specific CSS processing, and while keeping your CSS fully static with no runtime style parsing.\n- Use your existing tools – **Sass, PostCSS, Less** – but still write your style definitions in your JavaScript files\n- **Whole component in the single file**. Write CSS in a template literal, then use it as if it were in a separate file\n\n\n\n\n\n- [Usage](#usage)\n- [Extensions](#extensions)\n- [Component API](#component-api)\n- [`css` prop](#css-prop)\n - [Component API Goals and Non-Goals](#component-api-goals-and-non-goals)\n - [Composition, variables, etc?](#composition-variables-etc)\n - [Referring to other Components](#referring-to-other-components)\n - [Sharing values between styles and JavaScript](#sharing-values-between-styles-and-javascript)\n - [Keyframes and global](#keyframes-and-global)\n - [Attaching Additional Props](#attaching-additional-props)\n - [`as` prop](#as-prop)\n- [Setup](#setup)\n - [Options](#options)\n - [Use with Parcel](#use-with-parcel)\n - [Use with Preact](#use-with-preact)\n - [Use with Next.js](#use-with-nextjs)\n - [Use without webpack](#use-without-webpack)\n\n\n\n## Usage\n\n```js\nimport React from 'react';\nimport { css } from 'astroturf';\n\nconst styles = css`\n .button {\n color: black;\n border: 1px solid black;\n background-color: white;\n }\n`;\n\nexport default function Button({ children }) {\n return ;\n}\n```\n\nWhen processed, the `css` block will be extracted into a `.css` file, taking advantage of any and all of the other loaders configured to handle css.\n\nIt even handles statically analyzable interpolations!\n\n```js\nimport { css } from 'astroturf';\n\nconst margin = 10;\nconst height = 50;\nconst bottom = height + margin;\n\nconst styles = css`\n .box {\n height: ${height}px;\n margin-bottom: ${margin}px;\n }\n\n .footer {\n position: absolute;\n top: ${bottom}px;\n }\n`;\n```\n\n## Extensions\n\n- [gatsby-plugin-astroturf](https://github.com/silvenon/gatsby-plugin-astroturf)\n\n## Component API\n\nFor those that want something a bit more like styled-components or Emotion, there is a component API!\n\n```js\nimport styled, { css } from 'astroturf';\n\nconst Button = styled('button')`\n color: black;\n border: 1px solid black;\n background-color: white;\n\n &.primary {\n color: blue;\n border: 1px solid blue;\n }\n\n &.color-green {\n color: green;\n }\n`;\n```\n\nYou can render this with:\n\n```js\nrender(\n ,\n mountNode,\n);\n```\n\nThe above transpiles to something like:\n\n```js\nconst styles = css`\n .button {\n color: black;\n border: 1px solid black;\n background-color: white;\n\n &.primary {\n color: blue;\n border: 1px solid blue;\n }\n\n &.color-green {\n color: green;\n }\n }\n`;\n\nfunction Button({ primary, color, className, ...props }) {\n return (\n \n );\n}\n```\n\n## `css` prop\n\nIn addition to the `styled` helper, styles can be defined directly on components via the `css` prop.\nYou first need to enable this feature via the `enableCssProp` option in your loader config\n\n```jsx\nfunction Button({ variant, children }) {\n return (\n \n children\n \n );\n}\n```\n\nStyles are still extracted to a separate file, any props matching other defined classes are passed to the `classNames()` library. At runtime `styled()` returns a React component with the static CSS classes applied. You can check out the [\"runtime\"](https://github.com/4Catalyzer/astroturf/blob/master/src/runtime/styled.js) it just creates a component.\n\nThere are a whole bucket of caveats of course, to keep the above statically extractable, and limit runtime code.\n\n- We assume you are using css-modules in your css pipeline to return classes from the style files, we don't do any of that ourselves.\n- Prop value handling requires the nesting transform\n- All \"top level\" styles have any @import statements hoisted up (via a regex)\n\n### Component API Goals and Non-Goals\n\nThe goal of this API is not to mimic or reimplement the features of other css-in-js libraries, but to provide\na more ergonomic way to write normal css/less/sass next to your javascript.\n\nWhat does that mean? css-in-js libraries are a _replacement_ for css preprocessors, in that they provide ways of doing variables, composition, mixins, imports etc. Usually they accomplish this by leaning\non JS language features where appropriate, and adding their own domain-specific language bits when needed.\n\nastroturf **doesn't try to do any of that** because it's not trying to replace preprocessors, but rather, make component-centric javascript work better with **existing** styling tooling. This means at a minimum it needs to scope styles to the component (handled by css-modules) and map those styles to your component's API (props), which is what the above API strives for.\n\nThis approach **gains** us:\n\n- No additional work to extract styles for further optimization (autoprefixer, minifying, moving them to a CDN, etc)\n- The smallest runtime, it's essentially zero\n- Blazing Fast™ because there is zero runtime evaluation of styles\n- Leverage the well-trod and huge css preprocesser ecosystems\n\nIt also means we **sacrifice**:\n\n- A fine-grained style mapping to props. Props map to classes, its all very BEM-y but automated\n- Dynamism in sharing values between js and css\n- A unified JS-only headspace, you still need to think in terms of JS and CSS\n\n### Composition, variables, etc?\n\nHow you accomplish that is mostly up to your preprocessor. Leverage Sass variables, or Less mixins, or postcss nesting polyfills, or whatever. The css you're writing is treated exactly like a normal style file so all the tooling you're used to works as expected. For composition, specifically around classes, you can also use css-modules `composes` to compose styles and interpolation;\n\n```js\n// Button.js\n\nconst helpers = css`\n .heavy {\n font-weight: 900;\n }\n`;\n\nconst Title = styled('h3')`\n composes: ${helpers.heavy};\n\n font-size: 12%;\n`;\n```\n\nYou don't have to define everything in a `.js` file. Where it makes sense just use normal css (or any other file type).\n\n```scss\n// mixins.scss\n@mixin heavy() {\n font-weight: 900;\n}\n```\n\nand then:\n\n```js\n// Button.js\nconst Title = styled('h3')`\n @import './mixins.scss';\n\n @include heavy();\n font-size: 12%;\n`;\n```\n\n### Referring to other Components\n\nOne limitation to fully encapsulated styles is that it's hard to contextually style components\nwithout them referencing each other. In astroturf you can use a component in a\nselector as if it were referencing a class selector.\n\n> Note: Referencing stylesheets or styled components from other files has a few caveats:\n> [cross-file-dependencies](/docs/cross-file-dependencies.md)\n\n```js\nconst Link = styled.a`\n display: flex;\n align-items: center;\n padding: 5px 10px;\n background: papayawhip;\n color: palevioletred;\n`;\n\nconst Icon = styled.svg`\n flex: none;\n transition: fill 0.25s;\n width: 48px;\n height: 48px;\n\n ${Link}:hover & {\n fill: rebeccapurple;\n }\n`;\n```\n\n### Sharing values between styles and JavaScript\n\nWe've found that in practice, you rarely have to share values between the two, but there are times when it's\nvery convenient. Astroturf ofters two ways to do this, the first is string interpolations.\n\n```js\nconst DURATION = 500;\n\nconst ColorTransition = styled('nav')`\n color: red;\n transition: color ${DURATION}ms;\n\n &.blue {\n color: blue;\n }\n`;\n\nclass App extends React.Component {\n state = { blue: false }\n toggle = () => {\n this.setState(s => ({ blue: !s.blue }), () => {\n setTimeout(() => console.log('done!'), DURATION)\n })\n }\n render() {\n const { blue } = this.state\n
\n \n \n
;\n }\n}\n```\n\nThis works great for local variables, since the compiler can determine their\nvalue at compile time and share them. For cases when you want to share things a bit more globally, such as in a theme, we recommend leaning on your css preprocesser again.\n\ncss-modules provides a syntax for exporting values from styles, generally this is used for class names, but you can leverage it for whatever values you want. Combined with something like Sass's variables it ends up being a powerful tool.\n\n```js\nconst breakpointValues = css`\n @import '../styles/theme';\n\n :export {\n @each $breakpoint, $px in $grid-breakpoints {\n #{$breakpoint}: $px;\n }\n }\n`\n\nclass Responsive extends React.Component {\n state = { isMobile: false }\n\n componentDidMount() {\n this.setState({\n isMobile: window.clientWidth < parseInt(breakpoints.md, 10)\n })\n }\n\n render() {\n const { isMobile } = this.state\n
\n {isMobile ? 'A small screen!' : 'A big screen!'}\n
;\n }\n}\n```\n\n### Keyframes and global\n\nEverything in `css` will be used as normal CSS Modules styles.\nSo, if you need to insert some CSS without isolation (like reset with [postcss-normalize](https://github.com/csstools/postcss-normalize)):\n\n```js\ncss`\n @import-normalize;\n\n :global(.btn) {\n background: blue;\n }\n`;\n```\n\nWith [postcss-nested](https://github.com/postcss/postcss-nested) you can\nadd keyframes to specific component (and keyframes name will not be global):\n\n```js\nconst Loader = styled('div')`\n animation-name: rotation;\n animation-duration: 1s;\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n\n @keyframes rotation {\n to {\n transform: rotate(360deg);\n }\n }\n`;\n```\n\n### Attaching Additional Props\n\nA common task with styled components is to map their props or set default values.\nastroturf cribs from Styled Components, by including an `attrs()` api.\n\n```jsx\nimport styled from 'astroturf';\n\n// Provide a default `type` props\nconst PasswordInput = styled('input').attrs({\n type: 'password',\n})`\n background-color: #ccc;\n`;\n\n// Map the incoming props to a new set of props\nconst TextOrPasswordInput = styled('input').attrs(\n ({ isPassword, ...props }) => ({\n ...props,\n type: isPassword ? 'password' : 'text',\n }),\n)`\n background-color: #ccc;\n`;\n```\n\nBecause `attrs()` is resolved during render you can use hooks in them! We even\ndo some magic in the non-function signature so that it works.\n\n```js\nconst Link = styled('a').attrs(props => ({\n href: useRouter().createHref(props.to)\n}))`\n color: blue;\n`);\n\n// astroturf will automatically compile to a function\n// when using a plain object so that the hooks\n// are only evaluated during render\nconst Link = styled(MyLink).attrs({\n router: useRouter()\n})`\n color: blue;\n`);\n```\n\n### `as` prop\n\n`astroturf` supports the `as` prop to control the underlying element type at runtime.\n\n```js\nconst Button = styled('button')`\n color: red;\n`\n\n