0.2.0 (commit log)

  • Changed package to just scalacss. Many projects already do this.
    Automate the transition with this:
    find . -type f -name '*.scala' -exec perl -pi -e 's/japgolly\.(?=scalacss)//g' {} +
  • Reduced JS output size to less than half. (#17)
  • Style composition now handles compatable duplicates without warning. (#28)
  • Style composition warnings gained more detail.

    // Before
    [CSS WARNING] .scalacss-0001 -- margin overridden by marginLeft.
    [CSS WARNING] .scalacss-0002 -- cursor overridden by cursor.
    // After
    [CSS WARNING] .MyStyles-0001 -- {margin-left: 6px} conflicts with {margin: 12px}
    [CSS WARNING] .MyStyles-0002 -- {cursor: zoom-in} conflicts with {cursor: pointer}
  • Manually-specified className no longer propagated in style composition. (#25)
  • CSS no longer generated for empty styles, including styles consisting solely of addClassNames.
  • Added DevDefaults and ProdDefaults with Defaults choosing between the two.


  • Changes to generated CSS class names:
    • In prod-mode, each StyleSheet gets a different prefix.
    • In dev-mode, class names are prefixed by the StyleSheet class/object name.
    • You can specify your own class name prefix by adding this to your StyleSheet:
      override implicit val classNameHint = ClassNameHint("TEST")
    • This means that separate, unrelated StyleSheets can be used in the same process without overlap.
  • Added mutable.GlobalRegistry as an optional convenience for managing shared stylesheets.
    See Global Registry feature doc.
  • Added .styles and .css to StyleSheet.
  • StyleSheet now warn if new styles are registered after .render, .css, .styles called.
    (Yep, that's why it's in the mutable package.)


  • Attribute aliases in DSL were missing Scaladoc.
  • New DSL: mixin(…). (The difference between style() which registers, and styleS() which doesn't, was too fine.)
  • New DSL: mixinIf(bool)(…).
  • New DSL: mixinIfElse(bool)(…)(…).
  • New DSL: <String>.color. Example: borderColor("#080".color).
  • Add literals to DSL auto-import: inherit,initial, unset.
  • Renamed literal each_line to eachLine.

Typed CSS

  • Four-edge CSS attributes had vertical/horizontal around the wrong way.
    // These correctly generate {margin: 4px 1ex}
    margin(4 px, 1 ex)
    margin(h = 1.ex, v = 4.px)
  • Four-edge CSS attributes learned .vertical and .horizontal.
    margin.vertical(4 px)
    // ↑ is a shortcut for ↓
    marginTop(4 px) compose marginBottom(4 px)
  • clear learned inlineStart and inlineEnd values.
  • float learned inlineStart and inlineEnd values.

Browser prefixes

Added browser prefixes for...

  • captionSide block/inline start/end values.
  • display flex and grid values.
  • fontSizeAdjust keys.
  • order keys.
  • textAlign start/end values.