Reuse babel options and specify polyfills for karma explicitely

babelOptions.js

@@ -0,0 +1,9 @@
+exports.getBabelOptions = ({useESModules}) => ({
+  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']
+  ]
+})

docs/environment-requirements.md

@@ -0,0 +1,9 @@
+## 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]() 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.
+
+It is hard to compile and maintain a full list of required polyfills for each runtime for each version of JSS, so we think you should test your application in the browser you support, and you will see if any polyfill is missing.
+
+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!

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

@@ -48,7 +48,6 @@
     "@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 +64,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 (const key in cssRules) {
+    if ([].hasOwnProperty.call(cssRules, key)) {
+      rulesArr.push(cssRules[key])
+    }
+  }
+  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

@@ -669,14 +669,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 +3473,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"