统计 
解析样式表并返回带有统计数据的对象. 这是用于 cssstats.com (英语)
安装
npm i --save cssstats
使用量
节点
var fs = require('fs')
var cssstats = require('cssstats')
var css = fs.readFileSync('./styles.css', 'utf8')
var stats = cssstats(css)
PostCSS 插件
CSS Stats 可用作一种 邮政 插件 . 数据将添加到 PostCSS 信件阵列中 .
var fs = require('fs')
var postcss = require('postcss')
var cssstats = require('cssstats')
var css = fs.readFileSync('./styles.css', 'utf8')
postcss()
.use(cssstats())
.process(css)
.then(function (result) {
result.messages.forEach(function (message) {
console.log(message)
})
})
选项
选项可能作为第二个参数被传递.
var stats = cssstats(css, { mediaQueries: false })
safe(布尔, 默认值 :true- 启用 PostCSS 安全模式 用语法错误解析 CSSmediaQueries(布尔,默认)true) - 决定是否为每个媒体查询块生成数据importantDeclarations(布尔,默认)false- 包括一系列声明!important
以下选项将帮助方法的结果添加到返回对象中. 这在使用时很有帮助 JSON.stringify()。 。 。 .
specificityGraph(布尔,默认)false(中文(简体) )sortedSpecificityGraph(布尔,默认)false(中文(简体) )repeatedSelectors(布尔,默认)false(中文(简体) )propertyResets(布尔,默认)false(中文(简体) )vendorPrefixedProperties(布尔,默认)false(中文(简体) )
返回对象
// Example
{
size: n,
gzipSize: n,
rules: {
total: n,
size: {
graph: [n],
max: n,
average: n
}
},
selectors: {
total: n,
id: n,
class: n,
type: n,
pseudoClass: n,
psuedoElement: n,
values: [str],
specificity: {
max: n
average: n
},
getSpecificityGraph(),
getSpecificityValues(),
getRepeatedValues(),
getSortedSpecificity()
},
declarations: {
total: n,
unique: n,
important: [obj],
properties:
prop: [str]
},
getPropertyResets(),
getUniquePropertyCount(),
getPropertyValueCount(),
getVendorPrefixed(),
getAllFontSizes(),
getAllFontFamilies(),
},
mediaQueries: {
total: n,
unique: n,
values: [str],
contents: [
{
value: str,
rules: {
total: n,
size: {
graph: [n],
max: n,
average: n
}
},
selectors: {
total: n,
id: n,
class: n,
type: n,
pseudoClass: n,
pseudoElement: n,
values: [str],
specificity: {
max: n,
average: n
}
},
declarations: {
total: n,
unique: n,
important: [obj],
vendorPrefix: n,
properties: {
prop: [str]
}
}
}
]
}
}
size 编号
以字节计的文件大小
gzipSize 编号
样式表大小以字节显示
rules 对象
total规则总数size对象size.graph数组 - 规则大小( 每条规则声明的数量) 按源顺序排列size.max数字 - 最大规则大小size.average数字 - 平均规则大小
selectors 对象
total数字 - 选择者总数type数字 - 类型选择者总数class数量 - 类别选择者总数id数字 - id 选择器总数pseudoClass数量 - 伪类选择者总数pseudoElement数字 - 伪元素选择器总数values数组 - 所有选择者的字符串数组specificity对象specificity.max数字 - 最大特性作为基准 10 个数字specificity.average数字 - 平均具体性作为基准 10 个数字
getSpecificityGraph()函数 - 返回每个选择者的特异性的数字数组作为10个基数getSpecificityValues()函数 - 返回一组具有10个基准特性分数的选定者,顺序为getRepeatedValues()函数 - 返回重复选择器的一系列字符串getSortedSpecificity()函数 - 返回具有10个基准特性分数的选定数组,从最高到最低排序
declarations 对象
total数量 - 声明总数unique数量 - 总的独特声明properties对象 - 带有每个独特属性和该属性值的数组对象getPropertyResets()函数 - 返回一个对象,并重置每个属性的边距或被补丁的次数getUniquePropertyCount(property)函数 - 返回给定属性独有值的数目getPropertyValueCount(property, value)函数 - 返回特定属性和值的宣布次数getVendorPrefixed()函数 - 返回带有供应商前缀属性的一系列声明getAllFontSizes()函数 - 从两者返回字体大小的数组font-size财务报告和审定财务报表font单手声明getAllFontFamilies()函数 - 从两者返回一系列字体组合font-family财务报告和审定财务报表font单手声明important数组( 可选) -!important声明对象property财务报告和审定财务报表value
mediaQueries 对象
total数量 - 媒体查询总数unique数字 - 唯一媒体查询总数values阵列 - 每个媒体查询的数值阵列contents阵列 - 媒体查询区块的阵列,每个区块都有完整的统计数据对象
见 /test/results 文件夹,例如 JSON 结果.
用法实例
var cssstats = require('cssstats')
var stats = cssstats(css)
生成 a 特异性图
var specificityGraph = stats.selectors.getSpecificityGraph()
按最高特异性排序选择者
var sortedSelectors = stats.selectors.getSortedSpecificity()
获取唯一颜色的总数
var uniqueColorsCount = stats.declarations.getUniquePropertyCount('color')
display: none 计数
var displayNoneCount = stats.declarations.getPropertyValueCount('display', 'none')
许可证
麻省理工学院
捐款
- 叉开它
- 创建您的特性分支( E)
git checkout -b my-new-feature(中文(简体) ) - 提交更改( E)
git commit -am 'Add some feature'(中文(简体) ) - 推向分行(
git push origin my-new-feature(中文(简体) ) - 创建新的拉请求