compiled icon indicating copy to clipboard operation
compiled copied to clipboard

Add lint rule in compiled to restrict selectors

Open pancaspe87 opened this issue 3 years ago • 0 comments

Adding custom selectors to css and styled definitions will result in a bloated extracted stylesheet. For example, specifying the following creates three unique rules:

styled.div`
  color: blue;               // .hash { color: blue }
  .foo { color: blue; }      // .hash .foo { color: blue }
  div > span { color: blue } // .hash div > span { color: blue }
`;

This limits the effectiveness of atomic styles, and results in more frequent cache invalidations. We should introduce a lint rule the compiled eslint package that restricts type, class, and id selectors, attribute selectors, and combinators as a starting point.

pancaspe87 avatar Feb 16 '22 23:02 pancaspe87