Nutella Peanut-Butter Marshmallow


    0.2.0 • Public • Published

    modern-normalize.css for styled-components

    A common import method for modern-normalize.css is to use unnamed imports 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-normalize is a proxy package of modern-normalize.css for styled-components to provide the CSS as template literal with interpolation by using styled-component's css API function. This allows to import and use it via 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-components package which is defined as peer dependency and must be installed separately as described in the peer dependencies section below.

    Peer Dependencies

    This package uses styled-components API functions that return React components.

    Therefore this package depends on the styled-components and react packages defined as peer dependencies.

    Linux & macOS users can easily install all peer dependencies by using the 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-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 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 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 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 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 CI and Travis CI.



    JavaScript sources are linted with ESLint using the arcticicestudio-base configuration which can be run with

    npm run lint:js

    Markdown sources are linted with remark-lint using the arcticicestudio preset which can be run with

    npm run lint:md

    All linting tasks can be run with

    npm run lint


    Read the contributing guide to learn about the development process and how to propose enhancement suggestions and report bugs, how to submit pull requests and the project's styleguides, branch organization and versioning model.

    The guide also includes information about minimal, complete, and verifiable examples and other ways to contribute to the project like improving existing issues and giving feedback on issues and pull requests.

    Copyright © 2018-present Arctic Ice Studio & Sven Greb


    npm i styled-modern-normalize

    DownloadsWeekly Downloads






    Unpacked Size

    23 kB

    Total Files


    Last publish


    • arcticicestudio