compiled
compiled copied to clipboard
Add lint rule in compiled to restrict selectors
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.