feat: add support for styled-components v4

deprecate `version` export
sergeysova · Oct 17, 2018 · 9703335 · 9703335
1 parent 345f99d
commit 9703335
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # styled-normalize
 
-Normalize file for [styled-components](https://styled-components.com/) CSS-in-JS library.
+CSS-normalize library for [styled-components](https://styled-components.com/).
 
 The original `normalize.css` is pulled from [necolas/normalize.css](https://github.com/necolas/normalize.css), and parsed into styled ready format.
 
@@ -11,9 +11,9 @@ The original `normalize.css` is pulled from [necolas/normalize.css](https://gith
 npm install --save styled-normalize
 ```
 
-### JavaScript
+### styled-components v2 and v3
 
-```javascript
+```js
 // ----- styles/index.js
 import styledNormalize from 'styled-normalize'
 import { injectGlobal } from 'styled-components'
@@ -29,16 +29,37 @@ injectGlobal`
 `
 ```
 
+### styled-components v4
+
+styled-components [createGlobalStyle documentation](https://www.styled-components.com/docs/api#createglobalstyle)
+
+> This is just usage example
+
+```js
+// ----- index.js
+import React from 'react'
+import { Normalize } from 'styled-normalize'
+
+import { App } from './app'
+
+const Root = () => (
+  <React.Fragment>
+    <Normalize />
+    <App />
+  </React.Fragment>
+)
+```
+
+> For older version of styled-components this API renders to `null`
+
 You can also use named imports:
 
 ```js
 // ES Modules
-import { normalize, version } from 'styled-normalize'
+import { normalize, Normalize } from 'styled-normalize'
 
 // CommonJS
-const { normalize, version } = require('styled-normalize')
-
-assert(version)
+const { normalize, Normalize } = require('styled-normalize')
 ```
 
 ## License

diff --git a/bin/fetch.js b/bin/fetch.js
@@ -12,14 +12,18 @@ const normalizeVersion = normalizePackage.version
 const cleanedContent = normalizeContent.replace(cleanRegexp, '').replace(/^\s*\n/gm, '')
 
 const resultContent = `
-import { css } from 'styled-components'
+import { css, createGlobalStyle } from 'styled-components'
 
 export const version = '${normalizeVersion}'
 
 export const normalize = css\`
 ${cleanedContent}
 \`
 
+export const Normalize = createGlobalStyle
+  ? createGlobalStyle\`\${normalize}\`
+  : () => null
+
 export default normalize
 `
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,16 +32,16 @@
   },
   "homepage": "https://github.com/sergeysova/styled-normalize#readme",
   "devDependencies": {
-    "@babel/cli": "^7.1.0",
-    "@babel/core": "^7.1.0",
+    "@babel/cli": "^7.1.2",
+    "@babel/core": "^7.1.2",
     "@babel/preset-env": "^7.1.0",
-    "babel-plugin-styled-components": "^1.5.1",
+    "babel-plugin-styled-components": "^1.8.0",
     "normalize.css": "^8.0.0",
     "npm-check-updates": "^2.14.2",
-    "react": "^16.4.1",
-    "styled-components": "^3.4.6"
+    "react": "^16.5.2",
+    "styled-components": "^4.0.0"
   },
   "peerDependencies": {
-    "styled-components": "^2.0.0 || ^3.3.3 || ^4.0.0-beta.5"
+    "styled-components": "^2.0.0 || ^3.3.3 || ^4.0.0"
   }
 }
diff --git a/src/index.js b/src/index.js
@@ -1,12 +1,15 @@
 
-import { css } from 'styled-components'
+import { css, createGlobalStyle } from 'styled-components'
 
-export const version = '8.0.0'
+/**
+ * @deprecated
+ */
+export const version = '8.0.2'
 
 export const normalize = css`
 html {
-  line-height: 1.15; 
-  -webkit-text-size-adjust: 100%; 
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
 }
 body {
   margin: 0;
@@ -16,21 +19,21 @@ h1 {
   margin: 0.67em 0;
 }
 hr {
-  box-sizing: content-box; 
-  height: 0; 
-  overflow: visible; 
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
 }
 pre {
-  font-family: monospace, monospace; 
-  font-size: 1em; 
+  font-family: monospace, monospace;
+  font-size: 1em;
 }
 a {
   background-color: transparent;
 }
 abbr[title] {
-  border-bottom: none; 
-  text-decoration: underline; 
-  text-decoration: underline dotted; 
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted;
 }
 b,
 strong {
@@ -39,8 +42,8 @@ strong {
 code,
 kbd,
 samp {
-  font-family: monospace, monospace; 
-  font-size: 1em; 
+  font-family: monospace, monospace;
+  font-size: 1em;
 }
 small {
   font-size: 80%;
@@ -66,17 +69,17 @@ input,
 optgroup,
 select,
 textarea {
-  font-family: inherit; 
-  font-size: 100%; 
-  line-height: 1.15; 
-  margin: 0; 
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
 }
 button,
-input { 
+input {
   overflow: visible;
 }
 button,
-select { 
+select {
   text-transform: none;
 }
 button,
@@ -102,12 +105,12 @@ fieldset {
   padding: 0.35em 0.75em 0.625em;
 }
 legend {
-  box-sizing: border-box; 
-  color: inherit; 
-  display: table; 
-  max-width: 100%; 
-  padding: 0; 
-  white-space: normal; 
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
 }
 progress {
   vertical-align: baseline;
@@ -117,23 +120,23 @@ textarea {
 }
 [type="checkbox"],
 [type="radio"] {
-  box-sizing: border-box; 
-  padding: 0; 
+  box-sizing: border-box;
+  padding: 0;
 }
 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
   height: auto;
 }
 [type="search"] {
-  -webkit-appearance: textfield; 
-  outline-offset: -2px; 
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
 }
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 ::-webkit-file-upload-button {
-  -webkit-appearance: button; 
-  font: inherit; 
+  -webkit-appearance: button;
+  font: inherit;
 }
 details {
   display: block;
@@ -150,4 +153,8 @@ template {
 
 `
 
+export const Normalize = createGlobalStyle
+  ? createGlobalStyle`${normalize}`
+  : () => null
+
 export default normalize