compiled

Patch Changes

• Updated dependencies [52ea5aba]
• Updated dependencies [9860df38]
  • @compiled/[email protected]

Patch Changes

• Updated dependencies [52ea5aba]
• Updated dependencies [9860df38]
  • @compiled/[email protected]

Minor Changes

• 9860df38: Added error in development/debug mode when using 'innerRef' instead of 'ref'

Patch Changes

• 52ea5aba: Fix xcss being incompatible with codebases that use Emotion and Compiled:

  • Add processXcss option to @compiled/babel-plugin. If processXcss is set to false, xcss usages will be ignored, and will not be processed as Compiled. (Note that xcss is currently implemented in Atlassian Design System using Emotion.) Defaults to true.
  • css usages in a file will no longer be processed as Compiled if xcss is used in the same file, so long as there is not a @compiled/react import specified in that file.

Minor Changes

• 2d1a5e76: Add two more configuration options to the no-css-prop-without-css-function rule:

  • ignoreIfImported accepts an array of library names. If specified, rule execution will be skipped for all files that import any of the specified libraries (e.g. @emotion/react). By default, this is an empty array.
  • excludeReactComponents is a boolean that determines whether this rule should skip all React components (as opposed to plain HTML elements). False by default.

Patch Changes

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

Minor Changes

• fbc17ed3: - @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.
  • @compiled/eslint-plugin: Change regex in jsx-pragma rule to match @babel/plugin-transform-react-jsx
  • @compiled/utils: Change regex in jsx-pragma rule to match @babel/plugin-transform-react-jsx

Patch Changes

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

Patch Changes

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

Patch Changes

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

Minor Changes

• fbc17ed3: - @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.
  • @compiled/eslint-plugin: Change regex in jsx-pragma rule to match @babel/plugin-transform-react-jsx
  • @compiled/utils: Change regex in jsx-pragma rule to match @babel/plugin-transform-react-jsx

Patch Changes

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

Patch Changes

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

Patch Changes

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

Minor Changes

• fbc17ed3: - @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.
  • @compiled/eslint-plugin: Change regex in jsx-pragma rule to match @babel/plugin-transform-react-jsx
  • @compiled/utils: Change regex in jsx-pragma rule to match @babel/plugin-transform-react-jsx

Patch Changes

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

Patch Changes

• c6e2e87c: Fix xcss eslint rules not compatible with eslint v7
• 28559a54: Update no-exported-css and no-exported-keyframes message

Patch Changes

• be019f11: 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.

Patch Changes

• be019f11: 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.

Minor Changes

• be019f11: 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.

Patch Changes

• 4caa6784: The xcss prop is now available.
  Declare styles your component takes with all other styles marked as violations
  by the TypeScript compiler. There are two primary use cases for xcss prop:

  • safe style overrides
  • inverting style declarations

  Interverting style declarations is interesting for platform teams as
  it means products only pay for styles they use as they're now the ones who declare
  the styles!

  The XCSSProp type has generics which must be defined — of which should be what you
  explicitly want to maintain as API. Use XCSSAllProperties and XCSSAllPseudos types
  to enable all properties and pseudos.

  import { type XCSSProp } from '@compiled/react';
  
  interface MyComponentProps {
    // Color is accepted, all other properties / pseudos are considered violations.
    xcss?: XCSSProp<'color', never>;
  
    // Only backgrond color and hover pseudo is accepted.
    xcss?: XCSSProp<'backgroundColor', '&:hover'>;
  
    // All properties are accepted, all pseudos are considered violations.
    xcss?: XCSSProp<XCSSAllProperties, never>;
  
    // All properties are accepted, only the hover pseudo is accepted.
    xcss?: XCSSProp<XCSSAllProperties, '&:hover'>;
  }
  
  function MyComponent({ xcss }: MyComponentProps) {
    return <div css={{ color: 'var(--ds-text-danger)' }} className={xcss} />;
  }
  

  The xcss prop works with static inline objects and the cssMap API.

  // Declared as an inline object
  <Component xcss={{ color: 'var(--ds-text)' }} />;
  
  // Declared with the cssMap API
  const styles = cssMap({ text: { color: 'var(--ds-text)' } });
  <Component xcss={styles.text} />;
  

  To concatenate and conditonally apply styles use the cssMap and cx functions.

• dccb71e0: Adds third generic for XCSSProp type for declaring what properties and pseudos should be required.

Patch Changes

• 351dbc2a: Adds a new supplementary rule for xcss prop — no-suppress-xcss.
• 9e75ff2c: Update jsx-pragma lint rule to enforce the pragma is in scope when passing the className prop on host elements an output of xcss prop.
• 157e7eec: Add supplementary lint rule for xcss prop local-cx-xcss.
• 2010cde2: Adds new supplementary lint rule for xcss prop no-js-xcss.

Patch Changes

• 4caa6784: The xcss prop is now available.
  Declare styles your component takes with all other styles marked as violations
  by the TypeScript compiler. There are two primary use cases for xcss prop:

  • safe style overrides
  • inverting style declarations

  Interverting style declarations is interesting for platform teams as
  it means products only pay for styles they use as they're now the ones who declare
  the styles!

  The XCSSProp type has generics which must be defined — of which should be what you
  explicitly want to maintain as API. Use XCSSAllProperties and XCSSAllPseudos types
  to enable all properties and pseudos.

  import { type XCSSProp } from '@compiled/react';
  
  interface MyComponentProps {
    // Color is accepted, all other properties / pseudos are considered violations.
    xcss?: XCSSProp<'color', never>;
  
    // Only backgrond color and hover pseudo is accepted.
    xcss?: XCSSProp<'backgroundColor', '&:hover'>;
  
    // All properties are accepted, all pseudos are considered violations.
    xcss?: XCSSProp<XCSSAllProperties, never>;
  
    // All properties are accepted, only the hover pseudo is accepted.
    xcss?: XCSSProp<XCSSAllProperties, '&:hover'>;
  }
  
  function MyComponent({ xcss }: MyComponentProps) {
    return <div css={{ color: 'var(--ds-text-danger)' }} className={xcss} />;
  }
  

  The xcss prop works with static inline objects and the cssMap API.

  // Declared as an inline object
  <Component xcss={{ color: 'var(--ds-text)' }} />;
  
  // Declared with the cssMap API
  const styles = cssMap({ text: { color: 'var(--ds-text)' } });
  <Component xcss={styles.text} />;
  

  To concatenate and conditonally apply styles use the cssMap and cx functions.

• dccb71e0: Adds third generic for XCSSProp type for declaring what properties and pseudos should be required.