{"_id":"@andrewmchen/styled-components","_rev":"4-e520de1887dc03a58401925070adf212","name":"@andrewmchen/styled-components","description":"CSS for the Age. Style components your way with speed, strong typing, and flexibility.","dist-tags":{"latest":"6.1.11-v3"},"versions":{"6.1.11-v2":{"name":"@andrewmchen/styled-components","version":"6.1.11-v2","keywords":["react","css","css-in-js","styled-components","styling"],"author":{"name":"Glen Maddern"},"license":"MIT","_id":"@andrewmchen/styled-components@6.1.11-v2","maintainers":[{"name":"andrewmchen","email":"andrewmnchen@gmail.com"}],"homepage":"https://styled-components.com","bugs":{"url":"https://github.com/styled-components/styled-components/issues"},"dist":{"shasum":"d4794e7299471092abdd57def1ed3afc26ecb59b","tarball":"https://registry.npmjs.org/@andrewmchen/styled-components/-/styled-components-6.1.11-v2.tgz","fileCount":148,"integrity":"sha512-Sc718GrTpxSWWGxBPrOrzu+cgVnSG7JTQ3g/pyHQ2IciX30snRUl39ZrgnlPQhrJlxk0AWgxest7MQYP9v8pvw==","signatures":[{"sig":"MEUCIQCeA8HeV4nr7LQCBSgvUiG7+vdRTy0pgdkBunHhSnJgtAIgKdkBUCoX4L9GrUe/8eaCI082AjTtpTBYM0tcAf2gdAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1661626},"main":"dist/styled-components.cjs.js","types":"dist/index.d.ts","module":"./dist/styled-components.esm.js","browser":{"./dist/styled-components.cjs.js":"./dist/styled-components.browser.cjs.js","./dist/styled-components.esm.js":"./dist/styled-components.browser.esm.js"},"engines":{"node":">= 16"},"funding":{"url":"https://opencollective.com/styled-components","type":"opencollective"},"gitHead":"770d1fa2bc1a4bfe3eea1b14a0357671ba9407a4","scripts":{"size":"bundlewatch","test":"yarn run test:web && yarn run test:native","build":"rollup -c","pretest":"yarn run generateErrors","prebuild":"rimraf dist && yarn run generateErrors","prettier":"prettier src --write","test:web":"jest -c jest.config.main.js","postbuild":"yarn run size","test:native":"jest -c jest.config.native.js --forceExit","generateErrors":"node scripts/generateErrorMap.js","prepublishOnly":"cp ../../README.md . && yarn run build","prettier:check":"prettier src --check","test:integration":"jest -c jest.config.integration.js --runInBand --forceExit"},"_npmUser":{"name":"andrewmchen","email":"andrewmnchen@gmail.com"},"collective":{"url":"https://opencollective.com/styled-components","type":"opencollective"},"repository":{"url":"git+https://github.com/styled-components/styled-components.git","type":"git"},"_npmVersion":"9.6.7","bundlewatch":{"files":[{"path":"./dist/styled-components.min.js","maxSize":"11.5kB"}]},"description":"CSS for the Age. Style components your way with speed, strong typing, and flexibility.","directories":{},"sideEffects":false,"_nodeVersion":"18.17.0","dependencies":{"tslib":"2.6.2","stylis":"4.3.2","csstype":"3.1.3","postcss":"8.4.38","shallowequal":"1.1.0","@types/stylis":"4.2.5","@emotion/unitless":"0.8.1","css-to-react-native":"3.2.0","@emotion/is-prop-valid":"1.2.2"},"react-native":"native/dist/styled-components.native.cjs.js","_hasShrinkwrap":false,"devDependencies":{"jest":"29.7.0","react":"17.0.2","rollup":"3.29.4","prettier":"3.2.5","react-dom":"17.0.2","babel-jest":"29.7.0","prop-types":"15.8.1","typescript":"5.4.5","@babel/core":"7.24.5","@types/jest":"29.5.12","@types/node":"18.19.31","bundlewatch":"0.3.3","js-beautify":"1.15.1","ts-toolbelt":"9.6.0","@types/react":"17.0.80","react-native":"0.70.15","@types/enzyme":"3.10.18","@types/react-dom":"17.0.25","@babel/preset-env":"7.24.5","stylis-plugin-rtl":"2.1.1","@types/js-beautify":"1.14.3","rollup-plugin-json":"4.0.0","@babel/preset-react":"7.24.1","@types/react-native":"0.69.26","@types/shallowequal":"1.1.5","babel-plugin-tester":"10.1.0","react-test-renderer":"17.0.2","jest-serializer-html":"7.1.0","jest-watch-typeahead":"2.2.2","rollup-plugin-terser":"7.0.2","react-frame-component":"4.1.3","rollup-plugin-replace":"2.2.0","jest-environment-jsdom":"29.7.0","rollup-plugin-commonjs":"10.1.0","@babel/preset-typescript":"7.24.1","rollup-plugin-sourcemaps":"0.6.3","@rollup/plugin-typescript":"11.1.6","@types/react-test-renderer":"17.0.9","rollup-plugin-node-resolve":"5.2.0","@babel/helper-module-imports":"7.24.3","@types/react-frame-component":"4.1.6","@babel/plugin-external-helpers":"7.24.1","babel-plugin-styled-components":"2.1.4","babel-plugin-add-module-exports":"1.0.4","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-transform-flow-strip-types":"7.24.1","@babel/plugin-proposal-object-rest-spread":"7.20.7"},"peerDependencies":{"react":">= 16.8.0","react-dom":">= 16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/styled-components_6.1.11-v2_1717811165085_0.30990739446570426","host":"s3://npm-registry-packages"}},"6.1.11-v3":{"name":"@andrewmchen/styled-components","version":"6.1.11-v3","description":"CSS for the Age. Style components your way with speed, strong typing, and flexibility.","types":"dist/index.d.ts","main":"dist/styled-components.cjs.js","module":"./dist/styled-components.esm.js","react-native":"native/dist/styled-components.native.cjs.js","browser":{"./dist/styled-components.cjs.js":"./dist/styled-components.browser.cjs.js","./dist/styled-components.esm.js":"./dist/styled-components.browser.esm.js"},"sideEffects":false,"scripts":{"generateErrors":"node scripts/generateErrorMap.js","prebuild":"rimraf dist && yarn run generateErrors","build":"rollup -c","postbuild":"yarn run size","pretest":"yarn run generateErrors","test":"yarn run test:web && yarn run test:native","test:web":"jest -c jest.config.main.js","test:native":"jest -c jest.config.native.js --forceExit","test:integration":"jest -c jest.config.integration.js --runInBand --forceExit","size":"bundlewatch","prettier":"prettier src --write","prettier:check":"prettier src --check","prepublishOnly":"cp ../../README.md . && yarn run build"},"repository":{"type":"git","url":"git+https://github.com/styled-components/styled-components.git"},"keywords":["react","css","css-in-js","styled-components","styling"],"author":{"name":"Glen Maddern"},"license":"MIT","bugs":{"url":"https://github.com/styled-components/styled-components/issues"},"homepage":"https://styled-components.com","dependencies":{"@emotion/is-prop-valid":"1.2.2","@emotion/unitless":"0.8.1","@types/stylis":"4.2.5","css-to-react-native":"3.2.0","csstype":"3.1.3","postcss":"8.4.38","shallowequal":"1.1.0","stylis":"4.3.2","tslib":"2.6.2"},"peerDependencies":{"react":">= 16.8.0","react-dom":">= 16.8.0"},"devDependencies":{"@babel/core":"7.24.5","@babel/helper-module-imports":"7.24.3","@babel/plugin-external-helpers":"7.24.1","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-object-rest-spread":"7.20.7","@babel/plugin-transform-flow-strip-types":"7.24.1","@babel/preset-env":"7.24.5","@babel/preset-react":"7.24.1","@babel/preset-typescript":"7.24.1","@rollup/plugin-typescript":"11.1.6","@types/enzyme":"3.10.18","@types/jest":"29.5.12","@types/js-beautify":"1.14.3","@types/node":"18.19.31","@types/react":"17.0.80","@types/react-dom":"17.0.25","@types/react-frame-component":"4.1.6","@types/react-native":"0.69.26","@types/react-test-renderer":"17.0.9","@types/shallowequal":"1.1.5","babel-jest":"29.7.0","babel-plugin-add-module-exports":"1.0.4","babel-plugin-styled-components":"2.1.4","babel-plugin-tester":"10.1.0","bundlewatch":"0.3.3","jest":"29.7.0","jest-environment-jsdom":"29.7.0","jest-serializer-html":"7.1.0","jest-watch-typeahead":"2.2.2","js-beautify":"1.15.1","prettier":"3.2.5","prop-types":"15.8.1","react":"17.0.2","react-dom":"17.0.2","react-frame-component":"4.1.3","react-native":"0.70.15","react-test-renderer":"17.0.2","rollup":"3.29.4","rollup-plugin-commonjs":"10.1.0","rollup-plugin-json":"4.0.0","rollup-plugin-node-resolve":"5.2.0","rollup-plugin-replace":"2.2.0","rollup-plugin-sourcemaps":"0.6.3","rollup-plugin-terser":"7.0.2","stylis-plugin-rtl":"2.1.1","ts-toolbelt":"9.6.0","typescript":"5.4.5"},"bundlewatch":{"files":[{"path":"./dist/styled-components.min.js","maxSize":"11.5kB"}]},"collective":{"type":"opencollective","url":"https://opencollective.com/styled-components"},"funding":{"type":"opencollective","url":"https://opencollective.com/styled-components"},"engines":{"node":">= 16"},"gitHead":"770d1fa2bc1a4bfe3eea1b14a0357671ba9407a4","_id":"@andrewmchen/styled-components@6.1.11-v3","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-2+cH2+7bkH0eY9oNwECDkI2s8jNYYNe3WSswqT8ymHslZM4V+82ICmtVKRVuSopF7BDzHYBsyfW0k0n3PZVWRQ==","shasum":"756d0a503c86dfcec4fcc8f982ac9a579d1bdffd","tarball":"https://registry.npmjs.org/@andrewmchen/styled-components/-/styled-components-6.1.11-v3.tgz","fileCount":148,"unpackedSize":1664681,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDckPcaxB8cC+YrMxvdHWN9TWIvm93ANJkHzrWN192bygIhAISDNXHGfeLN5dtrvsVvsaJBy6FUmNLVqCAcVwFbiUvY"}]},"_npmUser":{"name":"andrewmchen","email":"andrewmnchen@gmail.com"},"directories":{},"maintainers":[{"name":"andrewmchen","email":"andrewmnchen@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-components_6.1.11-v3_1717811600926_0.2004506141596314"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-08T01:46:04.967Z","modified":"2024-06-08T01:53:21.371Z","6.1.11":"2024-06-08T01:32:02.715Z","6.1.11-v2":"2024-06-08T01:46:05.321Z","6.1.11-v3":"2024-06-08T01:53:21.206Z"},"maintainers":[{"name":"andrewmchen","email":"andrewmnchen@gmail.com"}],"author":{"name":"Glen Maddern"},"repository":{"type":"git","url":"git+https://github.com/styled-components/styled-components.git"},"keywords":["react","css","css-in-js","styled-components","styling"],"license":"MIT","homepage":"https://styled-components.com","bugs":{"url":"https://github.com/styled-components/styled-components/issues"},"readme":"
\n \n \"styled-components\"\n \n
\n\n
\n\n
\n Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅\n
\n
\n \"downloads:\n \n \"Discord\"\n \"gzip\n \"module\n \"Code\n
\n\n---\n\n**Upgrading from v5?** See the [migration guide](https://styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v6).\n\nUtilizing [tagged template literals](https://www.styled-components.com/docs/advanced#tagged-template-literals) (a recent addition to JavaScript) and the [power of CSS](https://www.styled-components.com/docs/api#supported-css), `styled-components` allow you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!\n\n```jsx\nconst Button = styled.button`\n color: grey;\n`;\n```\n\nAlternatively, you may use [style objects](https://www.styled-components.com/docs/advanced#style-objects). This allows for easy porting of CSS from inline styles, while still supporting the more advanced styled-components capabilities like component selectors and media queries.\n\n```jsx\nconst Button = styled.button({\n color: 'grey',\n});\n```\n\nEquivalent to:\n\n```jsx\nconst Button = styled.button`\n color: grey;\n`;\n```\n\n`styled-components` is compatible with both React (for web) and React Native – meaning it's the perfect choice even for truly universal apps! See the [documentation about React Native](https://www.styled-components.com/docs/basics#react-native) for more information.\n\n_Supported by [Front End Center](https://frontend.center). Thank you for making this possible!_\n\n---\n\n## [Docs](https://www.styled-components.com/docs)\n\n**See the documentation at [styled-components.com/docs](https://www.styled-components.com/docs)** for more information about using `styled-components`!\n\nQuicklinks to some of the most-visited pages:\n\n- [**Getting started**](https://www.styled-components.com/docs/basics)\n- [API Reference](https://styled-components.com/docs/api)\n- [Theming](https://www.styled-components.com/docs/advanced#theming)\n- [Server-side rendering](https://www.styled-components.com/docs/advanced#server-side-rendering)\n- [Tagged Template Literals explained](https://www.styled-components.com/docs/advanced#tagged-template-literals)\n\n---\n\n## Example\n\n```jsx\nimport React from 'react';\n\nimport styled from 'styled-components';\n\n// Create a react component that renders an <h1> which is\n// centered, palevioletred and sized at 1.5em\nconst Title = styled.h1`\n font-size: 1.5em;\n text-align: center;\n color: palevioletred;\n`;\n\n// Create a <Wrapper> react component that renders a <section> with\n// some padding and a papayawhip background\nconst Wrapper = styled.section`\n padding: 4em;\n background: papayawhip;\n`;\n\nfunction MyUI() {\n return (\n // Use them like any other React component – except they're styled!\n <Wrapper>\n <Title>Hello World, this is my first styled component!\n \n );\n}\n```\n\nThis is what you'll see in your browser:\n\n
\n \n \"Screenshot\n \n
\n\n---\n\n## Looking for v5?\n\nThe `main` branch is for the most-current version of styled-components, currently v6. For changes targeting v5, please point your PRs at the `legacy-v5` branch.\n\n---\n\n## Built with `styled-components`\n\nA lot of hard work goes into community libraries, projects, and guides. A lot of them make it easier to get started or help you with your next project! There are also a whole lot of interesting apps and sites that people have built using styled-components.\n\nMake sure to head over to [awesome-styled-components](https://github.com/styled-components/awesome-styled-components) to see them all! And please contribute and add your own work to the list so others can find it.\n\n---\n\n## Contributing\n\nIf you want to contribute to `styled-components` please see our [contributing and community guidelines](./CONTRIBUTING.md), they'll help you get set up locally and explain the whole process.\n\nPlease also note that all repositories under the `styled-components` organization follow our [Code of Conduct](./CODE_OF_CONDUCT.md), make sure to review and follow it.\n\n---\n\n## Badge\n\nLet everyone know you're using _styled-components_ → [![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n\n```md\n[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)\n```\n\n---\n\n## Contributors\n\nThis project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].\n\n\n---\n\n## Backers\n\nThank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/styled-components#backer)]\n\n\n\n---\n\n## Sponsors\n\nSupport this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/styled-components#sponsor)]\n\n\n\n\n\n\n\n\n\n\n\n\n---\n\n## License\n\nLicensed under the MIT License, Copyright © 2016-present Glen Maddern and Maximilian Stoiber.\n\nSee [LICENSE](./LICENSE) for more information.\n\n---\n\n## Acknowledgements\n\nThis project builds on a long line of earlier work by clever folks all around the world. We'd like to thank Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson & Andrey Sitnik who contributed ideas, code or inspiration.\n\nSpecial thanks to [@okonet](https://github.com/okonet) for the fantastic logo.\n","readmeFilename":"README.md"}