{"id":20165982,"url":"https://github.com/arcticicestudio/styled-modern-normalize","last_synced_at":"2025-04-10T01:15:25.286Z","repository":{"id":57373355,"uuid":"134040453","full_name":"arcticicestudio/styled-modern-normalize","owner":"arcticicestudio","description":"modern-normalize.css for styled-components","archived":false,"fork":false,"pushed_at":"2018-12-01T16:23:26.000Z","size":250,"stargazers_count":18,"open_issues_count":4,"forks_count":1,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-04-10T01:15:16.688Z","etag":null,"topics":["components","css","css-in-js","css-in-react","hacktoberfest","modern-normalize","normalize","normalize-css","react","reactjs","styled","styled-components"],"latest_commit_sha":null,"homepage":"http://npm.im/styled-modern-normalize","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arcticicestudio.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null}},"created_at":"2018-05-19T07:31:27.000Z","updated_at":"2024-07-20T05:22:22.000Z","dependencies_parsed_at":"2022-08-29T14:43:19.546Z","dependency_job_id":null,"html_url":"https://github.com/arcticicestudio/styled-modern-normalize","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arcticicestudio%2Fstyled-modern-normalize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arcticicestudio%2Fstyled-modern-normalize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arcticicestudio%2Fstyled-modern-normalize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arcticicestudio%2Fstyled-modern-normalize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arcticicestudio","download_url":"https://codeload.github.com/arcticicestudio/styled-modern-normalize/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248137891,"owners_count":21053775,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","css","css-in-js","css-in-react","hacktoberfest","modern-normalize","normalize","normalize-css","react","reactjs","styled","styled-components"],"created_at":"2024-11-14T00:42:09.942Z","updated_at":"2025-04-10T01:15:25.266Z","avatar_url":"https://github.com/arcticicestudio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/arcticicestudio/styled-modern-normalize/develop/assets/banner.svg?sanitize=true\"/\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://github.com/sindresorhus/modern-normalize\"\u003emodern-normalize.css\u003c/a\u003e for \u003ca href=\"https://www.styled-components.com\"\u003estyled-components\u003c/a\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://assets-cdn.github.com/favicon.ico\" width=24 height=24/\u003e \u003ca href=\"https://github.com/arcticicestudio/styled-modern-normalize/releases/latest\"\u003e\u003cimg src=\"https://img.shields.io/github/release/arcticicestudio/styled-modern-normalize.svg?style=flat-square\"/\u003e\u003c/a\u003e \u003cimg src=\"https://www.npmjs.com/static/images/touch-icons/favicon-32x32.png\" width=24 height=24/\u003e \u003ca href=\"https://www.npmjs.com/package/styled-modern-normalize\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/styled-modern-normalize.svg?style=flat-square\"/\u003e\u003c/a\u003e \u003ca href=\"https://www.npmjs.com/package/styled-modern-normalize\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/styled-modern-normalize.svg?style=flat-square\"/\u003e\u003c/a\u003e \u003ca href=\"https://www.npmjs.com/package/styled-modern-normalize\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/styled-modern-normalize.svg?style=flat-square\"/\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://circleci.com/favicon.ico\" width=24 height=24/\u003e \u003ca href=\"https://circleci.com/gh/arcticicestudio/styled-modern-normalize\"\u003e\u003cimg src=\"https://img.shields.io/circleci/project/github/arcticicestudio/styled-modern-normalize/develop.svg?style=flat-square\"/\u003e\u003c/a\u003e \u003cimg src=\"https://cdn.travis-ci.org/images/favicon-c566132d45ab1a9bcae64d8d90e4378a.svg\" width=24 height=24/\u003e \u003ca href=\"https://travis-ci.org/arcticicestudio/styled-modern-normalize\"\u003e\u003cimg src=\"https://img.shields.io/travis/arcticicestudio/styled-modern-normalize/develop.svg?style=flat-square\"/\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CHANGELOG.md#020\"\u003e\u003cimg src=\"https://img.shields.io/badge/Changelog-0.2.0-5E81AC.svg?style=flat-square\"/\u003e\u003c/a\u003e \u003ca href=\"https://github.com/arcticicestudio/styleguide-javascript\"\u003e\u003cimg src=\"https://img.shields.io/badge/modern--normalize.css-0.5.0-5E81AC.svg?style=flat-square\"/\u003e\u003c/a\u003e \u003ca href=\"https://www.styled-components.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/styled--components-v2_%7C%7C_v3_%7C%7C_v4-5E81AC.svg?style=flat-square\"/\u003e\u003c/a\u003e\u003c/p\u003e\n\nA common import method for `modern-normalize.css` is to use [unnamed imports][mdn-import] which works fine for projects with _vanilla_ CSS or pre-processors workflows like Sass/Less and a bundler like [webpack][], but it doesn't make use of the advantages of CSS-in-JS libraries like _styled-components_, e.g. auto-prefixing and CSS optimizing.\n\n[styled-modern-normalize][npm-styled-modern-normalize] is a proxy package of [modern-normalize.css][npm-modern-normalize] for [styled-components][] to provide the CSS as template literal with interpolation by using _styled-component_'s [`css`][sc-doc-api-css] API function. This allows to import and use it via [`injectGlobal`][sc-doc-api-injectglobal] or any other styled component.\n\nThe package is based on and compatible with _modern-normalize.css_ version 0.5.0. The provided styles are compatible with _styled-components_ v2, v3 and v4.\n\n## Getting Started\n\n### Installation\n\nAdd the package as dependency to your project:\n\n```sh\nnpm install --save styled-modern-normalize\n```\n\nRun `npm install` from within the project root to bootstrap the project and install the development- and runtime dependencies. Note that **this will not install the required [styled-components][npm-styled-components]** package which is defined as [peer dependency][nodejs-blog-peerdeps] and must be installed separately as described in the [peer dependencies](#peer-dependencies) section below.\n\n#### Peer Dependencies\n\nThis package uses [styled-components][npm-styled-components] API functions that return [React][] components.\n\nTherefore this package depends on the [styled-components][npm-styled-components] and [react][npm-react] packages defined as [peer dependencies][nodejs-blog-peerdeps].\n\nLinux \u0026 macOS users can easily install all peer dependencies by using the [npx][npm-npx] which comes prebundled with **npm 5** or higher:\n\n```sh\nnpx install-peerdeps styled-modern-normalize\n```\n\nWhen using **npm \u003c 5** the _npx_ tool is not prebundled, but users can either simply install it globally and then run the above command or install the [install-peerdeps][npm-install-peerdeps] package locally/globally to let it handle the installation of all peer dependencies.\n\n```sh\n# Via local installation…\nnpm install install-peerdeps\n./node_modules/.bin/install-peerdeps styled-modern-normalize\n\n# …or globally.\nnpm install -g install-peerdeps\ninstall-peerdeps styled-modern-normalize\n```\n\n#### Manually\n\nAll peer dependencies can also be installed manually (e.g. for users running a Microsoft Windows based system) by installing the correct version of each package:\n\n```sh\nnpm info \"styled-modern-normalize@latest\" peerDependencies\n```\n\n### Usage\n\n_styled-modern-normalize_ can be used by importing the [default or named export][mdn-export] `modernNormalize`.\n\n```js\n// With default export…\nimport modernNormalize from \"styled-modern-normalize\";\n\n// …or via named export.\nimport { modernNormalize } from \"styled-modern-normalize\";\n```\n\nTo inject the styles when using _styled-components_ v4 the [`createGlobalStyle`][sc-doc-api-createglobalstyle] API function can be used that generates a `StyledComponent` Reach component:\n\n```js\n// Usage with the latest \"styled-components\" v4.\nimport { createGlobalStyle } from \"styled-components\";\n\nconst ModernNormalize = createGlobalStyle`\n  ${modernNormalize}\n  /* ... */\n`;\n\n// Use the generated component in your rendering logic to inject the styles.\n/* ... */\n\u003cReact.Fragment\u003e\n  \u003cModernNormalize /\u003e\n\u003c/React.Fragment\u003e;\n/* ... */\n```\n\nWhen using _styled-components_ v2 or v3 the styles can be injected using the [`injectGlobal`][sc-doc-api-injectglobal] API:\n\n```js\n// Usage with \"styled-components\" v2 or v3.\nimport { injectGlobal } from \"styled-components\";\n\nconst cssBaseline = injectGlobal`\n  ${modernNormalize}\n  /* ... */\n`;\n```\n\nThe version of _modern-normalize.css_ this package is currently based is exported as `MODERN_NORMALIZE_VERSION`:\n\n```js\nimport { MODERN_NORMALIZE_VERSION } from \"styled-modern-normalize\";\n\n// Example:\nconsole.log(MODERN_NORMALIZE_VERSION); // \"0.5.0\"\n```\n\n### Development Workflow\n\nRun `npm install` from within the project root to bootstrap the project and install the development- and runtime dependencies. To start the development with automatic recompilation on any source file change in the `src/` directory run\n\n```sh\nnpm run dev\n```\n\nThe project is also configured for the opinionated code formatter [Prettier][] which provides [integration support for many editors][prettier-doc-editors] to e.g. automatically format the source file on save.\n\n#### Building\n\nA distribution build can be created by running\n\n```sh\nnpm run dist\n```\n\nContinuous integration builds are running at [Circle CI][circle-ci] and [Travis CI][travis-ci].\n\n#### Testing\n\n##### Linting\n\nJavaScript sources are linted with [ESLint][] using the [arcticicestudio-base][npm-eslint-config-arcticicestudio-base] configuration which can be run with\n\n```sh\nnpm run lint:js\n```\n\nMarkdown sources are linted with [remark-lint][npm-remark-lint] using the [arcticicestudio preset][npm-remark-preset-lint-arcticicestudio] which can be run with\n\n```sh\nnpm run lint:md\n```\n\nAll linting tasks can be run with\n\n```sh\nnpm run lint\n```\n\n## Contributing\n\nRead the [contributing guide][gh-contrib] to learn about the development process and how to propose [enhancement suggestions][gh-contrib-enhancements] and [report bugs][gh-contrib-bug-reports], how to [submit pull requests][gh-contrib-pr] and the project's [styleguides][gh-contrib-styleguides], [branch organization][gh-contrib-branch-org] and [versioning][gh-contrib-versioning] model.\n\nThe guide also includes information about [minimal, complete, and verifiable examples][gh-contrib-mcve] and other ways to contribute to the project like [improving existing issues][gh-contrib-improve-issues] and [giving feedback on issues and pull requests][gh-contrib-feedback].\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/arcticicestudio/nord/develop/assets/banner-footer-mountains.svg?sanitize=true\" /\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eCopyright \u0026copy; 2018-present Arctic Ice Studio \u0026 Sven Greb\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/LICENSE.md\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-MIT-5E81AC.svg?style=flat-square\"/\u003e\u003c/a\u003e\u003c/p\u003e\n\n[circle-ci]: https://circleci.com/gh/arcticicestudio/styled-modern-normalize\n[eslint]: https://eslint.org\n[gh-contrib]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md\n[gh-contrib-branch-org]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#branch-organization\n[gh-contrib-bug-reports]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#bug-reports\n[gh-contrib-enhancements]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#enhancement-suggestions\n[gh-contrib-feedback]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#give-feedback-on-issues-and-pull-requests\n[gh-contrib-improve-issues]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#improve-issues\n[gh-contrib-mcve]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#mcve\n[gh-contrib-pr]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#pull-requests\n[gh-contrib-styleguides]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#styleguides\n[gh-contrib-versioning]: https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CONTRIBUTING.md#versioning\n[mdn-export]: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export\n[mdn-import]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import\n[nodejs-blog-peerdeps]: https://nodejs.org/en/blog/npm/peer-dependencies\n[npm-eslint-config-arcticicestudio-base]: https://www.npmjs.com/package/eslint-config-arcticicestudio-base\n[npm-install-peerdeps]: https://www.npmjs.com/package/install-peerdeps\n[npm-modern-normalize]: https://www.npmjs.com/package/modern-normalize\n[npm-npx]: https://www.npmjs.com/package/npx\n[npm-react]: https://www.npmjs.com/package/react\n[npm-remark-lint]: https://www.npmjs.com/package/remark-lint\n[npm-remark-preset-lint-arcticicestudio]: https://www.npmjs.com/package/remark-preset-lint-arcticicestudio\n[npm-styled-components]: https://www.npmjs.com/package/styled-components\n[npm-styled-modern-normalize]: https://www.npmjs.com/package/styled-modern-normalize\n[prettier]: https://prettier.io/docs/en/editors\n[prettier-doc-editors]: https://prettier.io/docs/en/editors\n[react]: https://reactjs.org\n[sc-doc-api-createglobalstyle]: https://www.styled-components.com/docs/api#createglobalstyle\n[sc-doc-api-css]: https://www.styled-components.com/docs/api#css\n[sc-doc-api-injectglobal]: https://www.styled-components.com/docs/api#injectglobal\n[styled-components]: https://www.styled-components.com\n[travis-ci]: https://travis-ci.org/arcticicestudio/styled-modern-normalize\n[webpack]: https://webpack.js.org\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farcticicestudio%2Fstyled-modern-normalize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farcticicestudio%2Fstyled-modern-normalize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farcticicestudio%2Fstyled-modern-normalize/lists"}