0

Currently, I use the sort-keys rule for eslint:

                "sort-keys": [
                    "error",
                    "asc",
                    {
                        "caseSensitive": true,
                        "natural": false,
                        "minKeys": 2
                    }
                ]

and it properly errors out when I have keys in a JS object that are not alphabetized.

sort error for object keys

What I am hoping to discover is a way to iterate on this rule to expand it to other things I want sorted. I have case where I use serialized styles for css properties which are embedded inside of other object keys:

const styles = {
    container: css`
        width: 100%;
        border-radius: 0.25rem;
    `,
    date: css`
        margin-bottom: 0.5rem;
        width: 100%;
    `,
    info: css`
        flex-wrap: wrap;
        display: flex;
        font-weight: 400;
    `,
}

In the above case, if the style object keys are out of order, sort-keys works as expected. I am curious if there is a rule I can add which errors if the properties are non-alphabetized.

Trevor
  • 17
  • What library provides the `css` function? – LeoDog896 Nov 11 '22 at 23:22
  • [@emotion/react](https://emotion.sh/docs/@emotion/react) -> https://emotion.sh/docs/@emotion/css – Trevor Nov 11 '22 at 23:26
  • There is an [eslint plugin](https://emotion.sh/docs/@emotion/eslint-plugin) for emotion but no sorting rule exists. However, you can also use JSON instead of a string, where the sorting rule *will* apply. If that helps you, let me know. – LeoDog896 Nov 11 '22 at 23:29

0 Answers0