Skip to content

Commit

Permalink
Merge branch 'release/0.2.0'
Browse files Browse the repository at this point in the history
  • Loading branch information
@arcticicestudio
arcticicestudio committed Dec 1, 2018
2 parents e4b881a + 08a501b commit 36940f2
Show file tree
Hide file tree
Showing 5 changed files with 1,907 additions and 777 deletions.
22 changes: 21 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,21 @@

<p align="center"><img src="https://assets-cdn.github.com/favicon.ico" width=24 height=24/> <a href="https://github.com/arcticicestudio/styled-modern-normalize/releases/latest"><img src="https://img.shields.io/github/release/arcticicestudio/styled-modern-normalize.svg?style=flat-square"/></a> <img src="https://www.npmjs.com/static/images/touch-icons/favicon-32x32.png" width=24 height=24/> <a href="https://www.npmjs.com/package/styled-modern-normalize"><img src="https://img.shields.io/npm/v/styled-modern-normalize.svg?style=flat-square"/></a> <a href="https://www.npmjs.com/package/styled-modern-normalize"><img src="https://img.shields.io/npm/dt/styled-modern-normalize.svg?style=flat-square"/></a> <a href="https://www.npmjs.com/package/styled-modern-normalize"><img src="https://img.shields.io/npm/dm/styled-modern-normalize.svg?style=flat-square"/></a></p>

<p align="center"><a href="https://github.com/arcticicestudio/styleguide-javascript"><img src="https://img.shields.io/badge/modern--normalize.css-0.4.0-5E81AC.svg?style=flat-square"/></a></p>
<p align="center"><a href="https://github.com/sindresorhus/modern-normalize"><img src="https://img.shields.io/badge/modern--normalize.css-0.5.0-5E81AC.svg?style=flat-square"/></a> <a href="https://www.styled-components.com"><img src="https://img.shields.io/badge/styled--components-v2_%7C%7C_v3_%7C%7C_v4-5E81AC.svg?style=flat-square"/></a></p>

# 0.2.0

![Release Date: 2018-12-01](https://img.shields.io/badge/Release_Date-2018--12--01-88C0D0.svg?style=flat-square) [![Project Board](https://img.shields.io/badge/Project_Board-0.2.0-88C0D0.svg?style=flat-square)](https://github.com/arcticicestudio/styled-modern-normalize/projects/4) [![Milestone](https://img.shields.io/badge/Milestone-0.2.0-88C0D0.svg?style=flat-square)](https://github.com/arcticicestudio/styled-modern-normalize/milestone/2)

> Detailed information can be found in the [project documentation][docs].
### Features

❯ Updated to the latest [modern-normalize][gh-modern-normalize] upstream version [0.5.0][gh-modern-normalize-v0.5.0]. For details about included changes see the upstream repository and changelog. (#4 in PR #5, 08a48963, @azdanov)

❯ Added support for the latest [styled-components][] major version [4.x.x][gh-styled-components-v4.0.0] by adding instructions to the documentation how to use the styled with the new [`createGlobalStyle`][sc-docs-api-cgs] API function. (#6 in PR #7, cb3716c3, @azdanov)

Details about new awesome features and performance boosts can be found in the [announcement blog post][med-sc-announce-v4] and the [migration guide][sc-docs-migr-v4].

# 0.1.0

Expand Down Expand Up @@ -33,4 +47,10 @@ Detailed usage instructions can be found in the [usage documentation][docs-usage
[docs]: https://github.com/arcticicestudio/styled-modern-normalize#readme
[docs-usage]: https://github.com/arcticicestudio/styled-modern-normalize#usage
[gh-modern-normalize]: https://github.com/sindresorhus/modern-normalize
[gh-modern-normalize-v0.5.0]: https://github.com/sindresorhus/modern-normalize/releases/tag/v0.5.0
[gh-styled-components-v4.0.0]: https://github.com/styled-components/styled-components/releases/tag/v4.0.0
[med-sc-announce-v4]: https://medium.com/styled-components/styled-components-v4-new-final-finalest-for-real-final-final-psd-fa4d83398a77
[npm-modern-normalize-v0.4.0]: https://www.npmjs.com/package/modern-normalize/v/0.4.0
[sc-docs-api-cgs]: https://www.styled-components.com/docs/api#createglobalstyle
[sc-docs-migr-v4]: https://www.styled-components.com/docs/faqs#what-do-i-need-to-do-to-migrate-to-v4
[styled-components]: https://www.styled-components.com
32 changes: 28 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@

<p align="center"><img src="https://circleci.com/favicon.ico" width=24 height=24/> <a href="https://circleci.com/gh/arcticicestudio/styled-modern-normalize"><img src="https://img.shields.io/circleci/project/github/arcticicestudio/styled-modern-normalize/develop.svg?style=flat-square"/></a> <img src="https://cdn.travis-ci.org/images/favicon-c566132d45ab1a9bcae64d8d90e4378a.svg" width=24 height=24/> <a href="https://travis-ci.org/arcticicestudio/styled-modern-normalize"><img src="https://img.shields.io/travis/arcticicestudio/styled-modern-normalize/develop.svg?style=flat-square"/></a></p>

<p align="center"><a href="https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CHANGELOG.md#010"><img src="https://img.shields.io/badge/Changelog-0.1.0-5E81AC.svg?style=flat-square"/></a> <a href="https://github.com/arcticicestudio/styleguide-javascript"><img src="https://img.shields.io/badge/modern--normalize.css-0.4.0-5E81AC.svg?style=flat-square"/></a></p>
<p align="center"><a href="https://github.com/arcticicestudio/styled-modern-normalize/blob/develop/CHANGELOG.md#020"><img src="https://img.shields.io/badge/Changelog-0.2.0-5E81AC.svg?style=flat-square"/></a> <a href="https://github.com/arcticicestudio/styleguide-javascript"><img src="https://img.shields.io/badge/modern--normalize.css-0.5.0-5E81AC.svg?style=flat-square"/></a> <a href="https://www.styled-components.com"><img src="https://img.shields.io/badge/styled--components-v2_%7C%7C_v3_%7C%7C_v4-5E81AC.svg?style=flat-square"/></a></p>

A common import method for `modern-normalize.css` is to use [unnamed imports][mdn-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-normalize][npm-styled-modern-normalize] is a proxy package of [modern-normalize.css][npm-modern-normalize] for [styled-components][] to provide the CSS as template literal with interpolation by using _styled-component_'s [`css`][sc-doc-api-css] API function. This allows to import and use it via [`injectGlobal`][sc-doc-api-injectglobal] or any other styled component.

The package is based on and compatible with _modern-normalize.css_ version 0.4.0.
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

Expand Down Expand Up @@ -68,8 +68,31 @@ 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`][sc-doc-api-createglobalstyle] API function can be used that generates a `StyledComponent` Reach component:

```js
// 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`][sc-doc-api-injectglobal] API:

// Usage with "injectGlobal".
```js
// Usage with "styled-components" v2 or v3.
import { injectGlobal } from "styled-components";

const cssBaseline = injectGlobal`
Expand All @@ -84,7 +107,7 @@ The version of _modern-normalize.css_ this package is currently based is exporte
import { MODERN_NORMALIZE_VERSION } from "styled-modern-normalize";

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

### Development Workflow
Expand Down Expand Up @@ -168,6 +191,7 @@ The guide also includes information about [minimal, complete, and verifiable exa
[prettier]: https://prettier.io/docs/en/editors
[prettier-doc-editors]: https://prettier.io/docs/en/editors
[react]: https://reactjs.org
[sc-doc-api-createglobalstyle]: https://www.styled-components.com/docs/api#createglobalstyle
[sc-doc-api-css]: https://www.styled-components.com/docs/api#css
[sc-doc-api-injectglobal]: https://www.styled-components.com/docs/api#injectglobal
[styled-components]: https://www.styled-components.com
Expand Down
Loading

0 comments on commit 36940f2

Please sign in to comment.