fix: parent selector linter should check selector which has no style (#…

…82)

src/linters/parentSelectorLinter.ts

@@ -1,13 +1,14 @@
-import { Linter } from '..';
+import type { Linter } from '..';
 import { lintWarning } from './utils';
 
 const linter: Linter = (key, value, info) => {
-  const currentSelector = info.parentSelectors[info.parentSelectors.length - 1];
-  if (currentSelector) {
-    const selectors = currentSelector.split(',');
-    if (selectors.some((selector) => selector.split('&').length > 2)) {
-      lintWarning('Should not use more than one `&` in a selector.', info);
-    }
+  if (
+    info.parentSelectors.some((selector) => {
+      const selectors = selector.split(',');
+      return selectors.some((item) => item.split('&').length > 2);
+    })
+  ) {
+    lintWarning('Should not use more than one `&` in a selector.', info);
   }
 };
 

src/linters/utils.ts

@@ -7,9 +7,7 @@ export function lintWarning(message: string, info: LinterInfo) {
   devWarning(
     false,
     `[Ant Design CSS-in-JS] ${path ? `Error in ${path}: ` : ''}${message}${
-      parentSelectors.length
-        ? ` Selector: ${parentSelectors[parentSelectors.length - 1]}`
-        : ''
+      parentSelectors.length ? ` Selector: ${parentSelectors.join(' | ')}` : ''
     }`,
   );
 }

tests/linter.spec.tsx

@@ -229,7 +229,7 @@ describe('style warning', () => {
     };
     render(<Demo />);
     expect(errorSpy).toHaveBeenCalledWith(
-      expect.stringContaining('Selector info: .demo'),
+      expect.stringContaining('Selector: .demo'),
     );
   });
 
@@ -388,5 +388,35 @@ describe('style warning', () => {
         ),
       );
     });
+
+    it('should check selector which has no style', () => {
+      const genStyle = (): CSSObject => ({
+        '.ant': {
+          '&&-test': {
+            '&-btn': {
+              color: 'red',
+            },
+          },
+        },
+      });
+      const Demo = () => {
+        const [token] = useCacheToken<DerivativeToken>(theme, []);
+        useStyleRegister({ theme, token, path: ['parent selector3'] }, () => [
+          genStyle(),
+        ]);
+        return <div />;
+      };
+      render(
+        <StyleProvider cache={createCache()} linters={[parentSelectorLinter]}>
+          <Demo />
+        </StyleProvider>,
+      );
+
+      expect(errorSpy).toHaveBeenCalledWith(
+        expect.stringContaining(
+          `Should not use more than one \`&\` in a selector.`,
+        ),
+      );
+    });
   });
 });