From b8bef32de5023bc3a3755c0b33ab5d2a741335f2 Mon Sep 17 00:00:00 2001 From: Brian Teague Date: Fri, 3 Feb 2023 01:54:21 -0500 Subject: [PATCH] Initial addition of function data (#638) * Initial addition of function data * Update css/functions.json * Remove en-US * Add groups for leader() * Fix indentation * Remove extraneous space * Remove another extraneous space --------- Co-authored-by: Jean-Yves Perrier --- README.md | 1 + css/README.md | 4 + css/functions.json | 537 ++++++++++++++++++++++++++++++++++++++ css/functions.md | 18 ++ css/functions.schema.json | 45 ++++ css/index.js | 1 + 6 files changed, 606 insertions(+) create mode 100644 css/functions.json create mode 100644 css/functions.md create mode 100644 css/functions.schema.json diff --git a/README.md b/README.md index 27b8c37b..6932b2c4 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,7 @@ Contains data about Web APIs: Contains data about: - CSS at-rules +- CSS functions - CSS properties - CSS selectors - CSS syntaxes diff --git a/css/README.md b/css/README.md index 771362a5..d8ec527d 100644 --- a/css/README.md +++ b/css/README.md @@ -14,6 +14,10 @@ The CSS data is split into these parts: [data](https://github.com/mdn/data/blob/main/css/at-rules.json) | [schema](https://github.com/mdn/data/blob/main/css/at-rules.schema.json) | [docs](https://github.com/mdn/data/blob/main/css/at-rules.md) +- **functions**: + [data](https://github.com/mdn/data/blob/main/css/functions.json) | + [schema](https://github.com/mdn/data/blob/main/css/functions.schema.json) | + [docs](https://github.com/mdn/data/blob/main/css/functions.md) - **properties**: [data](https://github.com/mdn/data/blob/main/css/properties.json) | [schema](https://github.com/mdn/data/blob/main/css/properties.schema.json) | diff --git a/css/functions.json b/css/functions.json new file mode 100644 index 00000000..9751622f --- /dev/null +++ b/css/functions.json @@ -0,0 +1,537 @@ +{ + "attr()": { + "syntax": "attr( ? [, ]? )", + "groups": [ + "CSS Generated Content" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/attr" + }, + "blur()": { + "syntax": "blur( )", + "groups": [ + "Filter Effects" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/filter-function/blur" + }, + "brightness()": { + "syntax": "brightness( )", + "groups": [ + "Filter Effects" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/filter-function/brightness" + }, + "calc()": { + "syntax": "calc( )", + "groups": [ + "CSS Units", + "CSS Lengths" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/calc" + }, + "circle()": { + "syntax": "circle( [ ]? [ at ]? )", + "groups": [ + "CSS Shapes" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/basic-shape/circle" + }, + "clamp()": { + "syntax": "clamp( #{3} )", + "groups": [ + "CSS Fonts" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/clamp" + }, + "conic-gradient()": { + "syntax": "conic-gradient( [ from ]? [ at ]?, )", + "groups": [ + "CSS Backgrounds and Borders", + "CSS Color" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/gradient/conic-gradient" + }, + "contrast()": { + "syntax": "contrast( [ ] )", + "groups": [ + "Filter Effects", + "CSS Color" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/filter-function/contrast" + }, + "counter()": { + "syntax": "counter( , ? )", + "groups": [ + "CSS Lists and Counters" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/counter" + }, + "counters()": { + "syntax": "counters( , , ? )", + "groups": [ + "CSS Lists and Counters" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/counters" + }, + "cross-fade()": { + "syntax": "cross-fade( , ? )", + "groups": [ + "Filter Effects", + "CSS Color" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/cross-fade" + }, + "drop-shadow()": { + "syntax": "drop-shadow( {2,3} ? )", + "groups": [ + "Filter Effects", + "CSS Color" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/filter-function/drop-shadow" + }, + "element()": { + "syntax": "element( )", + "groups": [ + "CSS Miscellaneous" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/element" + }, + "ellipse()": { + "syntax": "ellipse( [ {2} ]? [ at ]? )", + "groups": [ + "CSS Shapes" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/basic-shape/ellipse" + }, + "env()": { + "syntax": "env( , ? )", + "groups": [ + "CSS Box Model" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/env" + }, + "fit-content()": { + "syntax": "fit-content( [ | ] )", + "groups": [ + "CSS Box Model" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/fit-content" + }, + "grayscale()": { + "syntax": "grayscale( )", + "groups": [ + "Filter Effects", + "CSS Color" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/filter-function/grayscale" + }, + "hsl()": { + "syntax": "hsl( [ / ]? ) | hsl( , , , ? )", + "groups": [ + "CSS Color" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/color_value/hsl" + }, + "hsla()": { + "syntax": "hsla( [ / ]? ) | hsla( , , , ? )", + "groups": [ + "CSS Color" + ], + "status": "nonstandard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/color_value/hsla" + }, + "hue-rotate()": { + "syntax": "hue-rotate( )", + "groups": [ + "Filter Effects", + "CSS Color" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/filter-function/hue-rotate" + }, + "image()": { + "syntax": "image( ? [ ? , ? ]! )", + "groups": [ + "CSS Images" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/image/image" + }, + "image-set()": { + "syntax": "image-set( # )", + "groups": [ + "CSS Images" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/image/image-set" + }, + "inset()": { + "syntax": "inset( {1,4} [ round <'border-radius'> ]? )", + "groups": [ + "CSS Shapes" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/basic-shape/inset" + }, + "invert()": { + "syntax": "invert( )", + "groups": [ + "Filter Effects", + "CSS Color" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/filter-function/invert" + }, + "leader()": { + "syntax": "leader( )", + "groups": [ + "CSS Miscellaneous" + ], + "status": "nonstandard" + }, + "linear-gradient()": { + "syntax": "linear-gradient( [ | to ]? , )", + "groups": [ + "CSS Backgrounds and Borders", + "CSS Color" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/gradient/linear-gradient" + }, + "matrix()": { + "syntax": "matrix( #{6} )", + "groups": [ + "CSS Transforms" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transform-function/matrix" + }, + "matrix3d()": { + "syntax": "matrix3d( #{16} )", + "groups": [ + "CSS Transforms" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transform-function/matrix3d" + }, + "max()": { + "syntax": "max( # )", + "groups": [ + "CSS Units", + "CSS Lengths" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/max" + }, + "min()": { + "syntax": "min( # )", + "groups": [ + "CSS Units", + "CSS Lengths" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/min" + }, + "minmax()": { + "syntax": "minmax( [ | | min-content | max-content | auto ] , [ | | | min-content | max-content | auto ] )", + "groups": [ + "CSS Units", + "CSS Lengths" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/minmax" + }, + "opacity()": { + "syntax": "opacity( [ ] )", + "groups": [ + "Filter Effects", + "CSS Color" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/filter-function/opacity" + }, + "path()": { + "syntax": "path( [ , ]? )", + "groups": [ + "CSS Shapes", + "CSS Motion Path" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/path" + }, + "paint()": { + "syntax": "paint( , ? )", + "groups": [ + "CSS Backgrounds and Borders" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/image/paint" + }, + "perspective()": { + "syntax": "perspective( )", + "groups": [ + "CSS Transforms" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transform-function/perspective" + }, + "polygon()": { + "syntax": "polygon( ? , [ ]# )", + "groups": [ + "CSS Shapes" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/basic-shape/polygon" + }, + "radial-gradient()": { + "syntax": "radial-gradient( [ || ]? [ at ]? , )", + "groups": [ + "CSS Backgrounds and Borders", + "CSS Color" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/gradient/radial-gradient" + }, + "repeating-linear-gradient()": { + "syntax": "repeating-linear-gradient( [ | to ]? , )", + "groups": [ + "CSS Backgrounds and Borders", + "CSS Color" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/repeating-linear-gradient" + }, + "repeating-radial-gradient()": { + "syntax": "repeating-radial-gradient( [ || ]? [ at ]? , )", + "groups": [ + "CSS Backgrounds and Borders", + "CSS Color" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/gradient/repeating-linear-gradient" + }, + "rgb()": { + "syntax": "rgb( {3} [ / ]? ) | rgb( {3} [ / ]? ) | rgb( #{3} , ? ) | rgb( #{3} , ? )", + "groups": [ + "CSS Color" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/color_value/rgb" + }, + "rgba()": { + "syntax": "rgba( {3} [ / ]? ) | rgba( {3} [ / ]? ) | rgba( #{3} , ? ) | rgba( #{3} , ? )", + "groups": [ + "CSS Color" + ], + "status": "nonstandard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/color_value/rgba" + }, + "rotate()": { + "syntax": "rotate( [ | ] )", + "groups": [ + "CSS Transforms" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transform-function/rotate" + }, + "rotate3d()": { + "syntax": "rotate3d( , , , [ | ] )", + "groups": [ + "CSS Transforms" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transform-function/rotate3d" + }, + "rotateX()": { + "syntax": "rotateX( [ | ] )", + "groups": [ + "CSS Transforms" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transform-function/rotateX" + }, + "rotateY()": { + "syntax": "rotateY( [ | ] )", + "groups": [ + "CSS Transforms" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transform-function/rotateY" + }, + "rotateZ()": { + "syntax": "rotateZ( [ | ] )", + "groups": [ + "CSS Transforms" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transform-function/rotateZ" + }, + "saturate()": { + "syntax": "saturate( )", + "groups": [ + "Filter Effects", + "CSS Color" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/filter-function/saturate" + }, + "scale()": { + "syntax": "scale( , ? )", + "groups": [ + "CSS Transforms" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transform-function/scale" + }, + "scale3d()": { + "syntax": "scale3d( , , )", + "groups": [ + "CSS Transforms" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transform-function/scale3d" + }, + "scaleX()": { + "syntax": "scaleX( )", + "groups": [ + "CSS Transforms" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transform-function/scaleX" + }, + "scaleY()": { + "syntax": "scaleY( )", + "groups": [ + "CSS Transforms" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transform-function/scaleY" + }, + "scaleZ()": { + "syntax": "scaleZ( )", + "groups": [ + "CSS Transforms" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transform-function/scaleZ" + }, + "skew()": { + "syntax": "skew( [ | ] , [ | ]? )", + "groups": [ + "CSS Transforms" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transform-function/skew" + }, + "skewX()": { + "syntax": "skewX( [ | ] )", + "groups": [ + "CSS Transforms" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transform-function/skewX" + }, + "skewY()": { + "syntax": "skewY( [ | ] )", + "groups": [ + "CSS Transforms" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transform-function/skewY" + }, + "sepia()": { + "syntax": "sepia( )", + "groups": [ + "Filter Effects", + "CSS Color" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/filter-function/sepia" + }, + "target-counter()": { + "syntax": "target-counter( [ | ] , , ? )", + "groups": [ + "CSS Lists and Counters" + ], + "status": "nonstandard" + }, + "target-counters()": { + "syntax": "target-counters( [ | ] , , , ? )", + "groups": [ + "CSS Lists and Counters" + ], + "status": "nonstandard" + }, + "target-text()": { + "syntax": "target-text( [ | ] , [ content | before | after | first-letter ]? )", + "groups": [ + "CSS Miscellaneous" + ], + "status": "nonstandard" + }, + "translate()": { + "syntax": "translate( , ? )", + "groups": [ + "CSS Transforms" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transform-function/translate" + }, + "translate3d()": { + "syntax": "translate3d( , , )", + "groups": [ + "CSS Transforms" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transform-function/translate3d" + }, + "translateX()": { + "syntax": "translateX( )", + "groups": [ + "CSS Transforms" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transform-function/translateX" + }, + "translateY()": { + "syntax": "translateY( )", + "groups": [ + "CSS Transforms" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transform-function/translateY" + }, + "translateZ()": { + "syntax": "translateZ( )", + "groups": [ + "CSS Transforms" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/transform-function/translateZ" + }, + "var()": { + "syntax": "var( , ? )", + "groups": [ + "CSS Miscellaneous" + ], + "status": "standard", + "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/var" + } +} diff --git a/css/functions.md b/css/functions.md new file mode 100644 index 00000000..cd1e7a1d --- /dev/null +++ b/css/functions.md @@ -0,0 +1,18 @@ +# Functions + +[data](https://github.com/mdn/data/blob/main/css/functions.json) | +[schema](https://github.com/mdn/data/blob/main/css/functions.schema.json) + +[CSS value functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions) are statements that invoke special data processing or calculations to return a CSS value for a CSS property. CSS value functions represent more complex data types and they may take some input arguments to calculate the return value. + +The value syntax starts with the **name of the function**, followed by a left parenthesis (. Next up are the argument(s), and the function is finished off with a closing parenthesis ). + +Functions can take multiple arguments, which are formatted similarly to CSS property values. Whitespace is allowed, but they are optional inside the parentheses. In some functional notations multiple arguments are separated by commas, while others use spaces. + +```javascript +selector { + property: function([argument]? [, argument]!); +} +``` + +For more information about the formal grammar of CSS syntaxes, see [CSS value functions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions). diff --git a/css/functions.schema.json b/css/functions.schema.json new file mode 100644 index 00000000..26fd45c8 --- /dev/null +++ b/css/functions.schema.json @@ -0,0 +1,45 @@ +{ + "definitions": { + "status": { + "enum": [ + "standard", + "nonstandard", + "experimental", + "obsolete" + ] + }, + "mdn_url": { + "type": "string", + "pattern": "^https://developer.mozilla.org/docs/" + } + }, + "type": "object", + "additionalProperties": { + "type": "object", + "additionalProperties": false, + "required": [ + "syntax", + "groups", + "status" + ], + "properties": { + "syntax": { + "type": "string" + }, + "groups": { + "type": "array", + "minitems": 1, + "uniqueItems": true, + "items": { + "$ref": "definitions.json#/groupList" + } + }, + "status": { + "$ref": "#/definitions/status" + }, + "mdn_url": { + "$ref": "#/definitions/mdn_url" + } + } + } +} diff --git a/css/index.js b/css/index.js index c258137f..fcc2ebd2 100644 --- a/css/index.js +++ b/css/index.js @@ -1,5 +1,6 @@ module.exports = { atRules: require('./at-rules'), + functions: require('./functions'), selectors: require('./selectors'), types: require('./types'), properties: require('./properties'),