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.
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;
`;
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"
}
}
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.