Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 51 commits into
base: phantom-types
Choose a base branch
from

Conversation

dzuk-mutant
Copy link

@dzuk-mutant dzuk-mutant commented Nov 17, 2021

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

  • ::backdrop
  • ::cue
  • ::marker
  • ::placeholder
  • ::selection

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

  • Various values have been suffixed with _ to make way for new properties where conflicts occurred.
  • Various variable names in functions have been renamed to avoid conflicts with new values.
  • According to MDN, scroll-margin properties should only take Lengths, not LengthSupported {auto : Supported}, so I changed the code for all the pre-existing ones to make that the case.
  • I noticed that width and height's type annotations didn't account for the number of values they could actually support, so I changed them.
  • Added the clip value to the overflow properties that support it.

Other changes

  • Fixed some typos in the documentation for pre-existing scroll-padding functions.
  • Rearranged some properties so they grouped together better based on functionality, like putting all the gap properties together because they don't just apply to grid layouts anymore.

Things I'm unsure of

  • For rotate, instead of creating a rotate4 with three vector ints and an angle, I decided to create a rotate2 that can accept a new value called vec3. Once again I'm not sure if this is idiomatic but (vec3 1 1 1) seemed more elegant and semantic than doing (int 1) (int 1) (int 1).

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.

Implements:
- border-start-start-radius
- border-start-end-radius
- border-end-start-radius
- border-end-end-radius

In both 1 and 2-argument forms.
Implements the following:
- scroll-margin-block
- scroll-margin-inline

both as 1 and 2 argument versions.
Scroll-margin properties don't accept percentages, only basic lengths.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin

- All scroll-margin properties have had their input types changed from LengthSupported { auto : Supported } to Length.
Implements the following:
- scroll-margin-block-start
- scroll-margin-block-end
- scroll-margin-inline-start
- scroll-margin-inline-end
- Adds an implementation of the inset property in 1, 2, 3, and 4 argument forms.
- Renames the pre-existing 'inset' value to 'inset_', based on current package conventions.
Implements the following:
- inset-block
- inset-inline
as both 1 and 2-argument functions.
Implements the following:
- inset-block-start
- inset-block-end
- inset-inline-start
- inset-inline-end

Makes the docs for top, bottom, left and right properties flow a bit better with the link use.
Changed the links for inset-block and inset-inline functions from MDN to CSS Tricks Almanac.
Implements the following:
- scroll-padding-block
- scroll-padding-inline

Both as 1 and 2-argument functions.

- Fixed variable naming in scrollMarginBlock2 and scrollMarginInline2.
- Fixed a typo I noticed in scrollPadding's documentation.
Implements the following properties:
- scroll-padding-block-start
- scroll-padding-block-end
- scroll-padding-inline-start
- scroll-padding-inline-end
Some one-argument functions I wrote didn't use BaseValue when they should have.. This has been fixed.
Implements the following:
- block-size
- inline-size
- max-block-size
- max-inline-size
- min-block-size
- min-inline-size

Fixes:
- Both the width and height properties can accept, pct, auto, maxContent, minContent and fitContent, so I've changed their type annotations to add them.
- Re-arranged existing sizing property and variable functions so they flow better (group functions first and values later).
- Made the documentation for minContent, maxContent and fitContent a bit more concise and inclusive to Logical size properties.
Implements the following:
- gap
- row-gap

This commit also groups column-gap with the aforementioned properties since they're related.
Implements the following:
- overflow-block
- overflow-inline
Implements the following:
- overscroll-behavior
- overscroll-behavior-x
- overscroll-behavior-y
- overscroll-behavior-block
- overscroll-behavior-inline
- The 'inset_' field for box-shadows has been renamed to 'inset' because they don't interact with the 'inset_' function.
- Fixed a typo in the boxShadows documentation where the function examples were called 'boxShadow' instead of 'boxShadows'.
The contain variable now includes documentation for overscrollBehavior as well as backgroundSize.
- Adds quotes property (in 1, 2 and 4 argument versions)
- Moves the string value up to the area with other shared value types
Implements:
- text-overflow property (in 1 and 2-argument forms)
- ellipsis value (for text-overflow)
Implements the following:
- line-break
- strict value for line-break
- loose value for line-break

Adds line-break as a use case the documentation for the other values that it accepts.
Adds preliminary 2 and 3-argument versions of hanging-punctuation.

These need more work because the way the arguments work here can enable incorrectly typed CSS.
Implements the following:
- resize property
- horizontal and vertical values (for resize)

Changed the variable names in various functions to eliminate naming conflicts with the new horizontal and vertical values.
Implements the following:
- contain property (1, 2, 3 and 4 argument versions)
- strict value
- size value
- layout value
- style value
- paint value

Changes to existing code:
- style variables in functions have been renamed to styleVal to avoid clashes with style.
- size variables in functions have been renamed to sizeVal to avoid clashes with size.
- Renamed contain value to contain_ so as to not clash with contain property.

It's unclear how to mark contain4 since having values is redundant but calling it containAll is probably misleading, so it's being called contain4 pending further discussion.
Implements the following:
- paint-order property (in 1, 2 and 3-argument forms)
- markers value

Adjusts the documentation of fill_ and stroke to mention that they work with paintOrder.
- Adds clip value to overflow, overflowX and overflowY.
- Adds perspective property
- Renames the pre-existing 'perspective' value to 'perspective_'
- Implements perspective-origin property.
- Applies elm-format to the previous few commits that hadn't had it applied.
- Adds scale property (as scale, scale2, and scale3)
- Renames scale value to scale_ (to avoid conflicts with scale)
- Renames scale2 value to scale2_ (to avoid conflicts with scale2)
- Adds rotate property (as rotate and rotate2)
- Renames rotate value to rotate_ (to avoid conflicts with rotate)
- New value function: z
- New value function: vec3
- Changes some variable names in functions to avoid conflicts with new value functions
Adds the folowing pseudo-elements:
- ::backdrop
- ::cue
- ::marker
- ::placeholder
- ::selection
- Keeps active, disabled and after DRY.
- Makes a doc I just made make a little more sense.
Adds the following pseudo-classes:
- :checked
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :last-child
- :last-of-type
- :link
- :only-child
- :only-of-type
- :out-of-range
- :read-only
- :read-write
- :required
- :root
- :scope
- :target
- :valid
- :visited
Applies elm-format to recent changes.
- Noted that contain: style; is at-risk of being depreciated.
@dzuk-mutant dzuk-mutant changed the title Phantom types: Some more properties + a few fixes Phantom types: More properties, pseudo-stuff and a few fixes Nov 23, 2021
There were a series of conflicts and a few duplicate functions from the recent merge. This fixes those issues.
- Added all possible implementations of font-variant-east-asian.
- Added all possible values of font-variant-east-asian.
- Changed the docs for fullWidth so it includes it's new use with fontVariantEastAsian.
- Added the font-optical-sizing property.
Implements the following:
- font-kerning
- font-language-override
- font-synthesis (1, 2 and 3-argument variants)
- font-variant-position

Other changes:
- made contain4 a normal property because I figured it would be more readable to have explicit CSS values rather than implicit ones.
Cleaning up by moving values shared across different types of properties into the 'Shared Values' section.
These values also have updated documentation to these the properties that use them.

Moved values:
- start
- end
- left_
- right_
- top_
- bottom_
- baseline
- clip
- block
- inline
- ruby

Pre-existing values in the shared category have also had updated documentation.

Some documentation to other values have had lightly improved grammar.
Bringing more values that should be in the shared section:
- stretch (added documentation)
- center (added documentation)
- content (improved documentation)
- normal
- text (improved docs)
- paddingBox
- cover (improved docs)
- contain_

Other stuff
- Improved documentation for placeholder.
- Added links to moved values in the Align Items section of the docs so the user knows that these are other values that can be used.
- Simplified the wording in the documentation for repeat values to match the wording in other documentation for values.
- Applied elm-format to previous commits.
As I'm working on this file more, I found that a lot of things didn't have clear organisation so I figured it would be good to give them a look over.

Moved docs and exposing
- Moved the shared values section to a more logical part of the docs and exposing (after the main measurements)
- Moved the url variable higher up in the docs and exposing.
- Added one line break between the cursor properties and the cursor values since I figured that would separate them a bit more neatly.

Edited documentation
- Changed the levels of different headers to reflect what level they're actually at in the general categorisation heirarchy.
- Fixed a doc typo in contain_ and textOverflow2.
- Renamed 'Align Items' section to 'Flex align items' and made it a subheader of the Flexbox module section as there's no other purpose for these particular values.
More shared values have been organised together:
- fullWidth
- sub
- super

Misc:
- Moved ltr and rtl values to be next to the direction property in the code (since they are the only things that go together)
Grouped what might be the last batch of shared values:
- all_
- both
- strict
- fill_
- stroke
- always
- x
- y
- style

Misc:
- Expanded documentation for slice and clone.
- Fixed some documentation typos for shared values
- Applied elm-format to Css.elm.
- Rearranged the shared values so values with similar effects and categories are next to each other.
- Improved documentation
Forgot to move clip to it's more appropriate place in the shared values.
@dzuk-mutant
Copy link
Author

dzuk-mutant commented Dec 6, 2021

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
Copy link
Author

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant