fix(deps): update dependency @compiled/react to v0.18.3

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@compiled/react (source)	0.6.13 -> 0.18.3

---

Release Notes

atlassian-labs/compiled (@​compiled/react)

v0.18.3

Compare Source

Patch Changes

• baa173c: Fix type definition for CSS properties with string values.

v0.18.2

Compare Source

Patch Changes

• 162210d: Improve the types to the keyframes() function to handle CSS variables.

v0.18.1

Compare Source

Patch Changes

• 1d2054c: Protect @​compiled/react/dist/browser/runtime in environments without a document defined.

v0.18.0

Compare Source

Minor Changes

• 9a15e74: Sort shorthand properties so that they come before longhand properties.

  When using Compiled, one of the following will happen:

  Option 1. If stylesheet extraction is turned off ("runtime mode"): shorthand properties will be sorted before longhand properties, as long as they are not in a pseudo-selector like :hover or :active. This is enabled by default and cannot be turned off.

  Option 2. If stylesheet extraction is turned on and one of the below is true:

  • You are using Webpack
  • You are using Parcel AND you are running in production mode

  ... shorthand properties will only be sorted if sortShorthand: true is passed to CompiledExtractPlugin (Webpack), or sortShorthand: true is passed to your Compiled config file like .compiledcssrc (Parcel). When sorting shorthand properties using this method (option 2), shorthand properties will always be sorted before longhand properties, taking precedence over pseudo-selectors like :hover or :active.

v0.17.3

Compare Source

Patch Changes

• 25a4bed: Fix the cx() function's class collection at runtime as it generated class instances rather than strings

v0.17.2

Compare Source

Patch Changes

• d75b828: Add ElementType to the global compiled JSX namespace

v0.17.1

Compare Source

Patch Changes

• 10c9dce: added additional type exports to support other ts moduleResolution methods

v0.17.0

Compare Source

Minor Changes

• 39d9a02: The requiredPseudos type property in XCSS prop has been removed.

• 5701b91: Types for createStrictAPI have been refactored to improve type inference and expectations.

  Previously defining the schema came with a lot of redundant work. For every pseudo that you wanted to type you would have to define it, and then all of the base types again, like so:

  interface Schema {
    background: 'var(--bg)';
    color: 'var(--color)';
    '&:hover': {
      background: 'var(--bg)';
      color: 'var(--color-hovered)';
    };
  }
  
  createStrictAPI<Schema>();

  If you missed a value / didn't type every possible pseudo it would fallback to the CSSProperties value from csstype. This was mostly unexpected. So for example right now &:hover has been typed, but no other pseudo... meaning no other pseudos would benefit from the schema types!

  With this refactor all CSS properties use the top types unless a more specific one is defined, meaning you only need to type the values you want to explicitly support. In the previous example we're now able to remove the background property as it's the same as the top one.

  interface Schema {
    background: 'var(--bg)';
    color: 'var(--color)';
    '&:hover': {
  -    background: 'var(--bg)';
      color: 'var(--color-hovered)';
    };
  }
  
  createStrictAPI<Schema>();

Patch Changes

• 4b2e5ee: - The CSS map API now allows defining top level media queries. Previously you had to define them inside a @media object, this restriction has now been removed bringing it inline with the CSS function API.

  • The XCSS prop and strict API types now allow defining and using media queries.

  XCSS prop

  The XCSS prop now takes top level media queries. Nested media queries is not allowed.

  import { cssMap, css } from '@​compiled/react';
  
  const styles = cssMap({
    valid: { '@​media (min-width: 30rem)': { color: 'green' } },
    invalid: { '@​media': { '(min-width: 30rem)': { color: 'red' } } },
  });
  
  <Component xcss={styles.valid} />;

  createStrictAPI

  Now takes an optional second generic to define what media queries are supported:

  createStrictAPI<
    { color: 'var(--text)' }
  +  { media: '(min-width: 30rem)' | '(min-width: 48rem)' }
  >();

  Which is then flushed to all output APIs.

• 20528e9: Better cssMap types: fix inference of complex types and adds descriptions to the type.

v0.16.10

Compare Source

Patch Changes

• a68817a: Fix css function base types to have CSS property values available in intellisense.

v0.16.9

Compare Source

Patch Changes

• 541ab19: Add ElementType to the Compiled JSX namespace. This is needed to ensure types are the same in the Compiled JSX namspace and the default React one, such as returning undefined, string, and other freshly valid types.

v0.16.8

Compare Source

Patch Changes

• 39714ae: Fix nested types being forcibly required.

v0.16.7

Compare Source

Patch Changes

• 5dca5c5: Export CSSPseudos, CSSProperties, StrictCSSProperties types for a strict XCSSProp implementation.

v0.16.6

Compare Source

Patch Changes

• 34674ae: Fix cssMap returned from createStrictAPI to return types based on the generic input, fixing usage with the XCSSProp API.

v0.16.5

Compare Source

Patch Changes

• cd11b42: Block invalid properties on our cssMap input objects to avoid invalid css and other mistakes.

v0.16.4

Compare Source

Patch Changes

• e9b50b4: Add custom error message to be shown when any output from createStrictAPI() is unexpectedly executed.

v0.16.3

Compare Source

Patch Changes

• 9857009: Introduce new API createStrictAPI which returns a strict subset of Compiled APIs augmented by a type definition.
  This API does not change Compileds build time behavior — merely augmenting
  the returned API types which enforce:

  • all APIs use object types
  • property values declared in the type definition must be used (else fallback to defaults)
  • a strict subset of pseudo states/selectors
  • unknown properties to be a type violation

  To set up:

  1. Declare the API in a module (either local or in a package):

  import { createStrictAPI } from '@​compiled/react';
  
  // ./foo.ts
  const { css, cssMap, XCSSProp, cx } = createStrictAPI<{
    color: 'var(--ds-text)';
    '&:hover': { color: 'var(--ds-text-hover)' };
  }>();
  
  // Expose APIs you want to support.
  export { css, cssMap, XCSSProp, cx };

  2. Configure Compiled to pick up this module:

  // .compiledcssrc
  {
  +  "importSources": ["./foo.ts"]
  }

  3. Use the module in your application code:

  import { css } from './foo';
  
  const styles = css({ color: 'var(--ds-text)' });
  
  <div css={styles} />;

v0.16.2

Compare Source

Patch Changes

• be019f1: Add detectConflictWithOtherLibraries and onlyRunIfImportingCompiled config options to jsx-pragma ESLint rule. Both are set to true by default, hence the breaking change.

  detectConflictWithOtherLibraries raises a linting error if css or jsx is imported from @emotion/react (or @emotion/core) in the same file
  as a Compiled import. Set to true by default.

  onlyRunIfImportingCompiled sets this rule to only suggest adding the JSX pragma if the css or cssMap functions are imported from @compiled/react, as opposed to whenever the css attribute is detected at all. Set to false by default.

v0.16.1

Compare Source

Patch Changes

• a68817a: Fix css function base types to have CSS property values available in intellisense.

v0.16.0

Compare Source

Minor Changes

• f8d01fa: Remove Flow types as they are increasingly difficult to maintain

v0.15.0

Compare Source

Minor Changes

• b6f3e41: Change cssMap types to use stricter type checking and only allowing a limited subset of whitelisted selectors (e.g. &:hover); implement syntax for at-rules (e.g. @media); implement selectors key for non-whitelisted selectors.

v0.14.0

Compare Source

Minor Changes

• 4a2174c: Implement the cssMap API to enable library users to dynamically choose a varied set of CSS rules.

Patch Changes

• c5377cd: Ensure that the return types of css and cssMap are readonly.

v0.13.1

Compare Source

Patch Changes

• cd97765: Remove @compiled/react runtime side-effect to ensure no error if the module is reloaded.

v0.13.0

Compare Source

Minor Changes

• c4e6b7c: Introduce a new runtime class name library, which resolves the ax chaining issue. The new library is used only if class name compression is enabled.
• c4e6b7c: Change TypeScript compiler target from es5 to es6.

v0.12.0

Compare Source

Minor Changes

• a41e41e: Update monorepo node version to v18, and drop support for node v12
• f9c957e: Add an option to compress class names based on "classNameCompressionMap", which is provided by library consumers.
  Add a script to generate compressed class names.

v0.11.4

Compare Source

Patch Changes

• 6df1976: Update isServerEnvironment to support different SSR environment

v0.11.3

Compare Source

Patch Changes

• acd8996: Fix react runtime ax function returning incorrect result for selectors

v0.11.2

Compare Source

Patch Changes

• 08a963f: Bump flowgen types

v0.11.1

Compare Source

Patch Changes

• 13b71df: - Give a name to CSS var used for empty values
  • Update loki to 0.30.3

v0.11.0

Compare Source

Minor Changes

• 1cab89a: check node environment based on process instead of window

Patch Changes

• ad4d257: Update TypeScript and Flow types to support function calls and resolve incorrect typing

v0.10.4

Compare Source

Patch Changes

• 356b120: Apply react/jsx-filename-extension rule as needed

v0.10.3

Compare Source

Patch Changes

• 47050f4: Add client CS benchmark

v0.10.2

Compare Source

Patch Changes

• 254a6f6: Added ESLint rule to prevent use of extraneous packages, and added these usages of these packages as dependencies. Added new namespace @compiled-private to prevent name clashes with existing npm packages.
• c757259: Update type definition dependencies
• 6649528: Changed the SSR check to be based on the presence of document instead of looking for Node processes.

v0.10.1

Compare Source

Patch Changes

• d3e257c: Fixes css function types to allow nested styles
• 8c9ab8c: Update homepage and other package.json properties
• 8c9ab8c: JSDoc descriptions for all exports have been updated, let us know what you think!
• 8c9ab8c: ClassNames component now has its style prop typed as CSSProperties instead of a string map

v0.10.0

Compare Source

Minor Changes

• 427cead: Breaking change: When using the css prop with TypeScript you now need to declare a JSX pragma enabling types for that module. Previously when importing the @compiled/react package the global JSX namespace would be polluted as a side effect potentially causing collisions with other CSS-in-JS libraries. Now thanks to the use of locally scoped JSX namespaces the global JSX namespace will no longer be polluted.

  As an added bonus the css prop will only be available on JSX elements that have also defined a className prop with the potential for more type safe features later on.

  Make sure to update all Compiled dependencies to latest when adopting this change.

  Automatic runtime

  -import '@​compiled/react';
  +/** @​jsxImportSource @​compiled/react */
  
  <div css={{ display: 'block' }} />;

  Classic runtime

  -import '@​compiled/react';
  +/** @​jsx jsx */
  +import { jsx } from '@​compiled/react';
  
  <div css={{ display: 'block' }} />;

  To aid consumers in adopting this change easily, a new ESLint rule jsx-pragma has been created which will automatically migrate you to use a JSX pragma if missing when running with --fix. The rule takes an option to configure the runtime (either classic or automatic) and defaults to automatic.

  npm i @​compiled/eslint-plugin

  {
    "rules": {
      "@​compiled/jsx-pragma": ["error", { "runtime": "classic" }]
    }
  }

Patch Changes

• 79cfb08: Internal refactor changing how the TypeScript compiler picks up source files.

v0.9.1

Compare Source

Patch Changes

• 4309aaa: Patch inexact flow type on styled

v0.9.0

Compare Source

Minor Changes

• 2092839: Allow inline strings and inline css mixins in conditional expressions. Fix ordering of styles in template literals.

v0.8.0

Compare Source

Minor Changes

• 4210ff6: Add flow types support
• 53935b3: Add ObjectExpression support to css

v0.7.0

Compare Source

Minor Changes

• bcb2a68: Add support for keyframes
• a7ab8e1: Add support for conditional rules for Styled

---

Configuration

📅 Schedule: Branch creation - "every weekend" in timezone Asia/Tokyo, Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/ruedap/nekostagram/225K4aQfKjpbA26rshobvPNwsNi8
✅ Preview: https://nekostagram-git-renovate-compiled-react-0x-ruedap.vercel.app

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nekostagram	❌ Failed (Inspect)			Mar 10, 2025 6:30am