stylelint - 同じファイル内の異なるセレクターの no-duplicate-selectors エラー

Question

CSS-IN-JS プロジェクト内で stylelint を使用しています (ここでは astroturf を使用していますが、styled-components などの CSS-IN-JS ライブラリを使用しても同じパターンに直面しています)。

同じファイル内で異なるスタイルの要素を定義しているため、セレクタやインポート ルールが重複することがあります。

/* style.js */
import styled from 'astroturf';

export const StyledComponentA = styled('div')`
  transform: scale(0);

  &.visible {
    transform: scale(1);
  }
`;

export const StyledComponentB = styled('div')`
  opacity: 0;

  /* -> stylelint error: Unexpected duplicate selector "&.visible" */
  &.visible {
    opacity: 1;
  }
`;

私はこのように構成します：

import React from 'react';
import { StyledComponentA, StyledComponentB } from './style';

export const Component = ({ isVisible }) => (
  <StyledComponentA visible={isVisible}>
    <StyledComponentB visible={isVisible}>Whatever</StyledComponentB>
  </StyledComponentA>
);

これらの stylelint ルールをファイル全体ではなくブロックに設定する方法はありますか?