Stylelint北极星

一组styelint规则，用来促进在消费应用中采用北极星设计系统。

安装

           

            

             

              

               例子
             
             

              
               
             
            
            
@shopify/style -polaris style - int
           

注意:stylelint-polaris的对等依赖项stylelint@ > = 14.15.0

源代码

使用

扩展@shopify / stylelint-polaris在你的Stylelint配置．的例子package.json

           

            

             

              

               例子
             
             

              
               
             
            
            
{“stylelint”：{“扩展”：［“@shopify / stylelint-polaris”]｝｝
           

重要的是:@shopify / stylelint-polaris必须加在扩展数组

打开过滤器

           

            

             

              

               例子
             
             

              
               
             
            
            
NPX style '**/*.{css,scss}'
           

运行过滤器并自动修复故障

           

            

             

              

               例子
             
             

              
               
             
            
            
NPX style——fix '**/*.{css,scss}'
           

忽略现有的故障

启用筛选器可能会导致现有代码库中出现大量警告和错误。提前修复尽可能多的故障是很重要的，但这不应该阻止添加过滤器。的styles-insert-stylelint-disable迁移插入忽略评论这样就实现了stylelint-polaris可以解封。

迁移将插入如下注释:

           

            

             

              

               例子
             
             

              
               
             
            
            
+// style - font -disable-next-line——由polaris-migrator生成填充:1快速眼动;
           

执行以下命令替换<路径>使用要运行的文件的glob模式:

           

            

             

              

               例子
             
             

              
               
             
            
            
NPX @shopify/polaris-migrator style -insert-style -disable 
           

规则

在Stylelint Polaris中配置了超过40条规则，以帮助您避免错误，并在为Shopify管理构建时遵循风格和非风格约定。这些规则帮助我们衡量北极星设计系统在Shopify管理代码库中的覆盖率，使用以下类别:

• 边境
• 颜色
• 约定
• 布局
• 媒体查询
• 运动
• 影子
• 空间
• 排版
• z - index

版本对位

*@shopify/ styllint -polaris v5.0.0是第一个稳定版本

发展

添加新规则

1. 导航到根目录stylelint-polaris配置
2. 定位stylelint-polaris /报道选项
3. 为新规则确定适当的类别
4. 使用标准Stylelint插入规则规则配置
5. 为规则添加文档，其中包含将作为问题报告的代码示例和将修复问题的代码
6. 例如，标题应该是类别+样式int规则名称# # #颜色/叫做

           

            

             

              

               例子
             
             

              
               
             
            
            
模块．出口＝{规则：{“北极星/覆盖”：{颜色：{…｝，//标准样式规则布局：{…｝，//标准样式规则运动：{“新规则”：“new-rule-options”，｝，｝，｝，｝；
           

构建自定义规则

1. 参考编写插件Stylelint文档的指南
2. 创建您的规则插件目录
3. 使用以下命令验证插件测试(参考兄弟插件的例子)
4. 参考添加新规则节，将自定义规则添加到stylelint-polaris配置

添加自定义消息

自定义消息与默认消息一起出现在命令行、CI和受支持的编辑器中stylelint规则信息。它们被添加到根级配置中，旨在提供关于如何解决规则违规的更多见解。

在大多数情况下，默认规则消息是清晰而简洁的。然而，它们并不总是引导开发人员获得期望的结果。因此，我们建议使用两种机制来改进和提供自定义规则消息:

控件上设置通用自定义消息消息属性为给定的次要选项stylelint-polaris /报道类别。这条消息被附加到默认规则消息中，我们预计它将涵盖大多数情况。

           

            

             

              

               例子
             
             

              
               
             
            
            
模块．出口＝{规则：{“北极星/覆盖”：{颜色：［{”叫做“：“永远”“color-no-hex”：真正的，｝，{消息：“请使用北极星颜色代币:https://polaris.shopify.com/tokens/color”｝，]，｝，｝，｝
           

失败消息示例:

           

            

             

              

               例子
             
             

              
               
             
            
            
-意外命名颜色“红色”(color-named)+意外命名颜色“红色”(颜色命名)请使用北极星颜色标记
           

设置自定义消息消息的财产样式int规则配置的次要选项如果支持。此消息在提供时被附加到默认规则消息中，而不是附加到通用类别消息中。

           

            

             

              

               例子
             
             

              
               
             
            
            
模块．出口＝{规则：{“北极星/覆盖”：{布局：［{“property-disallowed-list”：［［“位置”]，{消息：“请使用北极星“粘性”组件”｝，]，｝，{消息：“请使用北极星布局组件”｝，]，｝，｝，｝；
           

失败消息示例:

           

            

             

              

               例子
             
             

              
               
             
            
            
-属性“position”的意外值“sticky”(declaration-property-value-disallowed-list+属性“position”的意外值“sticky”请使用Polaris“sticky”组件
           

测试stylelint-polaris更新在polaris-react

打开终端到根目录北极星monorepo:

1. 安装和符号链接依赖项

           

            

             

              

               例子
             
             

              
               
             
            
            
线安装
           

2. 构建@shopify /北极星依赖关系，但不是@shopify /北极星本身

           

            

             

              

               例子
             
             

              
               
             
            
            
Yarn build -- --filter=@shopify/polaris^…
           

注意:删除^品格，如果你想建立@shopify /北极星

3. 运行stylelint在polaris-react

所有文件

           

            

             

              

               例子
             
             

              
               
             
            
            
Yarn turbo run lint:styles—filter=@shopify/polaris
           

具体的文件

           

            

             

              

               例子
             
             

              
               
             
            
            
Yarn运行stylesint path/to/component.scss// yarn run styelint polaris-react/src/components/TopBar/TopBar.scss