Stylelintrc Property No Unknown Enhancement

[Deleted user]

Currently we have the following .stylelintrc:

{
  "processors": ["stylelint-processor-styled-components"],
  "plugins": [
    "stylelint-order"
  ],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components"
  ],
  "rules": {
    "order/order": [
      "custom-properties",
      "declarations"
    ],
    "order/properties-alphabetical-order": true,
    "property-no-unknown": [
      true,
      {
        "ignoreProperties": ["last-child", "nth-last-child(1)", "nth-last-child(3)"]
      }
    ]
  }
}

As you can see we have to declare the nth-last-child for each option that we use. Is there a potential that this could be improved so that it just takes nth-last-child and deals with any value at the end?

[Xianming Zhong]

@KITSDominicWhite Can you explain a little more why you have to declare rules like that? If not, what code snippets will cause what kind of errors.

[KITSMarkShulhin]

@chinesedfan Hi Xianming, we are using a chain of pseudoclasses and getting property-no-unknown on them, but it seems like there is some potential bug since it treats pseudoclass as a property and then marks it as unknown. You can find code snippet in the attachment. We also use a method inside of this selector to pass the needed index from props and this might be one of the cases causing some problems in parsing

[Xianming Zhong]

@KITSMarkShulhin Sorry, I didn't reproduce those warnings. Can you paste detailed versions of stylelint related packages? Although you may use regular expressions to filter every nth-last-child.

[KITSMarkShulhin]

@chinesedfan I've put our versions in the image below. Great suggestion about regular expressions, thank you!
I will try to setup reproduce case a bit later and will paste it here. Thanks for quick responses ☺️

[KITSMarkShulhin]

@chinesedfan I've managed to reproduce the issue.
Turns out that this error occurs in the unit tests when we use css method from styled-components to make selectors that based on other components.
Simple modifier: ':last-child' works like a charm, but when we add the css`` wrapper it doesn't recognize any pseudoclasses. I left the code to reproduce below.

Example component.js

import styled from 'styled-components';

export const TestLi = styled.li`
  color: #000;
`;

export default styled.ul`
  ${TestLi}:first-child {
    color: #fff;
    text-transform: uppercase;
  }
`;

And the test: component.test.js

import React from 'react';
import { css } from 'styled-components';
import StyledUl, { TestLi } from './component';

describe('Testing styled pseudoclasses in jest tests', () => {
  it('should have correct color on first li', () => {
    const sut = shallow(
      <StyledUl>
        <TestLi />
        <TestLi />
      </StyledUl>,
    );
    const expected = '#fff';
    expect(sut).toHaveStyleRule('color', expected, {
      modifier: css`${TestLi}:first-child`,
    });
  });
});

Lint output:

15:41  ✖  Expected first-child to come before -styled-mixin0 - (order/properties-alphabetical-order)
           
15:41  ✖  Unexpected unknown property "first-child" - (property-no-unknown)

[Xianming Zhong]

@KITSMarkShulhin I suggest you to exclude component.test.js from lint files. Because ${TestLi}:first-child is just a selector, instead of valid css.

[KITSMarkShulhin]

@chinesedfan Well, that makes sense. Excluding all the test files should solve our problem, thank you for help :) Maybe we should leave some notation in the docs about this?

[Xianming Zhong]

@KITSMarkShulhin Yes, it can be mentioned in jest-styled-components or styled-components-website. Feel free to send a PR.