v4.0.0

Bug Fixes

• handle a few more built-ins (1aeb541)
• cache: fix object keys caching (#383) (879708c)
• color-mode: fix clearing color mode (#385) (1bb5cb8)
• core: add missing util (#362) (00ae8dc), closes #354
• emotion: add missing createCss (#324) (f5eaa07)
• emotion: add transient props support (#252) (ef34b61)
• emotion: fix ESM interop (465df83), closes #338 #343
• emotion: pass options through (#202) (781704c)
• esm: fix module exports (5624604), closes #336
• styled: use space in column-gap & row-gap (517c08e), closes #200
• styled-components: fix ESM interop (fa93d92), closes #338
• system: fix caching issue with value with different types (4a6ded3)
• system: fix paddingBottom typings (#242) (ee01b9b)
• transform: confused by comments, whitespace (93cba6a)
• transform: IE11 doesn't support dotAll (#247) (e620935)
• types: add missing alignContent prop (eb3c47f), closes #205
• types: add missing types to the borders system utility (#346) (c0c92b4)
• types: export XStyled, X, XStyledSet (#392) (9955f61)
• types: fix missing values in types (#361) (01afa25), closes #355
• types: remove crufty type branch (9fa412a)
• adding children to emotion jsx function (#166) (6bc0d4e)
• color prop missing responsive support (65f532b)
• fix & optimize style sorting (76ed20a)
• fix for Prototype Pollution (#304) (34ed147)
• fix missing files (18a22cd)
• fix style merging problem (c6aa69c)
• fix styled components module name (#284) (7c979d0)
• fixed contributing guide setup step documentation (9925f19)
• fixed incomplete hex alpha value generation (#373) (fd0a097)
• move at-rules to end of nested responsive states (6c7528e), closes #288
• breakpoints: multiple responsive style props (#141) (b884076)
• breakpoints: useThemeUp inclusive min (#113) (722d5fc)
• color-mode: fix camelCase properties (05ea6e7)
• emotion: fix interpolation usage (#184) (d093e7f)
• types: invalid color prop (0660565)
• types: remove deep path autocompletion (e01e8b3)
• typing: Support any valid number for utility props that needs it (#357) (1fd72c6)
• allow numeric values for systemprops (efdefe1)
• boolean or string for transform property type (1498d86)
• ensure the number is one of the keys (c2f71fd)
• FlexboxesProps missing FlexBasisProps (#332) (dbc531b)
• more correct synthesized type that allows number keys (c31c6b1)
• move away from mjs extension to work in more environments (9098b83)
• optional chaining syntax in dist module (cacaf6a), closes #265
• remove size utility (#183) (3fb9239)
• styled.box with rule ordering instead of specificity (9ac9a21)
• transform prop type should be string not boolean (50c847e)
• typo border doc (694408e)
• breakpoints: add _ into breakpoints (bcfda4b), closes #277
• color-mode: fix color mode issues (237c888)
• color-mode: fix document undefined on SSR (606ecac)
• color-mode: fix initial color mode from system (c2ac051)
• color-mode: fix pristine className (5e0ff9a)
• color-mode: fix SSR compat (bb0188a)
• color-mode: sync system color mode (6428360)
• color-mode: use lazy init to solve SSR issue (ab5ed55)
• emotion: broken getCreateStyle (f3c46d7), closes #250
• emotion: fix array handling used in breakpoints utilities (e34d576), closes #29
• emotion: fix color prop (4d88c18), closes #276
• prop-types: add bool option to the prop-types to use it with col and row props (#142) (3a835ba)
• prop-types: border typo (#98) (2078165)
• styled-components: fix createGlobalStyle (8c5d386), closes #22
• styled-components: fix keyframes error in v5 (ccf3469)
• styled-components: support createGlobalStyle (ec798b4)
• system: fix rpx transformers (339f7fc), closes #274
• types: fix emotion createGlobalStyle type def (95667bc)
• move typography color fix to proper file (5c635b0)
• docs: added a missing paren in the code example (#303) (901755b)
• styled: fix nested states (#221) (78fac38)
• types: fix types of CSS objects (#260) (fbbf91e)
• types: fix wrong type for ThemeVariants (#301) (b69619e)
• fix minW, minH, maxW, maxH (#217) (65c04de)
• types: replace ArgType by Parameters (443407e)
• typings: fix massive type in createX (#173) (273e395)
• add border-width utility (df4c47f)
• add missing properties top, left, right, bottom (c20345b)
• do not export styled-components internals (3f98ca5), closes #37
• explicit exports from styled-components (#5) (0f0204f), closes #4
• fix double negative value with strings (b254667)
• fix fontSize, lineHeight & zIndex getters (07b90f5)
• fix rpxTransformer => rpxTransformers (2658a07)
• increase box specificity (cb62872)
• isomorphic layout effect (987f308)
• link grid-column-gap to space getter (#42) (8f22405)
• prevent system props on boxes (4ec5044)
• properly handle multiple values in "border-radius" (23a3aa0), closes #28
• remove unused code (7e1b8d3)
• size 0.5 conflict fluid range (#168) (762aa1c)
• typings: fix styled-components types (#145) (f6c4cab)
• adds keyframes to emotion exports (#135) (194d442)
• breakpoints: races in useViewportWidth (#114) (fc70500)
• emotion: add missing Box (e5234b1)
• styled-components: local storage not available (#129) (304602c)
• system: fix space resolution algo (f50196b)
• system: space nested values (4119e8c)
• stick to spec for sizes (a7d4e01)
• support .attrs method (#8) (3ee0814), closes #7
• support negative values from theme objects (4b03dfc), closes #27
• use React.forwardRef in createSystemComponent (6c7da13)
• x.* must pass through props for as={Component} (04f845f), closes /github.com/gregberge/xstyled/pull/231#issuecomment-817353699

Code Refactoring

• fix tests & refactor styles (c86c1b4)

Features

• add fontVariant to typography bag (#396) (64f1876)
• stricter color type (#395) (f8638e7)
• cache: add option to disable xstyled cache (#379) (738f882)
• add ability to customize spacing properties in "texts" (#351) (57304c2), closes #350
• add border positions style helpers (3bcaada)
• add outlineOffset property (#360) (4dac9a3)
• added inline variants support (#334) (acfa364), closes #333
• border: allow strings to be expanded (b4520a8)
• durations: bind durations to theme.durations (362dea3)
• emotion: add importMap to the babel plugin (#293) (657f7fe)
• emotion: add preflight component to emotion (#167) (b56e6b6)
• emotion: support ESM (292fe28)
• styled: add esm support (a080d96), closes #3601
• system: add aria-disabled to the disabled state (#297) (d28cf38)
• text: new text utility (73e3a51), closes #178
• typing: infer automatically the typing of the generators used inside of the compose (#358) (ecbae73)
• add _ for base breakpoint (8e9a6cf)
• add backgroundAttachment and backgroundClip utilities (de32920)
• add divideStyle and divideColor utilities (75c8a8e)
• add gradientFrom, gradientVia, gradientTo utilities (a317cc1)
• add ring, ringInset and ringColor utilities (738fc91)
• add transformOrigin utility (bd9c4f7)
• add alpha color variants (4efa00f)
• add animation utility (7c145b2)
• add back borders utilities (391fc04)
• add back size utility (bcab1bd)
• add boxSizing & container (be120c8)
• add float property (0335114), closes #192
• add getAngle (55cfd8a)
• add getDuration (66b2123)
• add inset support in theme (baa6113)
• add interactivity utilities (f955980)
• add maxW, maxH, minW, minH shortcuts (fde802e), closes #199
• add x.extend, cleanup code (c786a4c)
• export styled as a named export (410cd67)
• typings: assemble deep paths for autocompletion (#310) (9867158)
• add objectFit utility (2ee2669)
• add overscrollBehavior utility (e952179)
• add preflight & default animations (cb10d05)
• add transforms utilities (107f253)
• add transitionDelay (b85e95d)
• add transitionProperty, transitionDuration, transitionTimingFunction (a042cd0)
• add transitions in defaultTheme (f5f53d0)
• add visibility utility (e9abb48)
• bind all prop getters (ce9afce)
• bind mask-size to sizes (#219) (ae826fa)
• expose hooks (7559260)
• expose hooks (530f139)
• plugins API (9798694)
• remove variant utility (b3b5b30)
• various refactoring & typing improvements (84d6291)
• states: put states in theme (#206) (fe74ec9)
• style: improve mixin (#225) (66ac294)
• add system.apply utility (#218) (c32f714)
• transform: min/max widths in media queries (aa1f518)
• typings: type of colors object being more specific (#174) (379e54d)
• add @xstyled/prop-types utility (73782fd), closes #23
• add flexShrink and flexGrow props (#130) (9492a00)
• add border-x-x-radius, outline-style, outline-width support (693dc5d)
• add color modes 🌚🌝 (b81f028)
• add default theme (186800f)
• add fill property support (c31dc11)
• add listStylePosition utility (8ddfb60)
• add listStyleType utility (bf1239e)
• add outlines utilities (40ca0c1)
• add placeholder state (15b7333)
• add shorthand "as" support (a76238c)
• add sizing values to default theme (d53c124)
• add spaceX & spaceY utilities (64f07ea)
• add state support (7de84e5)
• add support for text-shadow (#49) (96ef25a)
• add tableLayout and borderCollapse utilities (994bf6b)
• add textDecoration utility (e53ae4e)
• add textOverflow utility (910b816)
• add transitions (be415b2)
• add typings (#144) (bb77c0a)
• add useTheme & useUp / useDown (36d2909)
• add white-space utility (a18d58d)
• add xgrids (bootstrap like grids) (47bcaff)
• adjust breakpoints (5d8fe14)
• alias backgroundColor prop with bg (c23bfff), closes #89
• alias width, w and height, h (587146c)
• allow to configure rootFontSize (41e73b4), closes #115
• expose getBreakpoints (b8dcc29)
• initial version (3218bce)
• introduce configurable transformers (4958bcb)
• introduce createSystemComponent to avoid undesired HTML attributes (3187f68)
• introduce rpx unit (8bcc4cb)
• move overflow to layout, add overflowX & overflowY (2c95bda)
• publish xstyled utilities as a separated package (cc08d0f)
• re-export everything from @xstyled/system (a2b6fc8)
• refactor breakpoints, fix types, add theme utilities: generateHexAlphaVariants, aliasColor (752ee14)
• remove border{dir}, border{dir}Color utilities (3a9d585)
• remove size utility (611160c)
• remove width & height (8798f1a)
• rename xgrids to flexboxGrids (a7bd797)
• reorganize styles (defae25)
• replace gridGap by gap (8230bc6)
• shorthand borderRadius (42730d1)
• support shorthand in borderColor (927d106)
• color-mode: inject __colorMode into theme (ab3ad17)
• core: add outline-color to propGetters (#82) (36d9585)
• theme: add default border (68b6912)
• theme: add default borderWidth (613447d)
• use "default" value if value is true (42945b6)
• theme: allow gridTemplateColumns & gridTemplateRows (b5daa80)
• support shorthand styles (63be3d2)
• sizing: remove maxW, minW, maxH, minW (6296e1a)
• theme: add letter spacings & line heights (8056f24)
• theme: add missing font sizes (72d6732)
• theme: add sizes (8979fa7)
• reorganize styles (1b1c435)
• theme: use x1 instead of 1 for size (2199bda)
• replace forwardedAs by as (d5ea7e6)
• support "fill" & "stroke" properties (5df1b82), closes #118
• support array in theme (0be50a2)
• support default value in th & theme getters (df31809)
• emotion: emotion v11 (a901816)
• xstyled: support multiple values in box-shadow, text-shadow (#128) (c8487fc), closes #127
• support emotion (4b600a4)
• support fontStyle in props (1777736), closes #91
• support mixins in cssProperty (a554785)
• support styled-components v5 (e1bd0eb), closes #86

Performance Improvements

• add media query to benchmark (af10f5a)
• optimize color modes (#185) (7429182)
• system: improve perf x4 (996b773)

BREAKING CHANGES

• • Remove x.extend

• Remove createX
• TypeScript: use Theme from @xstyled/system everywhere.

• Box has been removed, "cssProperty" has been renamed "css", "getBreakpoints" has been renamed "getScreens", "useBreakpoints" has been renamed "useScreens", "th.timingFunctions" has been renamed "th.timingFunction".
• states: states are now passed in object.
• only w and h are now usable, no longer width and height
• "breakpoints" are now stored in "screens", default breakpoints are now part of theme
• variant utility has been removed
• x is no longer a component, just a namespace.
• remove default fontSizes.
• reorganize style groups
• borderTop, borderRight, borderBottom, borderLeft, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor.

Use border and borderColor shorthands instead.

• replace gridGap, gridColumnGap, gridRowGap by gap, columnGap and rowGap.
• overflow has moved from basics to layout group.
• default breakpoints have changed.
• system groups have changed.
• remove size utility.
• new state props are now available on system wide components.
• new props are available on system components.
• new state props are now available on system wide components.
• default space variants have been removed.
• forwardedAs is no longer supported.
  It has to be replaced by "as".
• emotion: upgrade to emotion v11