Use the stylelint-config-recess-order shared config, rather than stylelint-config-rational-order:

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-recess-order"
  ],
  "customSyntax": "postcss-styled-syntax"
}

The recess order config is maintained (last published 2 weeks ago), unlike the rational order config (last published 4 years ago). The recess order config appears compatible with the postcss-styled-syntax custom syntax and supports modern CSS properties.

The two configs have similar groupings, i.e., they start with positioning, box model, typography, etc.

Running npx stylelint test.tsx gives:

import styled from "styled-components";

export const Test = styled.div<{ active: boolean }>`

  display: flex;
  flex: 1;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  cursor: pointer;
  background: ${(p) => p.active && "var(--blue)"};
  border-radius: 50%;
  transition: var(--transition-200);

  &:hover {
    background: ${(p) => !p.active && "var(--blue-hover)"};
  }

  &:last-child {
    margin-right: 0;
  }
`;

Stylelint also detected and removed the duplicate height property.

If you want empty lines between groups, you can follow the advanced guidance when to configure the rule:

const propertyGroups = require('stylelint-config-recess-order/groups')

module.exports = {
    extends: ["stylelint-config-standard"],
    plugins: ["stylelint-order"],
    customSyntax: "postcss-styled-syntax",
    rules: {
        // Configure the custom rule manually.
        'order/properties-order': propertyGroups.map((group) => ({
            ...group,
            emptyLineBefore: 'always'
        })),
    },
}

Additionally, you don't need:

• stylelint-config-prettier as stylelint-config-standard no longer conflicts with Prettier
• stylelint-prettier as it's recommended to run Prettier as a separate tool

You can just add stylelint-processor-styled-components in .stylelintrc file as:

{"processors": [
"stylelint-processor-styled-components"
 ]}

After that, you can just add the rules for linting given on official stylelint documentation for static values prevention i.e.

"rules": {
    "length-zero-no-unit":true,
    "color-no-hex": true,
    "color-named": [
        "never",
        {
            "message": "Static color name"
        }
    ]}

I think there is a way to do it now with https://github.com/styled-components/stylelint-processor-styled-components and as documentation states -

Combining with moduleName, importName and strict, you can tell the processor what kinds of tagged template literals to lint.

{
  "processors": [["stylelint-processor-styled-components", {
    "moduleName": "styled-components",
    "importName": ["default", "for1080p"], <---- here 
}

That stuff wasn’t tested by me, but I think it suppose to do the trick