diff --git a/babelOptions.js b/babelOptions.js new file mode 100644 index 000000000..68ca626d7 --- /dev/null +++ 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 new file mode 100644 index 000000000..53946e229 --- /dev/null +++ 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 index ee742589d..671b8b611 100644 --- 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 index 85610f2d5..db359690d 100644 --- 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 index 45262dd97..759666218 100644 --- 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 index a992271ad..96efc7433 100644 --- 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 index 03e2490cd..2e8ed7817 100644 --- 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 index d92249d23..fe1235cae 100644 --- 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 index f0ff40906..138b18701 100644 --- 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 index 9f25eafa5..d953d4409 100644 --- 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 index f867e9642..88730ad1d 100644 --- 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 = ((data: any) => R) type NormalCssProperties = CSSProperties -type NormalCssValues = K extends keyof NormalCssProperties - ? NormalCssProperties[K] - : JssValue +type NormalCssValues = 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 index d4de34531..b08b8c533 100644 --- 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 new file mode 100644 index 000000000..255b82f11 --- /dev/null +++ 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 index 3108f18d0..4a14e3f2a 100644 --- 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 index fe757670d..b96c21dc5 100644 --- 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 index ab3108a6f..8dbaae353 100644 --- 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 index a7523c9d2..70fa8bbee 100644 --- 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"