Skip to content
This repository has been archived by the owner on Apr 15, 2022. It is now read-only.

Latest commit

 

History

History
135 lines (89 loc) · 6.65 KB

CHANGELOG.md

File metadata and controls

135 lines (89 loc) · 6.65 KB
Raw

Unreleased

10.0.1 - 2019-09-23

Added

  • textDecorationLine

Changed

  • Pseudo classes selectors have been updated and documented
  • Update properties : backgroundAttachment, backgroundClip, backgroundOrigin, backgroundRepeat, textOverflow, textDecorationLine, textDecorationStyle, width, wordWrap

10.0.0 - 2019-09-04

Major release because of the breaking change in shadows definition.

Breaking change

  • Css.rule is now an abstract type #153
  • Update shadow definition #148

boxShadow has been changed to be a rule to allow for none, important and all other rule related functions.

It means that the shadow properties must be updated to the following patterns:

// before:
boxShadow(~x=px(1), ~y=px(2));
boxShadows([boxShadow(yellow), boxShadow(red)]);
textShadow(~y=px(3), ~blur=px(2), black);
textShadows([textShadow(~y=px(3), ~blur=px(2), black), textShadow(~x=px(3), green)]);

// after:
boxShadow(Shadow.box(~x=px(1), ~y=px(2)));
boxShadows([Shadow.box(yellow), Shadow.box(red)]);
textShadow(Shadow.text(~y=px(3), ~blur=px(2), black));
textShadows([Shadow.text(~y=px(3), ~blur=px(2), black), Shadow.text(~x=px(3), green)]);

Added

  • Support for for object-fit property by @kuy - #125
  • Add fit-content option for width property by @mwarni - #149
  • Add support for grid-template-areas and grid-area by @drew887 - #156

Fixed

  • BoxShadow: none doesn't work - #148
  • !important doesn't apply to boxShadow - #147

Changed

  • Move types to Css.Types, updated some css properties
  • Use yarn instead of npm

9.0.1 - 2019-07-01

This is a major release: bs-css now depend on emotion 10.x instead of 9.x (see #114).

  • 🐛 #139 - Units for hsl(a)
  • 🐛 #138 - (top, bottom, left, right) properties should also belong to the 'cascading' type
  • 🐛 #133 - Support pixel units for gradient color stops
  • 🚀 #131 - Support for "direction" property
  • 🐛 #109 - flexShrink and flex should accept a float instead of a int

contributors: @simonkberg, @JakubMarkiewicz, @remitbri, @lucasweng

8.0.4 - 2019-04-04

  • 🚀 #125 - Add textShadows
  • 🏠 webpack is replaced by parcel, zero config local server

contributors: @Freddy03h

8.0.3 - 2019-03-20

  • 🚀 #118 - Minmax should allow fr
  • 🚀 Add a toJson function to convert a list of rules to a json object

contributors: @JakubMarkiewicz

8.0.2 - 2019-02-25

  • 🚀 #119 - Missing resize attribute
  • 🚀 #117 - Add spaceEvenly for justifyContent and alignContent
  • 🚀 #113 - Minmax in grid implementation

contributors: @JakubMarkiewicz, @lucasweng, @wegry

8.0.1 - 2019-01-31

  • 🐛 #108 - Wrong value for minWidth/maxWidth
  • 🚀 #111 - Fill all allowed display values

contributors: @sean-clayton, @c19

8.0.0 - 2018-12-18

  • 🚀 #76 - Add support for commonly used name for font weight
  • 🐛 #86 - Losing styles when merging nested selectors
  • 🐛 #105 - flexGrow should accept a float instead of a int
  • 🏠 #95 - Remove unnecessary reverse of styles before passing to JS obj
  • 🏠 #91 - Swapped glamor runtime to emotion runtime

Breaking changes

This version of bs-css is using a new runtime library that replaces glamor.

This decision is driven by the following points:

  • the author of glamor is no more maintaining its project, the last commit happened more than one year ago,
  • emotion is the recommended alternative because it mostly matches glamor's API
  • better grid support : glamor uses a lot of the old -ms-grid and -webkit-grid prefixes (with IE11 support)
  • Merging styles with sub selectors work as expected and fix a bug bs-css had

Given that it is a major version, we also changed some functions in the API, especially regarding merging.

Migration

  • fontWeight number must now use the num constructor: you must change fontWeight(300) to fontWeight(num(300)). The benefit is that you can transform your absolute numbers to font names, see https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Common_weight_name_mapping.
  • merge was really a concat function and could lead to problems as seen in #86. This is why it has been changed to use the internal library (emotion) and its signature is now : list(string) => string. If you want to keep the same functionality than before, you can use List.concat instead or @ operator.
  • if you are mixin reason/js, you need to change your dependency and replace glamor with emotion
  • flexGrow accepts a float instead of an int, add a . to your int value (for ex, convert 1 to 1.)

Contributors

Big thanks to @baldurh and @wegry for their work on emotion.