styled-modern-normalize

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

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-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

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 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`
  ${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 injectGlobalsc-doc-api-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 editorsprettier-doc-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 CIcircle-ci and Travis CItravis-ci.

Testing

Linting

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

Contributing

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