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.
Add the package as dependency to your project:
npm install --save styled-modern-normalize
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.
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-peerdepsinstall-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
// With default export…;// …or via named export.;
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.;const ModernNormalize = createGlobalStyle`/* ... */`;// Use the generated component in your rendering logic to inject the styles./* ... */<ReactFragment><ModernNormalize /></ReactFragment>;/* ... */
When using styled-components v2 or v3 the styles can be injected using the
// Usage with "styled-components" v2 or v3.;const cssBaseline = injectGlobal`/* ... */`;
The version of modern-normalize.css this package is currently based is exported as
;// Example:console; // "0.5.0"
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
A distribution build can be created by running
npm run dist
npm run lint:js
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