Permalink
Comparing changes
Choose two branches to see what’s changed or to start a new pull request.
If you need to, you can also or
learn more about diff comparisons.
Open a pull request
Create a new pull request by comparing changes across two branches. If you need to, you can also .
Learn more about diff comparisons here.
...
- 9 commits
- 30 files changed
- 6 contributors
Commits on Dec 15, 2025
-
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Commits on Jan 20, 2026
-
Add a new documentation guide "Local Development Atomic Clashes" (#1862)
* clash documentation * mellow out language * pretty :) * improve link? * pretty :) * lots of warning about development
Commits on Jan 30, 2026
-
ensure deterministic stylesheet output (#1863)
* ensure deterministic stylesheet output * Add changeset * Update snapshots --------- Co-authored-by: Liam Ma <lma2@atlassian.com>
-
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Commits on Feb 16, 2026
-
Add import extensions to Vite Plugin & React packages for ESM support. (
#1865) * Fixes #1861 by adding extensions after bundling `@compiled/vite-plugin` and `@compiled/react packages` to fix ESM support. We do this through a post-build script `scripts/add-esm-js-extensions.js` that adds the extensions to the ESM output. For sanity checking, below is a list of all diffs `packages/react/dist/esm` and `packages/vite-plugin/dist/esm` following this change. The result is 31 instances of adding a `*.js` to relative import specifiers. --- ```diff --- packages/vite-plugin/dist/esm/index.js +++ packages/vite-plugin/dist/esm/index.js @@ -10,7 +10,7 @@ import { parseAsync, transformFromAstAsync } from '@babel/core'; import { sort } from '@compiled/css'; import { DEFAULT_IMPORT_SOURCES, DEFAULT_PARSER_BABEL_PLUGINS, toBoolean } from '@compiled/utils'; -import { createDefaultResolver } from './utils'; +import { createDefaultResolver } from './utils.js'; /** * Compiled Vite plugin. * ``` ```diff --- packages/react/dist/esm/__tests__/server-side-hydrate.test.js +++ packages/react/dist/esm/__tests__/server-side-hydrate.test.js @@ -1,6 +1,6 @@ import React from 'react'; import { hydrateRoot } from 'react-dom/client'; -import { CC, CS } from '../runtime'; +import { CC, CS } from '../runtime.js'; jest.mock('../runtime/is-server-environment', () => ({ isServerEnvironment: () => false, })); ``` ```diff --- packages/react/dist/esm/class-names/index.js +++ packages/react/dist/esm/class-names/index.js @@ -1,4 +1,4 @@ -import { createSetupError } from '../utils/error'; +import { createSetupError } from '../utils/error.js'; export function ClassNames(_props) { throw createSetupError(); } ``` ```diff --- packages/react/dist/esm/create-strict-api/__tests__/__fixtures__/strict-api-recursive.js +++ packages/react/dist/esm/create-strict-api/__tests__/__fixtures__/strict-api-recursive.js @@ -1,4 +1,4 @@ -import { createStrictAPI } from '../../index'; +import { createStrictAPI } from '../../index.js'; const { css, cssMap, cx, XCSSProp } = createStrictAPI(); export { css, XCSSProp, cssMap, cx }; //# sourceMappingURL=strict-api-recursive.js.map \ No newline at end of file ``` ```diff --- packages/react/dist/esm/create-strict-api/__tests__/__fixtures__/strict-api.js +++ packages/react/dist/esm/create-strict-api/__tests__/__fixtures__/strict-api.js @@ -1,4 +1,4 @@ -import { createStrictAPI } from '../../index'; +import { createStrictAPI } from '../../index.js'; const { css, XCSSProp, cssMap, cx } = createStrictAPI(); export { css, XCSSProp, cssMap, cx }; //# sourceMappingURL=strict-api.js.map \ No newline at end of file ``` ```diff --- packages/react/dist/esm/create-strict-api/__tests__/generics.test.js +++ packages/react/dist/esm/create-strict-api/__tests__/generics.test.js @@ -1,7 +1,7 @@ import { jsx as _jsx } from "@compiled/react/jsx-runtime"; /** @jsxImportSource @compiled/react */ import { render } from '@testing-library/react'; -import { css, cssMap } from './__fixtures__/strict-api-recursive'; +import { css, cssMap } from './__fixtures__/strict-api-recursive.js'; describe('createStrictAPI()', () => { it('should mark all styles as optional in css()', () => { const styles = css({ ``` ```diff --- packages/react/dist/esm/create-strict-api/__tests__/index.test.js +++ packages/react/dist/esm/create-strict-api/__tests__/index.test.js @@ -3,7 +3,7 @@ // eslint-disable-next-line import/no-extraneous-dependencies import { cssMap as cssMapLoose } from '@compiled/react'; import { render } from '@testing-library/react'; -import { css, cssMap, XCSSProp, cx } from './__fixtures__/strict-api'; +import { css, cssMap, XCSSProp, cx } from './__fixtures__/strict-api.js'; describe('createStrictAPI()', () => { describe('css()', () => { it('should type error when circumventing the excess property check', () => { ``` ```diff --- packages/react/dist/esm/create-strict-api/__tests__/pass-through-xcss.test.js +++ packages/react/dist/esm/create-strict-api/__tests__/pass-through-xcss.test.js @@ -1,7 +1,7 @@ import { jsx as _jsx } from "@compiled/react/jsx-runtime"; /** @jsxImportSource @compiled/react */ import { render } from '@testing-library/react'; -import { cssMap, cx } from './__fixtures__/strict-api'; +import { cssMap, cx } from './__fixtures__/strict-api.js'; const styles = cssMap({ rootNative: { color: 'var(--ds-text)', ``` ````diff --- packages/react/dist/esm/create-strict-api/index.js +++ packages/react/dist/esm/create-strict-api/index.js @@ -1,5 +1,5 @@ -import { createStrictSetupError } from '../utils/error'; -import { cx } from '../xcss-prop'; +import { createStrictSetupError } from '../utils/error.js'; +import { cx } from '../xcss-prop.js'; /** * ## Create Strict API * @@ -43,7 +43,7 @@ * * @example * ```tsx - * import { css } from './foo'; + * import { css } from './foo.js'; * * const styles = css({ color: 'var(--ds-text)' }); * ```` ```diff --- packages/react/dist/esm/css/index.js +++ packages/react/dist/esm/css/index.js @@ -1,5 +1,5 @@ /* eslint-disable import/export */ -import { createSetupError } from '../utils/error'; +import { createSetupError } from '../utils/error.js'; export default function css(_styles, ..._interpolations) { throw createSetupError(); } ``` ```diff --- packages/react/dist/esm/css-map/index.js +++ packages/react/dist/esm/css-map/index.js @@ -1,4 +1,4 @@ -import { createSetupError } from '../utils/error'; +import { createSetupError } from '../utils/error.js'; /** * ## CSS Map * ``` ```diff --- packages/react/dist/esm/index.js +++ packages/react/dist/esm/index.js @@ -1,11 +1,11 @@ import { createElement } from 'react'; -export { ClassNames } from './class-names'; -export { createStrictAPI } from './create-strict-api'; -export { default as css } from './css'; -export { default as cssMap } from './css-map'; -export { keyframes } from './keyframes'; -export { styled } from './styled'; -export { cx, } from './xcss-prop'; +export { ClassNames } from './class-names.js'; +export { createStrictAPI } from './create-strict-api.js'; +export { default as css } from './css.js'; +export { default as cssMap } from './css-map.js'; +export { keyframes } from './keyframes.js'; +export { styled } from './styled.js'; +export { cx, } from './xcss-prop.js'; // Pass through the (classic) jsx runtime. // Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace. export const jsx = createElement; ``` ```diff --- packages/react/dist/esm/keyframes/__tests__/index.test.js +++ packages/react/dist/esm/keyframes/__tests__/index.test.js @@ -3,7 +3,7 @@ // eslint-disable-next-line import/no-extraneous-dependencies import { keyframes, styled, css } from '@compiled/react'; import { render } from '@testing-library/react'; -import defaultFadeOut, { namedFadeOut, fadeOut as shadowedFadeOut } from '../__fixtures__'; +import defaultFadeOut, { namedFadeOut, fadeOut as shadowedFadeOut } from '../__fixtures__.js'; const getOpacity = (str) => str; const getKeyframe = (name) => { const searchStr = `@keyframes ${name}`; ``` ```diff --- packages/react/dist/esm/keyframes/index.js +++ packages/react/dist/esm/keyframes/index.js @@ -1,4 +1,4 @@ -import { createSetupError } from '../utils/error'; +import { createSetupError } from '../utils/error.js'; export function keyframes(_stringsOrSteps, ..._interpolations) { throw createSetupError(); } ``` ```diff --- packages/react/dist/esm/runtime/__perf__/ac.test.js +++ packages/react/dist/esm/runtime/__perf__/ac.test.js @@ -8,8 +8,8 @@ }); }; import { runBenchmark } from '@compiled/benchmark'; -import { ac } from '../ac'; -import ax from '../ax'; +import { ac } from '../ac.js'; +import ax from '../ax.js'; describe('ac vs ax benchmark', () => { const arr = [ '_19itglyw', ``` ```diff --- packages/react/dist/esm/runtime/__perf__/ax.test.js +++ packages/react/dist/esm/runtime/__perf__/ax.test.js @@ -8,7 +8,7 @@ }); }; import { runBenchmark } from '@compiled/benchmark'; -import { ax } from '../index'; +import { ax } from '../index.js'; describe('ax benchmark', () => { const chunks = ['aaaa', 'bbbb', 'cccc', 'dddd', 'eeee', 'ffff', 'gggg']; const uniques = chunks.map((chunk) => `_${chunk}${chunk}`); ``` ```diff --- packages/react/dist/esm/runtime/__perf__/cs.test.js +++ packages/react/dist/esm/runtime/__perf__/cs.test.js @@ -13,9 +13,9 @@ import { memo } from 'react'; import { createRoot } from 'react-dom/client'; import { renderToString } from 'react-dom/server'; -import { CC, CS } from '../index'; +import { CC, CS } from '../index.js'; const MemoCS = memo(CS, () => true); -import { StyleBucketFromArray, StyleBucketFromString } from './utils/cs'; +import { StyleBucketFromArray, StyleBucketFromString } from './utils/cs.js'; describe('CS benchmark', () => { describe.each(['server', 'client'])('on the %s', (env) => { const document = globalThis.document; ``` ```diff --- packages/react/dist/esm/runtime/__perf__/sheet.test.js +++ packages/react/dist/esm/runtime/__perf__/sheet.test.js @@ -8,8 +8,8 @@ }); }; import { runBenchmark } from '@compiled/benchmark'; -import insertRule from '../sheet'; -import { createStyleSheet } from './utils/sheet'; +import insertRule from '../sheet.js'; +import { createStyleSheet } from './utils/sheet.js'; global.document = { // @ts-expect-error createTextNode: () => { }, ``` ```diff --- packages/react/dist/esm/runtime/__tests__/ac.test.js +++ packages/react/dist/esm/runtime/__tests__/ac.test.js @@ -1,4 +1,4 @@ -import { ac, memoizedAc, getCache } from '../ac'; +import { ac, memoizedAc, getCache } from '../ac.js'; describe('ac', () => { const isEnabled = (() => false)(); it.each([ ``` ```diff --- packages/react/dist/esm/runtime/__tests__/ax.test.js +++ packages/react/dist/esm/runtime/__tests__/ax.test.js @@ -1,4 +1,4 @@ -import ax from '../ax'; +import ax from '../ax.js'; describe('ax', () => { const isEnabled = (() => false)(); it.each([ ``` ```diff --- packages/react/dist/esm/runtime/__tests__/css-custom-property.test.js +++ packages/react/dist/esm/runtime/__tests__/css-custom-property.test.js @@ -1,4 +1,4 @@ -import interpolation from '../css-custom-property'; +import interpolation from '../css-custom-property.js'; describe('interpolation', () => { it('should return an empty CSS comment when undefined', () => { const actual = interpolation(undefined, undefined, undefined); ``` ```diff --- packages/react/dist/esm/runtime/__tests__/style-ssr.test.js +++ packages/react/dist/esm/runtime/__tests__/style-ssr.test.js @@ -3,7 +3,7 @@ */ import React from 'react'; import { renderToStaticMarkup, renderToString } from 'react-dom/server'; -import Style from '../style'; +import Style from '../style.js'; describe('<Style />', () => { it('should render style as children on the server', () => { const result = renderToStaticMarkup(React.createElement(Style, null, [`.a { display: block; }`])); ``` ```diff --- packages/react/dist/esm/runtime/ac.js +++ packages/react/dist/esm/runtime/ac.js @@ -1,4 +1,4 @@ -import { isServerEnvironment } from './is-server-environment'; +import { isServerEnvironment } from './is-server-environment.js'; const UNDERSCORE_UNICODE = 95; /** * This length includes the underscore, ``` ```diff --- packages/react/dist/esm/runtime/index.js +++ packages/react/dist/esm/runtime/index.js @@ -1,6 +1,6 @@ -export { default as CS } from './style'; -export { default as CC } from './style-cache'; -export { default as ax } from './ax'; -export { default as ac, clearCache as clearAcCache } from './ac'; -export { default as ix } from './css-custom-property'; +export { default as CS } from './style.js'; +export { default as CC } from './style-cache.js'; +export { default as ax } from './ax.js'; +export { default as ac, clearCache as clearAcCache } from './ac.js'; +export { default as ix } from './css-custom-property.js'; //# sourceMappingURL=index.js.map \ No newline at end of file ``` ```diff --- packages/react/dist/esm/runtime/sheet.js +++ packages/react/dist/esm/runtime/sheet.js @@ -1,5 +1,5 @@ -import { isCacheDisabled } from './cache'; -import { getShorthandDepth } from './shorthand'; +import { isCacheDisabled } from './cache.js'; +import { getShorthandDepth } from './shorthand.js'; /** * Ordered style buckets using their short pseudo name. * ``` ```diff --- packages/react/dist/esm/runtime/style-cache.js +++ packages/react/dist/esm/runtime/style-cache.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { createContext, useContext } from 'react'; -import { isCacheDisabled } from './cache'; -import { isServerEnvironment } from './is-server-environment'; +import { isCacheDisabled } from './cache.js'; +import { isServerEnvironment } from './is-server-environment.js'; /** * Cache to hold already used styles. * React Context on the server - singleton object on the client. ``` ```diff --- packages/react/dist/esm/runtime/style.js +++ packages/react/dist/esm/runtime/style.js @@ -1,8 +1,8 @@ import React from 'react'; -import { analyzeCssInDev } from './dev-warnings'; -import { isServerEnvironment } from './is-server-environment'; -import insertRule, { getStyleBucketName, styleBucketOrdering } from './sheet'; -import { useCache } from './style-cache'; +import { analyzeCssInDev } from './dev-warnings.js'; +import { isServerEnvironment } from './is-server-environment.js'; +import insertRule, { getStyleBucketName, styleBucketOrdering } from './sheet.js'; +import { useCache } from './style-cache.js'; export default function Style(props) { const inserted = useCache(); if (process.env.NODE_ENV === 'development') { ``` ```diff --- packages/react/dist/esm/runtime.js +++ packages/react/dist/esm/runtime.js @@ -1,2 +1,2 @@ -export { CC, CS, ax, ac, clearAcCache, ix } from './runtime/index'; +export { CC, CS, ax, ac, clearAcCache, ix } from './runtime/index.js'; //# sourceMappingURL=runtime.js.map \ No newline at end of file ``` ```diff --- packages/react/dist/esm/styled/index.js +++ packages/react/dist/esm/styled/index.js @@ -1,4 +1,4 @@ -import { createSetupError } from '../utils/error'; +import { createSetupError } from '../utils/error.js'; /** * ## Styled component * ``` ```diff --- packages/react/dist/esm/xcss-prop/__tests__/media-query-strict.test.js +++ packages/react/dist/esm/xcss-prop/__tests__/media-query-strict.test.js @@ -3,7 +3,7 @@ // eslint-disable-next-line import/no-extraneous-dependencies import { cssMap as cssMapLoose } from '@compiled/react'; import { render } from '@testing-library/react'; -import { cssMap } from '../../create-strict-api/__tests__/__fixtures__/strict-api'; +import { cssMap } from '../../create-strict-api/__tests__/__fixtures__/strict-api.js'; function CSSPropComponent({ testId, xcss, }) { return (_jsx("div", Object.assign({ "data-testid": testId, className: xcss }, { children: "foo" }))); } ``` ```diff --- packages/react/dist/esm/xcss-prop/index.js +++ packages/react/dist/esm/xcss-prop/index.js @@ -1,4 +1,4 @@ -import { ax } from '../runtime'; +import { ax } from '../runtime.js'; /** * ## CX * ``` * Change this to source `*.js` into the code itself while changing the script to validate it. * skip tests and perf * use node resolution for esm distributions
-
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Loading
This comparison is taking too long to generate.
Unfortunately it looks like we can’t render this comparison for you right now. It might be too big, or there might be something weird with your repository.
You can try running this command locally to see the comparison on your machine:
git diff @compiled/react@0.19.0...@compiled/react@0.19.1
