eslint-plugin-group-sort-styles
v1.0.1
Published
Sort styled component styles
Downloads
2
Maintainers
Readme
ESLint Styled Components Sorting Plugin
This ESLint plugin helps to enforce a consistent sorting order for CSS declarations within styled-components. It groups CSS properties according to a predefined configuration.
Example
export const DrawerStyles = css<DrawerStyledTypes>`
transition: transform 0.3s ease;
border-top-left-radius: 16px;
margin-top: auto;
border-top-right-radius: 16px;
border-radius: 0px;
max-width: 100%;
width: 100%;
&.inactive {
transform: translateY(100%);
}
`;
->
export const DrawerStyles = css<DrawerStyledTypes>`
width: 100%;
max-width: 100%;
margin-top: auto;
border-radius: 0px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
transition: transform 0.3s ease;
&.inactive {
transform: translateY(100%);
}
`;
--*--
const fontStyles = css`
/* font-family: 'Roboto', sans-serif; */
font-weight: 700;
font-size: 14px;
`;
->
const fontStyles = css`
/* font-family: 'Roboto', sans-serif; */
font-size: 14px;
font-weight: 700;
`;
Usage and Installation
To use this plugin, first, install the plugin as a development dependency:
npm install --save-dev eslint-plugin-styled-components-sorting
Then, add the plugin and rule to your .eslintrc
file:
{
"plugins": ["eslint-plugin-group-sort-styles"],
"rules": {
"eslint-plugin-group-sort-styles/sort-declarations-in-groups": "warn"
}
}
Rules
This plugin provides a single rule: sort-declarations-in-groups
. This rule checks that CSS declarations within styled components are sorted in groups, as defined in the groups.js
configuration file.
When enabled, the rule will warn you when it detects an incorrect sorting order in your styled-components. It also supports the --fix
option to automatically sort the declarations according to the predefined configuration.