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

Installation

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

Manually

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

Usage

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`
  ${modernNormalize}
  /* ... */
`;

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

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`
  ${modernNormalize}
  /* ... */
`;

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.

Building

A distribution build can be created by running

npm run dist

Continuous integration builds are running at Circle CI and Travis CI.

Testing

Linting

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

Contributing

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