Create an ESM version of the package

.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

src/data/store.ts

@@ -15,7 +15,6 @@ import {
     StringMap,
     PluginStringMap
 } from '@types';
-import { getKeyFramesStringMap, getKeyFramesRegExp } from '@parsers/atrules';
 import {
     BOOLEAN_TYPE,
     REG_EXP_CHARACTERS_REG_EXP,
@@ -154,7 +153,7 @@ const store: Store = {
     rulesPrefixRegExp: defaultRegExp
 };
 
-export const normalizeOptions = (options: PluginOptions): PluginOptionsNormalized => {
+const normalizeOptions = (options: PluginOptions): PluginOptionsNormalized => {
     const returnOptions: PluginOptionsNormalized = {...defaultOptions()};
     if (options.mode && ModeValuesArray.includes(options.mode)) {
         returnOptions.mode = options.mode;
@@ -223,6 +222,19 @@ const initStore = (options: PluginOptions): void => {
     store.rulesPrefixRegExp = createRulesPrefixesRegExp(store.options);
 };
 
+const getKeyFramesStringMap = (keyframes: AtRulesObject[]): AtRulesStringMap => {    
+    const stringMap: AtRulesStringMap = {};    
+    keyframes.forEach((obj: AtRulesObject): void => {
+        stringMap[obj.atRuleParams] = {
+            name: obj.atRule.params,
+            nameFlipped: obj.atRuleFlipped.params
+        };
+    });
+    return stringMap;
+};
+
+const getKeyFramesRegExp = (stringMap: AtRulesStringMap): RegExp => new RegExp(`(^|[^\\w-]| )(${ Object.keys(stringMap).join('|') })( |[^\\w-]|$)`, 'g');
+
 const initKeyframesData = (): void => {
     store.keyframesStringMap = getKeyFramesStringMap(store.keyframes);
     store.keyframesRegExp = getKeyFramesRegExp(store.keyframesStringMap);

src/index.ts

@@ -5,18 +5,20 @@ import { parseKeyFrames, parseAtRules } from '@parsers/atrules';
 import { parseRules } from '@parsers/rules';
 import { appendRules, appendKeyFrames, appendAutorenameRules } from '@utilities/rules';
 
-const postcssRTLCSS = (options: PluginOptions = {}): Plugin => ({
-    postcssPlugin: 'postcss-rtlcss',
-    Once(css: Root): void {
-        initStore(options);
-        parseKeyFrames(css);
-        parseAtRules(css);
-        parseRules(css);
-        appendRules();
-        appendKeyFrames();
-        appendAutorenameRules();
-    }
-});
+function postcssRTLCSS (options: PluginOptions = {}): Plugin {
+    return ({
+        postcssPlugin: 'postcss-rtlcss',
+        Once(css: Root): void {
+            initStore(options);
+            parseKeyFrames(css);
+            parseAtRules(css);
+            parseRules(css);
+            appendRules();
+            appendKeyFrames();
+            appendAutorenameRules();
+        }
+    });
+};
 
 postcssRTLCSS.postcss = true;
 

src/options.ts

@@ -1,6 +1,6 @@
 import { Mode, Source, Autorename } from '@types';
 
-export default {
+export {
     Mode,
     Source,
     Autorename

src/parsers/atrules.ts

@@ -1,8 +1,19 @@
 import postcss, { Root, Container, Node, AtRule, Comment } from 'postcss';
 import rtlcss from 'rtlcss';
-import { AtRulesObject, AtRulesStringMap, Source, ControlDirective } from '@types';
-import { AT_RULE_TYPE, RULE_TYPE, KEYFRAMES_NAME, CONTROL_DIRECTIVE } from '@constants';
-import { store, initKeyframesData } from '@data/store';
+import {
+    Source,
+    ControlDirective
+} from '@types';
+import {
+    AT_RULE_TYPE,
+    RULE_TYPE,
+    KEYFRAMES_NAME,
+    CONTROL_DIRECTIVE
+} from '@constants';
+import {
+    store,
+    initKeyframesData
+} from '@data/store';
 import { walkContainer } from '@utilities/containers';
 import {
     isIgnoreDirectiveInsideAnIgnoreBlock,
@@ -12,19 +23,6 @@ import {
 import { vendor } from '@utilities/vendor';
 import { parseRules } from '@parsers/rules';
 
-export const getKeyFramesStringMap = (keyframes: AtRulesObject[]): AtRulesStringMap => {    
-    const stringMap: AtRulesStringMap = {};    
-    keyframes.forEach((obj: AtRulesObject): void => {
-        stringMap[obj.atRuleParams] = {
-            name: obj.atRule.params,
-            nameFlipped: obj.atRuleFlipped.params
-        };
-    });
-    return stringMap;
-};
-
-export const getKeyFramesRegExp = (stringMap: AtRulesStringMap): RegExp => new RegExp(`(^|[^\\w-]| )(${ Object.keys(stringMap).join('|') })( |[^\\w-]|$)`, 'g');
-
 export const parseAtRules = (container: Container): void => {
 
     const controlDirectives: Record<string, ControlDirective> = {};

tsconfig.json

@@ -1,7 +1,7 @@
 {
     "compilerOptions": {
       "outDir": "./dist/",
-      "module": "commonjs",
+      "module": "esnext",
       "target": "ES5",
       "moduleResolution": "node",
       "esModuleInterop": true,