如何让正则在stylelint规则中生效？背景属性配置异常排查

问题 #

我想要为background属性指定允许的取值，配置了如下stylelint规则：

rules: {
        'declaration-property-value-allowed-list': {
            'background': ['/^linear-gradient\(.*\)$/', '/var/']
        },
    },

期望仅允许变量和linear-gradient函数作为该属性的值，禁止十六进制、rgb、rgba等取值，但lint工具报错拒绝了如下合法的linear-gradient取值：

background: linear-gradient(
            263deg,
            rgba(84, 145, 255, 0.24) 0%,
            rgba(169, 143, 207, 0.06) 30.85%,
            rgba(169, 143, 207, 0.06) 74.1%,
            rgba(172, 159, 126, 0.12) 100%
        );

报错信息：

Unexpected value "linear-gradient( 263deg, rgba(84, 145, 255, 0.24) 0%, rgba(169, 143, 207, 0.06)  declaration-property-value-allowed-list
           30.85%, rgba(169, 143, 207, 0.06) 74.1%, rgba(172, 159, 126, 0.12) 100% )" for property                                                   
           "background" 

请问我的正则表达式/^linear-gradient\(.*\)$/是否存在错误？

回答 #

你的正则表达式确实有问题，核心原因是.*默认不会匹配换行符，而你的linear-gradient值是多行的，包含了换行，导致.*只能匹配到第一行的内容，没法覆盖整个函数体，再加上^和$锚点是匹配整个值的开头和结尾，所以stylelint判定这个值不符合规则。

给你两个可行的修正方案：

方案一：用[\s\S]匹配所有字符（包括换行） #

把正则改成/^linear-gradient\([\s\S]*\)$/，[\s\S]能匹配任意空白或非空白字符，自然也包含换行，这样就能覆盖多行的linear-gradient内容。

修正后的规则配置：

rules: {
        'declaration-property-value-allowed-list': {
            'background': ['/^linear-gradient\([\s\S]*\)$/', '/var/']
        },
    },

方案二：添加s修饰符开启单行模式 #

给正则加上s修饰符，让.可以匹配换行符，改成/^linear-gradient\(.*\)$/s，这样.*就能覆盖包含换行的整个函数体。

修正后的规则配置：

rules: {
        'declaration-property-value-allowed-list': {
            'background': ['/^linear-gradient\(.*\)$/s', '/var/']
        },
    },

内容的提问来源于stack exchange，提问作者dinocode