modern-normalize.css for styled-components

Downloads in past


0.2.05 years ago6 years agoMinified + gzip package size for styled-modern-normalize in KB


modern-normalize.css for styled-components

A common import method for modern-normalize.css is to use unnamed importsmdn-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.
styled-modern-normalizenpm-styled-modern-normalize is a proxy package of modern-normalize.cssnpm-modern-normalize for styled-components to provide the CSS as template literal with interpolation by using styled-component's csssc-doc-api-css API function. This allows to import and use it via injectGlobalsc-doc-api-injectglobal or any other styled component.
The 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.

Getting Started


Add the package as dependency to your project:
npm install --save styled-modern-normalize

Run 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-componentsnpm-styled-components package which is defined as peer dependencynodejs-blog-peerdeps and must be installed separately as described in the peer dependencies section below.

Peer Dependencies

This package uses styled-componentsnpm-styled-components API functions that return React components.
Therefore this package depends on the styled-componentsnpm-styled-components and reactnpm-react packages defined as peer dependenciesnodejs-blog-peerdeps.
Linux & macOS users can easily install all peer dependencies by using the npxnpm-npx which comes prebundled with npm 5 or higher:
npx install-peerdeps styled-modern-normalize

When using npm < 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-peerdepsnpm-install-peerdeps package locally/globally to let it handle the installation of all peer dependencies.
# Via local installation…
npm install install-peerdeps
./node_modules/.bin/install-peerdeps styled-modern-normalize

# …or globally.
npm install -g install-peerdeps
install-peerdeps styled-modern-normalize


All 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:
npm info "styled-modern-normalize@latest" peerDependencies


styled-modern-normalize can be used by importing the default or named exportmdn-export modernNormalize.
// With default export…
import modernNormalize from "styled-modern-normalize";

// …or via named export.
import { modernNormalize } from "styled-modern-normalize";

To inject the styles when using styled-components v4 the createGlobalStylesc-doc-api-createglobalstyle API function can be used that generates a StyledComponent Reach component:
// Usage with the latest "styled-components" v4.
import { createGlobalStyle } from "styled-components";

const ModernNormalize = createGlobalStyle`
  /* ... */

// Use the generated component in your rendering logic to inject the styles.
/* ... */
  <ModernNormalize />
/* ... */

When using styled-components v2 or v3 the styles can be injected using the injectGlobalsc-doc-api-injectglobal API:
// Usage with "styled-components" v2 or v3.
import { injectGlobal } from "styled-components";

const cssBaseline = injectGlobal`
  /* ... */

The version of modern-normalize.css this package is currently based is exported as MODERN_NORMALIZE_VERSION:
import { MODERN_NORMALIZE_VERSION } from "styled-modern-normalize";

// Example:
console.log(MODERN_NORMALIZE_VERSION); // "0.5.0"

Development Workflow

Run 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
npm run dev

The project is also configured for the opinionated code formatter Prettier which provides integration support for many editorsprettier-doc-editors to e.g. automatically format the source file on save.


A distribution build can be created by running
npm run dist

Continuous integration builds are running at Circle CIcircle-ci and Travis CItravis-ci.


JavaScript sources are linted with ESLint using the arcticicestudio-basenpm-eslint-config-arcticicestudio-base configuration which can be run with
npm run lint:js

Markdown sources are linted with remark-lintnpm-remark-lint using the arcticicestudio presetnpm-remark-preset-lint-arcticicestudio which can be run with
npm run lint:md

All linting tasks can be run with
npm run lint


Read the contributing guidegh-contrib to learn about the development process and how to propose enhancement suggestionsgh-contrib-enhancements and report bugsgh-contrib-bug-reports, how to submit pull requestsgh-contrib-pr and the project's styleguidesgh-contrib-styleguides, branch organizationgh-contrib-branch-org and versioninggh-contrib-versioning model.
The guide also includes information about minimal, complete, and verifiable examplesgh-contrib-mcve and other ways to contribute to the project like improving existing issuesgh-contrib-improve-issues and giving feedback on issues and pull requestsgh-contrib-feedback.

Copyright © 2018-present Arctic Ice Studio & Sven Greb