Update Preconstruct and use import conditions (#3198)

* Update Preconstruct and use import conditions

* remove is-development redundant conditions

* is-browser condition

* default is-browser to a runtime check

* remove top-level browser fields

* remove top-level browser entries from extra entrypoints

* remove yet another top-level browser field from an entrypoint

* remove yet another top-level browser field from an entrypoint

* use modern moduleResolution

* fixes site config

* add paths to handle older ts versions in type tests

* fix dtslint, hopefully

* use development condiiton by default in tests

* try to run without the browser condition

* add prod tests

* fix gate types

* hijack insertedRules

* changesets

Author: Andarist

.changeset/tiny-jeans-check.md

@@ -0,0 +1,17 @@
+---
+'@emotion/cache': minor
+'@emotion/css': minor
+'@emotion/primitives-core': minor
+'@emotion/react': minor
+'@emotion/serialize': minor
+'@emotion/sheet': minor
+'@emotion/styled': minor
+'@emotion/use-insertion-effect-with-fallbacks': minor
+'@emotion/utils': minor
+---
+
+Migrated away from relying on `process.env.NODE_ENV` checks to differentiate between production and development builds.
+
+Development builds (and other environment-specific builds) can be used by using proper conditions (see [here](https://nodejs.org/docs/v20.15.1/api/packages.html#resolving-user-conditions)). Most modern bundlers/frameworks already preconfigure those for the user so no action has to be taken.
+
+Default files should continue to work in all environments.

.changeset/witty-guests-care.md

@@ -0,0 +1,5 @@
+---
+'@emotion/jest': minor
+---
+
+Adjustments to how speedy rules are obtained by the plugin.

.github/workflows/main.yml

@@ -51,6 +51,16 @@ jobs:
       - name: Run Tests with React 18
         run: yarn test:react18:ci
 
+  test_prod:
+    name: Test Prod
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/ci-setup
+
+      - name: Prod Tests
+        run: yarn test:prod
+
   test_dist:
     name: Test Dist
     runs-on: ubuntu-latest
@@ -59,7 +69,7 @@ jobs:
       - uses: ./.github/actions/ci-setup
 
       - name: Dist Tests
-        run: yarn test:prod
+        run: yarn test:dist
 
   linting:
     name: Linting

jest.config.js

@@ -1,5 +1,8 @@
 module.exports = {
   testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    customExportConditions: ['development']
+  },
   transform: {
     '^.+\\.(tsx|ts|js)?$': 'babel-jest'
   },
@@ -13,7 +16,7 @@ module.exports = {
     '/site/',
     '/types/'
   ],
-  setupFilesAfterEnv: ['<rootDir>/test/testSetup.js'],
+  setupFilesAfterEnv: ['test-utils/testSetup.js'],
   coveragePathIgnorePatterns: [
     '/node_modules/',
     '<rootDir>/packages/babel-plugin/test/util.js'

jest.prod.js

@@ -0,0 +1,11 @@
+const baseConfig = require('./jest.config.js')
+
+module.exports = Object.assign({}, baseConfig, {
+  testEnvironmentOptions: {
+    ...baseConfig.testEnvironmentOptions,
+    customExportConditions:
+      baseConfig.testEnvironmentOptions.customExportConditions.filter(
+        c => c !== 'development'
+      )
+  }
+})

package.json

@@ -13,7 +13,8 @@
     "test:typescript": "yarn workspaces foreach --verbose --exclude emotion-monorepo run test:typescript",
     "test:ci": "jest --coverage --no-cache --ci --runInBand",
     "test:react18:ci": "yarn test:react18 --coverage --no-cache --ci --runInBand",
-    "test:prod": "yarn build && jest -c jest.dist.js --no-cache --ci --runInBand",
+    "test:dist": "yarn build && jest -c jest.dist.js --no-cache --ci --runInBand",
+    "test:prod": "jest -c jest.prod.js --no-cache --ci --runInBand",
     "lint:check": "eslint .",
     "test:watch": "jest --watch",
     "size": "bundlesize",
@@ -131,6 +132,9 @@
     },
     "exports": {
       "importConditionDefaultExport": "default"
+    },
+    "___experimentalFlags_WILL_CHANGE_IN_PATCH": {
+      "importsConditions": true
     }
   },
   "bugs": {
@@ -180,7 +184,7 @@
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.7",
     "@manypkg/cli": "^0.19.1",
-    "@preconstruct/cli": "^2.6.2",
+    "@preconstruct/cli": "^2.8.4",
     "@testing-library/react": "13.0.0-alpha.5",
     "@types/jest": "^29.5.12",
     "@types/node": "^12.20.37",

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

@@ -6,6 +6,10 @@
   "module": "dist/emotion-babel-plugin-jsx-pragmatic.esm.js",
   "exports": {
     ".": {
+      "types": {
+        "import": "./dist/emotion-babel-plugin-jsx-pragmatic.cjs.mjs",
+        "default": "./dist/emotion-babel-plugin-jsx-pragmatic.cjs.js"
+      },
       "module": "./dist/emotion-babel-plugin-jsx-pragmatic.esm.js",
       "import": "./dist/emotion-babel-plugin-jsx-pragmatic.cjs.mjs",
       "default": "./dist/emotion-babel-plugin-jsx-pragmatic.cjs.js"

packages/babel-plugin/package.json

@@ -6,6 +6,10 @@
   "module": "dist/emotion-babel-plugin.esm.js",
   "exports": {
     ".": {
+      "types": {
+        "import": "./dist/emotion-babel-plugin.cjs.mjs",
+        "default": "./dist/emotion-babel-plugin.cjs.js"
+      },
       "module": "./dist/emotion-babel-plugin.esm.js",
       "import": "./dist/emotion-babel-plugin.cjs.mjs",
       "default": "./dist/emotion-babel-plugin.cjs.js"

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

@@ -6,6 +6,10 @@
   "module": "dist/emotion-babel-preset-css-prop.esm.js",
   "exports": {
     ".": {
+      "types": {
+        "import": "./dist/emotion-babel-preset-css-prop.cjs.mjs",
+        "default": "./dist/emotion-babel-preset-css-prop.cjs.js"
+      },
       "module": "./dist/emotion-babel-preset-css-prop.esm.js",
       "import": "./dist/emotion-babel-preset-css-prop.cjs.mjs",
       "default": "./dist/emotion-babel-preset-css-prop.cjs.js"

packages/cache/__tests__/index.js

@@ -11,7 +11,7 @@ test('throws correct error with invalid key', () => {
   }).toThrowErrorMatchingSnapshot()
 })
 
-it('should accept insertionPoint option', () => {
+test('should accept insertionPoint option', () => {
   const head = safeQuerySelector('head')
 
   head.innerHTML = `
@@ -34,7 +34,7 @@ it('should accept insertionPoint option', () => {
   expect(document.head).toMatchSnapshot()
 })
 
-it('should accept container option', () => {
+test('should accept container option', () => {
   const body = safeQuerySelector('body')
 
   body.innerHTML = `