Skip to content

Some useful tips for migrating

Caius Nocturne edited this page Feb 14, 2024 · 6 revisions

This is accurate as of v18.0.0 of rtfeldman's CSS.

Overlapping keywords are usually differentiated with underscores.

In this fork...

  • flex the property is expressed with the flex function.
  • flex the keyword value is expressed with the flex_ variable.

This is different to the original elm-css where to write display: flex;, you'd have to write the following:

displayFlex

In this fork of elm-css, you'd write it this way:

display flex_

You will find this in various different keywords, such as left_, contain_, etc. If a keyword value is no longer working when you try to migrate, it's probably this.


List-based properties are differentiated with Many.

There are many different properties that accept a custom number of arguments. In this fork of elm-css, they are marked consistently in their function with Many.

For example, for the font-family property:

  • In the original elm-css, the list-based version is called fontFamilies.
  • In this fork, the list-based version is called fontFamilyMany.

In addition, to prevent broken CSS from being created by this package, if you happen to use one of these Many property functions and give it an empty list, they will almost always emit the keyword value unset.


filterMany [] -- filter: unset;

filterMany [ invert (pct 70), sepia(pct 50) ] -- filter: invert(70%) sepia(50%);


---

# Some deprecated things have been removed.

If a property is either deprecated, exclusive to a certain browser engine, or both, then I may have removed it when making my fork.

These include:
- `clip` property
- `textStroke` and derivatives
- `zoom`
- `textDecorationSkip`