CODEWITHSUNDEEP
stylelint
user254694
user254694

Reputation: 1612

why is stylelint failing my very simple file with just one css class

I just got two stylelint errors on a file that looked like this

.link {
  position: absolute;
  top: var(--spacing-l);
  left: var(--spacing-fluid-l);
  z-index: 2;
  color: var(--color-white);
  appearance: none;
  white-space: nowrap;
  composes: nav-bold from '~@tv2/ui-ng/styles/typography.module.css';
  text-decoration: none;
  display: inherit;

  &:hover {
    color: var(--color-white);
  }

}

.icon {
  color: var(--color-white);
  height: 20px;
  width: auto;
  margin-right: 5px;
  margin-top: 4px;

  & > svg {
    height: 20px;
    width: auto;
    margin-right: 5px;
    margin-top: 4px;
  }
}

the errors were

 1:1  ✖  Unknown rule no-invalid-position-at-import-rule  no-invalid-position-at-import-rule
 1:1  ✖  Unknown rule no-irregular-whitespace             no-irregular-whitespace

looking at the no-invalid-position-at-import-rule https://stylelint.io/user-guide/rules/no-invalid-position-at-import-rule none of that seems to apply for my code.

But of course I would like to make the smallest reproducible example.

so I made the following:

.link {
  position: absolute;
}

written by hand so as to not have any bad type of whitespace show up.

ran stylelint with command yarn stylelint path-to-file got back

 1:1  ✖  Unknown rule no-invalid-position-at-import-rule  no-invalid-position-at-import-rule
 1:1  ✖  Unknown rule no-irregular-whitespace             no-irregular-whitespace

my system is a mac Catalina, intel chip, node version v14.16.1, stylelint version 13.12.0, yarn version 2.4.1

questions somewhat implicit but to spell them out precisely - why is stylelint throwing these two errors with a file that does not seem to have them, if the file has the errors how do I fix the file.

Upvotes: 2

Views: 4707

Answers (2)

t0byman
t0byman

Reputation: 123

For Visual Studio Code: uninstall the Stylelint extension and reinstall it, the errors should go away.

Upvotes: 3

user254694
user254694

Reputation: 1612

so - when it says Unknown rule no-invalid-position-at-import-rule I focused too hard on the no-invalid-position-at-import-rule when what I should have focused on it the Unknown rule part.

Stylelint was saying it did not know this rule - why did it not know this rule? Because we had recently updated our stylelint config but not our stylelint version, so there were rules in the configuration that stylelint did not know about.

Upvotes: 8

Related Questions