First of all, thank you for this plugin!
It helps me to pay attention to small details, which can affect accessibility.
I am using PostCSS preset env.
One of the features I use is custom media queries.
With this, I have "aliased" the syntax to write less code and save the writing time:
@custom-media --motion (prefers-reduced-motion: no-preference);
@custom-media --no-motion (prefers-reduced-motion: reduce);
With this, I can write queries for specific selectors like this:
@media (--motion) {
a {
transition: all 1s ease-in-out;
}
}
The problem is, your plugin doesn't recognize the custom-defined media queries.
Therefore I would like to have an option to add an alternative alias, so the linter will not complain about it.
For example:
// .stylelintrc.js
module.exports = {
extends: ["stylelint-a11y/recommended"],
plugins: ["stylelint-a11y"],
rules: {
"a11y/media-prefers-reduced-motion": [true, {
customMediaQueries: {
motion: "--motion",
noMotion: "--no-motion"
},
}],
}
};
First of all, thank you for this plugin!
It helps me to pay attention to small details, which can affect accessibility.
I am using PostCSS preset env.
One of the features I use is custom media queries.
With this, I have "aliased" the syntax to write less code and save the writing time:
With this, I can write queries for specific selectors like this:
The problem is, your plugin doesn't recognize the custom-defined media queries.
Therefore I would like to have an option to add an alternative alias, so the linter will not complain about it.
For example: