如何使用 stylelint 格式化 css-in-js 样式顺序？

问题描述 投票：0回答：1

我正在使用 styled-components、prettier 和 stylelint。这是我的

.stylelintrc.json
:

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-prettier",
    "stylelint-config-prettier",
    "stylelint-config-rational-order"
  ],
  "plugins": ["stylelint-order", "stylelint-config-rational-order/plugin"],
  "customSyntax": "postcss-styled-syntax"
}

如您所见，我正在使用 stylelint-config-rational-order/plugin 当我运行此命令时：

stylelint \"src/**/*.tsx\" --fix"

...我期望 stylelint 自动修复所有相应文件中的样式顺序，它们应该大致如下所示：

// Test.tsx -- BEFORE LINTING

import styled from 'styled-components';

export const Test = styled.div<{ active: boolean }>`
  width: 20px;
  height: 20px;

  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  background: ${p => p.active && 'var(--blue)'};
  transition: var(--transition-200);
  flex-shrink: 0;

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

  cursor: pointer;
  border-radius: 50%;
  margin-right: 8px;
  height: 20px;

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

// Test.tsx -- AFTER LINTING (desired result)

import styled from 'styled-components';

export const Test = styled.div<{ active: boolean }>`
  height: 20px;
  width: 20px;

  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  background: ${p => p.active && 'var(--blue)'};
  transition: var(--transition-200);
  border-radius: 50%;
  margin-right: 8px;

  cursor: pointer;

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

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

但是事实上我得到了这个结果：

// Test.tsx -- AFTER LINTING (not desired result)

import styled from 'styled-components';

export const Test = styled.div<{ active: boolean }>`
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  background: ${p => p.active && 'var(--blue)'};
  transition: var(--transition-200);
  flex-shrink: 0;

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

  cursor: pointer;
  border-radius: 50%;
  margin-right: 8px;
  height: 20px;

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

如您所见，它只是删除了一些中断，并且在重新排序方面完全没有做任何事情。

所以，我的问题是——有没有办法让

stylelint --fix
与stylelint-config-rational-order/plugin（或类似的reordering插件）和styled-components一起工作，并自动修复所有
 css-in-js
整个应用程序都按照上述规则？

–––––––––––––––––––––––––––––––––––––––––––––––– –––––––––––––––––

UPD：我尝试使用更高级的配置来使 stylelint 在逻辑组之间添加空行，这里是：

// stylelint.config.js

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',
    })),
  },
};

但是，我仍然无法达到预期的结果，当我运行

npx stylelint Test.tsx --fix
时，我得到以下输出：

import styled, { css } from 'styled-components';

const Test = styled.div<{ flag: boolean }>`
  display: flex;
  height: 18px;
  background-color: var(--color-primary);
  width: 18px;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  ${p =>
    p.flag &&
    css`
      border-radius: 0;
      background-color: green;
    `}
  line-height: 20px;
  color: var(--color-white);
  align-items: center;
  &:hover {
    background-color: red;
  }
`;

/* Desired result */

// const Test = styled.div<{ flag: boolean }>`
//   height: 18px;
//   width: 18px;

//   display: flex;
//   align-items: center;
//   justify-content: center;

//   font-size: 14px;
//   line-height: 20px;
//   color: var(--color-white);

//   border-radius: 50%;
//   background-color: var(--color-primary);

//   &:hover {
//     background-color: red;
//   }

//   ${p =>
//     p.flag &&
//     css`
//       border-radius: 0;
//       background-color: green;
//     `}
// `;

/* Fact result */

// const Test = styled.div<{ flag: boolean }>`
//   display: flex;
//   height: 18px;
//   background-color: var(--color-primary);
//   width: 18px;
//   justify-content: center;
//   border-radius: 50%;
//   font-size: 14px;
//   ${p =>
//     p.flag &&
//     css`
//       background-color: green;
//       border-radius: 0;
//     `}
//   line-height: 20px;
//   color: var(--color-white);
//   align-items: center;

//   &:hover {
//     background-color: red;
//   }
// `;
reactjs styled-components prettier stylelint css-in-js
1个回答
1
投票

使用 stylelint-config-recess-order 共享配置，而不是 stylelint-config-rational-order:

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

休会订单配置保持不变（最后发布于 2 周前），与理性订单配置（最后发布于 4 年前）不同。休会顺序配置似乎与 postcss-styled-syntax 自定义语法兼容，并支持现代 CSS 属性。

这两个配置具有相似的分组，即它们从定位、盒子模型、排版等开始。

运行

npx stylelint test.tsx
给出：

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 还检测并删除了重复的 

height
属性。

如果您希望组之间有空行，您可以按照高级指南何时配置规则：

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'
        })),
    },
}

此外，您不需要：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.