小编glo*_*glo的帖子

我正在尝试找出启用这些小内联注释的设置。

在我维护的设计系统中，我们使用修改后的 BEM 格式来命名导出的 @emotion/css JSS 样式。

语法看起来像这样：

Selector_descendant___modifier

例如（伪代码）：

// header.styles.ts
export const Header_container___isFlex = css`
  display: flex;
  flex: 1;
`;

当然，@typescript-eslint/naming-convention 不喜欢这种语法。我想知道，是否有一种方法可以创建自定义规则以允许此语法仅在 *.style.ts 文件内使用？或者如果失败了，我们是否可以添加某种额外的自定义规则配置到这个 eslint 插件中，以强制执行此语法？

因此，我正在开发一个非常小的 Web 组件，作为更大的设计系统的一部分。

我对 Web 组件的使用有点陌生，但我知道这个特定的 Web 组件可以在单个布局中使用很多很多次。

此 Web 组件控制在传递给它的任何子组件周围放置多少垂直空间。

该组件的结构非常简单：

import { LitElement, html, css, unsafeCSS, property, customElement } from 'lit-element';

export const spacingAmounts = {
  'x-small': css`4px`,
  'small': css`8px`,
  'medium': css`12px`,
  'large': css`16px`,
  'x-large': css`20px`,
  '2x-large': css`30px`,
  '3x-large': css`40px`,
  '4x-large': css`60px`,
  '5x-large': css`90px`,
  '6x-large': css`120px`,
};

const createSpacingStyleRules = (direction: 'top' | 'bottom') => {
  return Object.keys(spacingAmounts).map(s => {
    const amount = spacingAmounts[s];
    return css`
      :host([${unsafeCSS(direction)}="${unsafeCSS(s)}"]) {
        margin-${unsafeCSS(direction)}: ${unsafeCSS(amount)};
      }
    `;
  });
};

@customElement('gu-vertical-space')
export class GuVerticalSpace …