Create an ESM version of the package

Author: elchininet

.gitignore

@@ -2,11 +2,7 @@ node_modules/
 dist/
 .DS_Store
 coverage/
-/@types/
-/constants/
-/data/
-/parsers/
-/utilities/
+/esm/
 /index.d.ts
 /index.js
 /options.d.ts

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [3.5.4] - 2022-03-26
+
+- Build the package bundle using rollup and created an ESM version of the package
+
 ## [3.5.3] - 2022-03-11
 
 - Fixed a bug that was removing rules without declarations but with atRules

README.md

@@ -64,9 +64,7 @@ const { postcssRTLCSS, Mode, Source, Autorename } = require('postcss-rtlcss');
 ```javascript
 import postcss from 'postcss';
 import postcssRTLCSS from 'postcss-rtlcss';
-import postcssRTLCSSOptions from 'postcss-rtlcss/options';
-
-const { Mode, Source, Autorename } = postcssRTLCSSOptions;
+import { Mode, Source, Autorename } from 'postcss-rtlcss/options';
 
 const options = { ... available options ... };
 const result = postcss([

config.replace.js

@@ -0,0 +1,5 @@
+module.exports = {
+    files: 'index.d.ts',
+    from: /declare namespace[^}]*\}[^}]*\};/g,
+    to: '\nexport = postcssRTLCSS',
+};

package.esm.json

@@ -0,0 +1,3 @@
+{
+    "type": "module"
+}

package.json

@@ -14,13 +14,20 @@
     "rtlcss"
   ],
   "main": "index.js",
+  "module": "esm/index.js",
   "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./index.js",
+      "import": "./esm/index.js"
+    },
+    "./options": {
+      "require": "./options.js",
+      "import": "./esm/options.js"
+    }
+  },
   "files": [
-    "@types/**/*",
-    "constants/**/*",
-    "data/**/*",
-    "parsers/**/*",
-    "utilities/**/*",
+    "esm/**/*",
     "index.d.ts",
     "index.js",
     "options.d.ts",
@@ -29,8 +36,11 @@
   "scripts": {
     "test": "jest --clearCache && jest --verbose",
     "lint": "eslint src/**/*.ts",
-    "copy": "cp -r ./dist/. ./",
-    "build": "webpack && tsconfig-replace-paths -p tsconfig.json -s ./src -o ./dist && yarn copy",
+    "clean": "./scripts/clean.sh",
+    "copy": "./scripts/copy.sh",
+    "build-dts": "rollup --config rollup.dts.config.js",
+    "modify-dts": "replace-in-file --configFile=config.replace.js",
+    "build": "yarn clean && rollup --config rollup.config.js && yarn copy && yarn build-dts && yarn modify-dts",
     "prepare": "yarn build && yarn copy",
     "prepublishOnly": "npm run lint && npm run test",
     "version": "git add .",
@@ -46,24 +56,27 @@
     "rtlcss": "^3.5.0"
   },
   "devDependencies": {
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-typescript": "^8.3.1",
     "@types/eslint": "^8.2.2",
     "@types/jest": "^27.4.0",
     "@types/node": "^17.0.10",
     "@types/rtlcss": "^3.1.2",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
     "@typescript-eslint/parser": "^4.31.1",
-    "clean-webpack-plugin": "^4.0.0",
     "coveralls": "^3.1.1",
     "eslint": "^7.32.0",
     "eslint-plugin-jest": "^24.4.2",
     "jest": "^27.4.7",
     "postcss": "^8.3.11",
+    "replace-in-file": "^6.3.2",
+    "rollup": "^2.70.1",
+    "rollup-plugin-dts": "^4.2.0",
+    "rollup-plugin-terser": "^7.0.2",
     "ts-jest": "^27.1.3",
     "ts-loader": "^9.2.6",
-    "tsconfig-replace-paths": "^0.0.11",
-    "typescript": "4.4.4",
-    "webpack": "^5.66.0",
-    "webpack-cli": "^4.9.1"
+    "tslib": "^2.3.1",
+    "typescript": "4.4.4"
   },
   "peerDependencies": {
     "postcss": "^8.0.0"

rollup.config.js

@@ -0,0 +1,55 @@
+import typescript from '@rollup/plugin-typescript';
+import json from '@rollup/plugin-json';
+import { terser } from "rollup-plugin-terser";
+
+const getPlugins = (includeJson) => {
+    const plugins = includeJson
+        ? [
+            json()
+        ]
+        : [];
+    return [
+        ...plugins,
+        typescript({
+            tsconfig: './tsconfig.json',
+            declaration: true,
+            outDir: './'
+        }),
+        terser({
+            output: {
+                comments: false
+            }
+        })
+    ];
+};
+
+const getConfig = (name, defaults = true) => ({
+    input: `src/${name}.ts`,
+    external: [
+        'postcss',
+        'rtlcss'
+    ],
+    output: [
+        {
+            file: `dist/${name}.js`,
+            format: 'cjs',
+            exports: defaults ? 'default' : 'named'
+        },
+        {
+            file: `dist/esm/${name}.js`,
+            format: 'es',
+            exports: defaults ? 'default' : 'named'
+        }
+    ]
+});
+
+export default [
+    {
+        plugins: getPlugins(true),
+        ...getConfig('index')
+    },
+    {
+        plugins: getPlugins(),
+        ...getConfig('options', false)
+    }
+];

rollup.dts.config.js

@@ -0,0 +1,24 @@
+import dts from 'rollup-plugin-dts';
+import tsconfig from './tsconfig.json';
+
+const getConfig = (name) => ({
+    plugins: [
+        dts({
+            compilerOptions: {
+                baseUrl: './dist',
+                paths: tsconfig.compilerOptions.paths,
+            }
+        })
+    ],
+    input: `dist/${name}.d.ts`,
+    output: [
+        {
+            file: `./${name}.d.ts`
+        }
+    ]
+});
+
+export default [
+    getConfig('index'),
+    getConfig('options')
+];

scripts/clean.sh

@@ -0,0 +1,10 @@
+#! /bin/sh
+
+RIMRAF="./node_modules/rimraf/bin.js"
+
+$RIMRAF dist/
+$RIMRAF esm/
+$RIMRAF index.js
+$RIMRAF index.d.ts
+$RIMRAF options.js
+$RIMRAF options.d.ts

scripts/copy.sh

@@ -0,0 +1,14 @@
+#! /bin/sh
+
+mkdir esm
+
+## index
+cp dist/index.js index.js
+cp dist/esm/index.js esm/index.js
+
+# options
+cp dist/options.js options.js
+cp dist/esm/options.js esm/options.js
+
+# esm package
+cp package.esm.json esm/package.json