Add support for <if()>

Author: cdoublev

__tests__/style.js

@@ -412,6 +412,7 @@ describe('arbitrary substitution', () => {
             ['--custom(--custom(!))'],
             ['attr(name, attr())'],
             ['env(name, env())'],
+            ['if(if())', 'if(if())'],
             ['inherit(--custom, inherit())'],
             ['random-item(--key, random-item())'],
             ['var(--custom, var())'],
@@ -421,6 +422,7 @@ describe('arbitrary substitution', () => {
             ['  /**/ @1/**/1e0 --CUSTOM(  /**/ 1e0 /**/  ', '@1 1 --CUSTOM(1)'],
             ['  /**/ @1/**/1e0 ATTR(  name, /**/ 1e0 /**/  ', '@1 1 attr(name, 1)'],
             ['  /**/ @1/**/1e0 ENV(  name, /**/ 1e0 /**/  ', '@1 1 env(name, 1)'],
+            ['  /**/ @1/**/1e0 IF(  if(): /**/ 1e0 /**/  ', '@1 1 if(if(): 1)'],
             ['  /**/ @1/**/1e0 RANDOM-ITEM(  --key, /**/ 1e0 /**/  ', '@1 1 random-item(--key, 1)'],
             ['  /**/ @1/**/1e0 VAR(  --custom, /**/ 1e0 /**/  ', '@1 1 var(--custom, 1)'],
         ]
@@ -4712,6 +4714,10 @@ describe('CSSFontFaceDescriptors', () => {
         style.sizeAdjust = 'env(name, attr(name))'
         expect(style.fontWeight).toBe('env(name, attr(name))')
         expect(style.sizeAdjust).toBe('env(name, attr(name))')
+        style.fontWeight = 'if(media(width): 1)'
+        style.sizeAdjust = 'if(media(width): 1%)'
+        expect(style.fontWeight).toBe('if(media(width): 1)')
+        expect(style.sizeAdjust).toBe('if(media(width): 1%)')
         style.fontWeight = 'first-valid(1)'
         style.sizeAdjust = 'first-valid(1%)'
         expect(style.fontWeight).toBe('1')
@@ -4786,6 +4792,8 @@ describe('CSSKeyframeProperties', () => {
         // Dependency-free substitution
         style.fontWeight = 'env(name)'
         expect(style.fontWeight).toBe('env(name)')
+        style.fontWeight = 'if(media(width): 1)'
+        expect(style.fontWeight).toBe('if(media(width): 1)')
         style.fontWeight = 'first-valid(1)'
         expect(style.fontWeight).toBe('1')
         style.fontWeight = 'calc(progress(1, 0, 1))'
@@ -4846,6 +4854,8 @@ describe('CSSMarginDescriptors', () => {
         // Dependency-free substitution
         style.fontWeight = 'env(name)'
         expect(style.fontWeight).toBe('env(name)')
+        style.fontWeight = 'if(media(width): 1)'
+        expect(style.fontWeight).toBe('if(media(width): 1)')
         style.fontWeight = 'first-valid(1)'
         expect(style.fontWeight).toBe('1')
         style.fontWeight = 'calc(progress(1, 0, 1))'
@@ -4908,6 +4918,10 @@ describe('CSSPageDescriptors', () => {
         style.size = 'env(name, attr(name))'
         expect(style.fontWeight).toBe('env(name, attr(name))')
         expect(style.size).toBe('env(name, attr(name))')
+        style.fontWeight = 'if(media(width): 1)'
+        style.size = 'if(media(width): 1px)'
+        expect(style.fontWeight).toBe('if(media(width): 1)')
+        expect(style.size).toBe('if(media(width): 1px)')
         style.fontWeight = 'first-valid(1)'
         style.size = 'first-valid(1px)'
         expect(style.fontWeight).toBe('1')
@@ -4997,6 +5011,8 @@ describe('CSSPositionTryDescriptors', () => {
         // Dependency-free substitution
         style.top = 'env(name)'
         expect(style.top).toBe('env(name)')
+        style.top = 'if(media(width): 1px)'
+        expect(style.top).toBe('if(media(width): 1px)')
         style.top = 'first-valid(1px)'
         expect(style.top).toBe('1px')
         style.top = 'calc(1px * progress(1, 0, 1))'

lib/values/definitions.js

@@ -222,6 +222,12 @@ module.exports = {
     '<ident()>': 'ident(<ident-arg>+)',
     '<ident-arg>': '<string> | <integer> | <ident>',
     '<ident>': '<ident-token>',
+    '<if()>': 'if([<if-branch> ;]* <if-branch> ;?)',
+    '<if-args-branch>': '<declaration-value> [: <declararion-value>?]?',
+    '<if-args>': 'if([<if-args-branch> ;]* <if-args-branch> ;?)',
+    '<if-branch>': '<if-condition> : <declaration-value>?',
+    '<if-condition>': '<boolean-expr[<if-test> ]> | else',
+    '<if-test>': 'supports(<ident> : <declaration-value> | <supports-condition>) | media(<media-feature> | <media-condition>) | style(<style-query>)',
     '<image()>': 'image(<image-tags>? [<image-src>? , <color>?]!)',
     '<image-1D>': '<stripes()>',
     '<image-set()>': 'image-set(<image-set-option>#)',

lib/values/substitutions.js

@@ -4,6 +4,7 @@ const properties = require('../properties/definitions.js')
 /**
  * @see {@link https://drafts.csswg.org/css-env-1/#funcdef-env}
  * @see {@link https://drafts.csswg.org/css-values-5/#funcdef-attr}
+ * @see {@link https://drafts.csswg.org/css-values-5/#funcdef-if}
  * @see {@link https://drafts.csswg.org/css-values-5/#funcdef-inherit}
  * @see {@link https://drafts.csswg.org/css-values-5/#funcdef-random-item}
  * @see {@link https://drafts.csswg.org/css-variables-2/#funcdef-var}
@@ -12,6 +13,7 @@ const arbitrary = [
     { definition: '<dashed-function>', element: true, name: '<dashed-ident>' },
     { definition: '<attr-args>', element: true, name: 'attr' },
     { definition: '<env-args>', name: 'env' },
+    { definition: '<if-args>', name: 'if' },
     { definition: '<inherit-args>', cascade: true, name: 'inherit' },
     { definition: '<random-item-args>', element: true, name: 'random-item' },
     { definition: '<var-args>', cascade: true, name: 'var' },

scripts/extract.js

@@ -186,6 +186,8 @@ const replaced = {
         '<radial-size>': 'closest-corner | farthest-corner | <radial-radius>{1,2}',
         // https://github.com/w3c/csswg-drafts/issues/11842
         '<control-value()>': 'control-value(<syntax-type-name>?)',
+        // https://github.com/w3c/csswg-drafts/issues/12487
+        '<if-args-branch>': '<declaration-value> [: <declararion-value>?]?',
         // https://github.com/w3c/fxtf-drafts/issues/532
         '<mask-reference>': 'none | <image>',
         // https://github.com/w3c/csswg-drafts/pull/10131
@@ -587,13 +589,6 @@ const excluded = {
             '<mask-source>',
         ],
         'css-values-5': [
-            // TODO: add support for `<boolean-expr[<test>]>`
-            '<if()>',
-            '<if-args>',
-            '<if-args-branch>',
-            '<if-branch>',
-            '<if-condition>',
-            '<if-test>',
             // https://github.com/w3c/csswg-drafts/pull/12349
             '<input-position>{1,2} : <output-value>',
         ],