build(esm): modify rollup.config.js and package.json for better ESM packaging

package.json

@@ -27,8 +27,15 @@
     "colour"
   ],
   "main": "dist/polished.cjs.js",
-  "module": "dist/polished.esm.js",
+  "module": "dist/polished.mjs",
   "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./dist/polished.mjs",
+      "default": "./dist/polished.cjs.js"
+    }
+  },
   "sideEffects": false,
   "scripts": {
     "build": "yarn build:lib && yarn build:dist && yarn build:flow && yarn build:docs && yarn build:typescript",

rollup.config.js

@@ -1,29 +1,29 @@
-import babel from "@rollup/plugin-babel";
-import resolve from "@rollup/plugin-node-resolve";
-import replace from "@rollup/plugin-replace";
-import sourceMaps from "rollup-plugin-sourcemaps";
-import { terser } from "rollup-plugin-terser";
+import path from 'node:path'
+import babel from '@rollup/plugin-babel'
+import resolve from '@rollup/plugin-node-resolve'
+import replace from '@rollup/plugin-replace'
+import sourceMaps from 'rollup-plugin-sourcemaps'
+import { terser } from 'rollup-plugin-terser'
 
-const root = process.platform === "win32" ? path.resolve("/") : "/";
-const external = (id) => !id.startsWith(".") && !id.startsWith(root);
+const root = process.platform === 'win32' ? path.resolve('/') : '/'
+const external = id => !id.startsWith('.') && !id.startsWith(root)
 const globals = {
-  "@babel/runtime/helpers/esm/extends": "extends",
-  "@babel/runtime/helpers/esm/assertThisInitialized": "assertThisInitialized",
-  "@babel/runtime/helpers/esm/inheritsLoose": "inheritsLoose",
-  "@babel/runtime/helpers/esm/wrapNativeSuper": "wrapNativeSuper",
-  "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose":
-    "taggedTemplateLiteralLoose",
-};
+  '@babel/runtime/helpers/esm/extends': 'extends',
+  '@babel/runtime/helpers/esm/assertThisInitialized': 'assertThisInitialized',
+  '@babel/runtime/helpers/esm/inheritsLoose': 'inheritsLoose',
+  '@babel/runtime/helpers/esm/wrapNativeSuper': 'wrapNativeSuper',
+  '@babel/runtime/helpers/esm/taggedTemplateLiteralLoose': 'taggedTemplateLiteralLoose',
+}
 
-const input = "src/index.js";
-const name = "polished";
+const input = 'src/index.js'
+const name = 'polished'
 
 const getBabelOptions = ({ useESModules }, targets) => ({
   babelrc: false,
   babelHelpers: 'runtime',
   presets: [
     [
-      "@babel/preset-env",
+      '@babel/preset-env',
       {
         loose: true,
         modules: false,
@@ -32,61 +32,49 @@ const getBabelOptions = ({ useESModules }, targets) => ({
         bugfixes: true,
       },
     ],
-    "@babel/flow",
+    '@babel/flow',
   ],
   plugins: [
-    "add-module-exports",
-    "preval",
-    [
-      "@babel/transform-runtime",
-      { useESModules },
-      ">0.5%, not dead, ie >= 11, not op_mini all",
-    ],
+    'add-module-exports',
+    'preval',
+    ['@babel/transform-runtime', { useESModules }, '>0.5%, not dead, ie >= 11, not op_mini all'],
   ],
-});
+})
 
 export default [
   {
     input,
-    output: { file: `dist/${name}.esm.js`, format: "esm" },
+    output: { file: `dist/${name}.mjs`, format: 'esm' },
     external,
-    plugins: [
-      sourceMaps(),
-      resolve(),
-      babel(getBabelOptions({ useESModules: true })),
-    ],
+    plugins: [sourceMaps(), resolve(), babel(getBabelOptions({ useESModules: true }))],
   },
   {
     input,
-    output: { file: `dist/${name}.cjs.js`, format: "cjs" },
+    output: { file: `dist/${name}.cjs.js`, format: 'cjs' },
     external,
-    plugins: [
-      sourceMaps(),
-      resolve(),
-      babel(getBabelOptions({ useESModules: false })),
-    ],
+    plugins: [sourceMaps(), resolve(), babel(getBabelOptions({ useESModules: false }))],
   },
   {
     input,
-    output: { file: `dist/${name}.js`, format: "umd", name, globals },
+    output: { file: `dist/${name}.js`, format: 'umd', name, globals },
     external,
     plugins: [
       sourceMaps(),
       resolve(),
       babel(getBabelOptions({ useESModules: true })),
-      replace({ "process.env.NODE_ENV": JSON.stringify("development") }),
+      replace({ 'process.env.NODE_ENV': JSON.stringify('development') }),
     ],
   },
   {
     input,
-    output: { file: `dist/${name}.min.js`, format: "umd", name, globals },
+    output: { file: `dist/${name}.min.js`, format: 'umd', name, globals },
     external,
     plugins: [
       sourceMaps(),
       resolve(),
       babel(getBabelOptions({ useESModules: true })),
-      replace({ "process.env.NODE_ENV": JSON.stringify("production") }),
+      replace({ 'process.env.NODE_ENV': JSON.stringify('production') }),
       terser(),
     ],
   },
-];
+]