代码质量静态分析前端【免费下载链接】stylelintA mighty CSS linter that helps you avoid errors and enforce conventions.项目地址https://gitcode.com/gh_mirrors/st/stylelint点击查看免费下载导读function-allowed-list是 stylelint 内置的一条白名单型规则用于限定样式表中允许出现的 CSS 函数如scale()、rgba()、linear-gradient()凡是未列入名单的函数都会被报告为违规。这条规则非常适合规范团队在transform、color、background等声明中使用的函数集合例如强制统一颜色函数、限制渐变写法、禁止某类不兼容函数。读完本文你将掌握该规则的完整配置语法字符串与正则混合、exceptWithoutPropertyFallback回退检测机制的精确语义以及它背后的源码实现原理与测试覆盖。规则概述Specify a list of allowed functions规则的核心功能正如其描述指定一个允许使用的函数列表Specify a list of allowed functions。凡是出现在声明值中、但不在允许名单内的函数都会被标记为问题。以最典型的transform声明为例a { transform: scale(1); } /** ↑ * This function */上图中箭头指向的scale(1)就是被检查的目标。规则只关心函数调用本身即带有(的标识符普通的属性值、颜色关键字、长度单位等都不受影响。规则在 lib/rules/index.mjs 中注册实现代码位于 lib/rules/function-allowed-list/index.mjs与之互补的对称规则是function-disallowed-list黑名单两者在配置上结构一致、语义相反。主选项Arraystring字符串与正则混合主选项是一个字符串数组数组中的每一项可以是函数名字符串也可以是以/包裹的正则表达式[array, of, functions, /regex/]从源码看index.mjs主选项通过validateOptions校验要求每个元素为字符串或正则表达式同时规则声明了rule.primaryOptionArray trueindex.mjs表示主选项必须以数组形式给出。字符串与正则的匹配语义函数名到底如何与名单匹配这由通用工具 lib/utils/matchesStringOrRegExp.mjs 决定规则与 stylelint 中大量列表型规则共用该逻辑纯字符串执行严格相等比较value comparison区分大小写。因此配置了scale后scale(1)通过而Scale(1)、SCALE(1)都会被视为未命中名单而报错。/regex/形式的字符串以/开头并以/或/i结尾的字符串会被转换为RegExp再执行test。正则默认区分大小写如果以/i结尾则会以i忽略大小写标志创建正则。例如/rgb/能同时命中rgb与rgba。原生RegExp在 JSON 配置中无法书写但在使用 JS/ESM 格式的配置文件如stylelint.config.mjs时可以直接传入例如[/rgb/]。测试用例对上述三种形式都有覆盖lib/rules/function-allowed-list/tests/index.mjsconfig: /rgb/时rgb()、rgba()被接受而hsl()被拒绝config: [/rgb/]的原生正则行为完全一致。配置示例{ function-allowed-list: [scale, rgba, /^(-moz-)?linear-gradient$/] }名单含义名单项匹配目标说明scalescale(...)精确匹配大小写敏感rgbargba(...)精确匹配/^(-moz-)?linear-gradient$/linear-gradient(...)、-moz-linear-gradient(...)正则完整锚定函数名视为问题不匹配名单a { transform: rotate(1); }a { color: hsla(170, 50%, 45%, 1) }a { background: red, -webkit-radial-gradient(red, green, blue); }rotate、hsla不在名单中-webkit-radial-gradient也无法被^(-moz-)?linear-gradient$匹配因此全部报错。不视为问题命中名单或与函数无关a { background: red; }red是颜色关键字不是函数调用a { transform: scale(1); }a { color: rgba(0, 0, 0, 0.5); }a { background: red, -moz-linear-gradient(45deg, blue, red); }二级选项exceptWithoutPropertyFallback这是该规则最独特的功能当名单中的函数在同一个声明块内没有对应的属性回退声明时禁止使用这些函数。它专门服务于渐进增强场景——用min()、max()、clamp()这类新函数时通常要求前面先写一条等价的普通属性声明作为老浏览器回退。配置形式{ exceptWithoutPropertyFallback: [array, of, functions, /regex/] }该选项是一个独立于主选项的二级选项对象值同样可以是字符串与正则的混合数组源码见 index.mjs通过validateOptions校验为[isString, isRegExp]。判定逻辑两层过滤结合源码index.mjs判定流程是函数命中主名单matchesStringOrRegExp(funcName, primary)才进入下一步否则直接报错函数未命中exceptWithoutPropertyFallback名单 → 放行函数命中回退名单且hasPrevPropertyDeclaration(decl)返回true前面已有同属性声明→ 放行其余情况 → 报错。关键在hasPrevPropertyDeclarationindex.mjs的实现细节将当前声明的属性名转为小写decl.prop.toLowerCase()后从当前声明向前遍历同一个声明块内的兄弟节点只要找到同属性名的声明就返回true与属性值的具体形式无关——即使前面的声明值不含该函数也算提供了回退自定义属性--foo被排除isCustomProperty(prop)为真时直接返回falselib/utils/isCustomProperty.mjs 中仅判断property.startsWith(--)也就是说--foo前面即使有--foo声明也不被视为回退遍历只发生在同一声明块内跨规则如a { ... } b { ... }或跨:root的声明不会被算作回退。配置示例{ function-allowed-list: [ [scale, min, /max/], { exceptWithoutPropertyFallback: [min, /max/] } ] }注意此时主选项以嵌套数组形式出现外层第一个元素是主名单[scale, min, /max/]第二个元素是二级选项对象。这是 stylelint 中数组型主选项 二级选项的标准写法。视为问题缺少回退a { width: min(50%, 100px); }a { height: max(50%, 100px); }a { width: max(50%, 100px); width: 100px; }第三条最值得注意max()虽然看起来有同属性声明但回退声明写在了max()之后。hasPrevPropertyDeclaration只向前查找前面的width: 100px出现在max()之后不构成回退因此依然报错。测试用例 index.mjs#L256-L262 专门验证了回退必须在前这一方向性。不视为问题存在有效回退a { transform: scale(1); }scale不在exceptWithoutPropertyFallback名单中a { width: 100px; width: min(50%, 100px); }min()之前已有同属性width: 100px回退a { width: 10px; height: 10px; width: min(50%, 10px); }测试用例 index.mjs#L233-L235 验证回退声明与函数声明之间可以插入其他声明只要同属性声明在本块内更靠前即可源码实现从声明值解析到报告定位规则的执行入口是root.walkDeclsindex.mjs核心流程如下快速剪枝if (!decl.value.includes(()) return;——声明值中不含左括号就直接跳过避免对绝大多数普通声明做无谓解析。解析值用postcss-value-parser解析声明值逐个访问节点。函数节点判定通过isValueFunction(node)判断是否为函数节点再通过 lib/utils/isStandardSyntaxFunction.mjs 排除非标准语法——源码注释明确说明无名的括号内容如 Sass 列表、#{...}SCSS 插值、${...}与...CSS-in-JS 插值都不视为标准函数因此不会误报。匹配与报告按上文的两层过滤逻辑判定需要报错时用declarationValueIndex(decl) sourceIndex计算函数在源码中的起始位置lib/utils/nodeFieldIndices.mjs 负责计算声明值的起始索引并用index/endIndex精确定位违规区间再通过统一的report工具上报。测试用例对位置精度有严格要求例如a { transform: rOtAtE(7deg) }报错于第 1 行第 16 列至 22 列index.mjs#L33-L39并且验证了大小写变体rOtAtE、ROTATE、sCaLe、SCALE会以原文大小写出现在错误消息中——因为messages.rejected的消息参数直接传入的是源码中的函数名index.mjs#L15-L17。配置消息message二级选项与消息参数该规则支持 1 个消息参数被禁止的函数名。根据 docs/user-guide/configure.md 的说明可以使用message二级选项自定义报错文案并用%s占位符接收函数名也可以直接在 JS 配置中使用函数形式{ function-allowed-list: [scale, rgba, /^(-moz-)?linear-gradient$/], message: Function \%s\ is not in the allowed list }默认消息为Disallowed function xxx其中xxx是实际出现在源码中的函数名原文。与其他规则的配合function-disallowed-list黑名单版与白名单二选一使用切勿同时配置同一条规则的正反两个版本function-no-unknown检查未知函数与白名单相比更关注是否存在而非是否被允许function-url-scheme-allowed-list、function-url-quotes针对url()场景的专项规则可组合使用。小结function-allowed-list是一个配置简单、行为精确的函数白名单规则主选项支持字符串与正则混合匹配区分大小写除非正则显式使用/iexceptWithoutPropertyFallback通过同一声明块内、同属性名、位置靠前三条规则实现回退检测并对自定义属性与跨规则场景做了严格排除。理解 matchesStringOrRegExp.mjs 的匹配语义和 hasPrevPropertyDeclaration 的方向性查找逻辑就能准确预判任何一条样式会不会被这条规则拦下。赞分享代码质量静态分析前端【免费下载链接】stylelintA mighty CSS linter that helps you avoid errors and enforce conventions.项目地址https://gitcode.com/gh_mirrors/st/stylelint点击查看免费下载相关推荐终极指南5分钟掌握Mac触控板三指中键点击功能终极指南5分钟掌握Mac触控板三指中键点击功能 你是否曾羡慕Windows用户轻松使用鼠标中键关闭标签页而Mac用户只能依赖复杂的快捷键组合MiddleC代码质量静态分析前端React与第三方库集成如何在现有项目中优雅引入ReactReact与第三方库集成如何在现有项目中优雅引入React React作为当下最流行的前端框架之一以其组件化思想和高效的DOM渲染机制受到广大开发者青睐。很代码质量静态分析前端stylelint media-feature-name-allowed-list 规则详解用白名单约束媒体特性名称stylelint media feature name allowed list 规则详解用白名单约束媒体特性名称 media feature name a代码质量静态分析前端上一篇the-super-tiny-compiler 项目常见问题解决方案下一篇Open-XML-SDK验证系统详解确保Office文档合规性的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 stylelint function-allowed-list 规则详解：用白名单约束 CSS 函数的使用
代码质量静态分析前端【免费下载链接】stylelintA mighty CSS linter that helps you avoid errors and enforce conventions.项目地址https://gitcode.com/gh_mirrors/st/stylelint点击查看免费下载导读function-allowed-list是 stylelint 内置的一条白名单型规则用于限定样式表中允许出现的 CSS 函数如scale()、rgba()、linear-gradient()凡是未列入名单的函数都会被报告为违规。这条规则非常适合规范团队在transform、color、background等声明中使用的函数集合例如强制统一颜色函数、限制渐变写法、禁止某类不兼容函数。读完本文你将掌握该规则的完整配置语法字符串与正则混合、exceptWithoutPropertyFallback回退检测机制的精确语义以及它背后的源码实现原理与测试覆盖。规则概述Specify a list of allowed functions规则的核心功能正如其描述指定一个允许使用的函数列表Specify a list of allowed functions。凡是出现在声明值中、但不在允许名单内的函数都会被标记为问题。以最典型的transform声明为例a { transform: scale(1); } /** ↑ * This function */上图中箭头指向的scale(1)就是被检查的目标。规则只关心函数调用本身即带有(的标识符普通的属性值、颜色关键字、长度单位等都不受影响。规则在 lib/rules/index.mjs 中注册实现代码位于 lib/rules/function-allowed-list/index.mjs与之互补的对称规则是function-disallowed-list黑名单两者在配置上结构一致、语义相反。主选项Arraystring字符串与正则混合主选项是一个字符串数组数组中的每一项可以是函数名字符串也可以是以/包裹的正则表达式[array, of, functions, /regex/]从源码看index.mjs主选项通过validateOptions校验要求每个元素为字符串或正则表达式同时规则声明了rule.primaryOptionArray trueindex.mjs表示主选项必须以数组形式给出。字符串与正则的匹配语义函数名到底如何与名单匹配这由通用工具 lib/utils/matchesStringOrRegExp.mjs 决定规则与 stylelint 中大量列表型规则共用该逻辑纯字符串执行严格相等比较value comparison区分大小写。因此配置了scale后scale(1)通过而Scale(1)、SCALE(1)都会被视为未命中名单而报错。/regex/形式的字符串以/开头并以/或/i结尾的字符串会被转换为RegExp再执行test。正则默认区分大小写如果以/i结尾则会以i忽略大小写标志创建正则。例如/rgb/能同时命中rgb与rgba。原生RegExp在 JSON 配置中无法书写但在使用 JS/ESM 格式的配置文件如stylelint.config.mjs时可以直接传入例如[/rgb/]。测试用例对上述三种形式都有覆盖lib/rules/function-allowed-list/tests/index.mjsconfig: /rgb/时rgb()、rgba()被接受而hsl()被拒绝config: [/rgb/]的原生正则行为完全一致。配置示例{ function-allowed-list: [scale, rgba, /^(-moz-)?linear-gradient$/] }名单含义名单项匹配目标说明scalescale(...)精确匹配大小写敏感rgbargba(...)精确匹配/^(-moz-)?linear-gradient$/linear-gradient(...)、-moz-linear-gradient(...)正则完整锚定函数名视为问题不匹配名单a { transform: rotate(1); }a { color: hsla(170, 50%, 45%, 1) }a { background: red, -webkit-radial-gradient(red, green, blue); }rotate、hsla不在名单中-webkit-radial-gradient也无法被^(-moz-)?linear-gradient$匹配因此全部报错。不视为问题命中名单或与函数无关a { background: red; }red是颜色关键字不是函数调用a { transform: scale(1); }a { color: rgba(0, 0, 0, 0.5); }a { background: red, -moz-linear-gradient(45deg, blue, red); }二级选项exceptWithoutPropertyFallback这是该规则最独特的功能当名单中的函数在同一个声明块内没有对应的属性回退声明时禁止使用这些函数。它专门服务于渐进增强场景——用min()、max()、clamp()这类新函数时通常要求前面先写一条等价的普通属性声明作为老浏览器回退。配置形式{ exceptWithoutPropertyFallback: [array, of, functions, /regex/] }该选项是一个独立于主选项的二级选项对象值同样可以是字符串与正则的混合数组源码见 index.mjs通过validateOptions校验为[isString, isRegExp]。判定逻辑两层过滤结合源码index.mjs判定流程是函数命中主名单matchesStringOrRegExp(funcName, primary)才进入下一步否则直接报错函数未命中exceptWithoutPropertyFallback名单 → 放行函数命中回退名单且hasPrevPropertyDeclaration(decl)返回true前面已有同属性声明→ 放行其余情况 → 报错。关键在hasPrevPropertyDeclarationindex.mjs的实现细节将当前声明的属性名转为小写decl.prop.toLowerCase()后从当前声明向前遍历同一个声明块内的兄弟节点只要找到同属性名的声明就返回true与属性值的具体形式无关——即使前面的声明值不含该函数也算提供了回退自定义属性--foo被排除isCustomProperty(prop)为真时直接返回falselib/utils/isCustomProperty.mjs 中仅判断property.startsWith(--)也就是说--foo前面即使有--foo声明也不被视为回退遍历只发生在同一声明块内跨规则如a { ... } b { ... }或跨:root的声明不会被算作回退。配置示例{ function-allowed-list: [ [scale, min, /max/], { exceptWithoutPropertyFallback: [min, /max/] } ] }注意此时主选项以嵌套数组形式出现外层第一个元素是主名单[scale, min, /max/]第二个元素是二级选项对象。这是 stylelint 中数组型主选项 二级选项的标准写法。视为问题缺少回退a { width: min(50%, 100px); }a { height: max(50%, 100px); }a { width: max(50%, 100px); width: 100px; }第三条最值得注意max()虽然看起来有同属性声明但回退声明写在了max()之后。hasPrevPropertyDeclaration只向前查找前面的width: 100px出现在max()之后不构成回退因此依然报错。测试用例 index.mjs#L256-L262 专门验证了回退必须在前这一方向性。不视为问题存在有效回退a { transform: scale(1); }scale不在exceptWithoutPropertyFallback名单中a { width: 100px; width: min(50%, 100px); }min()之前已有同属性width: 100px回退a { width: 10px; height: 10px; width: min(50%, 10px); }测试用例 index.mjs#L233-L235 验证回退声明与函数声明之间可以插入其他声明只要同属性声明在本块内更靠前即可源码实现从声明值解析到报告定位规则的执行入口是root.walkDeclsindex.mjs核心流程如下快速剪枝if (!decl.value.includes(()) return;——声明值中不含左括号就直接跳过避免对绝大多数普通声明做无谓解析。解析值用postcss-value-parser解析声明值逐个访问节点。函数节点判定通过isValueFunction(node)判断是否为函数节点再通过 lib/utils/isStandardSyntaxFunction.mjs 排除非标准语法——源码注释明确说明无名的括号内容如 Sass 列表、#{...}SCSS 插值、${...}与...CSS-in-JS 插值都不视为标准函数因此不会误报。匹配与报告按上文的两层过滤逻辑判定需要报错时用declarationValueIndex(decl) sourceIndex计算函数在源码中的起始位置lib/utils/nodeFieldIndices.mjs 负责计算声明值的起始索引并用index/endIndex精确定位违规区间再通过统一的report工具上报。测试用例对位置精度有严格要求例如a { transform: rOtAtE(7deg) }报错于第 1 行第 16 列至 22 列index.mjs#L33-L39并且验证了大小写变体rOtAtE、ROTATE、sCaLe、SCALE会以原文大小写出现在错误消息中——因为messages.rejected的消息参数直接传入的是源码中的函数名index.mjs#L15-L17。配置消息message二级选项与消息参数该规则支持 1 个消息参数被禁止的函数名。根据 docs/user-guide/configure.md 的说明可以使用message二级选项自定义报错文案并用%s占位符接收函数名也可以直接在 JS 配置中使用函数形式{ function-allowed-list: [scale, rgba, /^(-moz-)?linear-gradient$/], message: Function \%s\ is not in the allowed list }默认消息为Disallowed function xxx其中xxx是实际出现在源码中的函数名原文。与其他规则的配合function-disallowed-list黑名单版与白名单二选一使用切勿同时配置同一条规则的正反两个版本function-no-unknown检查未知函数与白名单相比更关注是否存在而非是否被允许function-url-scheme-allowed-list、function-url-quotes针对url()场景的专项规则可组合使用。小结function-allowed-list是一个配置简单、行为精确的函数白名单规则主选项支持字符串与正则混合匹配区分大小写除非正则显式使用/iexceptWithoutPropertyFallback通过同一声明块内、同属性名、位置靠前三条规则实现回退检测并对自定义属性与跨规则场景做了严格排除。理解 matchesStringOrRegExp.mjs 的匹配语义和 hasPrevPropertyDeclaration 的方向性查找逻辑就能准确预判任何一条样式会不会被这条规则拦下。赞分享代码质量静态分析前端【免费下载链接】stylelintA mighty CSS linter that helps you avoid errors and enforce conventions.项目地址https://gitcode.com/gh_mirrors/st/stylelint点击查看免费下载相关推荐终极指南5分钟掌握Mac触控板三指中键点击功能终极指南5分钟掌握Mac触控板三指中键点击功能 你是否曾羡慕Windows用户轻松使用鼠标中键关闭标签页而Mac用户只能依赖复杂的快捷键组合MiddleC代码质量静态分析前端React与第三方库集成如何在现有项目中优雅引入ReactReact与第三方库集成如何在现有项目中优雅引入React React作为当下最流行的前端框架之一以其组件化思想和高效的DOM渲染机制受到广大开发者青睐。很代码质量静态分析前端stylelint media-feature-name-allowed-list 规则详解用白名单约束媒体特性名称stylelint media feature name allowed list 规则详解用白名单约束媒体特性名称 media feature name a代码质量静态分析前端上一篇the-super-tiny-compiler 项目常见问题解决方案下一篇Open-XML-SDK验证系统详解确保Office文档合规性的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考