stylelint-plugin-no-nested-media
v1.0.4
Published
Stylelint plugin which is reports an error if you nesting media queries into selector
Downloads
14
Readme
Introduction
This is plugin for stylelint
avoid you from writing @media
rules into selectors (class, ids and other). It's allowed you writing @media
queries only at the top level of your file
For example, this case will throw an error:
.button {
width: 200px
@media (max-width: 200px) {
height: 200px;
}
}
This case will not throw any errors
.button {
width: 200px
}
@media (max-width: 200px) {
.button {
height: 200px;
}
}
How to use
If stylelint not installed
- Run
npm install --save-dev stylelint stylelint-config-standard-scss
- Create file
.stylelintrc.json
in root of your working directory - Add this simple configuration to file you created
{
"plugins": ["stylelint-plugin-no-nested-media"],
"rules": {
"rxMATTEO/no-nested-media": true
}
}
- Enjoy
If stylelint installed
- Add plugin
stylelint-plugin-no-nested-media to plugins array
- Add property
"rxMATTEO/no-nested-media": true