diff --git a/.changeset/tiny-jeans-check.md b/.changeset/tiny-jeans-check.md new file mode 100644 index 000000000..760085f50 --- /dev/null +++ b/.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. diff --git a/.changeset/witty-guests-care.md b/.changeset/witty-guests-care.md new file mode 100644 index 000000000..32656eef3 --- /dev/null +++ b/.changeset/witty-guests-care.md @@ -0,0 +1,5 @@ +--- +'@emotion/jest': minor +--- + +Adjustments to how speedy rules are obtained by the plugin. diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index e39a445c3..b6be13eb6 100644 --- a/.github/workflows/main.yml +++ b/.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 diff --git a/jest.config.js b/jest.config.js index 1b3ba8816..8cdef5fdd 100644 --- a/jest.config.js +++ b/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: ['/test/testSetup.js'], + setupFilesAfterEnv: ['test-utils/testSetup.js'], coveragePathIgnorePatterns: [ '/node_modules/', '/packages/babel-plugin/test/util.js' diff --git a/jest.prod.js b/jest.prod.js new file mode 100644 index 000000000..291ae961d --- /dev/null +++ b/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' + ) + } +}) diff --git a/package.json b/package.json index c7be03a24..d061b9e54 100644 --- a/package.json +++ b/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", diff --git a/packages/babel-plugin-jsx-pragmatic/package.json b/packages/babel-plugin-jsx-pragmatic/package.json index 8e222c317..71b4cafea 100644 --- a/packages/babel-plugin-jsx-pragmatic/package.json +++ b/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" diff --git a/packages/babel-plugin/package.json b/packages/babel-plugin/package.json index 74d4e45c1..32805b41c 100644 --- a/packages/babel-plugin/package.json +++ b/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" diff --git a/packages/babel-preset-css-prop/package.json b/packages/babel-preset-css-prop/package.json index 3286ee3b3..de03d4ee0 100644 --- a/packages/babel-preset-css-prop/package.json +++ b/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" diff --git a/packages/cache/__tests__/index.js b/packages/cache/__tests__/index.js index d89af730b..931c50687 100644 --- a/packages/cache/__tests__/index.js +++ b/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 = ` diff --git a/packages/cache/package.json b/packages/cache/package.json index dfd7518c4..939dec3d8 100644 --- a/packages/cache/package.json +++ b/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" - ] - } - } + ] } diff --git a/packages/cache/src/conditions/false.js b/packages/cache/src/conditions/false.js new file mode 100644 index 000000000..2693369b4 --- /dev/null +++ b/packages/cache/src/conditions/false.js @@ -0,0 +1 @@ +export default false diff --git a/packages/cache/src/conditions/is-browser.js b/packages/cache/src/conditions/is-browser.js new file mode 100644 index 000000000..12bdad68f --- /dev/null +++ b/packages/cache/src/conditions/is-browser.js @@ -0,0 +1 @@ +export default typeof document !== 'undefined' diff --git a/packages/cache/src/conditions/true.js b/packages/cache/src/conditions/true.js new file mode 100644 index 000000000..186b12075 --- /dev/null +++ b/packages/cache/src/conditions/true.js @@ -0,0 +1 @@ +export default true diff --git a/packages/cache/src/index.js b/packages/cache/src/index.js index 82378f02b..efd70ae8f 100644 --- a/packages/cache/src/index.js +++ b/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 diff --git a/packages/cache/types/resolved-condition.ts b/packages/cache/types/resolved-condition.ts new file mode 100644 index 000000000..e8abb53e2 --- /dev/null +++ b/packages/cache/types/resolved-condition.ts @@ -0,0 +1 @@ +export default true as boolean diff --git a/packages/cache/types/tsconfig.json b/packages/cache/types/tsconfig.json index 4b5665bfd..34bf72c65 100644 --- a/packages/cache/types/tsconfig.json +++ b/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"] } diff --git a/packages/css-prettifier/package.json b/packages/css-prettifier/package.json index 60ce012b4..c025d598b 100644 --- a/packages/css-prettifier/package.json +++ b/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" diff --git a/packages/css/package.json b/packages/css/package.json index 5168d7af8..09b69a7ce 100644 --- a/packages/css/package.json +++ b/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": [ diff --git a/packages/css/src/conditions/false.ts b/packages/css/src/conditions/false.ts new file mode 100644 index 000000000..44fe92002 --- /dev/null +++ b/packages/css/src/conditions/false.ts @@ -0,0 +1 @@ +export default false as boolean diff --git a/packages/css/src/conditions/true.ts b/packages/css/src/conditions/true.ts new file mode 100644 index 000000000..e8abb53e2 --- /dev/null +++ b/packages/css/src/conditions/true.ts @@ -0,0 +1 @@ +export default true as boolean diff --git a/packages/css/src/create-instance.ts b/packages/css/src/create-instance.ts index 2bf7cc281..09b6b3778 100644 --- a/packages/css/src/create-instance.ts +++ b/packages/css/src/create-instance.ts @@ -12,6 +12,7 @@ import { } from '@emotion/utils' import { EmotionCache, Options } from '@emotion/cache' import { StyleSheet } from '@emotion/sheet' +import isDevelopment from '#is-development' export type { CSSInterpolation, @@ -91,7 +92,7 @@ let createEmotion = (options: Options): Emotion => { let cache = createCache(options) ;(cache.sheet as CSSStyleSheet).speedy = function (value: boolean) { - if (process.env.NODE_ENV !== 'production' && this.ctr !== 0) { + if (isDevelopment && this.ctr !== 0) { throw new Error('speedy must be changed before any rules are inserted') } this.isSpeedy = value diff --git a/packages/css/test/no-babel/warnings.test.js b/packages/css/test/no-babel/warnings.test.js index 67cbc5e9e..533e08a4e 100644 --- a/packages/css/test/no-babel/warnings.test.js +++ b/packages/css/test/no-babel/warnings.test.js @@ -7,7 +7,7 @@ afterEach(() => { jest.clearAllMocks() }) -it('warns about illegal escape sequences inside first quasi of template literal', () => { +test('warns about illegal escape sequences inside first quasi of template literal', () => { css` :before { content: '\00d7'; @@ -24,7 +24,7 @@ it('warns about illegal escape sequences inside first quasi of template literal' `) }) -it('warns about illegal escape sequences inside non-first quasi of template literal', () => { +test('warns about illegal escape sequences inside non-first quasi of template literal', () => { const color = `color: hotpink` css` background-color: black; diff --git a/packages/css/test/warnings.test.js b/packages/css/test/warnings.test.js index 0996161b1..a692085a7 100644 --- a/packages/css/test/warnings.test.js +++ b/packages/css/test/warnings.test.js @@ -34,7 +34,7 @@ afterEach(() => { jest.clearAllMocks() }) -it('does not warn when valid values are passed for the content property', () => { +test('does not warn when valid values are passed for the content property', () => { const cls = css(validValues.map(value => ({ content: value }))) expect(console.error).not.toBeCalled() expect(renderer.create(
).toJSON()).toMatchSnapshot() @@ -42,7 +42,7 @@ it('does not warn when valid values are passed for the content property', () => const invalidValues = ['this is not valid', ''] -it('does warn when invalid values are passed for the content property', () => { +test('does warn when invalid values are passed for the content property', () => { invalidValues.forEach(value => { expect(() => renderer.create(
) @@ -52,14 +52,14 @@ it('does warn when invalid values are passed for the content property', () => { }) }) -it('does warn when functions are passed to css calls', () => { +test('does warn when functions are passed to css calls', () => { css(() => 'color:hotpink;') expect(console.error).toBeCalledWith( "Functions that are interpolated in css calls will be stringified.\nIf you want to have a css call based on props, create a function that returns a css call like this\nlet dynamicStyle = (props) => css`color: ${props.color}`\nIt can be called directly with props or interpolated in a styled call like this\nlet SomeComponent = styled('div')`${dynamicStyle}`" ) }) -it('does warn when @import rule is being inserted after order-insensitive rules', () => { +test('does warn when @import rule is being inserted after order-insensitive rules', () => { const { injectGlobal } = createCss({ key: 'import-after-regular' }) injectGlobal`.thing {display:flex;}` diff --git a/packages/css/types/tsconfig.json b/packages/css/types/tsconfig.json index 4b5665bfd..66469a7f3 100644 --- a/packages/css/types/tsconfig.json +++ b/packages/css/types/tsconfig.json @@ -9,7 +9,11 @@ "strict": true, "target": "es5", "typeRoots": ["../"], - "types": [] + "types": [], + "paths": { + "#is-browser": ["./src/conditions/true.ts"], + "#is-development": ["./src/conditions/true.ts"] + } }, "include": ["./*.ts", "./*.tsx"] } diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json index d28884c59..8674d6f7b 100644 --- a/packages/eslint-plugin/package.json +++ b/packages/eslint-plugin/package.json @@ -13,6 +13,10 @@ "module": "dist/emotion-eslint-plugin.esm.js", "exports": { ".": { + "types": { + "import": "./dist/emotion-eslint-plugin.cjs.mjs", + "default": "./dist/emotion-eslint-plugin.cjs.js" + }, "module": "./dist/emotion-eslint-plugin.esm.js", "import": "./dist/emotion-eslint-plugin.cjs.mjs", "default": "./dist/emotion-eslint-plugin.cjs.js" diff --git a/packages/hash/__tests__/index.js b/packages/hash/__tests__/index.js index 17532e38d..741406af3 100644 --- a/packages/hash/__tests__/index.js +++ b/packages/hash/__tests__/index.js @@ -1,5 +1,5 @@ import hash from '@emotion/hash' -it('accepts a string and returns a string as a hash', () => { +test('accepts a string and returns a string as a hash', () => { expect(hash('something')).toBe('crsxd7') }) diff --git a/packages/hash/package.json b/packages/hash/package.json index 1e6756c58..41ad19642 100644 --- a/packages/hash/package.json +++ b/packages/hash/package.json @@ -20,6 +20,10 @@ }, "exports": { ".": { + "types": { + "import": "./dist/emotion-hash.cjs.mjs", + "default": "./dist/emotion-hash.cjs.js" + }, "module": "./dist/emotion-hash.esm.js", "import": "./dist/emotion-hash.cjs.mjs", "default": "./dist/emotion-hash.cjs.js" diff --git a/packages/is-prop-valid/package.json b/packages/is-prop-valid/package.json index 02beaf4f3..243509480 100644 --- a/packages/is-prop-valid/package.json +++ b/packages/is-prop-valid/package.json @@ -26,6 +26,10 @@ ], "exports": { ".": { + "types": { + "import": "./dist/emotion-is-prop-valid.cjs.mjs", + "default": "./dist/emotion-is-prop-valid.cjs.js" + }, "module": "./dist/emotion-is-prop-valid.esm.js", "import": "./dist/emotion-is-prop-valid.cjs.mjs", "default": "./dist/emotion-is-prop-valid.cjs.js" diff --git a/packages/jest/package.json b/packages/jest/package.json index 0a3baf939..8275f7e6d 100644 --- a/packages/jest/package.json +++ b/packages/jest/package.json @@ -6,21 +6,37 @@ "module": "dist/emotion-jest.esm.js", "exports": { ".": { + "types": { + "import": "./dist/emotion-jest.cjs.mjs", + "default": "./dist/emotion-jest.cjs.js" + }, "module": "./dist/emotion-jest.esm.js", "import": "./dist/emotion-jest.cjs.mjs", "default": "./dist/emotion-jest.cjs.js" }, "./enzyme": { + "types": { + "import": "./enzyme/dist/emotion-jest-enzyme.cjs.mjs", + "default": "./enzyme/dist/emotion-jest-enzyme.cjs.js" + }, "module": "./enzyme/dist/emotion-jest-enzyme.esm.js", "import": "./enzyme/dist/emotion-jest-enzyme.cjs.mjs", "default": "./enzyme/dist/emotion-jest-enzyme.cjs.js" }, "./serializer": { + "types": { + "import": "./serializer/dist/emotion-jest-serializer.cjs.mjs", + "default": "./serializer/dist/emotion-jest-serializer.cjs.js" + }, "module": "./serializer/dist/emotion-jest-serializer.esm.js", "import": "./serializer/dist/emotion-jest-serializer.cjs.mjs", "default": "./serializer/dist/emotion-jest-serializer.cjs.js" }, "./enzyme-serializer": { + "types": { + "import": "./enzyme-serializer/dist/emotion-jest-enzyme-serializer.cjs.mjs", + "default": "./enzyme-serializer/dist/emotion-jest-enzyme-serializer.cjs.js" + }, "module": "./enzyme-serializer/dist/emotion-jest-enzyme-serializer.esm.js", "import": "./enzyme-serializer/dist/emotion-jest-enzyme-serializer.cjs.mjs", "default": "./enzyme-serializer/dist/emotion-jest-enzyme-serializer.cjs.js" diff --git a/packages/jest/src/utils.js b/packages/jest/src/utils.js index 378dec2da..acf2f871d 100644 --- a/packages/jest/src/utils.js +++ b/packages/jest/src/utils.js @@ -1,3 +1,22 @@ +const insertedRules = new WeakMap() + +if (typeof CSSStyleSheet !== 'undefined') { + const insertRule = CSSStyleSheet.prototype.insertRule + CSSStyleSheet.prototype.insertRule = function (...args) { + let sheetRules = insertedRules.get(this) + + if (!sheetRules) { + sheetRules = [] + insertedRules.set(this, sheetRules) + } + + const rule = args[0] + sheetRules.push(rule) + + return insertRule.apply(this, args) + } +} + const isBrowser = typeof document !== 'undefined' function last(arr) { @@ -166,6 +185,10 @@ const getElementRules = (element /*: HTMLStyleElement */) /*: string[] */ => { if (!element.sheet) { return [] } + const rules = insertedRules.get(element.sheet) + if (rules) { + return rules + } return [].slice.call(element.sheet.cssRules).map(cssRule => cssRule.cssText) } diff --git a/packages/jest/test/matchers.test.js b/packages/jest/test/matchers.test.js index 2ee34553b..13ac3c955 100644 --- a/packages/jest/test/matchers.test.js +++ b/packages/jest/test/matchers.test.js @@ -22,7 +22,7 @@ describe('toHaveStyleRule', () => { width: 100%; ` - it('matches styles on the top-most node passed in', () => { + test('matches styles on the top-most node passed in', () => { const tree = renderer .create(
@@ -40,7 +40,7 @@ describe('toHaveStyleRule', () => { expect(svgNode).not.toHaveStyleRule('color', 'red') }) - it('supports asymmetric matchers', () => { + test('supports asymmetric matchers', () => { const tree = renderer .create(
@@ -57,14 +57,14 @@ describe('toHaveStyleRule', () => { expect(svgNode).toHaveStyleRule('width', expect.stringMatching(/.*%$/)) }) - it('fails if no styles are found', () => { + test('fails if no styles are found', () => { const tree = renderer.create(
).toJSON() const result = toHaveStyleRule(tree, 'color', 'red') expect(result.pass).toBe(false) expect(result.message()).toBe('Property not found: color') }) - it('supports regex values', () => { + test('supports regex values', () => { const tree = renderer.create(
).toJSON() expect(tree).toHaveStyleRule('color', /red/) }) @@ -81,7 +81,7 @@ describe('toHaveStyleRule', () => { expect(resultPass.message()).toMatchSnapshot() }) - it('matches styles on the focus, hover targets', () => { + test('matches styles on the focus, hover targets', () => { const localDivStyle = css` color: white; &:hover { @@ -104,7 +104,7 @@ describe('toHaveStyleRule', () => { expect(tree).toHaveStyleRule('color', 'white') }) - it('matches styles on the nested component or html element', () => { + test('matches styles on the nested component or html element', () => { const Svg = styled('svg')` width: 100%; fill: blue; @@ -134,7 +134,7 @@ describe('toHaveStyleRule', () => { expect(tree).toHaveStyleRule('fill', 'green', { target: `${Svg}` }) }) - it('matches target styles by regex', () => { + test('matches target styles by regex', () => { const localDivStyle = css` a { color: yellow; @@ -154,7 +154,7 @@ describe('toHaveStyleRule', () => { expect(tree).toHaveStyleRule('color', 'yellow', { target: /a$/ }) }) - it('matches proper style for css', () => { + test('matches proper style for css', () => { const tree = renderer .create(
{ expect(tree).toHaveStyleRule('color', 'hotpink') }) - it('matches style of the media', () => { + test('matches style of the media', () => { const Svg = styled('svg')` width: 100%; ` @@ -212,7 +212,7 @@ describe('toHaveStyleRule', () => { }) }) - it('matches styles with target and media options', () => { + test('matches styles with target and media options', () => { const localDivStyle = css` color: white; @media (min-width: 420px) { @@ -240,7 +240,7 @@ describe('toHaveStyleRule', () => { expect(tree).toHaveStyleRule('color', 'white') }) - it('fails if option media invalid', () => { + test('fails if option media invalid', () => { const Div = styled('div')` font-size: 30px; @media (min-width: 420px) { @@ -257,7 +257,7 @@ describe('toHaveStyleRule', () => { expect(result.message()).toBe('Property not found: font-size') }) - it('matches styles for a component used as selector', () => { + test('matches styles for a component used as selector', () => { const Bar = styled.div`` const Foo = styled.div` @@ -278,7 +278,7 @@ describe('toHaveStyleRule', () => { expect(tree.children[0]).toHaveStyleRule('color', 'hotpink') }) - it('takes specificity into account when matching styles (basic)', () => { + test('takes specificity into account when matching styles (basic)', () => { const Bar = styled.div` color: yellow; ` @@ -302,7 +302,7 @@ describe('toHaveStyleRule', () => { expect(tree.children[0]).toHaveStyleRule('color', 'hotpink') }) - it('should throw a friendly error when it receives an array', () => { + test('should throw a friendly error when it receives an array', () => { const tree = renderer .create( <> @@ -323,7 +323,7 @@ describe('toHaveStyleRule', () => { ) }) ;(isReact16 ? describe : describe.skip)('enzyme', () => { - it('supports enzyme `mount` method', () => { + test('supports enzyme `mount` method', () => { const Component = () => (
@@ -338,7 +338,7 @@ describe('toHaveStyleRule', () => { expect(svgNode).not.toHaveStyleRule('color', 'red') }) - it('supports enzyme `render` method', () => { + test('supports enzyme `render` method', () => { const Component = () => (
@@ -353,7 +353,7 @@ describe('toHaveStyleRule', () => { expect(svgNode).not.toHaveStyleRule('color', 'red') }) - it('supports enzyme `shallow` method', () => { + test('supports enzyme `shallow` method', () => { const Component = () => (
@@ -368,7 +368,7 @@ describe('toHaveStyleRule', () => { expect(svgNode).not.toHaveStyleRule('color', 'red') }) - it('supports styled components', () => { + test('supports styled components', () => { const Div = styled('div')` color: red; ` diff --git a/packages/jest/test/printer.test.js b/packages/jest/test/printer.test.js index 3a90c7f8b..470075bf3 100644 --- a/packages/jest/test/printer.test.js +++ b/packages/jest/test/printer.test.js @@ -22,7 +22,7 @@ describe('jest-emotion with dom elements', () => { width: 100%; ` - it('replaces class names and inserts styles into React test component snapshots', () => { + test('replaces class names and inserts styles into React test component snapshots', () => { const tree = renderer .create(
@@ -38,7 +38,7 @@ describe('jest-emotion with dom elements', () => { expect(output).toMatchSnapshot() }) - it('replaces class names and inserts styles into DOM element snapshots', () => { + test('replaces class names and inserts styles into DOM element snapshots', () => { const divRef = React.createRef() render(
@@ -65,7 +65,7 @@ describe('jest-emotion with DOM elements disabled', () => { width: 100%; ` - it('replaces class names and inserts styles into React test component snapshots', () => { + test('replaces class names and inserts styles into React test component snapshots', () => { const tree = renderer .create(
@@ -81,7 +81,7 @@ describe('jest-emotion with DOM elements disabled', () => { expect(output).toMatchSnapshot() }) - it('does not replace class names or insert styles into DOM element snapshots', () => { + test('does not replace class names or insert styles into DOM element snapshots', () => { const divRef = React.createRef() render(
@@ -150,7 +150,7 @@ describe('jest-emotion with nested selectors', () => { } ` - it('replaces class names and inserts styles into React test component snapshots', () => { + test('replaces class names and inserts styles into React test component snapshots', () => { const tree = renderer.create(
).toJSON() const output = prettyFormat(tree, { diff --git a/packages/jest/test/prod.test.js b/packages/jest/test/prod.test.js new file mode 100644 index 000000000..4e594e3c9 --- /dev/null +++ b/packages/jest/test/prod.test.js @@ -0,0 +1,71 @@ +import 'test-utils/next-env' +import renderer from 'react-test-renderer' +/** @jsx jsx */ +import * as React from 'react' +import { css, jsx } from '@emotion/react' +import { matchers } from '@emotion/jest' + +expect.extend(matchers) + +gate({ development: false }, ({ test }) => { + test('it prints fallback values', () => { + const tree = renderer + .create( +
+ {'emotion'} +
+ ) + .toJSON() + + expect(tree).toMatchInlineSnapshot(` +.emotion-0 { + background-color: #000; + background-color: #fff; +} + +.emotion-1 { + color: hotpink; +} + +
+ + emotion + +
+`) + }) + + test('it prints invalid declarations', () => { + const tree = renderer + .create( +
+ {'emotion'} +
+ ) + .toJSON() + + expect(tree).toMatchInlineSnapshot(` +.emotion-0 { + bazinga: joke; +} + +.emotion-1 { + color: hotpink; +} + +
+ + emotion + +
+`) + }) +}) diff --git a/packages/memoize/package.json b/packages/memoize/package.json index 3da3b1309..ad2601490 100644 --- a/packages/memoize/package.json +++ b/packages/memoize/package.json @@ -23,6 +23,10 @@ ], "exports": { ".": { + "types": { + "import": "./dist/emotion-memoize.cjs.mjs", + "default": "./dist/emotion-memoize.cjs.js" + }, "module": "./dist/emotion-memoize.esm.js", "import": "./dist/emotion-memoize.cjs.mjs", "default": "./dist/emotion-memoize.cjs.js" diff --git a/packages/native/package.json b/packages/native/package.json index 57cc99a43..3021231b8 100644 --- a/packages/native/package.json +++ b/packages/native/package.json @@ -6,6 +6,10 @@ "module": "dist/emotion-native.esm.js", "exports": { ".": { + "types": { + "import": "./dist/emotion-native.cjs.mjs", + "default": "./dist/emotion-native.cjs.js" + }, "module": "./dist/emotion-native.esm.js", "import": "./dist/emotion-native.cjs.mjs", "default": "./dist/emotion-native.cjs.js" diff --git a/packages/native/test/native-css.test.js b/packages/native/test/native-css.test.js index f3f0bf870..b30723d34 100644 --- a/packages/native/test/native-css.test.js +++ b/packages/native/test/native-css.test.js @@ -80,7 +80,7 @@ describe('Emotion native css', () => { ).toEqual(['color', 'flex', 'backgroundColor', 'flexGrow', 'flexDirection']) }) - it('allows function interpolations when this.mergedProps is defined', () => { + test('allows function interpolations when this.mergedProps is defined', () => { expect( StyleSheet.flatten( css.call({ thing: true }, props => ({ @@ -90,7 +90,7 @@ describe('Emotion native css', () => { ).toEqual({ color: 'hotpink' }) }) - it('works with nested functions', () => { + test('works with nested functions', () => { expect( StyleSheet.flatten( css.call({ thing: true }, props => () => ({ @@ -100,7 +100,7 @@ describe('Emotion native css', () => { ).toEqual({ color: 'hotpink' }) }) - it('works with functions in tagged template literals', () => { + test('works with functions in tagged template literals', () => { expect( StyleSheet.flatten( css.call( diff --git a/packages/native/test/native-styled.test.js b/packages/native/test/native-styled.test.js index ec992fcec..b5538963d 100644 --- a/packages/native/test/native-styled.test.js +++ b/packages/native/test/native-styled.test.js @@ -37,7 +37,7 @@ describe('Emotion native styled', () => { expect(tree).toMatchSnapshot() }) - it('should work with theming from @emotion/react', () => { + test('should work with theming from @emotion/react', () => { const Text = styled.Text` color: ${props => props.theme.backgroundColor}; ` @@ -73,7 +73,7 @@ describe('Emotion native styled', () => { expect(tree).toMatchSnapshot() }) - it('should work with StyleSheet.create API', () => { + test('should work with StyleSheet.create API', () => { const styles = StyleSheet.create({ foo: { color: 'red' } }) const Text = styled.Text` font-size: 10px; @@ -93,7 +93,7 @@ describe('Emotion native styled', () => { expect(tree).toMatchSnapshot() }) - it('should style any other component', () => { + test('should style any other component', () => { const Text = styled.Text` color: hotpink; ` @@ -106,7 +106,7 @@ describe('Emotion native styled', () => { expect(tree).toMatchSnapshot() }) - it('should pass props in withComponent', () => { + test('should pass props in withComponent', () => { const ViewOne = styled.View` background-color: ${props => props.color}; ` @@ -118,7 +118,7 @@ describe('Emotion native styled', () => { expect(treeTwo).toMatchSnapshot() }) - it('should render ', () => { + test('should render ', () => { const Image = styled.Image` border-radius: 2px; ` @@ -137,7 +137,7 @@ describe('Emotion native styled', () => { expect(tree).toMatchSnapshot() }) - it('Log error message if units are not specified when using shorthand properties', () => { + test('Log error message if units are not specified when using shorthand properties', () => { const Text = styled.Text` margin: 20px; padding: 20; @@ -150,7 +150,7 @@ describe('Emotion native styled', () => { ) }) - it('should render styles correctly from all nested style factories', () => { + test('should render styles correctly from all nested style factories', () => { const bgColor = color => css` background-color: ${color}; ` diff --git a/packages/native/types/resolved-condition.ts b/packages/native/types/resolved-condition.ts new file mode 100644 index 000000000..e8abb53e2 --- /dev/null +++ b/packages/native/types/resolved-condition.ts @@ -0,0 +1 @@ +export default true as boolean diff --git a/packages/native/types/tsconfig.json b/packages/native/types/tsconfig.json index 12a464ad1..ae37b14af 100644 --- a/packages/native/types/tsconfig.json +++ b/packages/native/types/tsconfig.json @@ -10,7 +10,11 @@ "target": "es5", "typeRoots": ["../"], "types": [], - "skipLibCheck": true + "skipLibCheck": true, + "paths": { + "#is-browser": ["./types/resolved-condition.ts"], + "#is-development": ["./types/resolved-condition.ts"] + } }, "include": ["./*.ts", "./*.tsx"] } diff --git a/packages/primitives-core/package.json b/packages/primitives-core/package.json index 00c3ecf18..0fbf232db 100644 --- a/packages/primitives-core/package.json +++ b/packages/primitives-core/package.json @@ -44,20 +44,25 @@ }, "exports": { ".": { - "module": { - "browser": "./dist/emotion-primitives-core.browser.esm.js", - "default": "./dist/emotion-primitives-core.esm.js" + "types": { + "import": "./dist/emotion-primitives-core.cjs.mjs", + "default": "./dist/emotion-primitives-core.cjs.js" }, + "development": { + "module": "./dist/emotion-primitives-core.development.esm.js", + "import": "./dist/emotion-primitives-core.development.cjs.mjs", + "default": "./dist/emotion-primitives-core.development.cjs.js" + }, + "module": "./dist/emotion-primitives-core.esm.js", "import": "./dist/emotion-primitives-core.cjs.mjs", "default": "./dist/emotion-primitives-core.cjs.js" }, "./package.json": "./package.json" }, - "preconstruct": { - "exports": { - "envConditions": [ - "browser" - ] + "imports": { + "#is-development": { + "development": "./src/conditions/true.ts", + "default": "./src/conditions/false.ts" } } } diff --git a/packages/primitives-core/src/conditions/false.ts b/packages/primitives-core/src/conditions/false.ts new file mode 100644 index 000000000..2693369b4 --- /dev/null +++ b/packages/primitives-core/src/conditions/false.ts @@ -0,0 +1 @@ +export default false diff --git a/packages/primitives-core/src/conditions/true.ts b/packages/primitives-core/src/conditions/true.ts new file mode 100644 index 000000000..186b12075 --- /dev/null +++ b/packages/primitives-core/src/conditions/true.ts @@ -0,0 +1 @@ +export default true diff --git a/packages/primitives-core/src/css.ts b/packages/primitives-core/src/css.ts index fde7c1167..ec431c23d 100644 --- a/packages/primitives-core/src/css.ts +++ b/packages/primitives-core/src/css.ts @@ -1,4 +1,5 @@ import transform, { Style } from 'css-to-react-native' +import isDevelopment from '#is-development' import { AbstractStyleSheet } from './types' import { interleave } from './utils' @@ -26,7 +27,7 @@ function handleInterpolation( if (type === 'function') { if (this === undefined) { - if (process.env.NODE_ENV !== 'production') { + if (isDevelopment) { console.error( 'Interpolating functions in css calls is not allowed.\n' + 'If you want to have a css call based on props, create a function that returns a css call like this\n' + diff --git a/packages/primitives/package.json b/packages/primitives/package.json index 7f58c1366..f6bd6daa8 100644 --- a/packages/primitives/package.json +++ b/packages/primitives/package.json @@ -40,29 +40,25 @@ "publishConfig": { "access": "public" }, - "browser": { - "./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" + "types": { + "import": "./dist/emotion-primitives.cjs.mjs", + "default": "./dist/emotion-primitives.cjs.js" }, + "module": "./dist/emotion-primitives.esm.js", "import": "./dist/emotion-primitives.cjs.mjs", "default": "./dist/emotion-primitives.cjs.js" }, "./package.json": "./package.json", "./macro": "./macro.js" }, + "imports": {}, "preconstruct": { "exports": { "extra": { "./macro": "./macro.js" - }, - "envConditions": [ - "browser" - ] + } } } } diff --git a/packages/primitives/src/conditions/false.js b/packages/primitives/src/conditions/false.js new file mode 100644 index 000000000..2693369b4 --- /dev/null +++ b/packages/primitives/src/conditions/false.js @@ -0,0 +1 @@ +export default false diff --git a/packages/primitives/src/conditions/true.js b/packages/primitives/src/conditions/true.js new file mode 100644 index 000000000..186b12075 --- /dev/null +++ b/packages/primitives/src/conditions/true.js @@ -0,0 +1 @@ +export default true diff --git a/packages/primitives/test/css.test.js b/packages/primitives/test/css.test.js index a5b0882d3..500b561b0 100644 --- a/packages/primitives/test/css.test.js +++ b/packages/primitives/test/css.test.js @@ -77,7 +77,7 @@ test('order with string and object', () => { ).toEqual(['color', 'flex', 'backgroundColor', 'flexGrow', 'flexDirection']) }) -it('allows function interpolations when this is defined', () => { +test('allows function interpolations when this is defined', () => { expect( StyleSheet.flatten( css.call({ thing: true }, props => ({ @@ -87,7 +87,7 @@ it('allows function interpolations when this is defined', () => { ).toEqual({ color: 'hotpink' }) }) -it('works with nested functions', () => { +test('works with nested functions', () => { expect( StyleSheet.flatten( css.call({ thing: true }, props => () => ({ @@ -97,7 +97,7 @@ it('works with nested functions', () => { ).toEqual({ color: 'hotpink' }) }) -it('works with functions in tagged template literals', () => { +test('works with functions in tagged template literals', () => { expect( StyleSheet.flatten( css.call( diff --git a/packages/primitives/test/emotion-primitives.test.js b/packages/primitives/test/emotion-primitives.test.js index dc2c1bbaa..547e822ec 100644 --- a/packages/primitives/test/emotion-primitives.test.js +++ b/packages/primitives/test/emotion-primitives.test.js @@ -35,7 +35,7 @@ describe('Emotion primitives', () => { expect(tree).toMatchSnapshot() }) - it('should work with theming from @emotion/react', () => { + test('should work with theming from @emotion/react', () => { const Text = styled.Text` color: ${props => props.theme.backgroundColor}; ` @@ -51,7 +51,7 @@ describe('Emotion primitives', () => { expect(tree).toMatchSnapshot() }) - it('should unmount with theming', () => { + test('should unmount with theming', () => { const StyledText = styled.Text` display: ${props => props.theme.display}; ` @@ -88,7 +88,7 @@ describe('Emotion primitives', () => { expect(tree).toMatchSnapshot() }) - it('should work with StyleSheet.create API', () => { + test('should work with StyleSheet.create API', () => { const styles = StyleSheet.create({ foo: { color: 'red' } }) const Text = styled.Text` font-size: 10px; @@ -109,7 +109,7 @@ describe('Emotion primitives', () => { expect(tree).toMatchSnapshot() }) - it('should style any other component', () => { + test('should style any other component', () => { const Text = styled.Text` color: hotpink; ` @@ -122,7 +122,7 @@ describe('Emotion primitives', () => { expect(tree).toMatchSnapshot() }) - it('ref', () => { + test('ref', () => { const StyledText = styled.Text` color: hotpink; ` @@ -134,7 +134,7 @@ describe('Emotion primitives', () => { unmount() }) - it('should pass props in withComponent', () => { + test('should pass props in withComponent', () => { const ViewOne = styled.View` background-color: ${props => props.color}; ` @@ -146,7 +146,7 @@ describe('Emotion primitives', () => { expect(treeTwo).toMatchSnapshot() }) - it('should render ', () => { + test('should render ', () => { const Image = styled.Image` border: 2px solid hotpink; ` diff --git a/packages/primitives/test/warnings.test.js b/packages/primitives/test/warnings.test.js index 12e5ef993..66544801c 100644 --- a/packages/primitives/test/warnings.test.js +++ b/packages/primitives/test/warnings.test.js @@ -6,7 +6,7 @@ afterEach(() => { jest.clearAllMocks() }) -it('does warn when functions are passed to cx calls ', () => { +test('does warn when functions are passed to cx calls ', () => { css(() => ({})) expect(console.error).toBeCalledWith( 'Interpolating functions in css calls is not allowed.\n' + diff --git a/packages/react/__tests__/at-import.js b/packages/react/__tests__/at-import.js index f51250df6..338b8077a 100644 --- a/packages/react/__tests__/at-import.js +++ b/packages/react/__tests__/at-import.js @@ -1,4 +1,3 @@ -import 'test-utils/prod-mode' import * as React from 'react' /** @jsx jsx */ import { jsx } from '@emotion/react' @@ -10,39 +9,41 @@ beforeEach(() => { document.body.innerHTML = `
` }) -test('basic', () => { - render( - -
- { + test('basic', () => { + render( + +
+ - , - document.getElementById('root') - ) - expect(document.head).toMatchSnapshot() - expect(document.body).toMatchSnapshot() - let elements = document.querySelectorAll('style') - let rules = [] - for (let element of elements) { - for (let cssRule of element.sheet.cssRules) { - rules.push(cssRule.cssText) + h1 { + color: hotpink; + } + `} + /> + , + document.getElementById('root') + ) + expect(document.head).toMatchSnapshot() + expect(document.body).toMatchSnapshot() + let elements = document.querySelectorAll('style') + let rules = [] + for (let element of elements) { + for (let cssRule of element.sheet.cssRules) { + rules.push(cssRule.cssText) + } } - } - expect(rules).toMatchInlineSnapshot(` + expect(rules).toMatchInlineSnapshot(` [ "@import url(https://some-url);", "h1 {color: hotpink;}", ".css-1lrxbo5 {color: hotpink;}", ] `) - unmountComponentAtNode(document.getElementById('root')) - expect(document.head).toMatchSnapshot() - expect(document.body).toMatchSnapshot() + unmountComponentAtNode(document.getElementById('root')) + expect(document.head).toMatchSnapshot() + expect(document.body).toMatchSnapshot() + }) }) diff --git a/packages/react/__tests__/babel/__snapshots__/source-map-server.js.snap b/packages/react/__tests__/babel/__snapshots__/source-map-server.js.snap index e7150e2a0..6dffe6e75 100644 --- a/packages/react/__tests__/babel/__snapshots__/source-map-server.js.snap +++ b/packages/react/__tests__/babel/__snapshots__/source-map-server.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`basic 1`] = `"
some hotpink text
"`; +exports[`basic 1`] = `"
some hotpink text
"`; diff --git a/packages/react/__tests__/babel/source-map-server.js b/packages/react/__tests__/babel/source-map-server.js index e55735edf..47d82f307 100644 --- a/packages/react/__tests__/babel/source-map-server.js +++ b/packages/react/__tests__/babel/source-map-server.js @@ -2,7 +2,6 @@ * @jest-environment node */ -import 'test-utils/dev-mode' import { jsx } from '@emotion/react' import { renderToString } from 'react-dom/server' diff --git a/packages/react/__tests__/class-names.js b/packages/react/__tests__/class-names.js index 7fe0c2305..c6edd021d 100644 --- a/packages/react/__tests__/class-names.js +++ b/packages/react/__tests__/class-names.js @@ -19,7 +19,7 @@ test('css', () => { expect(tree.toJSON()).toMatchSnapshot() }) -it('should get the theme', () => { +test('should get the theme', () => { const tree = renderer.create( diff --git a/packages/react/__tests__/compat/browser.js b/packages/react/__tests__/compat/browser.js index cd12840f2..c4b46a1cc 100644 --- a/packages/react/__tests__/compat/browser.js +++ b/packages/react/__tests__/compat/browser.js @@ -1,5 +1,4 @@ /** @jsx jsx */ -import 'test-utils/dev-mode' import { throwIfFalsy } from 'test-utils' import { jsx, CacheProvider } from '@emotion/react' import { render } from '@testing-library/react' diff --git a/packages/react/__tests__/css.js b/packages/react/__tests__/css.js index 1c8579a55..c0084b03f 100644 --- a/packages/react/__tests__/css.js +++ b/packages/react/__tests__/css.js @@ -189,7 +189,7 @@ test('speedy option from a custom cache is inherited for styles', () = expect(safeQuerySelector('body style').textContent).toEqual('') }) -it('does not autoLabel without babel or EMOTION_RUNTIME_AUTO_LABEL', () => { +test('does not autoLabel without babel or EMOTION_RUNTIME_AUTO_LABEL', () => { let SomeComp = props => { return (
} }) -test('it works', async () => { - await render( -
- something +gate({ development: false }, ({ test }) => { + test('it works', async () => { + await render( +
+ something - - -
- ) - // order should be - // 1. html { background-color: yellow; } - // 1. @import - // 2. body { padding: 0; } - // 3. styled comp + + +
+ ) + // order should be + // 1. html { background-color: yellow; } + // 1. @import + // 2. body { padding: 0; } + // 3. styled comp - // querying for style instead of [data-emotion] to appease flow - let elements = Array.from(document.querySelectorAll('style')).filter(x => - x.getAttribute('data-emotion') - ) + // querying for style instead of [data-emotion] to appease flow + let elements = Array.from(document.querySelectorAll('style')).filter(x => + x.getAttribute('data-emotion') + ) - expect(elements.map(x => x.getAttribute('data-emotion'))).toEqual([ - 'css-global', - 'css-global', - 'css' - ]) + expect(elements.map(x => x.getAttribute('data-emotion'))).toEqual([ + 'css-global', + 'css-global', + 'css' + ]) - expect(elements[0].sheet).toMatchInlineSnapshot(` + expect(elements[0].sheet).toMatchInlineSnapshot(` html { background-color: yellow; } `) - expect(elements[1].sheet).toMatchInlineSnapshot(` + expect(elements[1].sheet).toMatchInlineSnapshot(` @import url(something.com/file.css); body { padding: 0; } `) - expect(elements[2].sheet).toMatchInlineSnapshot(` + expect(elements[2].sheet).toMatchInlineSnapshot(` .css-1lrxbo5 { color: hotpink; } `) + }) }) diff --git a/packages/react/__tests__/prod.js b/packages/react/__tests__/prod.js index 3017ad389..ae3ec5895 100644 --- a/packages/react/__tests__/prod.js +++ b/packages/react/__tests__/prod.js @@ -1,21 +1,22 @@ -import 'test-utils/prod-mode' /** @jsx jsx */ import { css, jsx } from '@emotion/react' import renderer from 'react-test-renderer' -test('css works', () => { - // css has a different return in prod so this is just making sure that isn't broken +gate({ development: false }, ({ test }) => { + test('css works', () => { + // css has a different return in prod so this is just making sure that isn't broken - expect(css({ color: 'hotpink' })).toMatchInlineSnapshot(` + expect(css({ color: 'hotpink' })).toMatchInlineSnapshot(` { "name": "1lrxbo5", "next": undefined, "styles": "color:hotpink;", } `) -}) + }) -test('props work', () => { - let tree = renderer.create(