Reuse babel options and specify polyfills for karma explicitely (#1456)

kof · web-flow · commit eb8270c8444a · 2021-03-11T19:07:01.000+01:00
* reuse babel options

* add envioronment requirements

* manually serialize a collection, because with ['@babel/env', {loose: true}] the spread is doing a different thing

* avoid requiring polyfill for IE11

* make it clear that adding new polyfills to JSS implicite dependencies is a breaking change

* use specific polyfills

* build

* add function name polyfill for IE9

* add raf polyfill

* revert changes to yarn.lock

* add core-js and remove babel-polyfill from yarn

* update snapshots after merge

* prettier

* for in doesn't work on on collections in safari 7,8

* update environments description

* link environment-requirements

* remove plugin-proposal-export-namespace-from
diff --git a/babelOptions.js b/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']
+  ]
+})
diff --git a/docs/environment-requirements.md b/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!
diff --git a/docs/setup.md b/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
 
diff --git a/karma.conf.js b/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,
diff --git a/package.json b/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",
diff --git a/packages/css-jss/.size-snapshot.json b/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,
diff --git a/packages/jss-plugin-default-unit/.size-snapshot.json b/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": {
diff --git a/packages/jss-plugin-default-unit/src/index.js b/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.
diff --git a/packages/jss-preset-default/.size-snapshot.json b/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,
diff --git a/packages/jss-starter-kit/.size-snapshot.json b/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,
diff --git a/packages/jss/src/index.d.ts b/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 =
   | {
diff --git a/packages/react-jss/.size-snapshot.json b/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,
diff --git a/polyfills.js b/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'
diff --git a/rollup.config.js b/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'),
diff --git a/tests/utils.js b/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() {
diff --git a/webpack.config.js b/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})
       }
     ]
   },
diff --git a/yarn.lock b/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"

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