Serialize @function return type like parameter types

type(*) or * are omitted. A single <syntax-component> is always unwrapped from
type(). A chain of <syntax-component> is unwrapped from type except in the
output of CSSFunctionRule.cssText.

Author: cdoublev

__tests__/stylesheet.js

@@ -512,6 +512,7 @@ describe('CSSFunctionRule, CSSFunctionDeclarations', () => {
             ['--parameter-4 <number> : 1'],
             ['--parameter-5 type(<number>)', '--parameter-5 <number>'],
             ['--parameter-6 type(<number> | <percentage>)'],
+            ['--parameter-7 type("<number>")', '--parameter-7 <number>'],
         ]
         const styleSheet = createStyleSheet(`
             @function --name(${parameters.map(([input]) => input).join(', ')}) returns type(*) {

lib/cssom/CSSFunctionRule-impl.js

@@ -20,7 +20,6 @@ class CSSFunctionRuleImpl extends CSSGroupingRuleImpl {
         super(globalObject, args, privateData)
         const { parentStyleSheet } = this
         const { prelude: [{ name, value: parameters }, returnType], value } = privateData
-        const type = isOmitted(returnType) ? '*' : serializeCSSComponentValue(returnType[1])
         const rules = parseBlockContents(value, this).map(rule => {
             if (Array.isArray(rule)) {
                 return CSSFunctionDeclarations.createImpl(globalObject, undefined, {
@@ -32,8 +31,8 @@ class CSSFunctionRuleImpl extends CSSGroupingRuleImpl {
             return rule
         })
         this._parameters = parameters
+        this._returnType = returnType
         this.name = serializeIdentifier({ value: name })
-        this.returnType = type === 'type(*)' ? '*' : type
         this.cssRules = CSSRuleList.createImpl(globalObject, undefined, { rules })
     }
 
@@ -42,24 +41,39 @@ class CSSFunctionRuleImpl extends CSSGroupingRuleImpl {
      * @see {@link https://drafts.csswg.org/cssom-1/#dom-cssrule-csstext}
      */
     get cssText() {
-        const { _parameters, cssRules, name, returnType } = this
+        const { _parameters, _returnType, cssRules, returnType, name } = this
         const rules = cssRules._rules.map(rule => rule.cssText).join(' ')
         let string = `@function ${name}(${serializeCSSComponentValue(_parameters)}) `
         if (returnType !== '*') {
-            string += `returns ${returnType} `
+            string += `returns ${serializeCSSComponentValue(_returnType[1])} `
         }
         string += rules ? `{ ${rules} }` : '{}'
         return string
     }
 
+    /**
+     * @returns {string}
+     * @see {@link https://drafts.csswg.org/css-mixins-1/#dom-cssfunctionrule-returntype}
+     */
+    get returnType() {
+        const { _returnType } = this
+        if (isOmitted(_returnType)) {
+            return '*'
+        }
+        const type = _returnType[1]
+        if (type.types[0] === '<function>') {
+            return serializeCSSComponentValue(type.value)
+        }
+        return serializeCSSComponentValue(type)
+    }
+
     /**
      * @returns {FunctionParameter[]}
      * @see {@link https://drafts.csswg.org/css-mixins-1/#dom-cssfunctionrule-getparameters}
      */
     getParameters() {
         const parameters = []
         this._parameters.forEach(([name, type, defaultValue]) => {
-            defaultValue = isOmitted(defaultValue) ? null : serializeCSSComponentValue(defaultValue[1]),
             name = serializeIdentifier(name)
             if (isOmitted(type)) {
                 type = '*'
@@ -68,6 +82,7 @@ class CSSFunctionRuleImpl extends CSSGroupingRuleImpl {
             } else {
                 type = serializeCSSComponentValue(type)
             }
+            defaultValue = isOmitted(defaultValue) ? null : serializeCSSComponentValue(defaultValue[1])
             parameters.push({ defaultValue, name, type })
         })
         return parameters

lib/parse/postprocess.js

@@ -377,6 +377,21 @@ function postParseCounterStyleName(name, node) {
     return name
 }
 
+/**
+ * @param {object} type
+ * @returns {object}
+ * @see {@link https://drafts.csswg.org/css-mixins-1/#typedef-css-type}
+ *
+ * It represents a single <syntax-component> type without a type() wrapper.
+ */
+function postParseCSSType(type) {
+    const { types, value } = type
+    if (types[0] === '<function>' && isList(value) && isOmitted(value[1])) {
+        return value[0]
+    }
+    return type
+}
+
 /**
  * @param {object[]} definition
  * @param {object} node
@@ -592,7 +607,7 @@ function postParseForgivingSelectorList(selectors, node) {
  * It aborts parsing when the parameter has the same name as a preceding one,
  * or when its default value is invalid according to its type.
  *
- * It represents the parameter without a default type.
+ * It represents the parameter without the default type.
  */
 function postParseFunctionParameter(parameter, node, parser) {
     const { context, parent } = node
@@ -612,10 +627,6 @@ function postParseFunctionParameter(parameter, node, parser) {
             if (syntax.value === '*') {
                 return list([name, omitted, defaultValue])
             }
-            const [head, combined] = syntax
-            if (isOmitted(combined)) {
-                return list([name, head, defaultValue])
-            }
         }
     }
     return parameter
@@ -1767,6 +1778,7 @@ module.exports = {
     '<container-name>': postParseContainerNameType,
     '<counter-name>': postParseCounterName,
     '<counter-style-name>': postParseCounterStyleName,
+    '<css-type>': postParseCSSType,
     '<custom-function-definition>': postParseCustomFunctionDefinition,
     '<custom-ident>': postParseCustomIdentifier,
     '<custom-property-name>': postParseCustomPropertyName,