compiled

Patch Changes

• Updated dependencies [db572d43]
  • @compiled/[email protected]
  • @compiled/[email protected]

Patch Changes

• db572d43: - @compiled/babel-plugin-strip-runtime:
  • Fix css function calls not being extracted when using classic JSX pragma syntax and @babel/preset-react is turned on. Now, when the classic JSX pragma syntax is used for Compiled and @babel/preset-react is turned on (assuming @babel/preset-react runs before @compiled/babel-plugin-strip-runtime), the JSX pragma and the jsx import will be completely removed in the output.
  • The previous version of this PR caused a regression where using the classic JSX pragma /** @jsx jsx */ with Emotion no longer worked; this is now fixed.
  • @compiled/utils: Add JSX pragma regex (as used by babel-plugin-transform-react-jsx) directly to @compiled/utils
  • @compiled/eslint-plugin: Use the official JSX pragma regex /^\s*\*?\s*@jsx\s+([^\s]+)\s*$/m instead of /@jsx (\w+)/; the former is used in babel-plugin-transform-react-jsx
• Updated dependencies [db572d43]
  • @compiled/[email protected]

Patch Changes

• db572d43: - @compiled/babel-plugin-strip-runtime:
  • Fix css function calls not being extracted when using classic JSX pragma syntax and @babel/preset-react is turned on. Now, when the classic JSX pragma syntax is used for Compiled and @babel/preset-react is turned on (assuming @babel/preset-react runs before @compiled/babel-plugin-strip-runtime), the JSX pragma and the jsx import will be completely removed in the output.
  • The previous version of this PR caused a regression where using the classic JSX pragma /** @jsx jsx */ with Emotion no longer worked; this is now fixed.
  • @compiled/utils: Add JSX pragma regex (as used by babel-plugin-transform-react-jsx) directly to @compiled/utils
  • @compiled/eslint-plugin: Use the official JSX pragma regex /^\s*\*?\s*@jsx\s+([^\s]+)\s*$/m instead of /@jsx (\w+)/; the former is used in babel-plugin-transform-react-jsx

Patch Changes

• Updated dependencies [db572d43]
  • @compiled/[email protected]
  • @compiled/[email protected]

Minor Changes

• db572d43: - @compiled/babel-plugin-strip-runtime:
  • Fix css function calls not being extracted when using classic JSX pragma syntax and @babel/preset-react is turned on. Now, when the classic JSX pragma syntax is used for Compiled and @babel/preset-react is turned on (assuming @babel/preset-react runs before @compiled/babel-plugin-strip-runtime), the JSX pragma and the jsx import will be completely removed in the output.
  • The previous version of this PR caused a regression where using the classic JSX pragma /** @jsx jsx */ with Emotion no longer worked; this is now fixed.
  • @compiled/utils: Add JSX pragma regex (as used by babel-plugin-transform-react-jsx) directly to @compiled/utils
  • @compiled/eslint-plugin: Use the official JSX pragma regex /^\s*\*?\s*@jsx\s+([^\s]+)\s*$/m instead of /@jsx (\w+)/; the former is used in babel-plugin-transform-react-jsx

Patch Changes

• Updated dependencies [db572d43]
  • @compiled/[email protected]

Patch Changes

• 6dfb0cdf: Fixed eslint bug for no-empty-styled-expressions rule that detected false positives

Patch Changes

• a9509cc0: Compiled runtime is no-longer inserted for non-Compiled xcss prop usage.

Patch Changes

• 3bb89ef9: Reverting jsx pragma fix which is causing runtime errors
• Updated dependencies [3bb89ef9]
  • @compiled/[email protected]

Patch Changes

• Updated dependencies [3bb89ef9]
  • @compiled/[email protected]
  • @compiled/[email protected]

Patch Changes

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

Patch Changes

• Updated dependencies [3bb89ef9]
  • @compiled/[email protected]
  • @compiled/[email protected]

Patch Changes

• 3bb89ef9: Reverting jsx pragma fix which is causing runtime errors

Patch Changes

• 3bb89ef9: Reverting jsx pragma fix which is causing runtime errors
• Updated dependencies [3bb89ef9]
  • @compiled/[email protected]

Patch Changes

• 9dd62659: Fixed eslint rule declaration typo causing missing rule errors

Patch Changes

• 45186502: Added no-empty-styled-expression rule to eslint plugin rule declarations

Minor Changes

• 66695a2d: Support resolver module path

Patch Changes

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

Minor Changes

• 83f2c48b: Created ESLint rule to disallow usage of empty styled.element() function calls/empty object arguments

Patch Changes

• 9857009f: 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} />;
  

Patch Changes

• 9857009f: 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} />;