rtfeldman / elm-css

Typed CSS in Elm.
https://package.elm-lang.org/packages/rtfeldman/elm-css/latest
BSD 3-Clause "New" or "Revised" License
1.23k stars 196 forks source link

Phantom types: More properties, pseudo-stuff and a few fixes #553

Open dzuk-mutant opened 2 years ago

dzuk-mutant commented 2 years ago

I want to try to get the phantom-types branch much closer to completion while I have free time ^^

My goal with this PR is simply filling in a lot of relatively simple properties that have not yet been made, don't really do anything new and don't really shake anything up.

New stuff

This PR implements the following:

psuedo-classes

pseudo-elements

Logical border radius

Logical snap scrolling metrics

Overscroll behavior

Inset and logical insets

Logical dimensions

Logical overflow

Missing gap properties

Typographic properties

Missing font properties

transforms

perspective

SVG

Misc

Values and types

Other changes

Things I'm unsure of

I hope this is all okay! Sorry for doing 3 separate PRs for adding all these, this was kind of impromptu and I wasn't sure how many I was gonna do ^^' (I'm pretty new to doing PRs). I also figured that it might be best that I keep adding stuff I was working on into this one until someone takes a look to avoid making lots of PRs and so others wouldn't need to handle the merge conflicts.

dzuk-mutant commented 2 years ago

I hope this wasn't an overreach but while I've been doing these basic additions, I noticed that there were a bunch of value functions that were in weird places and value functions that should probably be in the Shared Values section of the docs but weren't, so I decided to go through the whole Css module and group up all the values that were used in multiple different types of properties and bring them into the shared values section, which ended up being:

    [...]
    , auto, none, normal, strict, all_, both, always
    , hidden, visible
    , contentBox, borderBox, paddingBox
    , left_, right_, top_, bottom_, block, inline, start, end
    , x, y
    , stretch, center, content, fill_, stroke, text, style
    , clip, cover, contain_
    , baseline, sub, super, ruby, fullWidth
    [...]

I also altered their documentation to make light of the fact that they are used by different kinds of properties if their docs didn't mention it.

I moved url() up to be with the other value functions in the docs and the code because it was originally sitting under the SVG section.

I also noticed the levels of headings weren't consistent, so I made them consistent.

dzuk-mutant commented 2 years ago

I'm gonna mention it in the phantom types thread but I noticed that when it comes to the documentation of CSS values in this module, some docs link to to the values section of the property that uses this value on MDN and use the property's CSS name:


{-| The `scroll` value used for properties such as [`overflow`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Values) and [`background-attachment`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment).

    overflow scroll

    backgroundAttachment scroll

-}
scroll : Value { provides | scroll : Supported }
scroll =
    Value "scroll"

...while others reference the Elm documentation and the Elm function name for that property.

{-| The `url` value for the [`cursor`](#cursor),
[`fill`](#fill),
[`strokeImage`](#strokeImage),
and [`backgroundImage`](#backgroundImage) properties.
-}
url : String -> Value { provides | url : Supported }
url str =
    Value ("url(" ++ str ++ ")")

As far as I know there isn't a consistency rule for what it should be? (All the stuff I've written so far use URLs to the Elm functions and use the Elm function naming for properties)