Added package.json#exports to all packages and added a worker con…

…dition where needed (#2819)

* fix spelling

* adding yarn.lock

* try again

* update preconstruct

* Update exports configs with extras

* fixed Flow task

* Add `.d.ts` reexports and enforce `preconstruct.exports` globally

* Remove unnecessary preconstruct.exports: true

* Add changesets

Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
Co-authored-by: mitchellhamilton <mitchell@hamil.town>

.changeset/seven-ways-collect.md

@@ -0,0 +1,26 @@
+---
+'@emotion/babel-plugin': minor
+'@emotion/babel-plugin-jsx-pragmatic': minor
+'@emotion/babel-preset-css-prop': minor
+'@emotion/cache': minor
+'@emotion/css': minor
+'@emotion/css-prettifier': minor
+'@emotion/eslint-plugin': minor
+'@emotion/hash': minor
+'@emotion/is-prop-valid': minor
+'@emotion/jest': minor
+'@emotion/memoize': minor
+'@emotion/native': minor
+'@emotion/primitives': minor
+'@emotion/primitives-core': minor
+'@emotion/react': minor
+'@emotion/serialize': minor
+'@emotion/server': minor
+'@emotion/sheet': minor
+'@emotion/styled': minor
+'@emotion/unitless': minor
+'@emotion/utils': minor
+'@emotion/weak-memoize': minor
+---
+
+`exports` field has been added to the `package.json` manifest. This fixes how our default exports are treated by Node.js when using their native support for ES modules. It also limits what files can be imported from a package but we've tried our best to allow importing all the files that were considered to be a part of the public API.

.changeset/wet-teachers-peel.md

@@ -0,0 +1,7 @@
+---
+'@emotion/react': minor
+'@emotion/styled': minor
+'@emotion/utils': minor
+---
+
+Thanks to the added `exports` field, the package now includes a `worker` condition that can be utilized by properly configured bundlers when targeting worker-like environments. It fixes the issue with browser-specific files being prioritized by some bundlers when targeting workers.

package.json

@@ -133,6 +133,10 @@
       "react": "React",
       "react/jsx-runtime": "ReactJSX",
       "react/jsx-dev-runtime": "ReactJSXDev"
+    },
+    "exports": true,
+    "___experimentalFlags_WILL_CHANGE_IN_PATCH": {
+      "exports": true
     }
   },
   "bugs": {
@@ -183,7 +187,7 @@
     "@changesets/changelog-github": "^0.4.0",
     "@changesets/cli": "^2.16.0",
     "@manypkg/cli": "^0.19.1",
-    "@preconstruct/cli": "^2.1.5",
+    "@preconstruct/cli": "^2.2.1",
     "@testing-library/react": "13.0.0-alpha.5",
     "@types/jest": "^27.0.3",
     "@types/node": "^12.20.37",

packages/babel-plugin-jsx-pragmatic/package.json

@@ -4,6 +4,13 @@
   "description": "Insert code to load a module corresponding to JSX pragma.",
   "main": "dist/emotion-babel-plugin-jsx-pragmatic.cjs.js",
   "module": "dist/emotion-babel-plugin-jsx-pragmatic.esm.js",
+  "exports": {
+    ".": {
+      "module": "./dist/emotion-babel-plugin-jsx-pragmatic.esm.js",
+      "default": "./dist/emotion-babel-plugin-jsx-pragmatic.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
   "license": "MIT",
   "repository": "https://github.com/emotion-js/emotion/tree/main/packages/babel-plugin-jsx-pragmatic",
   "scripts": {

packages/babel-plugin/package.json

@@ -4,6 +4,13 @@
   "description": "A recommended babel preprocessing plugin for emotion, The Next Generation of CSS-in-JS.",
   "main": "dist/emotion-babel-plugin.cjs.js",
   "module": "dist/emotion-babel-plugin.esm.js",
+  "exports": {
+    ".": {
+      "module": "./dist/emotion-babel-plugin.esm.js",
+      "default": "./dist/emotion-babel-plugin.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "src",
     "lib",

packages/babel-preset-css-prop/package.json

@@ -4,6 +4,13 @@
   "description": "A babel preset to automatically enable emotion's css prop",
   "main": "dist/emotion-babel-preset-css-prop.cjs.js",
   "module": "dist/emotion-babel-preset-css-prop.esm.js",
+  "exports": {
+    ".": {
+      "module": "./dist/emotion-babel-preset-css-prop.esm.js",
+      "default": "./dist/emotion-babel-preset-css-prop.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
   "license": "MIT",
   "repository": "https://github.com/emotion-js/emotion/tree/main/packages/babel-preset-css-prop",
   "scripts": {

packages/cache/package.json

@@ -5,9 +5,18 @@
   "main": "dist/emotion-cache.cjs.js",
   "module": "dist/emotion-cache.esm.js",
   "browser": {
-    "./dist/emotion-cache.cjs.js": "./dist/emotion-cache.browser.cjs.js",
     "./dist/emotion-cache.esm.js": "./dist/emotion-cache.browser.esm.js"
   },
+  "exports": {
+    ".": {
+      "module": {
+        "browser": "./dist/emotion-cache.browser.esm.js",
+        "default": "./dist/emotion-cache.esm.js"
+      },
+      "default": "./dist/emotion-cache.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
   "types": "types/index.d.ts",
   "license": "MIT",
   "repository": "https://github.com/emotion-js/emotion/tree/main/packages/cache",
@@ -33,5 +42,12 @@
     "src",
     "dist",
     "types/*.d.ts"
-  ]
+  ],
+  "preconstruct": {
+    "exports": {
+      "envConditions": [
+        "browser"
+      ]
+    }
+  }
 }

packages/cache/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../types'
+export { default } from '../types'

packages/css-prettifier/package.json

@@ -11,6 +11,13 @@
   "author": "Mateusz Burzyński <mateuszburzynski@gmail.com> (https://github.com/Andarist)",
   "main": "dist/emotion-css-prettifier.cjs.js",
   "module": "dist/emotion-css-prettifier.esm.js",
+  "exports": {
+    ".": {
+      "module": "./dist/emotion-css-prettifier.esm.js",
+      "default": "./dist/emotion-css-prettifier.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
   "types": "types/index.d.ts",
   "license": "MIT",
   "repository": "https://github.com/emotion-js/emotion/tree/main/packages/css-prettifier",

packages/css-prettifier/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../types'
+export { default } from '../types'

packages/css/package.json

@@ -52,11 +52,28 @@
     "url": "https://github.com/emotion-js/emotion/issues"
   },
   "umd:main": "dist/emotion-css.umd.min.js",
+  "exports": {
+    ".": {
+      "module": "./dist/emotion-css.esm.js",
+      "default": "./dist/emotion-css.cjs.js"
+    },
+    "./create-instance": {
+      "module": "./create-instance/dist/emotion-css-create-instance.esm.js",
+      "default": "./create-instance/dist/emotion-css-create-instance.cjs.js"
+    },
+    "./package.json": "./package.json",
+    "./macro": "./macro.js"
+  },
   "preconstruct": {
     "umdName": "emotion",
     "entrypoints": [
       "./index.js",
       "./create-instance.js"
-    ]
+    ],
+    "exports": {
+      "extra": {
+        "./macro": "./macro.js"
+      }
+    }
   }
 }

packages/css/src/create-instance.d.ts

@@ -0,0 +1,2 @@
+export * from '../types'
+export { default } from '../types'

packages/css/src/index.d.ts

@@ -0,0 +1 @@
+export * from '../types'

packages/eslint-plugin/package.json

@@ -13,6 +13,14 @@
   ],
   "author": "alex-pex <alexandre.paixao@stadline.com>",
   "main": "dist/emotion-eslint-plugin.cjs.js",
+  "module": "dist/emotion-eslint-plugin.esm.js",
+  "exports": {
+    ".": {
+      "module": "./dist/emotion-eslint-plugin.esm.js",
+      "default": "./dist/emotion-eslint-plugin.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
   "engines": {
     "node": ">=6"
   },

packages/hash/package.json

@@ -22,8 +22,11 @@
     "@definitelytyped/dtslint": "0.0.112",
     "typescript": "^4.5.5"
   },
-  "browser": {
-    "./dist/emotion-hash.cjs.js": "./dist/emotion-hash.browser.cjs.js",
-    "./dist/emotion-hash.esm.js": "./dist/emotion-hash.browser.esm.js"
+  "exports": {
+    ".": {
+      "module": "./dist/emotion-hash.esm.js",
+      "default": "./dist/emotion-hash.cjs.js"
+    },
+    "./package.json": "./package.json"
   }
 }

packages/hash/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../types'
+export { default } from '../types'

packages/is-prop-valid/package.json

@@ -25,8 +25,11 @@
     "dist",
     "types/*.d.ts"
   ],
-  "browser": {
-    "./dist/emotion-is-prop-valid.cjs.js": "./dist/emotion-is-prop-valid.browser.cjs.js",
-    "./dist/emotion-is-prop-valid.esm.js": "./dist/emotion-is-prop-valid.browser.esm.js"
+  "exports": {
+    ".": {
+      "module": "./dist/emotion-is-prop-valid.esm.js",
+      "default": "./dist/emotion-is-prop-valid.cjs.js"
+    },
+    "./package.json": "./package.json"
   }
 }

packages/is-prop-valid/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../types'
+export { default } from '../types'

packages/jest/package.json

@@ -4,6 +4,25 @@
   "description": "Jest utilities for emotion",
   "main": "dist/emotion-jest.cjs.js",
   "module": "dist/emotion-jest.esm.js",
+  "exports": {
+    ".": {
+      "module": "./dist/emotion-jest.esm.js",
+      "default": "./dist/emotion-jest.cjs.js"
+    },
+    "./enzyme": {
+      "module": "./enzyme/dist/emotion-jest-enzyme.esm.js",
+      "default": "./enzyme/dist/emotion-jest-enzyme.cjs.js"
+    },
+    "./serializer": {
+      "module": "./serializer/dist/emotion-jest-serializer.esm.js",
+      "default": "./serializer/dist/emotion-jest-serializer.cjs.js"
+    },
+    "./enzyme-serializer": {
+      "module": "./enzyme-serializer/dist/emotion-jest-enzyme-serializer.esm.js",
+      "default": "./enzyme-serializer/dist/emotion-jest-enzyme-serializer.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
   "types": "types/index.d.ts",
   "files": [
     "src",

packages/jest/src/enzyme-serializer.d.ts

@@ -0,0 +1 @@
+export * from '../types/enzyme-serializer'

packages/jest/src/enzyme.d.ts

@@ -0,0 +1 @@
+export * from '../types/enzyme'

packages/jest/src/index.d.ts

@@ -0,0 +1 @@
+export * from '../types'

packages/jest/src/serializer.d.ts

@@ -0,0 +1 @@
+export * from '../types/serializer'

packages/memoize/package.json

@@ -22,8 +22,11 @@
     "dist",
     "types/*.d.ts"
   ],
-  "browser": {
-    "./dist/emotion-memoize.cjs.js": "./dist/emotion-memoize.browser.cjs.js",
-    "./dist/emotion-memoize.esm.js": "./dist/emotion-memoize.browser.esm.js"
+  "exports": {
+    ".": {
+      "module": "./dist/emotion-memoize.esm.js",
+      "default": "./dist/emotion-memoize.cjs.js"
+    },
+    "./package.json": "./package.json"
   }
 }

packages/memoize/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../types'
+export { default } from '../types'

packages/native/package.json

@@ -4,6 +4,14 @@
   "description": "Style and render React Native components using emotion",
   "main": "dist/emotion-native.cjs.js",
   "module": "dist/emotion-native.esm.js",
+  "exports": {
+    ".": {
+      "module": "./dist/emotion-native.esm.js",
+      "default": "./dist/emotion-native.cjs.js"
+    },
+    "./package.json": "./package.json",
+    "./macro": "./macro.js"
+  },
   "scripts": {
     "test:typescript": "dtslint types"
   },
@@ -51,8 +59,11 @@
   "publishConfig": {
     "access": "public"
   },
-  "browser": {
-    "./dist/emotion-native.cjs.js": "./dist/emotion-native.browser.cjs.js",
-    "./dist/emotion-native.esm.js": "./dist/emotion-native.browser.esm.js"
+  "preconstruct": {
+    "exports": {
+      "extra": {
+        "./macro": "./macro.js"
+      }
+    }
   }
 }

packages/native/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../types'
+export { default } from '../types'

packages/native/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "lib": ["es6", "dom"],
+    "module": "commonjs",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "target": "es5",
+    "types": []
+  }
+}

packages/primitives-core/package.json

@@ -41,7 +41,23 @@
     "access": "public"
   },
   "browser": {
-    "./dist/emotion-primitives-core.cjs.js": "./dist/emotion-primitives-core.browser.cjs.js",
     "./dist/emotion-primitives-core.esm.js": "./dist/emotion-primitives-core.browser.esm.js"
+  },
+  "exports": {
+    ".": {
+      "module": {
+        "browser": "./dist/emotion-primitives-core.browser.esm.js",
+        "default": "./dist/emotion-primitives-core.esm.js"
+      },
+      "default": "./dist/emotion-primitives-core.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "preconstruct": {
+    "exports": {
+      "envConditions": [
+        "browser"
+      ]
+    }
   }
 }

packages/primitives/package.json

@@ -51,7 +51,27 @@
     "access": "public"
   },
   "browser": {
-    "./dist/emotion-primitives.cjs.js": "./dist/emotion-primitives.browser.cjs.js",
     "./dist/emotion-primitives.esm.js": "./dist/emotion-primitives.browser.esm.js"
+  },
+  "exports": {
+    ".": {
+      "module": {
+        "browser": "./dist/emotion-primitives.browser.esm.js",
+        "default": "./dist/emotion-primitives.esm.js"
+      },
+      "default": "./dist/emotion-primitives.cjs.js"
+    },
+    "./package.json": "./package.json",
+    "./macro": "./macro.js"
+  },
+  "preconstruct": {
+    "exports": {
+      "extra": {
+        "./macro": "./macro.js"
+      },
+      "envConditions": [
+        "browser"
+      ]
+    }
   }
 }