From c06f7ee0a40255214c477e13d9b956a7e07c2900 Mon Sep 17 00:00:00 2001 From: littleblack111 Date: Sat, 14 Oct 2023 15:05:55 +0800 Subject: postcss,(plugins): nanocss, postcss-preset-env --- node_modules/csso/lib/restructure/1-mergeAtrule.js | 106 +++++ .../csso/lib/restructure/2-initialMergeRuleset.js | 53 +++ .../csso/lib/restructure/3-disjoinRuleset.js | 42 ++ .../csso/lib/restructure/4-restructShorthand.js | 425 +++++++++++++++++++++ .../csso/lib/restructure/6-restructBlock.js | 308 +++++++++++++++ .../csso/lib/restructure/7-mergeRuleset.js | 86 +++++ .../csso/lib/restructure/8-restructRuleset.js | 176 +++++++++ node_modules/csso/lib/restructure/index.js | 35 ++ .../prepare/createDeclarationIndexer.js | 31 ++ node_modules/csso/lib/restructure/prepare/index.js | 41 ++ .../lib/restructure/prepare/processSelector.js | 97 +++++ .../csso/lib/restructure/prepare/specificity.js | 131 +++++++ node_modules/csso/lib/restructure/utils.js | 142 +++++++ 13 files changed, 1673 insertions(+) create mode 100644 node_modules/csso/lib/restructure/1-mergeAtrule.js create mode 100644 node_modules/csso/lib/restructure/2-initialMergeRuleset.js create mode 100644 node_modules/csso/lib/restructure/3-disjoinRuleset.js create mode 100644 node_modules/csso/lib/restructure/4-restructShorthand.js create mode 100644 node_modules/csso/lib/restructure/6-restructBlock.js create mode 100644 node_modules/csso/lib/restructure/7-mergeRuleset.js create mode 100644 node_modules/csso/lib/restructure/8-restructRuleset.js create mode 100644 node_modules/csso/lib/restructure/index.js create mode 100644 node_modules/csso/lib/restructure/prepare/createDeclarationIndexer.js create mode 100644 node_modules/csso/lib/restructure/prepare/index.js create mode 100644 node_modules/csso/lib/restructure/prepare/processSelector.js create mode 100644 node_modules/csso/lib/restructure/prepare/specificity.js create mode 100644 node_modules/csso/lib/restructure/utils.js (limited to 'node_modules/csso/lib/restructure') diff --git a/node_modules/csso/lib/restructure/1-mergeAtrule.js b/node_modules/csso/lib/restructure/1-mergeAtrule.js new file mode 100644 index 00000000..e00e4d32 --- /dev/null +++ b/node_modules/csso/lib/restructure/1-mergeAtrule.js @@ -0,0 +1,106 @@ +import { List, walk, keyword as resolveKeyword } from 'css-tree'; + +const { hasOwnProperty } = Object.prototype; + +function addRuleToMap(map, item, list, single) { + const node = item.data; + const name = resolveKeyword(node.name).basename; + const id = node.name.toLowerCase() + '/' + (node.prelude ? node.prelude.id : null); + + if (!hasOwnProperty.call(map, name)) { + map[name] = Object.create(null); + } + + if (single) { + delete map[name][id]; + } + + if (!hasOwnProperty.call(map[name], id)) { + map[name][id] = new List(); + } + + map[name][id].append(list.remove(item)); +} + +function relocateAtrules(ast, options) { + const collected = Object.create(null); + let topInjectPoint = null; + + ast.children.forEach(function(node, item, list) { + if (node.type === 'Atrule') { + const name = resolveKeyword(node.name).basename; + + switch (name) { + case 'keyframes': + addRuleToMap(collected, item, list, true); + return; + + case 'media': + if (options.forceMediaMerge) { + addRuleToMap(collected, item, list, false); + return; + } + break; + } + + if (topInjectPoint === null && + name !== 'charset' && + name !== 'import') { + topInjectPoint = item; + } + } else { + if (topInjectPoint === null) { + topInjectPoint = item; + } + } + }); + + for (const atrule in collected) { + for (const id in collected[atrule]) { + ast.children.insertList( + collected[atrule][id], + atrule === 'media' ? null : topInjectPoint + ); + } + } +}; + +function isMediaRule(node) { + return node.type === 'Atrule' && node.name === 'media'; +} + +function processAtrule(node, item, list) { + if (!isMediaRule(node)) { + return; + } + + const prev = item.prev && item.prev.data; + + if (!prev || !isMediaRule(prev)) { + return; + } + + // merge @media with same query + if (node.prelude && + prev.prelude && + node.prelude.id === prev.prelude.id) { + prev.block.children.appendList(node.block.children); + list.remove(item); + + // TODO: use it when we can refer to several points in source + // prev.loc = { + // primary: prev.loc, + // merged: node.loc + // }; + } +} + +export default function rejoinAtrule(ast, options) { + relocateAtrules(ast, options); + + walk(ast, { + visit: 'Atrule', + reverse: true, + enter: processAtrule + }); +}; diff --git a/node_modules/csso/lib/restructure/2-initialMergeRuleset.js b/node_modules/csso/lib/restructure/2-initialMergeRuleset.js new file mode 100644 index 00000000..c49abaa0 --- /dev/null +++ b/node_modules/csso/lib/restructure/2-initialMergeRuleset.js @@ -0,0 +1,53 @@ +import { walk } from 'css-tree'; +import { + unsafeToSkipNode, + isEqualSelectors, + isEqualDeclarations, + addSelectors, + hasSimilarSelectors +} from './utils.js'; + +function processRule(node, item, list) { + const selectors = node.prelude.children; + const declarations = node.block.children; + + list.prevUntil(item.prev, function(prev) { + // skip non-ruleset node if safe + if (prev.type !== 'Rule') { + return unsafeToSkipNode.call(selectors, prev); + } + + const prevSelectors = prev.prelude.children; + const prevDeclarations = prev.block.children; + + // try to join rulesets with equal pseudo signature + if (node.pseudoSignature === prev.pseudoSignature) { + // try to join by selectors + if (isEqualSelectors(prevSelectors, selectors)) { + prevDeclarations.appendList(declarations); + list.remove(item); + return true; + } + + // try to join by declarations + if (isEqualDeclarations(declarations, prevDeclarations)) { + addSelectors(prevSelectors, selectors); + list.remove(item); + return true; + } + } + + // go to prev ruleset if has no selector similarities + return hasSimilarSelectors(selectors, prevSelectors); + }); +} + +// NOTE: direction should be left to right, since rulesets merge to left +// ruleset. When direction right to left unmerged rulesets may prevent lookup +// TODO: remove initial merge +export default function initialMergeRule(ast) { + walk(ast, { + visit: 'Rule', + enter: processRule + }); +}; diff --git a/node_modules/csso/lib/restructure/3-disjoinRuleset.js b/node_modules/csso/lib/restructure/3-disjoinRuleset.js new file mode 100644 index 00000000..02ec5e1f --- /dev/null +++ b/node_modules/csso/lib/restructure/3-disjoinRuleset.js @@ -0,0 +1,42 @@ +import { List, walk } from 'css-tree'; + +function processRule(node, item, list) { + const selectors = node.prelude.children; + + // generate new rule sets: + // .a, .b { color: red; } + // -> + // .a { color: red; } + // .b { color: red; } + + // while there are more than 1 simple selector split for rulesets + while (selectors.head !== selectors.tail) { + const newSelectors = new List(); + + newSelectors.insert(selectors.remove(selectors.head)); + + list.insert(list.createItem({ + type: 'Rule', + loc: node.loc, + prelude: { + type: 'SelectorList', + loc: node.prelude.loc, + children: newSelectors + }, + block: { + type: 'Block', + loc: node.block.loc, + children: node.block.children.copy() + }, + pseudoSignature: node.pseudoSignature + }), item); + } +} + +export default function disjoinRule(ast) { + walk(ast, { + visit: 'Rule', + reverse: true, + enter: processRule + }); +}; diff --git a/node_modules/csso/lib/restructure/4-restructShorthand.js b/node_modules/csso/lib/restructure/4-restructShorthand.js new file mode 100644 index 00000000..41acb515 --- /dev/null +++ b/node_modules/csso/lib/restructure/4-restructShorthand.js @@ -0,0 +1,425 @@ +import { List, generate, walk } from 'css-tree'; + +const REPLACE = 1; +const REMOVE = 2; +const TOP = 0; +const RIGHT = 1; +const BOTTOM = 2; +const LEFT = 3; +const SIDES = ['top', 'right', 'bottom', 'left']; +const SIDE = { + 'margin-top': 'top', + 'margin-right': 'right', + 'margin-bottom': 'bottom', + 'margin-left': 'left', + + 'padding-top': 'top', + 'padding-right': 'right', + 'padding-bottom': 'bottom', + 'padding-left': 'left', + + 'border-top-color': 'top', + 'border-right-color': 'right', + 'border-bottom-color': 'bottom', + 'border-left-color': 'left', + 'border-top-width': 'top', + 'border-right-width': 'right', + 'border-bottom-width': 'bottom', + 'border-left-width': 'left', + 'border-top-style': 'top', + 'border-right-style': 'right', + 'border-bottom-style': 'bottom', + 'border-left-style': 'left' +}; +const MAIN_PROPERTY = { + 'margin': 'margin', + 'margin-top': 'margin', + 'margin-right': 'margin', + 'margin-bottom': 'margin', + 'margin-left': 'margin', + + 'padding': 'padding', + 'padding-top': 'padding', + 'padding-right': 'padding', + 'padding-bottom': 'padding', + 'padding-left': 'padding', + + 'border-color': 'border-color', + 'border-top-color': 'border-color', + 'border-right-color': 'border-color', + 'border-bottom-color': 'border-color', + 'border-left-color': 'border-color', + 'border-width': 'border-width', + 'border-top-width': 'border-width', + 'border-right-width': 'border-width', + 'border-bottom-width': 'border-width', + 'border-left-width': 'border-width', + 'border-style': 'border-style', + 'border-top-style': 'border-style', + 'border-right-style': 'border-style', + 'border-bottom-style': 'border-style', + 'border-left-style': 'border-style' +}; + +class TRBL { + constructor(name) { + this.name = name; + this.loc = null; + this.iehack = undefined; + this.sides = { + 'top': null, + 'right': null, + 'bottom': null, + 'left': null + }; + } + + getValueSequence(declaration, count) { + const values = []; + let iehack = ''; + const hasBadValues = declaration.value.type !== 'Value' || declaration.value.children.some(function(child) { + let special = false; + + switch (child.type) { + case 'Identifier': + switch (child.name) { + case '\\0': + case '\\9': + iehack = child.name; + return; + + case 'inherit': + case 'initial': + case 'unset': + case 'revert': + special = child.name; + break; + } + break; + + case 'Dimension': + switch (child.unit) { + // is not supported until IE11 + case 'rem': + + // v* units is too buggy across browsers and better + // don't merge values with those units + case 'vw': + case 'vh': + case 'vmin': + case 'vmax': + case 'vm': // IE9 supporting "vm" instead of "vmin". + special = child.unit; + break; + } + break; + + case 'Hash': // color + case 'Number': + case 'Percentage': + break; + + case 'Function': + if (child.name === 'var') { + return true; + } + + special = child.name; + break; + + default: + return true; // bad value + } + + values.push({ + node: child, + special, + important: declaration.important + }); + }); + + if (hasBadValues || values.length > count) { + return false; + } + + if (typeof this.iehack === 'string' && this.iehack !== iehack) { + return false; + } + + this.iehack = iehack; // move outside + + return values; + } + + canOverride(side, value) { + const currentValue = this.sides[side]; + + return !currentValue || (value.important && !currentValue.important); + } + + add(name, declaration) { + function attemptToAdd() { + const sides = this.sides; + const side = SIDE[name]; + + if (side) { + if (side in sides === false) { + return false; + } + + const values = this.getValueSequence(declaration, 1); + + if (!values || !values.length) { + return false; + } + + // can mix only if specials are equal + for (const key in sides) { + if (sides[key] !== null && sides[key].special !== values[0].special) { + return false; + } + } + + if (!this.canOverride(side, values[0])) { + return true; + } + + sides[side] = values[0]; + + return true; + } else if (name === this.name) { + const values = this.getValueSequence(declaration, 4); + + if (!values || !values.length) { + return false; + } + + switch (values.length) { + case 1: + values[RIGHT] = values[TOP]; + values[BOTTOM] = values[TOP]; + values[LEFT] = values[TOP]; + break; + + case 2: + values[BOTTOM] = values[TOP]; + values[LEFT] = values[RIGHT]; + break; + + case 3: + values[LEFT] = values[RIGHT]; + break; + } + + // can mix only if specials are equal + for (let i = 0; i < 4; i++) { + for (const key in sides) { + if (sides[key] !== null && sides[key].special !== values[i].special) { + return false; + } + } + } + + for (let i = 0; i < 4; i++) { + if (this.canOverride(SIDES[i], values[i])) { + sides[SIDES[i]] = values[i]; + } + } + + return true; + } + } + + if (!attemptToAdd.call(this)) { + return false; + } + + // TODO: use it when we can refer to several points in source + // if (this.loc) { + // this.loc = { + // primary: this.loc, + // merged: declaration.loc + // }; + // } else { + // this.loc = declaration.loc; + // } + if (!this.loc) { + this.loc = declaration.loc; + } + + return true; + } + + isOkToMinimize() { + const top = this.sides.top; + const right = this.sides.right; + const bottom = this.sides.bottom; + const left = this.sides.left; + + if (top && right && bottom && left) { + const important = + top.important + + right.important + + bottom.important + + left.important; + + return important === 0 || important === 4; + } + + return false; + } + + getValue() { + const result = new List(); + const sides = this.sides; + const values = [ + sides.top, + sides.right, + sides.bottom, + sides.left + ]; + const stringValues = [ + generate(sides.top.node), + generate(sides.right.node), + generate(sides.bottom.node), + generate(sides.left.node) + ]; + + if (stringValues[LEFT] === stringValues[RIGHT]) { + values.pop(); + if (stringValues[BOTTOM] === stringValues[TOP]) { + values.pop(); + if (stringValues[RIGHT] === stringValues[TOP]) { + values.pop(); + } + } + } + + for (let i = 0; i < values.length; i++) { + result.appendData(values[i].node); + } + + if (this.iehack) { + result.appendData({ + type: 'Identifier', + loc: null, + name: this.iehack + }); + } + + return { + type: 'Value', + loc: null, + children: result + }; + } + + getDeclaration() { + return { + type: 'Declaration', + loc: this.loc, + important: this.sides.top.important, + property: this.name, + value: this.getValue() + }; + } +} + +function processRule(rule, shorts, shortDeclarations, lastShortSelector) { + const declarations = rule.block.children; + const selector = rule.prelude.children.first.id; + + rule.block.children.forEachRight(function(declaration, item) { + const property = declaration.property; + + if (!MAIN_PROPERTY.hasOwnProperty(property)) { + return; + } + + const key = MAIN_PROPERTY[property]; + let shorthand; + let operation; + + if (!lastShortSelector || selector === lastShortSelector) { + if (key in shorts) { + operation = REMOVE; + shorthand = shorts[key]; + } + } + + if (!shorthand || !shorthand.add(property, declaration)) { + operation = REPLACE; + shorthand = new TRBL(key); + + // if can't parse value ignore it and break shorthand children + if (!shorthand.add(property, declaration)) { + lastShortSelector = null; + return; + } + } + + shorts[key] = shorthand; + shortDeclarations.push({ + operation, + block: declarations, + item, + shorthand + }); + + lastShortSelector = selector; + }); + + return lastShortSelector; +} + +function processShorthands(shortDeclarations, markDeclaration) { + shortDeclarations.forEach(function(item) { + const shorthand = item.shorthand; + + if (!shorthand.isOkToMinimize()) { + return; + } + + if (item.operation === REPLACE) { + item.item.data = markDeclaration(shorthand.getDeclaration()); + } else { + item.block.remove(item.item); + } + }); +} + +export default function restructBlock(ast, indexer) { + const stylesheetMap = {}; + const shortDeclarations = []; + + walk(ast, { + visit: 'Rule', + reverse: true, + enter(node) { + const stylesheet = this.block || this.stylesheet; + const ruleId = (node.pseudoSignature || '') + '|' + node.prelude.children.first.id; + let ruleMap; + let shorts; + + if (!stylesheetMap.hasOwnProperty(stylesheet.id)) { + ruleMap = { + lastShortSelector: null + }; + stylesheetMap[stylesheet.id] = ruleMap; + } else { + ruleMap = stylesheetMap[stylesheet.id]; + } + + if (ruleMap.hasOwnProperty(ruleId)) { + shorts = ruleMap[ruleId]; + } else { + shorts = {}; + ruleMap[ruleId] = shorts; + } + + ruleMap.lastShortSelector = processRule.call(this, node, shorts, shortDeclarations, ruleMap.lastShortSelector); + } + }); + + processShorthands(shortDeclarations, indexer.declaration); +}; diff --git a/node_modules/csso/lib/restructure/6-restructBlock.js b/node_modules/csso/lib/restructure/6-restructBlock.js new file mode 100644 index 00000000..7d5e8572 --- /dev/null +++ b/node_modules/csso/lib/restructure/6-restructBlock.js @@ -0,0 +1,308 @@ +import { + walk, + generate, + property as resolveProperty, + keyword as resolveKeyword +} from 'css-tree'; + +let fingerprintId = 1; +const dontRestructure = new Set([ + 'src' // https://github.com/afelix/csso/issues/50 +]); + +const DONT_MIX_VALUE = { + // https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility + 'display': /table|ruby|flex|-(flex)?box$|grid|contents|run-in/i, + // https://developer.mozilla.org/en/docs/Web/CSS/text-align + 'text-align': /^(start|end|match-parent|justify-all)$/i +}; + +const SAFE_VALUES = { + cursor: [ + 'auto', 'crosshair', 'default', 'move', 'text', 'wait', 'help', + 'n-resize', 'e-resize', 's-resize', 'w-resize', + 'ne-resize', 'nw-resize', 'se-resize', 'sw-resize', + 'pointer', 'progress', 'not-allowed', 'no-drop', 'vertical-text', 'all-scroll', + 'col-resize', 'row-resize' + ], + overflow: [ + 'hidden', 'visible', 'scroll', 'auto' + ], + position: [ + 'static', 'relative', 'absolute', 'fixed' + ] +}; + +const NEEDLESS_TABLE = { + 'border-width': ['border'], + 'border-style': ['border'], + 'border-color': ['border'], + 'border-top': ['border'], + 'border-right': ['border'], + 'border-bottom': ['border'], + 'border-left': ['border'], + 'border-top-width': ['border-top', 'border-width', 'border'], + 'border-right-width': ['border-right', 'border-width', 'border'], + 'border-bottom-width': ['border-bottom', 'border-width', 'border'], + 'border-left-width': ['border-left', 'border-width', 'border'], + 'border-top-style': ['border-top', 'border-style', 'border'], + 'border-right-style': ['border-right', 'border-style', 'border'], + 'border-bottom-style': ['border-bottom', 'border-style', 'border'], + 'border-left-style': ['border-left', 'border-style', 'border'], + 'border-top-color': ['border-top', 'border-color', 'border'], + 'border-right-color': ['border-right', 'border-color', 'border'], + 'border-bottom-color': ['border-bottom', 'border-color', 'border'], + 'border-left-color': ['border-left', 'border-color', 'border'], + 'margin-top': ['margin'], + 'margin-right': ['margin'], + 'margin-bottom': ['margin'], + 'margin-left': ['margin'], + 'padding-top': ['padding'], + 'padding-right': ['padding'], + 'padding-bottom': ['padding'], + 'padding-left': ['padding'], + 'font-style': ['font'], + 'font-variant': ['font'], + 'font-weight': ['font'], + 'font-size': ['font'], + 'font-family': ['font'], + 'list-style-type': ['list-style'], + 'list-style-position': ['list-style'], + 'list-style-image': ['list-style'] +}; + +function getPropertyFingerprint(propertyName, declaration, fingerprints) { + const realName = resolveProperty(propertyName).basename; + + if (realName === 'background') { + return propertyName + ':' + generate(declaration.value); + } + + const declarationId = declaration.id; + let fingerprint = fingerprints[declarationId]; + + if (!fingerprint) { + switch (declaration.value.type) { + case 'Value': + const special = {}; + let vendorId = ''; + let iehack = ''; + let raw = false; + + declaration.value.children.forEach(function walk(node) { + switch (node.type) { + case 'Value': + case 'Brackets': + case 'Parentheses': + node.children.forEach(walk); + break; + + case 'Raw': + raw = true; + break; + + case 'Identifier': { + const { name } = node; + + if (!vendorId) { + vendorId = resolveKeyword(name).vendor; + } + + if (/\\[09]/.test(name)) { + iehack = RegExp.lastMatch; + } + + if (SAFE_VALUES.hasOwnProperty(realName)) { + if (SAFE_VALUES[realName].indexOf(name) === -1) { + special[name] = true; + } + } else if (DONT_MIX_VALUE.hasOwnProperty(realName)) { + if (DONT_MIX_VALUE[realName].test(name)) { + special[name] = true; + } + } + + break; + } + + case 'Function': { + let { name } = node; + + if (!vendorId) { + vendorId = resolveKeyword(name).vendor; + } + + if (name === 'rect') { + // there are 2 forms of rect: + // rect(, , , ) - standart + // rect( ) – backwards compatible syntax + // only the same form values can be merged + const hasComma = node.children.some((node) => + node.type === 'Operator' && node.value === ',' + ); + + if (!hasComma) { + name = 'rect-backward'; + } + } + + special[name + '()'] = true; + + // check nested tokens too + node.children.forEach(walk); + + break; + } + + case 'Dimension': { + const { unit } = node; + + if (/\\[09]/.test(unit)) { + iehack = RegExp.lastMatch; + } + + switch (unit) { + // is not supported until IE11 + case 'rem': + + // v* units is too buggy across browsers and better + // don't merge values with those units + case 'vw': + case 'vh': + case 'vmin': + case 'vmax': + case 'vm': // IE9 supporting "vm" instead of "vmin". + special[unit] = true; + break; + } + + break; + } + } + }); + + fingerprint = raw + ? '!' + fingerprintId++ + : '!' + Object.keys(special).sort() + '|' + iehack + vendorId; + break; + + case 'Raw': + fingerprint = '!' + declaration.value.value; + break; + + default: + fingerprint = generate(declaration.value); + } + + fingerprints[declarationId] = fingerprint; + } + + return propertyName + fingerprint; +} + +function needless(props, declaration, fingerprints) { + const property = resolveProperty(declaration.property); + + if (NEEDLESS_TABLE.hasOwnProperty(property.basename)) { + const table = NEEDLESS_TABLE[property.basename]; + + for (const entry of table) { + const ppre = getPropertyFingerprint(property.prefix + entry, declaration, fingerprints); + const prev = props.hasOwnProperty(ppre) ? props[ppre] : null; + + if (prev && (!declaration.important || prev.item.data.important)) { + return prev; + } + } + } +} + +function processRule(rule, item, list, props, fingerprints) { + const declarations = rule.block.children; + + declarations.forEachRight(function(declaration, declarationItem) { + const { property } = declaration; + const fingerprint = getPropertyFingerprint(property, declaration, fingerprints); + const prev = props[fingerprint]; + + if (prev && !dontRestructure.has(property)) { + if (declaration.important && !prev.item.data.important) { + props[fingerprint] = { + block: declarations, + item: declarationItem + }; + + prev.block.remove(prev.item); + + // TODO: use it when we can refer to several points in source + // declaration.loc = { + // primary: declaration.loc, + // merged: prev.item.data.loc + // }; + } else { + declarations.remove(declarationItem); + + // TODO: use it when we can refer to several points in source + // prev.item.data.loc = { + // primary: prev.item.data.loc, + // merged: declaration.loc + // }; + } + } else { + const prev = needless(props, declaration, fingerprints); + + if (prev) { + declarations.remove(declarationItem); + + // TODO: use it when we can refer to several points in source + // prev.item.data.loc = { + // primary: prev.item.data.loc, + // merged: declaration.loc + // }; + } else { + declaration.fingerprint = fingerprint; + + props[fingerprint] = { + block: declarations, + item: declarationItem + }; + } + } + }); + + if (declarations.isEmpty) { + list.remove(item); + } +} + +export default function restructBlock(ast) { + const stylesheetMap = {}; + const fingerprints = Object.create(null); + + walk(ast, { + visit: 'Rule', + reverse: true, + enter(node, item, list) { + const stylesheet = this.block || this.stylesheet; + const ruleId = (node.pseudoSignature || '') + '|' + node.prelude.children.first.id; + let ruleMap; + let props; + + if (!stylesheetMap.hasOwnProperty(stylesheet.id)) { + ruleMap = {}; + stylesheetMap[stylesheet.id] = ruleMap; + } else { + ruleMap = stylesheetMap[stylesheet.id]; + } + + if (ruleMap.hasOwnProperty(ruleId)) { + props = ruleMap[ruleId]; + } else { + props = {}; + ruleMap[ruleId] = props; + } + + processRule.call(this, node, item, list, props, fingerprints); + } + }); +}; diff --git a/node_modules/csso/lib/restructure/7-mergeRuleset.js b/node_modules/csso/lib/restructure/7-mergeRuleset.js new file mode 100644 index 00000000..8a4d5438 --- /dev/null +++ b/node_modules/csso/lib/restructure/7-mergeRuleset.js @@ -0,0 +1,86 @@ +import { walk } from 'css-tree'; +import { unsafeToSkipNode, isEqualDeclarations} from './utils.js'; + +/* + At this step all rules has single simple selector. We try to join by equal + declaration blocks to first rule, e.g. + + .a { color: red } + b { ... } + .b { color: red } + -> + .a, .b { color: red } + b { ... } +*/ + +function processRule(node, item, list) { + const selectors = node.prelude.children; + const declarations = node.block.children; + const nodeCompareMarker = selectors.first.compareMarker; + const skippedCompareMarkers = {}; + + list.nextUntil(item.next, function(next, nextItem) { + // skip non-ruleset node if safe + if (next.type !== 'Rule') { + return unsafeToSkipNode.call(selectors, next); + } + + if (node.pseudoSignature !== next.pseudoSignature) { + return true; + } + + const nextFirstSelector = next.prelude.children.head; + const nextDeclarations = next.block.children; + const nextCompareMarker = nextFirstSelector.data.compareMarker; + + // if next ruleset has same marked as one of skipped then stop joining + if (nextCompareMarker in skippedCompareMarkers) { + return true; + } + + // try to join by selectors + if (selectors.head === selectors.tail) { + if (selectors.first.id === nextFirstSelector.data.id) { + declarations.appendList(nextDeclarations); + list.remove(nextItem); + return; + } + } + + // try to join by properties + if (isEqualDeclarations(declarations, nextDeclarations)) { + const nextStr = nextFirstSelector.data.id; + + selectors.some((data, item) => { + const curStr = data.id; + + if (nextStr < curStr) { + selectors.insert(nextFirstSelector, item); + return true; + } + + if (!item.next) { + selectors.insert(nextFirstSelector); + return true; + } + }); + + list.remove(nextItem); + return; + } + + // go to next ruleset if current one can be skipped (has no equal specificity nor element selector) + if (nextCompareMarker === nodeCompareMarker) { + return true; + } + + skippedCompareMarkers[nextCompareMarker] = true; + }); +} + +export default function mergeRule(ast) { + walk(ast, { + visit: 'Rule', + enter: processRule + }); +}; diff --git a/node_modules/csso/lib/restructure/8-restructRuleset.js b/node_modules/csso/lib/restructure/8-restructRuleset.js new file mode 100644 index 00000000..c9cbf094 --- /dev/null +++ b/node_modules/csso/lib/restructure/8-restructRuleset.js @@ -0,0 +1,176 @@ +import { List, walk } from 'css-tree'; +import { + unsafeToSkipNode, + isEqualSelectors, + compareDeclarations, + addSelectors +} from './utils.js'; + +function calcSelectorLength(list) { + return list.reduce((res, data) => res + data.id.length + 1, 0) - 1; +} + +function calcDeclarationsLength(tokens) { + let length = 0; + + for (const token of tokens) { + length += token.length; + } + + return ( + length + // declarations + tokens.length - 1 // delimeters + ); +} + +function processRule(node, item, list) { + const avoidRulesMerge = this.block !== null ? this.block.avoidRulesMerge : false; + const selectors = node.prelude.children; + const block = node.block; + const disallowDownMarkers = Object.create(null); + let allowMergeUp = true; + let allowMergeDown = true; + + list.prevUntil(item.prev, function(prev, prevItem) { + const prevBlock = prev.block; + const prevType = prev.type; + + if (prevType !== 'Rule') { + const unsafe = unsafeToSkipNode.call(selectors, prev); + + if (!unsafe && prevType === 'Atrule' && prevBlock) { + walk(prevBlock, { + visit: 'Rule', + enter(node) { + node.prelude.children.forEach((data) => { + disallowDownMarkers[data.compareMarker] = true; + }); + } + }); + } + + return unsafe; + } + + if (node.pseudoSignature !== prev.pseudoSignature) { + return true; + } + + const prevSelectors = prev.prelude.children; + + allowMergeDown = !prevSelectors.some((selector) => + selector.compareMarker in disallowDownMarkers + ); + + // try prev ruleset if simpleselectors has no equal specifity and element selector + if (!allowMergeDown && !allowMergeUp) { + return true; + } + + // try to join by selectors + if (allowMergeUp && isEqualSelectors(prevSelectors, selectors)) { + prevBlock.children.appendList(block.children); + list.remove(item); + + return true; + } + + // try to join by properties + const diff = compareDeclarations(block.children, prevBlock.children); + + // console.log(diff.eq, diff.ne1, diff.ne2); + + if (diff.eq.length) { + if (!diff.ne1.length && !diff.ne2.length) { + // equal blocks + if (allowMergeDown) { + addSelectors(selectors, prevSelectors); + list.remove(prevItem); + } + + return true; + } else if (!avoidRulesMerge) { /* probably we don't need to prevent those merges for @keyframes + TODO: need to be checked */ + + if (diff.ne1.length && !diff.ne2.length) { + // prevBlock is subset block + const selectorLength = calcSelectorLength(selectors); + const blockLength = calcDeclarationsLength(diff.eq); // declarations length + + if (allowMergeUp && selectorLength < blockLength) { + addSelectors(prevSelectors, selectors); + block.children.fromArray(diff.ne1); + } + } else if (!diff.ne1.length && diff.ne2.length) { + // node is subset of prevBlock + const selectorLength = calcSelectorLength(prevSelectors); + const blockLength = calcDeclarationsLength(diff.eq); // declarations length + + if (allowMergeDown && selectorLength < blockLength) { + addSelectors(selectors, prevSelectors); + prevBlock.children.fromArray(diff.ne2); + } + } else { + // diff.ne1.length && diff.ne2.length + // extract equal block + const newSelector = { + type: 'SelectorList', + loc: null, + children: addSelectors(prevSelectors.copy(), selectors) + }; + const newBlockLength = calcSelectorLength(newSelector.children) + 2; // selectors length + curly braces length + const blockLength = calcDeclarationsLength(diff.eq); // declarations length + + // create new ruleset if declarations length greater than + // ruleset description overhead + if (blockLength >= newBlockLength) { + const newItem = list.createItem({ + type: 'Rule', + loc: null, + prelude: newSelector, + block: { + type: 'Block', + loc: null, + children: new List().fromArray(diff.eq) + }, + pseudoSignature: node.pseudoSignature + }); + + block.children.fromArray(diff.ne1); + prevBlock.children.fromArray(diff.ne2overrided); + + if (allowMergeUp) { + list.insert(newItem, prevItem); + } else { + list.insert(newItem, item); + } + + return true; + } + } + } + } + + if (allowMergeUp) { + // TODO: disallow up merge only if any property interception only (i.e. diff.ne2overrided.length > 0); + // await property families to find property interception correctly + allowMergeUp = !prevSelectors.some((prevSelector) => + selectors.some((selector) => + selector.compareMarker === prevSelector.compareMarker + ) + ); + } + + prevSelectors.forEach((data) => { + disallowDownMarkers[data.compareMarker] = true; + }); + }); +} + +export default function restructRule(ast) { + walk(ast, { + visit: 'Rule', + reverse: true, + enter: processRule + }); +}; diff --git a/node_modules/csso/lib/restructure/index.js b/node_modules/csso/lib/restructure/index.js new file mode 100644 index 00000000..62c93528 --- /dev/null +++ b/node_modules/csso/lib/restructure/index.js @@ -0,0 +1,35 @@ +import prepare from './prepare/index.js'; +import mergeAtrule from './1-mergeAtrule.js'; +import initialMergeRuleset from './2-initialMergeRuleset.js'; +import disjoinRuleset from './3-disjoinRuleset.js'; +import restructShorthand from './4-restructShorthand.js'; +import restructBlock from './6-restructBlock.js'; +import mergeRuleset from './7-mergeRuleset.js'; +import restructRuleset from './8-restructRuleset.js'; + +export default function(ast, options) { + // prepare ast for restructing + const indexer = prepare(ast, options); + options.logger('prepare', ast); + + mergeAtrule(ast, options); + options.logger('mergeAtrule', ast); + + initialMergeRuleset(ast); + options.logger('initialMergeRuleset', ast); + + disjoinRuleset(ast); + options.logger('disjoinRuleset', ast); + + restructShorthand(ast, indexer); + options.logger('restructShorthand', ast); + + restructBlock(ast); + options.logger('restructBlock', ast); + + mergeRuleset(ast); + options.logger('mergeRuleset', ast); + + restructRuleset(ast); + options.logger('restructRuleset', ast); +}; diff --git a/node_modules/csso/lib/restructure/prepare/createDeclarationIndexer.js b/node_modules/csso/lib/restructure/prepare/createDeclarationIndexer.js new file mode 100644 index 00000000..227f8abf --- /dev/null +++ b/node_modules/csso/lib/restructure/prepare/createDeclarationIndexer.js @@ -0,0 +1,31 @@ +import { generate } from 'css-tree'; + +class Index { + constructor() { + this.map = new Map(); + } + resolve(str) { + let index = this.map.get(str); + + if (index === undefined) { + index = this.map.size + 1; + this.map.set(str, index); + } + + return index; + } +}; + +export default function createDeclarationIndexer() { + const ids = new Index(); + + return function markDeclaration(node) { + const id = generate(node); + + node.id = ids.resolve(id); + node.length = id.length; + node.fingerprint = null; + + return node; + }; +}; diff --git a/node_modules/csso/lib/restructure/prepare/index.js b/node_modules/csso/lib/restructure/prepare/index.js new file mode 100644 index 00000000..fc08082e --- /dev/null +++ b/node_modules/csso/lib/restructure/prepare/index.js @@ -0,0 +1,41 @@ +import { walk, generate, keyword as resolveKeyword } from 'css-tree'; +import createDeclarationIndexer from './createDeclarationIndexer.js'; +import processSelector from './processSelector.js'; + +export default function prepare(ast, options) { + const markDeclaration = createDeclarationIndexer(); + + walk(ast, { + visit: 'Rule', + enter(node) { + node.block.children.forEach(markDeclaration); + processSelector(node, options.usage); + } + }); + + walk(ast, { + visit: 'Atrule', + enter(node) { + if (node.prelude) { + node.prelude.id = null; // pre-init property to avoid multiple hidden class for generate + node.prelude.id = generate(node.prelude); + } + + // compare keyframe selectors by its values + // NOTE: still no clarification about problems with keyframes selector grouping (issue #197) + if (resolveKeyword(node.name).basename === 'keyframes') { + node.block.avoidRulesMerge = true; /* probably we don't need to prevent those merges for @keyframes + TODO: need to be checked */ + node.block.children.forEach(function(rule) { + rule.prelude.children.forEach(function(simpleselector) { + simpleselector.compareMarker = simpleselector.id; + }); + }); + } + } + }); + + return { + declaration: markDeclaration + }; +}; diff --git a/node_modules/csso/lib/restructure/prepare/processSelector.js b/node_modules/csso/lib/restructure/prepare/processSelector.js new file mode 100644 index 00000000..55a4fed8 --- /dev/null +++ b/node_modules/csso/lib/restructure/prepare/processSelector.js @@ -0,0 +1,97 @@ +import { generate } from 'css-tree'; +import specificity from './specificity.js'; + +const nonFreezePseudoElements = new Set([ + 'first-letter', + 'first-line', + 'after', + 'before' +]); +const nonFreezePseudoClasses = new Set([ + 'link', + 'visited', + 'hover', + 'active', + 'first-letter', + 'first-line', + 'after', + 'before' +]); + +export default function processSelector(node, usageData) { + const pseudos = new Set(); + + node.prelude.children.forEach(function(simpleSelector) { + let tagName = '*'; + let scope = 0; + + simpleSelector.children.forEach(function(node) { + switch (node.type) { + case 'ClassSelector': + if (usageData && usageData.scopes) { + const classScope = usageData.scopes[node.name] || 0; + + if (scope !== 0 && classScope !== scope) { + throw new Error('Selector can\'t has classes from different scopes: ' + generate(simpleSelector)); + } + + scope = classScope; + } + + break; + + case 'PseudoClassSelector': { + const name = node.name.toLowerCase(); + + if (!nonFreezePseudoClasses.has(name)) { + pseudos.add(`:${name}`); + } + + break; + } + + case 'PseudoElementSelector': { + const name = node.name.toLowerCase(); + + if (!nonFreezePseudoElements.has(name)) { + pseudos.add(`::${name}`); + } + + break; + } + + case 'TypeSelector': + tagName = node.name.toLowerCase(); + break; + + case 'AttributeSelector': + if (node.flags) { + pseudos.add(`[${node.flags.toLowerCase()}]`); + } + + break; + + case 'Combinator': + tagName = '*'; + break; + } + }); + + simpleSelector.compareMarker = specificity(simpleSelector).toString(); + simpleSelector.id = null; // pre-init property to avoid multiple hidden class + simpleSelector.id = generate(simpleSelector); + + if (scope) { + simpleSelector.compareMarker += ':' + scope; + } + + if (tagName !== '*') { + simpleSelector.compareMarker += ',' + tagName; + } + }); + + // add property to all rule nodes to avoid multiple hidden class + node.pseudoSignature = pseudos.size > 0 + ? [...pseudos].sort().join(',') + : false; +}; diff --git a/node_modules/csso/lib/restructure/prepare/specificity.js b/node_modules/csso/lib/restructure/prepare/specificity.js new file mode 100644 index 00000000..6fa4e5ab --- /dev/null +++ b/node_modules/csso/lib/restructure/prepare/specificity.js @@ -0,0 +1,131 @@ +import { parse } from 'css-tree'; + +function ensureSelectorList(node) { + if (node.type === 'Raw') { + return parse(node.value, { context: 'selectorList' }); + } + + return node; +} + +function maxSpecificity(a, b) { + for (let i = 0; i < 3; i++) { + if (a[i] !== b[i]) { + return a[i] > b[i] ? a : b; + } + } + + return a; +} + +function maxSelectorListSpecificity(selectorList) { + return ensureSelectorList(selectorList).children.reduce( + (result, node) => maxSpecificity(specificity(node), result), + [0, 0, 0] + ); +} + +// §16. Calculating a selector’s specificity +// https://www.w3.org/TR/selectors-4/#specificity-rules +function specificity(simpleSelector) { + let A = 0; + let B = 0; + let C = 0; + + // A selector’s specificity is calculated for a given element as follows: + simpleSelector.children.forEach((node) => { + switch (node.type) { + // count the number of ID selectors in the selector (= A) + case 'IdSelector': + A++; + break; + + // count the number of class selectors, attributes selectors, ... + case 'ClassSelector': + case 'AttributeSelector': + B++; + break; + + // ... and pseudo-classes in the selector (= B) + case 'PseudoClassSelector': + switch (node.name.toLowerCase()) { + // The specificity of an :is(), :not(), or :has() pseudo-class is replaced + // by the specificity of the most specific complex selector in its selector list argument. + case 'not': + case 'has': + case 'is': + // :matches() is used before it was renamed to :is() + // https://github.com/w3c/csswg-drafts/issues/3258 + case 'matches': + // Older browsers support :is() functionality as prefixed pseudo-class :any() + // https://developer.mozilla.org/en-US/docs/Web/CSS/:is + case '-webkit-any': + case '-moz-any': { + const [a, b, c] = maxSelectorListSpecificity(node.children.first); + + A += a; + B += b; + C += c; + + break; + } + + // Analogously, the specificity of an :nth-child() or :nth-last-child() selector + // is the specificity of the pseudo class itself (counting as one pseudo-class selector) + // plus the specificity of the most specific complex selector in its selector list argument (if any). + case 'nth-child': + case 'nth-last-child': { + const arg = node.children.first; + + if (arg.type === 'Nth' && arg.selector) { + const [a, b, c] = maxSelectorListSpecificity(arg.selector); + + A += a; + B += b + 1; + C += c; + } else { + B++; + } + + break; + } + + // The specificity of a :where() pseudo-class is replaced by zero. + case 'where': + break; + + // The four Level 2 pseudo-elements (::before, ::after, ::first-line, and ::first-letter) may, + // for legacy reasons, be represented using the grammar, + // with only a single ":" character at their start. + // https://www.w3.org/TR/selectors-4/#single-colon-pseudos + case 'before': + case 'after': + case 'first-line': + case 'first-letter': + C++; + break; + + default: + B++; + } + break; + + // count the number of type selectors ... + case 'TypeSelector': + // ignore the universal selector + if (!node.name.endsWith('*')) { + C++; + } + break; + + // ... and pseudo-elements in the selector (= C) + case 'PseudoElementSelector': + C++; + break; + } + }); + + return [A, B, C]; +}; + +export default specificity; diff --git a/node_modules/csso/lib/restructure/utils.js b/node_modules/csso/lib/restructure/utils.js new file mode 100644 index 00000000..792cc59b --- /dev/null +++ b/node_modules/csso/lib/restructure/utils.js @@ -0,0 +1,142 @@ +const { hasOwnProperty } = Object.prototype; + +export function isEqualSelectors(a, b) { + let cursor1 = a.head; + let cursor2 = b.head; + + while (cursor1 !== null && cursor2 !== null && cursor1.data.id === cursor2.data.id) { + cursor1 = cursor1.next; + cursor2 = cursor2.next; + } + + return cursor1 === null && cursor2 === null; +} + +export function isEqualDeclarations(a, b) { + let cursor1 = a.head; + let cursor2 = b.head; + + while (cursor1 !== null && cursor2 !== null && cursor1.data.id === cursor2.data.id) { + cursor1 = cursor1.next; + cursor2 = cursor2.next; + } + + return cursor1 === null && cursor2 === null; +} + +export function compareDeclarations(declarations1, declarations2) { + const result = { + eq: [], + ne1: [], + ne2: [], + ne2overrided: [] + }; + + const fingerprints = Object.create(null); + const declarations2hash = Object.create(null); + + for (let cursor = declarations2.head; cursor; cursor = cursor.next) { + declarations2hash[cursor.data.id] = true; + } + + for (let cursor = declarations1.head; cursor; cursor = cursor.next) { + const data = cursor.data; + + if (data.fingerprint) { + fingerprints[data.fingerprint] = data.important; + } + + if (declarations2hash[data.id]) { + declarations2hash[data.id] = false; + result.eq.push(data); + } else { + result.ne1.push(data); + } + } + + for (let cursor = declarations2.head; cursor; cursor = cursor.next) { + const data = cursor.data; + + if (declarations2hash[data.id]) { + // when declarations1 has an overriding declaration, this is not a difference + // unless no !important is used on prev and !important is used on the following + if (!hasOwnProperty.call(fingerprints, data.fingerprint) || + (!fingerprints[data.fingerprint] && data.important)) { + result.ne2.push(data); + } + + result.ne2overrided.push(data); + } + } + + return result; +} + +export function addSelectors(dest, source) { + source.forEach((sourceData) => { + const newStr = sourceData.id; + let cursor = dest.head; + + while (cursor) { + const nextStr = cursor.data.id; + + if (nextStr === newStr) { + return; + } + + if (nextStr > newStr) { + break; + } + + cursor = cursor.next; + } + + dest.insert(dest.createItem(sourceData), cursor); + }); + + return dest; +} + +// check if simpleselectors has no equal specificity and element selector +export function hasSimilarSelectors(selectors1, selectors2) { + let cursor1 = selectors1.head; + + while (cursor1 !== null) { + let cursor2 = selectors2.head; + + while (cursor2 !== null) { + if (cursor1.data.compareMarker === cursor2.data.compareMarker) { + return true; + } + + cursor2 = cursor2.next; + } + + cursor1 = cursor1.next; + } + + return false; +} + +// test node can't to be skipped +export function unsafeToSkipNode(node) { + switch (node.type) { + case 'Rule': + // unsafe skip ruleset with selector similarities + return hasSimilarSelectors(node.prelude.children, this); + + case 'Atrule': + // can skip at-rules with blocks + if (node.block) { + // unsafe skip at-rule if block contains something unsafe to skip + return node.block.children.some(unsafeToSkipNode, this); + } + break; + + case 'Declaration': + return false; + } + + // unsafe by default + return true; +} -- cgit v1.2.3