mdn / mdn/data

Simplify syntaxes

Open
#230 3 comments 8 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

idle
Dominant language
JavaScript
Stars
787
Forks
216
Avg merge
1d 5h
Merged PRs (30d)
6

Description

While working on new matching approach in CSSTree I found that some syntaxes can be simplified. I wrote a script to detect some cases. Here is the output:

# mdn/atRules/@font-face "font-display"
A top level group can be omitted
Current syntax:   [ auto | block | swap | fallback | optional ]
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: auto | block | swap | fallback | optional
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

# mdn/atRules "@import"
A single term group can be omitted and a multiplier moved to a term
Current syntax:   @import [ <string> | <url> ] [ <media-query-list> ]? ;
                                               ~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: @import [ <string> | <url> ] <media-query-list>? ;
                                               ~~~~~~~~~~~~~~~~~~~

# mdn/properties "cursor"
A top level group can be omitted
Current syntax:   [ [ <url> [ <x> <y> ]? , ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: [ <url> [ <x> <y> ]? , ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ]
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

# mdn/properties "initial-letter-align"
A top level group can be omitted
Current syntax:   [ auto | alphabetic | hanging | ideographic ]
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: auto | alphabetic | hanging | ideographic
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

# mdn/properties "outline"
A top level group can be omitted
Current syntax:   [ <'outline-color'> || <'outline-style'> || <'outline-width'> ]
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: <'outline-color'> || <'outline-style'> || <'outline-width'>
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

# mdn/syntaxes "attr()"
A group can be omitted and a multiplier moved to a non-comma term
Current syntax:   attr( <attr-name> <type-or-unit>? [, <attr-fallback> ]? )
                                                    ~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: attr( <attr-name> <type-or-unit>? , <attr-fallback>? )
                                                    ~~~~~~~~~~~~~~~~~~

# mdn/syntaxes "bg-position"
A top level group can be omitted
Current syntax:   [ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ]
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

# mdn/syntaxes "circle()"
A single term group can be omitted and a multiplier moved to a term
Current syntax:   circle( [ <shape-radius> ]? [ at <position> ]? )
                          ~~~~~~~~~~~~~~~~~~~
Suggested syntax: circle( <shape-radius>? [ at <position> ]? )
                          ~~~~~~~~~~~~~~~

# mdn/syntaxes "common-lig-values"
A top level group can be omitted
Current syntax:   [ common-ligatures | no-common-ligatures ]
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: common-ligatures | no-common-ligatures
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

# mdn/syntaxes "contextual-alt-values"
A top level group can be omitted
Current syntax:   [ contextual | no-contextual ]
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: contextual | no-contextual
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~

# mdn/syntaxes "contrast()"
A single term group with no multiplier can be omitted
Current syntax:   contrast( [ <number-percentage> ] )
                            ~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: contrast( <number-percentage> )
                            ~~~~~~~~~~~~~~~~~~~

# mdn/syntaxes "discretionary-lig-values"
A top level group can be omitted
Current syntax:   [ discretionary-ligatures | no-discretionary-ligatures ]
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: discretionary-ligatures | no-discretionary-ligatures
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

# mdn/syntaxes "east-asian-variant-values"
A top level group can be omitted
Current syntax:   [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: jis78 | jis83 | jis90 | jis04 | simplified | traditional
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

# mdn/syntaxes "east-asian-width-values"
A top level group can be omitted
Current syntax:   [ full-width | proportional-width ]
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: full-width | proportional-width
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

# mdn/syntaxes "fixed-repeat"
A single term group with no multiplier can be omitted
Current syntax:   repeat( [ <positive-integer> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
                          ~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: repeat( <positive-integer> , [ <line-names>? <fixed-size> ]+ <line-names>? )
                          ~~~~~~~~~~~~~~~~~~

# mdn/syntaxes "font-variant-css21"
A top level group can be omitted
Current syntax:   [ normal | small-caps ]
                  ~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: normal | small-caps
                  ~~~~~~~~~~~~~~~~~~~

# mdn/syntaxes "historical-lig-values"
A top level group can be omitted
Current syntax:   [ historical-ligatures | no-historical-ligatures ]
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: historical-ligatures | no-historical-ligatures
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

# mdn/syntaxes "matrix()"
A sequence can be rolled up
Current syntax:   matrix( <number> [, <number> ]{5} )
                          ~~~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: matrix( <number>#{6} )
                          ~~~~~~~~~~~~

# mdn/syntaxes "matrix3d()"
A sequence can be rolled up
Current syntax:   matrix3d( <number> [, <number> ]{15} )
                            ~~~~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: matrix3d( <number>#{16} )
                            ~~~~~~~~~~~~~

# mdn/syntaxes "numeric-figure-values"
A top level group can be omitted
Current syntax:   [ lining-nums | oldstyle-nums ]
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: lining-nums | oldstyle-nums
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~

# mdn/syntaxes "numeric-fraction-values"
A top level group can be omitted
Current syntax:   [ diagonal-fractions | stacked-fractions ]
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: diagonal-fractions | stacked-fractions
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

# mdn/syntaxes "numeric-spacing-values"
A top level group can be omitted
Current syntax:   [ proportional-nums | tabular-nums ]
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: proportional-nums | tabular-nums
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

# mdn/syntaxes "opacity()"
A single term group with no multiplier can be omitted
Current syntax:   opacity( [ <number-percentage> ] )
                           ~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: opacity( <number-percentage> )
                           ~~~~~~~~~~~~~~~~~~~

# mdn/syntaxes "position"
A top level group can be omitted
Current syntax:   [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

# mdn/syntaxes "scale()"
A sequence can be rolled up
Current syntax:   scale( <number> [, <number> ]? )
                         ~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: scale( <number>#{1,2} )
                         ~~~~~~~~~~~~~~

# mdn/syntaxes "skew()"
A sequence can be rolled up
Current syntax:   skew( <angle> [, <angle> ]? )
                        ~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: skew( <angle>#{1,2} )
                        ~~~~~~~~~~~~~

# mdn/syntaxes "shadow-t"
A top level group can be omitted
Current syntax:   [ <length>{2,3} && <color>? ]
                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: <length>{2,3} && <color>?
                  ~~~~~~~~~~~~~~~~~~~~~~~~~

# mdn/syntaxes "step-timing-function"
A group can be omitted and a multiplier moved to a non-comma term
Current syntax:   step-start | step-end | steps( <integer> [, [ start | end ] ]? )
                                                           ~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: step-start | step-end | steps( <integer> , [ start | end ]? )
                                                           ~~~~~~~~~~~~~~~~~~

# mdn/syntaxes "track-repeat"
A single term group with no multiplier can be omitted
Current syntax:   repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
                          ~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: repeat( <positive-integer> , [ <line-names>? <track-size> ]+ <line-names>? )
                          ~~~~~~~~~~~~~~~~~~

# mdn/syntaxes "translate()"
A sequence can be rolled up
Current syntax:   translate( <length-percentage> [, <length-percentage> ]? )
                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: translate( <length-percentage>#{1,2} )
                             ~~~~~~~~~~~~~~~~~~~~~~~~~

# mdn/syntaxes "var()"
A group can be omitted and a multiplier moved to a non-comma term
Current syntax:   var( <custom-property-name> [, <declaration-value> ]? )
                                              ~~~~~~~~~~~~~~~~~~~~~~~~~
Suggested syntax: var( <custom-property-name> , <declaration-value>? )
                                              ~~~~~~~~~~~~~~~~~~~~~~


Total suggestions: 31
   17 × A top level group can be omitted
    2 × A single term group can be omitted and a multiplier moved to a term
    5 × A sequence can be rolled up
    4 × A single term group with no multiplier can be omitted
    3 × A group can be omitted and a multiplier moved to a non-comma term

Action plan:

  • mdn/data specific syntaxes (generated by a description) can be changed quite easily
  • Some syntaxes are already changed in related specs, but mdn/data contains its outdated versions – those syntaxes should be aligned to specs
  • Some syntaxes are defined in that form in specs (such as matrix(), skew(), repeat(), attr() etc) – issues to related specs should be filled and syntaxes updated depending on its resolution

//cc @fantasai @tabatkins (sorry for mentioning, but I thought it might be interesting to you)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the referenced scripts/can-be-simplified.js in CSSTree and inspect the listed entries under mdn/atRules, mdn/properties, and mdn/syntaxes. Update the affected syntax definitions to match each suggested form, then verify that all listed cases are simplified without changing their meaning.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
content, web-dev
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.