Add "single-value" and "helper" CSS props (like `margin: 0`)

[vyorkin]

I'm not sure about the names, but it might be smth like that:

CSS.Transform:

scale_ ∷ Number → Transformation
scale_ a = Transformation $ fromString "(" <> value a <> fromString ")"

translate_ ∷ Number → Transformation
translate_ a = Transformation $ fromString "(" <> value a <> fromString ")"

skew_ ∷ Number → Transformation
skew_ a = Transformation $ fromString "(" <> value a <> fromString ")"

(yep, I don't like these fromString "(", fromString ")" too 😂)

CSS.Border:

borderRadius_ ∷ ∀ a. Size a → CSS
borderRadius_ = key $ fromString "border-radius"

Here is what I mean by the "helper" props, e.g. for CSS.Box these might be:

boxShadow_ ∷ BoxShadow → CSS
boxShadow_ = boxShadow <<< singleton

boxShadowInset_ ∷ BoxShadow → CSS
boxShadowInset_ = boxShadow <<< singleton <<< bsInset

and for CSS.Flexbox maybe smth like these might be helpful:

flexNone ∷ CSS
flexNone = flex 0 0 auto

flex1 ∷ CSS
flex1 = do
  flexGrow 1
  flexShrink 1
  flexBasis $ pct 0.0

-- or even

flexX :: Int -> CSS
...

CSS.Geometry:

marginX ∷ ∀ a. Size a → CSS
marginX x = margin nil x nil x

marginY ∷ ∀ a. Size a → CSS
marginY y = margin y nil y nil

marginXY ∷ ∀ a. Size a → Size a → CSS
marginXY x y = margin y x y x

margin_ ∷ ∀ a. Size a → CSS
margin_ v = key (fromString "margin") (value v)

paddingX ∷ ∀ a. Size a → CSS
paddingX x = padding nil x nil x

paddingY ∷ ∀ a. Size a → CSS
paddingY y = padding y nil y nil

paddingXY ∷ ∀ a. Size a → Size a → CSS
paddingXY x y = padding y x y x

padding_ ∷ ∀ a. Size a → CSS
padding_ v = key (fromString "padding") (value v)

size ∷ ∀ a b. Size a → Size b → CSS
size w h = do
  width w
  height h

size_ ∷ ∀ a. Size a → CSS
size_ v = size v v

(maybe paddingXY should be paddingYX)

What do you think? 👎 or 👍 ?

[vyorkin]

Also for some props (e.g. border) its currently inevitable to do this

CSS.key (CSS.fromString "border") "none"
CSS.key (CSS.fromString "border-bottom") "none"

to set

border: none
border-bottom: none

etc

[itmuckel]

I have the same problem:

borderRadius (px 20.0) (px 20.0) (px 20.0) (px 20.0)

I'd like to write:

borderRadius (px 20.0)

I know there is no overloading in purescript, but maybe this can be implemented to accept a different type of input? Relatively new to the language, so I don't know what's possible.

[vyorkin]

@itmuckel I'm not sure if this purescript-css package is used by anyone other than me, so I've just added everyting I need to my project, for example https://github.com/vyorkin/soundcloud/blob/master/src/CSS/Geometry.purs#L19 (it is unfinished and abandoned, due to issues with SoundCloud API)

[garyb]

We still use it, just only a very small/basic part of it.

@vyorkin would you be interested in taking over maintenance of this library? I've done a terrible job of keeping on top of it, and you've consistently tried to contribute to it for ages now.

[vyorkin]

@garyb Yes, I'd like to!

[garyb]

Great! Invite sent 🙂. You should have access to do anything you'd need after accepting that I think, if not, let me know and I'll fix it up.