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.