Skip to content

Instantly share code, notes, and snippets.

View find-color-with-csstree.js
const csstree = require("css-tree");
const cssDefinitions = ["color"];
const ast = csstree.parse(`
.some-selector {
color: black;
border: 1px solid #fff;
}
`, { parseValue: false });
csstree.walk(ast, {
View get-selector-parent.js
const cssTree = require("css-tree@1.0.0-alpha.29");
function getSelectorParent(selector) {
const selectorAst = cssTree.parse(selector, { context: 'selector' });
// solution #1
selectorAst.children.prevUntil(selectorAst.children.tail, (node, item, list) => {
list.remove(item);
return node.type === 'Combinator' || node.type === 'WhiteSpace';
});
View gist:c0ea23a2f0ea091bd042d1f353fbf6f7
const cssTree = require("css-tree@1.0.0-alpha.29");
function getSelectorParent(selector) {
const selectorAst = cssTree.parse(selector, { context: 'selector' });
// solution #1
// selectorAst.children.prevUntil(selectorAst.children.tail, (node, item, list) => {
// list.remove(item);
// return node.type === 'Combinator' || node.type === 'WhiteSpace';
// });
View gist:12656e18e4a5272fb8ce8f089455f9d0
const cssTree = require("css-tree@1.0.0-alpha.29");
function getSelectorParent(selector) {
const selectorAst = cssTree.parse(selector, { context: 'selector' });
// solution #1
// selectorAst.children.prevUntil(selectorAst.children.tail, (node, item, list) => {
// list.remove(item);
// return node.type === 'Combinator' || node.type === 'WhiteSpace';
// });
@lahmatiy
lahmatiy / prop-types-patch.js
Last active Jul 9, 2018
webpack loader to patch the prop-types to get an information about the propTypes definition in a runtime (UPD: you can use ready to use package https://github.com/avito-tech/prop-types-definition)
View prop-types-patch.js
// UPDATE: you can use ready to use package prop-types-definition
// https://github.com/avito-tech/prop-types-definition
module.exports = function(content) {
return content + `
(function(ReactPropTypes) {
function unwrapValueItem(value) {
if (value) {
if (typeof value.getTypeDefinition === 'function') {
return value.getTypeDefinition();
@lahmatiy
lahmatiy / concat-ast.js
Created Apr 11, 2018
Concat AST with CSSTree. Note that CSSTree lost an original formatting on parsing.
View concat-ast.js
const csstree = require('css-tree');
const ast1 = csstree.parse('.a { color: red }', {
filename: './a.css',
positions: true
});
const ast2 = csstree.parse('.b { color: red }', {
filename: './b.css',
positions: true
});
@lahmatiy
lahmatiy / check-initial.js
Created Jan 7, 2018
Check mdn/data initial values
View check-initial.js
const csstree = require('css-tree');
const data = require('mdn-data/css/properties.json');
Object.keys(data).forEach(name => {
const prop = data[name];
if (Array.isArray(prop.initial)) {
return;
}
@lahmatiy
lahmatiy / png.inject.js
Last active Apr 16, 2018
Solution to inject/fetch a custom data to/from a PNG image
View png.inject.js
const pngSignature = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
const hashKey = 'react-snapshot-hash';
const crcTable = [];
const initialCrc = 0xffffffff;
for (let n = 0; n < 256; n++) {
let c = n;
for (let k = 0; k < 8; k++) {
if (c & 1) {
View makeGifStatic.js
const EXTENSION_TYPE = {
0x01: 'PlainText',
0xF9: 'GraphicControl',
0xFE: 'Comment',
0xFF: 'Application'
};
/**
* Returns total length of data blocks sequence
*
@lahmatiy
lahmatiy / results.md
Last active Oct 8, 2017
JS perf quiz
View results.md

Similar solutions with very different execution times. What's the reason? Why solution #1 is too slow?

Hint: access to .length property and to variables is not an issue.

Based on a real case in CSSTree

Node v6.11.3

N Solution #1 Solution #2