Question

如何将一个css文件拆分为两个，例如：使用node js和reworkcss / css生成以下表单的2个输出 https://github.com/reworkcss/css

main.css
 body{
        color: blue;
        font-size: 12px;
        background-color: red;
 }
 h1 , div{
        color: red;
 }

 output1.css
 body{
        font-size: 12px;
        background-color: red;
 }
 output2.css
 body{
        color: blue;
 }
 h1 , div{
        color: red;
 }

Answer 1

使用两个ast文件，一个用于font-size和background-color：

{
  "type": "stylesheet",
  "stylesheet": {
    "rules": [
      {
        "type": "rule",
        "selectors": [*],
        "declarations": [
          {
            "type": "declaration",
            "property": "font-size",
            "value": "",
            "position": {
              "start": {
                "line": 1,
                "column": 1
              },
              "end": {
                "line": 99,
                "column": 99
              },
              "source": "input.css"
            }
          },
          {
            "type": "declaration",
            "property": "background-color",
            "value": "",
            "position": {
              "start": {
                "line": 1,
                "column": 1
              },
              "end": {
                "line": 99,
                "column": 99
              },
              "source": "input.css"
            }
        ],
        "position": {
          "start": {
            "line": 1,
            "column": 1
          },
          "end": {
            "line": 99,
            "column": 99
          },
          "source": "input.css"
        }
      }
    ]
  }
}

和其他人：

{
  "type": "stylesheet",
  "stylesheet": {
    "rules": [
      {
        "type": "rule",
        "selectors": [*],
        "declarations": [
          {
            "type": "declaration",
            "property": "color",
            "value": "",
            "position": {
              "start": {
                "line": 1,
                "column": 1
              },
              "end": {
                "line": 99,
                "column": 99
              },
              "source": "input.css"
            }
          }
        ],
        "position": {
          "start": {
            "line": 1,
            "column": 1
          },
          "end": {
            "line": 99,
            "column": 99
          },
          "source": "input.css"
        }
      }
    ]
  }
}

<强>参考

使用节点js和返工将css拆分为2个css文件

1 个答案: