PostCSS 摘录

npm install @csstools/postcss-extract --save-dev

PostCSS 摘录 允许您将您的 CSS 源文件部分导出到 JavaScript 对象 .

您的查询 :

rule[selector*=":root" i] > decl[variable]

您的配置 :

postcssExtract({
    queries: {
        'your-export': 'rule[selector*=":root" i] > decl[variable]'
    },
    results: function(results) {
        console.log(results)
    }
})

密码:

:root {
    --your-property: cyan;
}

.other {
    --other-property: yellow;
}

导出的数据 :

[
    { type: 'decl', prop: '--your-property', value: 'cyan', variable: true },
]

使用量

添加 PostCSS 摘录 对您的项目:

npm install postcss @csstools/postcss-extract --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssExtract = require('@csstools/postcss-extract');

postcss([
    postcssExtract(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

选项

查询

这个 queries 选项,让我们定义您 CSS 中哪些部分被导出. 每个查询都在CSS中写入.

支持的组合符 :

• > 直接子女
• 任何后人(空间)
• + 相邻兄弟
• ~ 一般兄弟关系

支持的选定者 :

• * 任何节点
• atrule
• rule
• decl
• comment
• [type=decl]
• [value=cyan]
• [value=cyan i] 大小写不敏感
• [value^=cy] 开始于
• [value*=ya] 包含
• [value$=an] 结尾
• :not(<complex selector>)

浏览 邮政编码系统API 获取更多关于AST命名和结构的见解.

postcssExtract({
    queries: {
        'your-export': 'rule[selector*=":root" i] > decl[variable]'
    },
})

结果

这个 results 选项,让我们定义回调以接收结果. 然后,您可以进一步应用数据转换,使其适合您的使用大小写.

postcssExtract({
    results: (yourResults) => {
        console.log(yourResults);
    },
})

提取时间

这个 extractLate 选项,让我们定义询问在 PostCSS 进程中是早还是晚.

extractLate: false 用途 Once 在邮政总局.
这意味着它会尝试提前运行.

extractLate: true 用途 OnceExit 在邮政总局.
这意味着它会试图拖延.

如果多个插件使用, 插件的顺序仍然得到遵守 Once|OnceExit。 。 。 .