Владимир Кузнецов (Хантфлоу)
Владимир Кузнецов
(Хантфлоу)
Типы узлов
Методы обхода
#main, div.sidebar {
background: white;
color: rgb(47, 79, 79);
}
{ type: "root", nodes: [
{ type: "rule", selector: "#main, div.sidebar", nodes: [
{ type: "decl", prop: "background", value: "white" },
{ type: "decl", prop: "color", value: "rgb(47, 79, 79)" }
] }
] }
{ from: 'darkslategray', to: '#556832' }
p { color: darkslategray; }
a { color: #2F4F4F; }
.quote {
border-left: 1px solid rgb(47, 79, 79);
border-right: solid hsl(180, 25%, 25%) 1px;
}
{ from: 'darkslategray', to: '#556832' }
p { color: darkslategray; }
a { color: #2F4F4F; }
.quote {
border-left: 1px solid rgb(47, 79, 79);
border-right: solid hsl(180, 25%, 25%) 1px;
}
{ from: 'darkslategray', to: '#556832' }
p { color: #556832; }
a { color: #556832; }
.quote {
border-left: 1px solid #556832;
border-right: solid #556832 1px;
}
function plugin(options) {
return function (root) {
root.walkDecls(function (decl) {
if (decl.value === options.from)
decl.value = options.to;
});
};
}
module.exports = postcss.plugin('alter-color', plugin);
Сплошные цвета
Цвета с прозрачностью
{ rgb: [ 255, 165, 0 ],
hsl: [ 39, 100, 50 ],
keyword: 'orange',
hex: '#ffa500',
rgba: [ 255, 165, 0, 1 ],
hsla: [ 39, 100, 50, 1 ] }
#main { border: 1px solid #2F4F4F }
{
type: "decl",
prop: "border",
value: "1px solid #2F4F4F"
}
root.walkDecls(decl => {
const parsedValue = cssTree.parse(
decl.value,
{ context: 'value' }
);
// тут можно модифицировать parsedValue
decl.value = cssTree.generate(parsedValue);
});
"1px solid #2F4F4F"
{ type: "Value", children: [
{ type: "Dimension", value: 1, unit: "px" },
{ type: "WhiteSpace", value: " " },
{ type: "Identifier", name: "solid" },
{ type: "WhiteSpace", value: " " },
{ type: "HexColor", value: "2F4F4F" }
] }
"darkslategray"
{ type: "Value", children: [
{ type: "Identifier", name: "darkslategray" }
] }
rgb(47, 79, 79)
{ type: "Value", children: [
{ type: "Function", name: "rgb", "children": [
{ type: "Number", value: "47"},
{ type: "Operator", value: ","},
{ type: "Number", value: "79"},
{ type: "Operator", value: ","},
{ type: "Number", value: "79"}
] }
] }
function identifierVisitor(node, item, list) {
if (node.name === 'darkslategray') {
// изменяем node
}
}
cssTree.walk(parsedValue, {
visit: 'Identifier',
enter: identifierVisitor
});
function identifierVisitor(node, item, list) {
if (node.name === 'darkslategray') {
const data = cssTree.fromPlainObject({
type: 'HexColor',
value: '556832'
});
list.replace(item, list.createItem(data));
}
}
cssTree.walk(parsedValue, {
visit: 'HexColor',
enter: hexColorVisitor
});
cssTree.walk(parsedValue, {
visit: 'Function',
enter: functionVisitor
});
{ type: "Value", children: [
{ type: "Function", name: "rgb", "children": [
{ type: "Number", value: "47"},
{ type: "Operator", value: ","},
{ type: "Number", value: "79"},
{ type: "Operator", value: ","},
{ type: "Number", value: "79"}
] }
] }
{ type: "Value", children: [
{ type: "Function", name: "rgb", "children": [
{ type: "Percentage", value: "18.4%"},
{ type: "Operator", value: ","},
{ type: "Percentage", value: "30.98%"},
{ type: "Operator", value: ","},
{ type: "Percentage", value: "30.98%"}
] }
] }
@mistakster (English)
@mista_k (больше про жизнь)
Слайды презентации: bit.ly/fc18-pp