compiled

Patch Changes

• Updated dependencies [04cb7ae7]
  • @compiled/[email protected]
  • @compiled/[email protected]

Patch Changes

• 36c4f0b9: Fix handling of content property.

  • The value of the content property will no longer automatically have quotes erroneously added around it, if the value is one of open-quote, counter(...), url(...), inherit, none, and so on.
  • The full regex used to check is as follows: /^([A-Za-z\-]+\([^]*|[^]*-quote|inherit|initial|none|normal|revert|unset)(\s|$)/

• 8ed3e9bf: The @atlaskit/css is now picked up as a default import source, meaning consumers of Compiled don't need to configure it to be picked up.

Patch Changes

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

Minor Changes

• e49b4f08: Add INCREASE_SPECIFICITY_SELECTOR to utils to consolidate this selector

Patch Changes

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

Patch Changes

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

Patch Changes

• e49b4f08: Allow @compiled/babel-plugin's increaseSpecificity to work with @compiled/jest's toHaveCompiledCss jest matcher.

Patch Changes

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

Patch Changes

• e49b4f08: Use a shared utils version of INCREASE_SPECIFICITY_SELECTOR
• Updated dependencies [e49b4f08]
  • @compiled/[email protected]

Patch Changes

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

Patch Changes

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

Patch Changes

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

Patch Changes

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

Patch Changes

• 1b1a94a5: Remove the invariant to fail on an empty cssMap object for easier iterative development.

Patch Changes

• 6a606ee8: Check for missing AST in @compiled/parcel-transformer

Minor Changes

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

• 5701b914: 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

• 4b2e5eeb: - 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.

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

Patch Changes

• 4b2e5eeb: The CSS map transform now allows top level at rules to be defined.

Minor Changes

• 0666530c: Add new parcel transformer for distributed Compiled code

Minor Changes

• 0666530c: Add new parcel transformer for distributed Compiled code

Minor Changes

• 0666530c: Add new parcel transformer for distributed Compiled code

Patch Changes

• Updated dependencies [0666530c]
  • @compiled/[email protected]
  • @compiled/[email protected]