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

.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 = `

packages/cache/package.json

@@ -4,21 +4,54 @@
   "description": "emotion's cache",
   "main": "dist/emotion-cache.cjs.js",
   "module": "dist/emotion-cache.esm.js",
-  "browser": {
-    "./dist/emotion-cache.esm.js": "./dist/emotion-cache.browser.esm.js"
-  },
   "exports": {
     ".": {
-      "module": {
-        "worker": "./dist/emotion-cache.worker.esm.js",
-        "browser": "./dist/emotion-cache.browser.esm.js",
-        "default": "./dist/emotion-cache.esm.js"
+      "types": {
+        "import": "./dist/emotion-cache.cjs.mjs",
+        "default": "./dist/emotion-cache.cjs.js"
+      },
+      "development": {
+        "worker": {
+          "module": "./dist/emotion-cache.development.worker.esm.js",
+          "import": "./dist/emotion-cache.development.worker.cjs.mjs",
+          "default": "./dist/emotion-cache.development.worker.cjs.js"
+        },
+        "browser": {
+          "module": "./dist/emotion-cache.browser.development.esm.js",
+          "import": "./dist/emotion-cache.browser.development.cjs.mjs",
+          "default": "./dist/emotion-cache.browser.development.cjs.js"
+        },
+        "module": "./dist/emotion-cache.development.esm.js",
+        "import": "./dist/emotion-cache.development.cjs.mjs",
+        "default": "./dist/emotion-cache.development.cjs.js"
+      },
+      "worker": {
+        "module": "./dist/emotion-cache.worker.esm.js",
+        "import": "./dist/emotion-cache.worker.cjs.mjs",
+        "default": "./dist/emotion-cache.worker.cjs.js"
+      },
+      "browser": {
+        "module": "./dist/emotion-cache.browser.esm.js",
+        "import": "./dist/emotion-cache.browser.cjs.mjs",
+        "default": "./dist/emotion-cache.browser.cjs.js"
       },
+      "module": "./dist/emotion-cache.esm.js",
       "import": "./dist/emotion-cache.cjs.mjs",
       "default": "./dist/emotion-cache.cjs.js"
     },
     "./package.json": "./package.json"
   },
+  "imports": {
+    "#is-development": {
+      "development": "./src/conditions/true.js",
+      "default": "./src/conditions/false.js"
+    },
+    "#is-browser": {
+      "worker": "./src/conditions/false.js",
+      "browser": "./src/conditions/true.js",
+      "default": "./src/conditions/is-browser.js"
+    }
+  },
   "types": "types/index.d.ts",
   "license": "MIT",
   "repository": "https://github.com/emotion-js/emotion/tree/main/packages/cache",
@@ -41,13 +74,5 @@
     "src",
     "dist",
     "types/*.d.ts"
-  ],
-  "preconstruct": {
-    "exports": {
-      "envConditions": [
-        "browser",
-        "worker"
-      ]
-    }
-  }
+  ]
 }

packages/cache/src/conditions/false.js

@@ -0,0 +1 @@
+export default false

packages/cache/src/conditions/is-browser.js

@@ -0,0 +1 @@
+export default typeof document !== 'undefined'

packages/cache/src/conditions/true.js

@@ -0,0 +1 @@
+export default true

packages/cache/src/index.js

@@ -10,6 +10,8 @@ import {
 } from 'stylis'
 import weakMemoize from '@emotion/weak-memoize'
 import memoize from '@emotion/memoize'
+import isDevelopment from '#is-development'
+import isBrowser from '#is-browser'
 import {
   compat,
   removeLabel,
@@ -19,8 +21,6 @@ import {
 import { prefixer } from './prefixer'
 /* import type { StylisPlugin } from './types' */
 
-let isBrowser = typeof document !== 'undefined'
-
 /*
 export type Options = {
   nonce?: string,
@@ -47,7 +47,7 @@ const defaultStylisPlugins = [prefixer]
 let createCache = (options /*: Options */) /*: EmotionCache */ => {
   let key = options.key
 
-  if (process.env.NODE_ENV !== 'production' && !key) {
+  if (isDevelopment && !key) {
     throw new Error(
       "You have to configure `key` for your cache. Please make sure it's unique (and not equal to 'css') as it's used for linking styles to your cache.\n" +
         `If multiple caches share the same key they might "fight" for each other's style elements.`
@@ -82,7 +82,7 @@ let createCache = (options /*: Options */) /*: EmotionCache */ => {
 
   const stylisPlugins = options.stylisPlugins || defaultStylisPlugins
 
-  if (process.env.NODE_ENV !== 'production') {
+  if (isDevelopment) {
     if (/[^a-z-]/.test(key)) {
       throw new Error(
         `Emotion key must only contain lower case alphabetical characters and - but "${key}" was passed`
@@ -117,7 +117,7 @@ let createCache = (options /*: Options */) /*: EmotionCache */ => {
   ) => string | void */
   const omnipresentPlugins = [compat, removeLabel]
 
-  if (process.env.NODE_ENV !== 'production') {
+  if (isDevelopment) {
     omnipresentPlugins.push(
       createUnsafeSelectorsAlarm({
         get compat() {
@@ -133,7 +133,7 @@ let createCache = (options /*: Options */) /*: EmotionCache */ => {
 
     const finalizingPlugins = [
       stringify,
-      process.env.NODE_ENV !== 'production'
+      isDevelopment
         ? element => {
             if (!element.root) {
               if (element.return) {
@@ -162,10 +162,7 @@ let createCache = (options /*: Options */) /*: EmotionCache */ => {
       shouldCache /*: boolean */
     ) /*: void */ => {
       currentSheet = sheet
-      if (
-        process.env.NODE_ENV !== 'production' &&
-        serialized.map !== undefined
-      ) {
+      if (isDevelopment && serialized.map !== undefined) {
         currentSheet = {
           insert: (rule /*: string */) => {
             sheet.insert(rule + serialized.map)
@@ -214,12 +211,7 @@ let createCache = (options /*: Options */) /*: EmotionCache */ => {
         if (shouldCache) {
           cache.inserted[name] = true
         }
-        if (
-          // using === development instead of !== production
-          // because if people do ssr in tests, the source maps showing up would be annoying
-          process.env.NODE_ENV === 'development' &&
-          serialized.map !== undefined
-        ) {
+        if (isDevelopment && serialized.map !== undefined) {
           return rules + serialized.map
         }
         return rules

packages/cache/types/resolved-condition.ts

@@ -0,0 +1 @@
+export default true as boolean

packages/cache/types/tsconfig.json

@@ -9,7 +9,11 @@
     "strict": true,
     "target": "es5",
     "typeRoots": ["../"],
-    "types": []
+    "types": [],
+    "paths": {
+      "#is-browser": ["./types/resolved-condition.ts"],
+      "#is-development": ["./types/resolved-condition.ts"]
+    }
   },
   "include": ["./*.ts", "./*.tsx"]
 }

packages/css-prettifier/package.json

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

packages/css/package.json

@@ -43,11 +43,29 @@
   "umd:main": "dist/emotion-css.umd.min.js",
   "exports": {
     ".": {
+      "types": {
+        "import": "./dist/emotion-css.cjs.mjs",
+        "default": "./dist/emotion-css.cjs.js"
+      },
+      "development": {
+        "module": "./dist/emotion-css.development.esm.js",
+        "import": "./dist/emotion-css.development.cjs.mjs",
+        "default": "./dist/emotion-css.development.cjs.js"
+      },
       "module": "./dist/emotion-css.esm.js",
       "import": "./dist/emotion-css.cjs.mjs",
       "default": "./dist/emotion-css.cjs.js"
     },
     "./create-instance": {
+      "types": {
+        "import": "./create-instance/dist/emotion-css-create-instance.cjs.mjs",
+        "default": "./create-instance/dist/emotion-css-create-instance.cjs.js"
+      },
+      "development": {
+        "module": "./create-instance/dist/emotion-css-create-instance.development.esm.js",
+        "import": "./create-instance/dist/emotion-css-create-instance.development.cjs.mjs",
+        "default": "./create-instance/dist/emotion-css-create-instance.development.cjs.js"
+      },
       "module": "./create-instance/dist/emotion-css-create-instance.esm.js",
       "import": "./create-instance/dist/emotion-css-create-instance.cjs.mjs",
       "default": "./create-instance/dist/emotion-css-create-instance.cjs.js"
@@ -61,6 +79,12 @@
       "default": "./macro.js"
     }
   },
+  "imports": {
+    "#is-development": {
+      "development": "./src/conditions/true.ts",
+      "default": "./src/conditions/false.ts"
+    }
+  },
   "preconstruct": {
     "umdName": "emotion",
     "entrypoints": [

packages/css/src/conditions/false.ts

@@ -0,0 +1 @@
+export default false as boolean

packages/css/src/conditions/true.ts

@@ -0,0 +1 @@
+export default true as boolean