Feat/exports-maps for consistent behaviour of esm imports in node and browser environments

.eslintrc.js

@@ -14,7 +14,8 @@ module.exports = {
     {
       files: ['docs/*.md', 'docs/**/*.md'],
       rules: {
-        'no-console': 'off'
+        'no-console': 'off',
+        'import/extensions': 'off'
       }
     },
     {

changelog.md

@@ -4,6 +4,8 @@ Since you are interested in what happens next, in case, you work for a for-profi
 
 ### Improvements
 
+- [all] Support exports-maps for consistent behaviour of esm imports in node and browser [1552](https://github.com/cssinjs/jss/pull/1552)
+
 - [jss] New option to remove whitespaces. Useful for SSR [1549](https://github.com/cssinjs/jss/pull/1549)
 
 - [all] Flow types are now moved from .js files to .flow type defs [1509](https://github.com/cssinjs/jss/pull/1509)

docs/cdn.md

@@ -13,7 +13,7 @@ Unminified CommonJS:
 https://unpkg.com/jss/dist/jss.cjs.js
 
 Unminified ESM:
-https://unpkg.com/jss/dist/jss.esm.js
+https://unpkg.com/jss/dist/jss.esm.mjs
 
 Minified UMD:
 https://unpkg.com/jss/dist/jss.min.js
@@ -27,7 +27,7 @@ Unminified CommonJS:
 https://unpkg.com/jss-preset-default/dist/jss-preset-default.cjs.js
 
 Unminified ESM:
-https://unpkg.com/jss-preset-default/dist/jss-preset-default.esm.js
+https://unpkg.com/jss-preset-default/dist/jss-preset-default.esm.mjs
 
 Minified UMD:
 https://unpkg.com/jss-preset-default/dist/jss-preset-default.min.js
@@ -41,7 +41,7 @@ Unminified CommonJS:
 https://unpkg.com/react-jss/dist/react-jss.cjs.js
 
 Unminified ESM:
-https://unpkg.com/react-jss/dist/react-jss.esm.js
+https://unpkg.com/react-jss/dist/react-jss.esm.mjs
 
 Minified UMD:
 https://unpkg.com/react-jss/dist/react-jss.min.js

karma.conf.js

@@ -1,5 +1,5 @@
-const webpack = require('./webpack.config')
-const browsers = require('./browsers')
+const webpackConfig = require('./webpack.config')
+const browsers = require('./browsers.json')
 
 const isBench = process.env.BENCHMARK === 'true'
 const useCloud = process.env.USE_CLOUD === 'true'
@@ -10,24 +10,39 @@ const travisBuildNumber = process.env.TRAVIS_BUILD_NUMBER
 const travisBuildId = process.env.TRAVIS_BUILD_ID
 const travisJobNumber = process.env.TRAVIS_JOB_NUMBER
 
+const getWepackConfig = () => {
+  delete webpackConfig.entry
+  delete webpackConfig.output
+  return webpackConfig
+}
+
 module.exports = config => {
   config.set({
     customLaunchers: browsers,
     browsers: ['Chrome'],
-    frameworks: ['mocha'],
+    frameworks: ['mocha', 'webpack'],
     files: [
       './polyfills.js',
       './packages/*/tests/*.js',
       './packages/*/tests/**/*.js',
       './packages/*/src/**/*.test.js'
     ],
+    plugins: [
+      'karma-webpack',
+      'karma-mocha',
+      'karma-sourcemap-loader',
+      'karma-mocha-reporter',
+      'karma-coverage',
+      'karma-chrome-launcher'
+    ],
     preprocessors: {
       './polyfills.js': ['webpack', 'sourcemap'],
       './packages/**/*.js': ['webpack', 'sourcemap']
     },
-    webpack,
+    webpack: getWepackConfig(),
     webpackMiddleware: {
-      stats: 'errors-only'
+      stats: 'errors-only',
+      noInfo: true
     },
     reporters: ['mocha', 'coverage'],
     coverageReporter: {

package.json

@@ -6,9 +6,10 @@
   ],
   "scripts": {
     "build": "lerna run build",
-    "check:all": "yarn check:flow && yarn check:ts && yarn check:snapshots && yarn check:lint",
+    "check:all": "yarn check:types && yarn check:snapshots && yarn check:lint",
     "check:flow": "flow check --max-warnings=0",
     "check:ts": "tsc",
+    "check:types": "yarn check:flow && yarn check:ts",
     "check:snapshots": "lerna run check-snapshot",
     "check:lint": "eslint scripts/ packages/ docs/ --ext js,flow,md",
     "format": "prettier \"*.{js,md,json,ts}\" \"{docs,packages,scripts}/**/*.{js,md,json,ts}\" --write",
@@ -43,21 +44,22 @@
     "yarn": ">=1.13"
   },
   "devDependencies": {
-    "@babel/core": "^7.2.2",
-    "@babel/plugin-proposal-class-properties": "^7.3.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
-    "@babel/plugin-transform-runtime": "^7.2.0",
-    "@babel/preset-env": "^7.3.1",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/core": "^7.14.6",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/preset-env": "^7.14.7",
+    "@babel/preset-flow": "^7.14.5",
+    "@babel/preset-react": "^7.14.5",
     "@lerna/prompt": "^3.6.0",
     "@rollup/plugin-babel": "^5.2.1",
     "@rollup/plugin-commonjs": "^16.0.0",
     "@rollup/plugin-node-resolve": "^10.0.0",
     "@rollup/plugin-replace": "^2.3.4",
     "@types/node": "^14.0.9",
     "axios": "^0.18.0",
-    "babel-loader": "^8.0.4",
-    "babel-plugin-dev-expression": "^0.2.1",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-dev-expression": "^0.2.2",
     "camelcase": "^5.0.0",
     "chalk": "^2.4.1",
     "codecov": "^3.6.5",
@@ -73,19 +75,19 @@
     "expect.js": "^0.3.1",
     "flow-bin": "^0.150.1",
     "json-loader": "^0.5.4",
-    "karma": "^1.3.0",
-    "karma-benchmark": "^0.6.0",
+    "karma": "^6.3.4",
+    "karma-benchmark": "^1.0.4",
     "karma-benchmark-reporter": "^0.1.1",
-    "karma-browserstack-launcher": "^1.4.0",
-    "karma-chrome-launcher": "^2.0.0",
-    "karma-coverage": "^1.1.1",
-    "karma-mocha": "^1.3.0",
-    "karma-mocha-reporter": "^2.2.1",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^4.0.0-rc.5",
+    "karma-browserstack-launcher": "^1.6.0",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-coverage": "^2.0.3",
+    "karma-mocha": "^2.0.1",
+    "karma-mocha-reporter": "^2.2.5",
+    "karma-sourcemap-loader": "^0.3.8",
+    "karma-webpack": "^5.0.0",
     "lerna": "^3.8.0",
     "lint-staged": "^3.2.2",
-    "mocha": "^3.2.0",
+    "mocha": "^9.0.2",
     "npmlog": "^4.1.2",
     "pre-commit": "^1.1.3",
     "prettier": "^1.13.5",
@@ -99,7 +101,7 @@
     "shelljs": "^0.8.2",
     "sinon": "4.5.0",
     "typescript": "^3.7.0",
-    "webpack": "^4.28.3",
+    "webpack": "^5.45.1",
     "zen-observable": "^0.6.0"
   }
 }

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

@@ -1,20 +1,20 @@
 {
   "css-jss.js": {
-    "bundled": 59688,
-    "minified": 21828,
-    "gzipped": 7357
+    "bundled": 59642,
+    "minified": 21847,
+    "gzipped": 7367
   },
   "css-jss.min.js": {
-    "bundled": 58613,
-    "minified": 21205,
-    "gzipped": 7078
+    "bundled": 58579,
+    "minified": 21224,
+    "gzipped": 7091
   },
   "css-jss.cjs.js": {
     "bundled": 2949,
     "minified": 1189,
     "gzipped": 667
   },
-  "css-jss.esm.js": {
+  "css-jss.esm.mjs": {
     "bundled": 2665,
     "minified": 967,
     "gzipped": 576,

packages/css-jss/package.json

@@ -5,8 +5,14 @@
   "license": "MIT",
   "homepage": "https://cssinjs.org/",
   "main": "dist/css-jss.cjs.js",
-  "module": "dist/css-jss.esm.js",
+  "module": "dist/css-jss.esm.mjs",
   "unpkg": "dist/css-jss.bundle.js",
+  "exports": {
+    ".": {
+      "require": "./dist/css-jss.cjs.js",
+      "import": "./dist/css-jss.esm.mjs"
+    }
+  },
   "sideEffects": false,
   "typings": "./src/index.d.ts",
   "author": "JSS Team",
@@ -38,7 +44,7 @@
     "check-snapshot": "node ../../scripts/match-snapshot.js"
   },
   "dependencies": {
-    "@babel/runtime": "^7.3.1",
+    "@babel/runtime": "^7.12.0",
     "jss": "10.7.1",
     "jss-preset-default": "10.7.1"
   }

packages/jss-plugin-cache/.size-snapshot.json

@@ -14,7 +14,7 @@
     "minified": 371,
     "gzipped": 261
   },
-  "jss-plugin-cache.esm.js": {
+  "jss-plugin-cache.esm.mjs": {
     "bundled": 666,
     "minified": 302,
     "gzipped": 217,

packages/jss-plugin-cache/package.json

@@ -5,8 +5,14 @@
   "license": "MIT",
   "homepage": "https://cssinjs.org/jss-plugin-cache",
   "main": "dist/jss-plugin-cache.cjs.js",
-  "module": "dist/jss-plugin-cache.esm.js",
+  "module": "dist/jss-plugin-cache.esm.mjs",
   "unpkg": "dist/jss-plugin-cache.bundle.js",
+  "exports": {
+    ".": {
+      "require": "./dist/jss-plugin-cache.cjs.js",
+      "import": "./dist/jss-plugin-cache.esm.mjs"
+    }
+  },
   "sideEffects": false,
   "typings": "./src/index.d.ts",
   "author": "JSS Team",
@@ -36,7 +42,7 @@
     "check-snapshot": "node ../../scripts/match-snapshot.js"
   },
   "dependencies": {
-    "@babel/runtime": "^7.3.1",
+    "@babel/runtime": "^7.12.0",
     "jss": "10.7.1"
   }
 }

packages/jss-plugin-cache/src/index.test.js

@@ -2,12 +2,15 @@
 
 import expect from 'expect.js'
 import {create} from 'jss'
+import {resetSheets} from '../../../tests/utils'
 
 import cache from './index'
 
 describe('jss-plugin-cache', () => {
   let jss
 
+  beforeEach(resetSheets())
+
   beforeEach(() => {
     jss = create().use(cache())
   })

packages/jss-plugin-camel-case/.size-snapshot.json

@@ -14,7 +14,7 @@
     "minified": 818,
     "gzipped": 420
   },
-  "jss-plugin-camel-case.esm.js": {
+  "jss-plugin-camel-case.esm.mjs": {
     "bundled": 1418,
     "minified": 565,
     "gzipped": 309,

packages/jss-plugin-camel-case/package.json

@@ -5,8 +5,14 @@
   "license": "MIT",
   "homepage": "https://cssinjs.org/jss-camel-case",
   "main": "dist/jss-plugin-camel-case.cjs.js",
-  "module": "dist/jss-plugin-camel-case.esm.js",
+  "module": "dist/jss-plugin-camel-case.esm.mjs",
   "unpkg": "dist/jss-plugin-camel-case.bundle.js",
+  "exports": {
+    ".": {
+      "require": "./dist/jss-plugin-camel-case.cjs.js",
+      "import": "./dist/jss-plugin-camel-case.esm.mjs"
+    }
+  },
   "sideEffects": false,
   "typings": "./src/index.d.ts",
   "author": "JSS Team",
@@ -38,7 +44,7 @@
     "jss-plugin-rule-value-function": "10.7.1"
   },
   "dependencies": {
-    "@babel/runtime": "^7.3.1",
+    "@babel/runtime": "^7.12.0",
     "hyphenate-style-name": "^1.0.3",
     "jss": "10.7.1"
   }

packages/jss-plugin-camel-case/src/index.test.js

@@ -2,6 +2,7 @@ import expect from 'expect.js'
 import {stripIndent} from 'common-tags'
 import {create} from 'jss'
 import functionPlugin from 'jss-plugin-rule-value-function'
+import {resetSheets} from '../../../tests/utils'
 
 import camelCase from './index'
 
@@ -12,6 +13,8 @@ const settings = {
 describe('jss-plugin-camel-case', () => {
   let jss
 
+  beforeEach(resetSheets())
+
   beforeEach(() => {
     jss = create(settings).use(camelCase())
   })

packages/jss-plugin-compose/.size-snapshot.json

@@ -1,6 +1,6 @@
 {
   "jss-plugin-compose.js": {
-    "bundled": 2517,
+    "bundled": 2515,
     "minified": 988,
     "gzipped": 561
   },
@@ -14,7 +14,7 @@
     "minified": 1013,
     "gzipped": 528
   },
-  "jss-plugin-compose.esm.js": {
+  "jss-plugin-compose.esm.mjs": {
     "bundled": 1826,
     "minified": 764,
     "gzipped": 426,

packages/jss-plugin-compose/package.json

@@ -5,8 +5,14 @@
   "license": "MIT",
   "homepage": "https://cssinjs.org/jss-compose",
   "main": "dist/jss-plugin-compose.cjs.js",
-  "module": "dist/jss-plugin-compose.esm.js",
+  "module": "dist/jss-plugin-compose.esm.mjs",
   "unpkg": "dist/jss-plugin-compose.bundle.js",
+  "exports": {
+    ".": {
+      "require": "./dist/jss-plugin-compose.cjs.js",
+      "import": "./dist/jss-plugin-compose.esm.mjs"
+    }
+  },
   "sideEffects": false,
   "typings": "./src/index.d.ts",
   "author": "JSS Team",
@@ -36,7 +42,7 @@
     "check-snapshot": "node ../../scripts/match-snapshot.js"
   },
   "dependencies": {
-    "@babel/runtime": "^7.3.1",
+    "@babel/runtime": "^7.12.0",
     "jss": "10.7.1",
     "tiny-warning": "^1.0.2"
   }

packages/jss-plugin-compose/src/index.test.js

@@ -3,6 +3,7 @@
 import expect from 'expect.js'
 import {create} from 'jss'
 import sinon from 'sinon'
+import {resetSheets} from '../../../tests/utils'
 import compose from '.'
 
 const settings = {createGenerateId: () => rule => `${rule.key}-id`}
@@ -11,6 +12,8 @@ describe('jss-plugin-compose', () => {
   let jss
   let spy
 
+  beforeEach(resetSheets())
+
   beforeEach(() => {
     spy = sinon.spy(console, 'warn')
     jss = create(settings).use(compose())