Merge pull request #2817 from teamleadercrm/revert-remove-cjs

Revert removal of CommonJS build

.babelrc

@@ -2,6 +2,10 @@
   "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
   "plugins": ["@babel/plugin-transform-runtime"],
   "env": {
+    "cjs": {
+      "plugins": ["transform-react-remove-prop-types"],
+      "ignore": ["**/*.stories.tsx", "**/*.spec.tsx", "**/*.spec.ts", "./src/static/**/*"]
+    },
     "es": {
       "plugins": ["transform-react-remove-prop-types"],
       "presets": [

.gitignore

@@ -1,4 +1,5 @@
 es
+cjs
 coverage
 dist
 

CHANGELOG.md

@@ -6,6 +6,8 @@
 
 ### Changed
 
+- [BREAKING] Reverted the removal of the CommonJS build from previous version ([@lowiebenoot](https://github.com/lowiebenoot)) in [#2817](https://github.com/teamleadercrm/ui/pull/2817)
+
 ### Deprecated
 
 ### Removed

README.md

@@ -31,15 +31,13 @@ ReactDOM.render(<Button label="Hello World!" />, document.getElementById('app'))
 Import the CSS into your project via JS or CSS.
 
 JS
-
 ```js
-import '@teamleader/ui/dist/index.css';
+import '@teamleader/ui/es/index.css';
 ```
 
 or CSS
-
 ```css
-@import url('@teamleader/ui/dist/index.css');
+@import url('@teamleader/ui/es/index.css');
 ```
 
 ## Browser support

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "24.0.0",
+  "version": "25.0.0",
   "author": "Teamleader <development@teamleader.eu>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"
@@ -22,6 +22,8 @@
     "Joren Saey <joren.saey@teamleader.eu>"
   ],
   "files": [
+    "cjs",
+    "es",
     "postcss.config.js",
     "dist"
   ],
@@ -159,7 +161,8 @@
     "ui"
   ],
   "license": "MIT",
-  "module": "dist/index.js",
+  "main": "cjs/index.js",
+  "module": "es/index.js",
   "engines": {
     "node": "^14.15.0 || >=16"
   },
@@ -168,13 +171,16 @@
     "url": "git+https://github.com/teamleadercrm/ui.git"
   },
   "sideEffects": [
-    "dist/**/*.css"
+    "cjs/**/*.css",
+    "es/**/*.css"
   ],
   "browserslist": ">0.5%, not op_mini all",
   "scripts": {
-    "build:css": "postcss ./src/**/*.css --base src --dir ./dist",
-    "build:js": "NODE_ENV=es babel src --extensions '.js,.ts,.tsx' --out-dir dist",
-    "build": "rimraf dist && yarn build-types && yarn build:css && yarn build:js",
+    "build:css": "postcss ./src/**/*.css --base src --dir ./es && cp -R ./es ./cjs",
+    "build:js": "yarn build:es; yarn build:cjs",
+    "build:cjs": "NODE_ENV=cjs babel src --extensions '.js,.ts,.tsx' --out-dir cjs",
+    "build:es": "NODE_ENV=es babel src --extensions '.js,.ts,.tsx' --out-dir es",
+    "build": "rimraf es && rimraf cjs && rimraf ./dist/types && yarn build-types && yarn build:css && yarn build:js",
     "compile": "storybook build -o dist",
     "lint:clean": "yarn lint && rimraf dist",
     "deploy:prod": "yarn lint:clean && NODE_ENV=production yarn compile",