Merge pull request #14 from timhagn/th-styled-components-4

Updated Styled Components to 4.0.2, Babel to 7.1.2

.babelrc.js

@@ -0,0 +1,10 @@
+const presets = [
+ [
+ "@babel/env",
+ {
+ "useBuiltIns": "entry"
+ },
+ ],
+];
+
+module.exports = { presets };

package.json

@@ -6,29 +6,39 @@
  "module": "dist/styled-media-query.es.js",
  "jsnext:main": "dist/styled-media-query.es.js",
  "repository": "[email protected]:morajabi/styled-media-query.git",
- "keywords": ["styled-components", "media-query", "media", "breakpoint"],
+ "keywords": [
+ "styled-components",
+ "media-query",
+ "media",
+ "breakpoint"
+ ],
  "scripts": {
+ "test": "jest",
  "clean": "rimraf dist",
  "build": "yarn build:common && yarn build:es && yarn build:browser",
  "build:common": "rollup -c --environment COMMON,PRODUCTION",
  "build:es": "rollup -c --environment ES",
  "build:browser": "rollup -c --environment BROWSER,PRODUCTION"
  },
- "files": ["dist", "src"],
+ "files": [
+ "dist",
+ "src"
+ ],
  "author": "Mohammad Rajabifard <[email protected]>",
  "license": "MIT",
  "peerDependencies": {
- "styled-components": ">= 1 < 4"
+ "styled-components": ">= 1"
  },
  "devDependencies": {
- "babel-preset-env": "^1.6.0",
- "rimraf": "^2.6.1",
- "rollup": "^0.45.2",
- "rollup-plugin-babel": "^2.7.1",
- "rollup-plugin-commonjs": "^8.2.0",
- "rollup-plugin-gzip": "^1.3.0",
- "rollup-plugin-node-resolve": "^3.0.0",
- "rollup-plugin-uglify": "^2.0.1",
- "styled-components": "^3.1.5"
- }
+ "@babel/core": "^7.1.6",
+ "@babel/preset-env": "^7.1.6",
+ "rimraf": "^2.6.2",
+ "rollup": "^0.67.3",
+ "rollup-plugin-babel": "^4.0.3",
+ "rollup-plugin-commonjs": "^9.2.0",
+ "rollup-plugin-node-resolve": "^3.4.0",
+ "rollup-plugin-uglify": "^6.0.0",
+ "styled-components": "^4.1.1"
+ },
+ "browserslist": "> 0.25%, not dead"
 }

rollup.config.js

@@ -1,33 +1,43 @@
 import resolve from 'rollup-plugin-node-resolve';
 import babel from 'rollup-plugin-babel';
 import commonjs from 'rollup-plugin-commonjs';
-import uglify from 'rollup-plugin-uglify';
-import gzip from 'rollup-plugin-gzip';
+import { uglify } from 'rollup-plugin-uglify';
 
 const prod = process.env.PRODUCTION;
 
 let config = {
- entry: 'src/index.js',
- sourceMap: true,
- exports: 'named',
+ input: 'src/index.js',
+ output: {
+ sourcemap: true,
+ exports: 'named'
+ },
  external: ['react', 'styled-components'],
-}
+};
 
 let plugins = [
  resolve(),
  commonjs(),
  babel(),
 ];
 
+const globals = {
+ 'styled-components': 'styledComponents',
+ react: 'React',
+ 'react-dom': 'ReactDOM',
+};
+
 if (prod) plugins.push(uglify());
 
 if (process.env.BROWSER) {
  config = Object.assign(config, {
- dest: 'dist/styled-media-query.umd.js',
- format: 'umd',
- moduleName: 'styled-media-query',
- sourceMap: true,
- exports: 'named',
+ output: {
+ file: 'dist/styled-media-query.umd.js',
+ format: 'umd',
+ name: 'styled-media-query',
+ sourcemap: true,
+ exports: 'named',
+ globals,
+ },
  plugins,
  })
 
@@ -38,8 +48,11 @@ if (process.env.BROWSER) {
  commonjs(),
  babel(),
  ],
- dest: 'dist/styled-media-query.common.js',
- format: 'cjs',
+ output: {
+ file: 'dist/styled-media-query.common.js',
+ format: 'cjs',
+ exports: 'named',
+ }
  })
 
 } else if (process.env.ES) {
@@ -49,8 +62,10 @@ if (process.env.BROWSER) {
  commonjs(),
  babel(),
  ],
- dest: 'dist/styled-media-query.es.js',
- format: 'es',
+ output: {
+ file: 'dist/styled-media-query.es.js',
+ format: 'es',
+ },
  })
 }
 

src/convertors.js

@@ -1,7 +1,7 @@
 /**
  * Converts breakpoint units in px to rem or em
  * @param {Object} breakpoints - an object containing breakpoint names as keys and the width as value
- * @param {number} [16] ratio - size of 1 rem in px. What is your main font-size in px? 
+ * @param {number} ratio [16] - size of 1 rem in px. What is your main font-size in px?
  * @param {'rem' | 'em'} unit
  */
 function pxToEmOrRem(breakpoints, ratio = 16, unit) {
@@ -24,7 +24,7 @@ function pxToEmOrRem(breakpoints, ratio = 16, unit) {
 /**
  * Converts breakpoint units in px to em 
  * @param {Object} breakpoints - an object containing breakpoint names as keys and the width as value
- * @param {number} [16] ratio - size of 1em in px. What is your main font-size in px? 
+ * @param {number} ratio [16] - size of 1em in px. What is your main font-size in px?
  */
 export function pxToEm(breakpoints, ratio = 16) {
  return pxToEmOrRem(breakpoints, ratio, 'em');
@@ -33,7 +33,7 @@ export function pxToEm(breakpoints, ratio = 16) {
 /**
  * Converts breakpoint units in px to rem 
  * @param {Object} breakpoints - an object containing breakpoint names as keys and the width as value
- * @param {number} [16] ratio - size of 1rem in px. What is your main font-size in px? 
+ * @param {number} ratio [16] - size of 1rem in px. What is your main font-size in px?
  */
 export function pxToRem(breakpoints, ratio = 16) {
  return pxToEmOrRem(breakpoints, ratio, 'rem');