Reuse babel options and specify polyfills for karma explicitely

babelOptions.js

@@ -0,0 +1,8 @@
+exports.getBabelOptions = ({useESModules}) => ({
+  presets: [['@babel/env', {loose: true}], '@babel/flow', '@babel/react'],
+  plugins: [
+    ['@babel/proposal-class-properties', {loose: true}],
+    ['@babel/transform-runtime', {useESModules}],
+    ['dev-expression']
+  ]
+})

docs/environment-requirements.md

@@ -0,0 +1,7 @@
+## JavaScript Environment Requirements
+
+We run our tests against a [number of real browsers](../browsers.json) including IE9, but we do NOT include polyfills we rely on in the build. It is up to the user to include polyfills depending on what environment they need to support. Here is a [full list of polyfills](../polyfills.js) you will need if you support ALL browsers JSS does.
+
+We consider adding a requirement to a new polyfill - a breaking change and it will require a major version incrementation.
+
+We recommend using [babel-preset-env](https://babeljs.io/docs/en/babel-preset-env), which is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

docs/setup.md

@@ -10,9 +10,7 @@ Alternatively, you can use [unpkg CDN](./cdn.md).
 
 ## Polyfills
 
-If you support browsers which do not have support for the following features, make sure you provide polyfills for them.
-
-- WeakMap
+Check out the [environment requirements](./environment-requirements.md) as well as our browsers support and required polyfills.
 
 ## Setup with the default preset
 

karma.conf.js

@@ -16,15 +16,13 @@ module.exports = config => {
     browsers: ['Chrome'],
     frameworks: ['mocha'],
     files: [
-      'node_modules/@babel/polyfill/dist/polyfill.js',
-      'node_modules/raf/polyfill.js',
-
+      './polyfills.js',
       './packages/*/tests/*.js',
       './packages/*/tests/**/*.js',
       './packages/*/src/**/*.test.js'
     ],
     preprocessors: {
-      'node_modules/raf/polyfill.js': ['webpack'],
+      './polyfills.js': ['webpack', 'sourcemap'],
       './packages/**/*.js': ['webpack', 'sourcemap']
     },
     webpack,

package.json

@@ -45,10 +45,8 @@
   "devDependencies": {
     "@babel/core": "^7.2.2",
     "@babel/plugin-proposal-class-properties": "^7.3.0",
-    "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
     "@babel/plugin-transform-runtime": "^7.2.0",
-    "@babel/polyfill": "^7.2.5",
     "@babel/preset-env": "^7.3.1",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
@@ -65,6 +63,7 @@
     "chalk": "^2.4.1",
     "codecov": "^3.6.5",
     "common-tags": "^1.4.0",
+    "core-js": "^3.9.1",
     "cross-env": "^3.1.3",
     "css.escape": "^1.5.1",
     "detect-browser": "^1.5.0",

packages/css-jss/.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "css-jss.js": {
-    "bundled": 61133,
-    "minified": 21942,
-    "gzipped": 7382
+    "bundled": 61186,
+    "minified": 21939,
+    "gzipped": 7380
   },
   "css-jss.min.js": {
-    "bundled": 60058,
-    "minified": 21319,
-    "gzipped": 7102
+    "bundled": 60111,
+    "minified": 21316,
+    "gzipped": 7100
   },
   "css-jss.cjs.js": {
     "bundled": 3034,

packages/jss-plugin-default-unit/.size-snapshot.json

@@ -1,22 +1,22 @@
 {
   "jss-plugin-default-unit.js": {
-    "bundled": 6918,
-    "minified": 3637,
-    "gzipped": 1245
+    "bundled": 6971,
+    "minified": 3634,
+    "gzipped": 1244
   },
   "jss-plugin-default-unit.min.js": {
-    "bundled": 6918,
-    "minified": 3637,
-    "gzipped": 1245
+    "bundled": 6971,
+    "minified": 3634,
+    "gzipped": 1244
   },
   "jss-plugin-default-unit.cjs.js": {
-    "bundled": 6097,
-    "minified": 3721,
+    "bundled": 6150,
+    "minified": 3718,
     "gzipped": 1194
   },
   "jss-plugin-default-unit.esm.js": {
-    "bundled": 6017,
-    "minified": 3655,
+    "bundled": 6070,
+    "minified": 3652,
     "gzipped": 1137,
     "treeshaked": {
       "rollup": {

packages/jss-plugin-default-unit/src/index.js

@@ -40,7 +40,8 @@ function iterate(prop: string, value: any, options: Options) {
         value[innerProp] = iterate(`${prop}-${innerProp}`, value[innerProp], options)
       }
     }
-  } else if (typeof value === 'number' && !Number.isNaN(value)) {
+    // eslint-disable-next-line no-restricted-globals
+  } else if (typeof value === 'number' && isNaN(value) === false) {
     const unit = options[prop] || units[prop]
 
     // Add the unit if available, except for the special case of 0px.

packages/jss-preset-default/.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "jss-preset-default.js": {
-    "bundled": 58333,
-    "minified": 21166,
-    "gzipped": 7034
+    "bundled": 58386,
+    "minified": 21163,
+    "gzipped": 7032
   },
   "jss-preset-default.min.js": {
-    "bundled": 57258,
-    "minified": 20543,
-    "gzipped": 6755
+    "bundled": 57311,
+    "minified": 20540,
+    "gzipped": 6753
   },
   "jss-preset-default.cjs.js": {
     "bundled": 2222,

packages/jss-starter-kit/.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "jss-starter-kit.js": {
-    "bundled": 74476,
-    "minified": 31617,
-    "gzipped": 9666
+    "bundled": 74529,
+    "minified": 31614,
+    "gzipped": 9664
   },
   "jss-starter-kit.min.js": {
-    "bundled": 73401,
-    "minified": 31429,
-    "gzipped": 9442
+    "bundled": 73454,
+    "minified": 31426,
+    "gzipped": 9441
   },
   "jss-starter-kit.cjs.js": {
     "bundled": 5647,

packages/jss/src/index.d.ts

@@ -11,9 +11,7 @@ import {Observable} from 'indefinite-observable'
 type Func<R> = ((data: any) => R)
 
 type NormalCssProperties = CSSProperties<string | number>
-type NormalCssValues<K> = K extends keyof NormalCssProperties
-  ? NormalCssProperties[K]
-  : JssValue
+type NormalCssValues<K> = K extends keyof NormalCssProperties ? NormalCssProperties[K] : JssValue
 
 export type JssStyle =
   | {

packages/react-jss/.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "react-jss.js": {
-    "bundled": 169717,
-    "minified": 59583,
-    "gzipped": 19570
+    "bundled": 169770,
+    "minified": 59580,
+    "gzipped": 19568
   },
   "react-jss.min.js": {
-    "bundled": 112357,
-    "minified": 42783,
-    "gzipped": 14523
+    "bundled": 112410,
+    "minified": 42780,
+    "gzipped": 14522
   },
   "react-jss.cjs.js": {
     "bundled": 27701,

polyfills.js

@@ -0,0 +1,15 @@
+// react-jss, css-jss
+import 'core-js/features/map'
+import 'core-js/features/function/name'
+// jss, jss-plugin-cache
+import 'core-js/features/weak-map'
+// styled-system
+import 'core-js/features/set'
+import 'core-js/features/symbol'
+// react-jss, css-jss
+import 'core-js/features/object/assign'
+// tests
+import 'core-js/features/typed-array'
+import 'core-js/features/string/includes'
+// examples
+import 'raf/polyfill'

rollup.config.js

@@ -8,6 +8,7 @@ import {terser} from 'rollup-plugin-terser'
 import {sizeSnapshot} from 'rollup-plugin-size-snapshot'
 import camelCase from 'camelcase'
 
+const {getBabelOptions} = require('./babelOptions')
 const getPackageJson = require('./scripts/get-package-json')
 
 const pkg = getPackageJson()
@@ -33,18 +34,12 @@ Object.keys(pkg.peerDependencies || {}).forEach(key => {
 
 const external = id => !id.startsWith('.') && !path.isAbsolute(id)
 
-const getBabelOptions = ({useESModules}) => ({
+const getBabelConfig = ({useESModules}) => ({
   babelHelpers: 'runtime',
   exclude: /node_modules/,
   babelrc: false,
   configFile: false,
-  presets: [['@babel/env', {loose: true}], '@babel/flow', '@babel/react'],
-  plugins: [
-    ['@babel/proposal-class-properties', {loose: true}],
-    ['@babel/transform-runtime', {useESModules}],
-    ['@babel/plugin-proposal-export-namespace-from'],
-    ['dev-expression']
-  ]
+  ...getBabelOptions({useESModules})
 })
 
 const commonjsOptions = {
@@ -85,7 +80,7 @@ export default [
     external: Object.keys(globals),
     plugins: [
       nodeResolve(),
-      babel(getBabelOptions({useESModules: true})),
+      babel(getBabelConfig({useESModules: true})),
       commonjs(commonjsOptions),
       replace({
         'process.env.NODE_ENV': JSON.stringify('development'),
@@ -107,7 +102,7 @@ export default [
     external: Object.keys(globals),
     plugins: [
       nodeResolve(),
-      babel(getBabelOptions({useESModules: true})),
+      babel(getBabelConfig({useESModules: true})),
       commonjs(commonjsOptions),
       replace({
         'process.env.NODE_ENV': JSON.stringify('production'),
@@ -124,7 +119,7 @@ export default [
     external,
     plugins: [
       createFlowBundlePlugin,
-      babel(getBabelOptions({useESModules: false})),
+      babel(getBabelConfig({useESModules: false})),
       replace({'process.env.VERSION': JSON.stringify(pkg.version)}),
       sizeSnapshot(snapshotOptions)
     ]
@@ -135,7 +130,7 @@ export default [
     output: {file: pkg.module, format: 'esm'},
     external,
     plugins: [
-      babel(getBabelOptions({useESModules: true})),
+      babel(getBabelConfig({useESModules: true})),
       replace({'process.env.VERSION': JSON.stringify(pkg.version)}),
       sizeSnapshot(snapshotOptions)
     ]
@@ -146,7 +141,7 @@ export default [
     output: {file: pkg.unpkg, format: 'esm'},
     plugins: [
       nodeResolve(),
-      babel(getBabelOptions({useESModules: true})),
+      babel(getBabelConfig({useESModules: true})),
       commonjs(commonjsOptions),
       replace({
         'process.env.NODE_ENV': JSON.stringify('development'),

tests/utils.js

@@ -21,7 +21,14 @@ export function removeWhitespace(str) {
 }
 
 export function getRules(style) {
-  return [...style.sheet.cssRules]
+  const rulesArr = []
+  const {cssRules} = style.sheet
+  for (let index = 0; index < cssRules.length; index++) {
+    if ([].hasOwnProperty.call(cssRules, index)) {
+      rulesArr.push(cssRules[index])
+    }
+  }
+  return rulesArr
 }
 
 export function getStyle() {

webpack.config.js

@@ -4,6 +4,7 @@
 
 const webpack = require('webpack')
 const lerna = require('./lerna.json')
+const {getBabelOptions} = require('./babelOptions')
 
 const plugins = [
   new webpack.DefinePlugin({
@@ -29,10 +30,7 @@ module.exports = {
         loader: 'babel-loader',
         test: /\.js$/,
         exclude: /node_modules/,
-        options: {
-          presets: ['@babel/react', '@babel/flow', '@babel/env'],
-          plugins: ['@babel/proposal-class-properties', '@babel/proposal-object-rest-spread']
-        }
+        options: getBabelOptions({useESModules: true})
       }
     ]
   },

yarn.lock

@@ -307,14 +307,6 @@
     "@babel/helper-create-class-features-plugin" "^7.3.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-proposal-export-namespace-from@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.2.0.tgz#308fd4d04ff257fc3e4be090550840eeabad5dd9"
-  integrity sha512-DZUxbHYxQ5fUFIkMEnh75ogEdBLPfL+mQUqrO2hNY2LGm+tqFnxE924+mhAcCOh/8za8AaZsWHbq6bBoS3TAzA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-export-namespace-from" "^7.2.0"
-
 "@babel/plugin-proposal-json-strings@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.2.0.tgz#568ecc446c6148ae6b267f02551130891e29f317"
@@ -355,13 +347,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-export-namespace-from@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.2.0.tgz#8d257838c6b3b779db52c0224443459bd27fb039"
-  integrity sha512-1zGA3UNch6A+A11nIzBVEaE3DDJbjfB+eLIcf0GGOh/BJr/8NxL3546MGhV/r0RhH4xADFIEso39TKCfEMlsGA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-
 "@babel/plugin-syntax-flow@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.0.0.tgz#70638aeaad9ee426bc532e51523cff8ff02f6f17"
@@ -669,14 +654,6 @@
     "@babel/helper-regex" "^7.0.0"
     regexpu-core "^4.1.3"
 
-"@babel/polyfill@^7.2.5":
-  version "7.2.5"
-  resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.2.5.tgz#6c54b964f71ad27edddc567d065e57e87ed7fa7d"
-  integrity sha512-8Y/t3MWThtMLYr0YNC/Q76tqN1w30+b0uQMeFUYauG2UGTR19zyUtFrAzT23zNtBxPp+LbE5E/nwV/q/r3y6ug==
-  dependencies:
-    core-js "^2.5.7"
-    regenerator-runtime "^0.12.0"
-
 "@babel/preset-env@^7.3.1":
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.3.1.tgz#389e8ca6b17ae67aaf9a2111665030be923515db"
@@ -3481,10 +3458,10 @@ core-js@^2.2.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
   integrity sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==
 
-core-js@^2.5.7:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.1.tgz#87416ae817de957a3f249b3b5ca475d4aaed6042"
-  integrity sha512-L72mmmEayPJBejKIWe2pYtGis5r0tQ5NaJekdhyXgeMQTpJoBsH0NL4ElY2LfSoV15xeQWKQ+XTTOZdyero5Xg==
+core-js@^3.9.1:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.9.1.tgz#cec8de593db8eb2a85ffb0dbdeb312cb6e5460ae"
+  integrity sha512-gSjRvzkxQc1zjM/5paAmL4idJBFzuJoo+jDjF1tStYFMV2ERfD02HhahhCGXUyHxQRG4yFKVSdO6g62eoRMcDg==
 
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"