These are chat archives for japgolly/scalacss

Mar 2015
David Barri
Mar 17 2015 01:24

It's done now anyway.

abstract class TypedAttrT4Edges[T <: ValueClass](sep: String) extends TypedAttrBase {

    final def apply(allEdges: ValueT[T]): AV = ...

    final def apply(horizontal: ValueT[T], vertical: ValueT[T]): AV = ...

    final def apply(top: ValueT[T], vertical: ValueT[T], bottom: ValueT[T]): AV = ...

    final def apply(top: ValueT[T], right: ValueT[T], bottom: ValueT[T], left: ValueT[T]): AV = ...

IntelliJ auto-complete shows you the names. Usage looks like margin(12 px) or margin(10.px, auto) but you can also be explicit like margin(horizontal = 10.px, vertical = auto) if you want.

Man, I'm sooooooo over adding this type-safe value support. I'm done. I'll accept community patches for the rest. All the most commonly used ones are typed now.
> bin/stats 

CSS Attributes
  Total: 281
  Typed: 164 (58%)
Untyped: 117
David Barri
Mar 17 2015 01:30
If you're interested, these are still untyped:
> bin/untyped | xargs
animation animationDelay animationDirection animationDuration animationFillMode animationIterationCount animationName animationPlayState animationTimingFunction background backgroundAttachment backgroundBlendMode backgroundClip backgroundImage backgroundOrigin backgroundPosition backgroundRepeat backgroundSize blockSize borderImage borderImageOutset borderImageRepeat borderImageSlice borderImageSource borderImageWidth borderRadius borderSpacing boxReflect boxShadow clipPath columnRule columns content counterIncrement counterReset filter flex flexBasis flexFlow flowFrom flowInto font fontFamily fontFeatureSettings fontLanguageOverride fontSynthesis fontVariant fontVariantAlternates fontVariantEastAsian fontVariantLigatures fontVariantNumeric grid gridArea gridAutoColumns gridAutoFlow gridAutoPosition gridAutoRows gridColumn gridColumnEnd gridColumnStart gridRow gridRowEnd gridRowStart gridTemplate gridTemplateAreas gridTemplateColumns gridTemplateRows height imageOrientation imageResolution initial inlineSize listStyle listStyleImage listStyleType marks mask maskType mixBlendMode objectPosition outline overflowWrap perspectiveOrigin pointerEvents quotes regionFragment rubyMerge shapeOutside tabSize textCombineUpright textDecoration textDecorationLine textEmphasis textEmphasisColor textEmphasisPosition textEmphasisStyle textIndent textOverflow textRendering textShadow textSizeAdjust textStroke textStrokeColor textStrokeWidth textUnderlinePosition touchAction transform transformOrigin transition transitionDelay transitionDuration transitionProperty transitionTimingFunction unicodeRange userSelect width willChange
Oh wait, sorry I replied to the wrong thing. We were talking about border which is different than padding, margin, etc. Well it's done similarly.
This wouldn't be such an issue if it weren't for stupid Java erasure. def apply(ValueT[Color]) and def apply(ValueT[Style]) erase to the same method.
David Barri
Mar 17 2015 01:35
Oh well bad luck. Over it.
Over it. Over it. Over it. :D
Mar 17 2015 06:46
Oh oh :-)
@japgolly You're doing great, but don't try to get everything working for the first time.
Given that its coming very well, once it seems adoption- people will submit PRs for other properties so they take typesafe values
Mar 17 2015 19:26
there's gotta be some way to automate that with a script of some sort
I'd do it if I had the time - unfortunately I'm cramming for an exam that I have in about 3 hours
David Barri
Mar 17 2015 21:28
Thanks @SRGOM and I agree! It's funny though, last night I copied normalise.css using it and ended up adding types for about 10 more. :P
@k3d3 Yah but the translation is far from straight forward. Most of what is done was automated misc/syntax/* but it was still very time consuming to get right. I was really hoping it would've been easier to automate.
What's your exam for? Are you in uni?
Mar 17 2015 22:28
I graduated already, but I'm taking a French course on the side
David Barri
Mar 17 2015 23:09
Oh cool! I like languages but I speak zero French. During the whole "je suis Charlie" thing I had to ask what "je suis" meant lol.

So here's a very cool new feature ↓ I just added:

/** Style hooking into Bootstrap */
val sb = style(
  addClassNames("btn", "btn-default"),


.demo-0007 {
  margin-top: inherit;

yet look at the class name the style will apply:

assertEq(, "demo-0007 btn btn-default")
Think of the implications of that! You can put all of your Bootstrap dependencies in one file (your stylesheet). That means switching from Bootstrap to another CSS library will be super easy.
/cc @chandu0101
Chandra Sekhar Kode
Mar 17 2015 23:27
you just started as better css but its going far beyond ! , take a bow mate, keep up the excellent work :) . I suggest you must spend one whole day to just deomnstrate all the features of scala css with extensive examples so that we can reach masses!
If any JS dev sees this , he’ll be like