Skip to content

[Feature request] Add option to use with PostCSS custom-media-queries #60

@xeho91

Description

@xeho91

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"
    	        },
    	    }],
    	}
};

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions