diff options
Diffstat (limited to 'node_modules/csso/lib')
42 files changed, 3266 insertions, 0 deletions
diff --git a/node_modules/csso/lib/clean/Atrule.js b/node_modules/csso/lib/clean/Atrule.js new file mode 100644 index 00000000..236d122d --- /dev/null +++ b/node_modules/csso/lib/clean/Atrule.js @@ -0,0 +1,69 @@ +import { keyword as resolveKeyword } from 'css-tree'; +import { hasNoChildren } from './utils.js'; + +export default function cleanAtrule(node, item, list) { + if (node.block) { + // otherwise removed at-rule don't prevent @import for removal + if (this.stylesheet !== null) { + this.stylesheet.firstAtrulesAllowed = false; + } + + if (hasNoChildren(node.block)) { + list.remove(item); + return; + } + } + + switch (node.name) { + case 'charset': + if (hasNoChildren(node.prelude)) { + list.remove(item); + return; + } + + // if there is any rule before @charset -> remove it + if (item.prev) { + list.remove(item); + return; + } + + break; + + case 'import': + if (this.stylesheet === null || !this.stylesheet.firstAtrulesAllowed) { + list.remove(item); + return; + } + + // if there are some rules that not an @import or @charset before @import + // remove it + list.prevUntil(item.prev, function(rule) { + if (rule.type === 'Atrule') { + if (rule.name === 'import' || rule.name === 'charset') { + return; + } + } + + this.root.firstAtrulesAllowed = false; + list.remove(item); + + return true; + }, this); + + break; + + default: { + const name = resolveKeyword(node.name).basename; + + if (name === 'keyframes' || + name === 'media' || + name === 'supports') { + + // drop at-rule with no prelude + if (hasNoChildren(node.prelude) || hasNoChildren(node.block)) { + list.remove(item); + } + } + } + } +}; diff --git a/node_modules/csso/lib/clean/Comment.js b/node_modules/csso/lib/clean/Comment.js new file mode 100644 index 00000000..7744c6ba --- /dev/null +++ b/node_modules/csso/lib/clean/Comment.js @@ -0,0 +1,3 @@ +export default function cleanComment(data, item, list) { + list.remove(item); +}; diff --git a/node_modules/csso/lib/clean/Declaration.js b/node_modules/csso/lib/clean/Declaration.js new file mode 100644 index 00000000..36af5a85 --- /dev/null +++ b/node_modules/csso/lib/clean/Declaration.js @@ -0,0 +1,14 @@ +import { property } from 'css-tree'; + +export default function cleanDeclartion(node, item, list) { + if (node.value.children && node.value.children.isEmpty) { + list.remove(item); + return; + } + + if (property(node.property).custom) { + if (/\S/.test(node.value.value)) { + node.value.value = node.value.value.trim(); + } + } +}; diff --git a/node_modules/csso/lib/clean/Raw.js b/node_modules/csso/lib/clean/Raw.js new file mode 100644 index 00000000..b9ec0ae9 --- /dev/null +++ b/node_modules/csso/lib/clean/Raw.js @@ -0,0 +1,9 @@ +import { isNodeChildrenList } from './utils.js'; + +export default function cleanRaw(node, item, list) { + // raw in stylesheet or block children + if (isNodeChildrenList(this.stylesheet, list) || + isNodeChildrenList(this.block, list)) { + list.remove(item); + } +}; diff --git a/node_modules/csso/lib/clean/Rule.js b/node_modules/csso/lib/clean/Rule.js new file mode 100644 index 00000000..c4b02d2f --- /dev/null +++ b/node_modules/csso/lib/clean/Rule.js @@ -0,0 +1,100 @@ +import { walk, keyword } from 'css-tree'; +import { hasNoChildren } from './utils.js'; + +const { hasOwnProperty } = Object.prototype; +const skipUsageFilteringAtrule = new Set(['keyframes']); + +function cleanUnused(selectorList, usageData) { + selectorList.children.forEach((selector, item, list) => { + let shouldRemove = false; + + walk(selector, function(node) { + // ignore nodes in nested selectors + if (this.selector === null || this.selector === selectorList) { + switch (node.type) { + case 'SelectorList': + // TODO: remove toLowerCase when pseudo selectors will be normalized + // ignore selectors inside :not() + if (this.function === null || this.function.name.toLowerCase() !== 'not') { + if (cleanUnused(node, usageData)) { + shouldRemove = true; + } + } + break; + + case 'ClassSelector': + if (usageData.whitelist !== null && + usageData.whitelist.classes !== null && + !hasOwnProperty.call(usageData.whitelist.classes, node.name)) { + shouldRemove = true; + } + if (usageData.blacklist !== null && + usageData.blacklist.classes !== null && + hasOwnProperty.call(usageData.blacklist.classes, node.name)) { + shouldRemove = true; + } + break; + + case 'IdSelector': + if (usageData.whitelist !== null && + usageData.whitelist.ids !== null && + !hasOwnProperty.call(usageData.whitelist.ids, node.name)) { + shouldRemove = true; + } + if (usageData.blacklist !== null && + usageData.blacklist.ids !== null && + hasOwnProperty.call(usageData.blacklist.ids, node.name)) { + shouldRemove = true; + } + break; + + case 'TypeSelector': + // TODO: remove toLowerCase when type selectors will be normalized + // ignore universal selectors + if (node.name.charAt(node.name.length - 1) !== '*') { + if (usageData.whitelist !== null && + usageData.whitelist.tags !== null && + !hasOwnProperty.call(usageData.whitelist.tags, node.name.toLowerCase())) { + shouldRemove = true; + } + if (usageData.blacklist !== null && + usageData.blacklist.tags !== null && + hasOwnProperty.call(usageData.blacklist.tags, node.name.toLowerCase())) { + shouldRemove = true; + } + } + break; + } + } + }); + + if (shouldRemove) { + list.remove(item); + } + }); + + return selectorList.children.isEmpty; +} + +export default function cleanRule(node, item, list, options) { + if (hasNoChildren(node.prelude) || hasNoChildren(node.block)) { + list.remove(item); + return; + } + + // avoid usage filtering for some at-rules + if (this.atrule && skipUsageFilteringAtrule.has(keyword(this.atrule.name).basename)) { + return; + } + + const { usage } = options; + + if (usage && (usage.whitelist !== null || usage.blacklist !== null)) { + cleanUnused(node.prelude, usage); + + if (hasNoChildren(node.prelude)) { + list.remove(item); + return; + } + } +}; diff --git a/node_modules/csso/lib/clean/TypeSelector.js b/node_modules/csso/lib/clean/TypeSelector.js new file mode 100644 index 00000000..416b495d --- /dev/null +++ b/node_modules/csso/lib/clean/TypeSelector.js @@ -0,0 +1,19 @@ +// remove useless universal selector +export default function cleanTypeSelector(node, item, list) { + const name = item.data.name; + + // check it's a non-namespaced universal selector + if (name !== '*') { + return; + } + + // remove when universal selector before other selectors + const nextType = item.next && item.next.data.type; + if (nextType === 'IdSelector' || + nextType === 'ClassSelector' || + nextType === 'AttributeSelector' || + nextType === 'PseudoClassSelector' || + nextType === 'PseudoElementSelector') { + list.remove(item); + } +}; diff --git a/node_modules/csso/lib/clean/WhiteSpace.js b/node_modules/csso/lib/clean/WhiteSpace.js new file mode 100644 index 00000000..870befb1 --- /dev/null +++ b/node_modules/csso/lib/clean/WhiteSpace.js @@ -0,0 +1,3 @@ +export default function cleanWhitespace(node, item, list) { + list.remove(item); +}; diff --git a/node_modules/csso/lib/clean/index.js b/node_modules/csso/lib/clean/index.js new file mode 100644 index 00000000..4faa73a6 --- /dev/null +++ b/node_modules/csso/lib/clean/index.js @@ -0,0 +1,28 @@ +import { walk } from 'css-tree'; +import Atrule from './Atrule.js'; +import Comment from './Comment.js'; +import Declaration from './Declaration.js'; +import Raw from './Raw.js'; +import Rule from './Rule.js'; +import TypeSelector from './TypeSelector.js'; +import WhiteSpace from './WhiteSpace.js'; + +const handlers = { + Atrule, + Comment, + Declaration, + Raw, + Rule, + TypeSelector, + WhiteSpace +}; + +export default function(ast, options) { + walk(ast, { + leave(node, item, list) { + if (handlers.hasOwnProperty(node.type)) { + handlers[node.type].call(this, node, item, list, options); + } + } + }); +}; diff --git a/node_modules/csso/lib/clean/utils.js b/node_modules/csso/lib/clean/utils.js new file mode 100644 index 00000000..ca1d57c8 --- /dev/null +++ b/node_modules/csso/lib/clean/utils.js @@ -0,0 +1,7 @@ +export function hasNoChildren(node) { + return !node || !node.children || node.children.isEmpty; +} + +export function isNodeChildrenList(node, list) { + return node !== null && node.children === list; +} diff --git a/node_modules/csso/lib/compress.js b/node_modules/csso/lib/compress.js new file mode 100644 index 00000000..4c4fb4fc --- /dev/null +++ b/node_modules/csso/lib/compress.js @@ -0,0 +1,196 @@ +import { List, clone, walk } from 'css-tree'; +import { buildIndex } from './usage.js'; +import clean from './clean/index.js'; +import replace from './replace/index.js'; +import restructure from './restructure/index.js'; + +function readChunk(input, specialComments) { + const children = new List(); + let nonSpaceTokenInBuffer = false; + let protectedComment; + + input.nextUntil(input.head, (node, item, list) => { + if (node.type === 'Comment') { + if (!specialComments || node.value.charAt(0) !== '!') { + list.remove(item); + return; + } + + if (nonSpaceTokenInBuffer || protectedComment) { + return true; + } + + list.remove(item); + protectedComment = node; + + return; + } + + if (node.type !== 'WhiteSpace') { + nonSpaceTokenInBuffer = true; + } + + children.insert(list.remove(item)); + }); + + return { + comment: protectedComment, + stylesheet: { + type: 'StyleSheet', + loc: null, + children + } + }; +} + +function compressChunk(ast, firstAtrulesAllowed, num, options) { + options.logger(`Compress block #${num}`, null, true); + + let seed = 1; + + if (ast.type === 'StyleSheet') { + ast.firstAtrulesAllowed = firstAtrulesAllowed; + ast.id = seed++; + } + + walk(ast, { + visit: 'Atrule', + enter(node) { + if (node.block !== null) { + node.block.id = seed++; + } + } + }); + options.logger('init', ast); + + // remove redundant + clean(ast, options); + options.logger('clean', ast); + + // replace nodes for shortened forms + replace(ast, options); + options.logger('replace', ast); + + // structure optimisations + if (options.restructuring) { + restructure(ast, options); + } + + return ast; +} + +function getCommentsOption(options) { + let comments = 'comments' in options ? options.comments : 'exclamation'; + + if (typeof comments === 'boolean') { + comments = comments ? 'exclamation' : false; + } else if (comments !== 'exclamation' && comments !== 'first-exclamation') { + comments = false; + } + + return comments; +} + +function getRestructureOption(options) { + if ('restructure' in options) { + return options.restructure; + } + + return 'restructuring' in options ? options.restructuring : true; +} + +function wrapBlock(block) { + return new List().appendData({ + type: 'Rule', + loc: null, + prelude: { + type: 'SelectorList', + loc: null, + children: new List().appendData({ + type: 'Selector', + loc: null, + children: new List().appendData({ + type: 'TypeSelector', + loc: null, + name: 'x' + }) + }) + }, + block + }); +} + +export default function compress(ast, options) { + ast = ast || { type: 'StyleSheet', loc: null, children: new List() }; + options = options || {}; + + const compressOptions = { + logger: typeof options.logger === 'function' ? options.logger : function() {}, + restructuring: getRestructureOption(options), + forceMediaMerge: Boolean(options.forceMediaMerge), + usage: options.usage ? buildIndex(options.usage) : false + }; + const output = new List(); + let specialComments = getCommentsOption(options); + let firstAtrulesAllowed = true; + let input; + let chunk; + let chunkNum = 1; + let chunkChildren; + + if (options.clone) { + ast = clone(ast); + } + + if (ast.type === 'StyleSheet') { + input = ast.children; + ast.children = output; + } else { + input = wrapBlock(ast); + } + + do { + chunk = readChunk(input, Boolean(specialComments)); + compressChunk(chunk.stylesheet, firstAtrulesAllowed, chunkNum++, compressOptions); + chunkChildren = chunk.stylesheet.children; + + if (chunk.comment) { + // add \n before comment if there is another content in output + if (!output.isEmpty) { + output.insert(List.createItem({ + type: 'Raw', + value: '\n' + })); + } + + output.insert(List.createItem(chunk.comment)); + + // add \n after comment if chunk is not empty + if (!chunkChildren.isEmpty) { + output.insert(List.createItem({ + type: 'Raw', + value: '\n' + })); + } + } + + if (firstAtrulesAllowed && !chunkChildren.isEmpty) { + const lastRule = chunkChildren.last; + + if (lastRule.type !== 'Atrule' || + (lastRule.name !== 'import' && lastRule.name !== 'charset')) { + firstAtrulesAllowed = false; + } + } + + if (specialComments !== 'exclamation') { + specialComments = false; + } + + output.appendList(chunkChildren); + } while (!input.isEmpty); + + return { + ast + }; +}; diff --git a/node_modules/csso/lib/index.js b/node_modules/csso/lib/index.js new file mode 100644 index 00000000..66ccf2b8 --- /dev/null +++ b/node_modules/csso/lib/index.js @@ -0,0 +1,131 @@ +import { version } from './version.js'; +import * as syntax from './syntax.js'; +import * as utils from './utils.js'; + +const { parse, generate, compress } = syntax; + +function debugOutput(name, options, startTime, data) { + if (options.debug) { + console.error(`## ${name} done in %d ms\n`, Date.now() - startTime); + } + + return data; +} + +function createDefaultLogger(level) { + let lastDebug; + + return function logger(title, ast) { + let line = title; + + if (ast) { + line = `[${((Date.now() - lastDebug) / 1000).toFixed(3)}s] ${line}`; + } + + if (level > 1 && ast) { + let css = generate(ast); + + // when level 2, limit css to 256 symbols + if (level === 2 && css.length > 256) { + css = css.substr(0, 256) + '...'; + } + + line += `\n ${css}\n`; + } + + console.error(line); + lastDebug = Date.now(); + }; +} + +function buildCompressOptions(options) { + options = { ...options }; + + if (typeof options.logger !== 'function' && options.debug) { + options.logger = createDefaultLogger(options.debug); + } + + return options; +} + +function runHandler(ast, options, handlers) { + if (!Array.isArray(handlers)) { + handlers = [handlers]; + } + + handlers.forEach(fn => fn(ast, options)); +} + +function minify(context, source, options) { + options = options || {}; + + const filename = options.filename || '<unknown>'; + let result; + + // parse + const ast = debugOutput('parsing', options, Date.now(), + parse(source, { + context, + filename, + positions: Boolean(options.sourceMap) + }) + ); + + // before compress handlers + if (options.beforeCompress) { + debugOutput('beforeCompress', options, Date.now(), + runHandler(ast, options, options.beforeCompress) + ); + } + + // compress + const compressResult = debugOutput('compress', options, Date.now(), + compress(ast, buildCompressOptions(options)) + ); + + // after compress handlers + if (options.afterCompress) { + debugOutput('afterCompress', options, Date.now(), + runHandler(compressResult, options, options.afterCompress) + ); + } + + // generate + if (options.sourceMap) { + result = debugOutput('generate(sourceMap: true)', options, Date.now(), (() => { + const tmp = generate(compressResult.ast, { sourceMap: true }); + + tmp.map._file = filename; // since other tools can relay on file in source map transform chain + tmp.map.setSourceContent(filename, source); + + return tmp; + })()); + } else { + result = debugOutput('generate', options, Date.now(), { + css: generate(compressResult.ast), + map: null + }); + } + + return result; +} + +function minifyStylesheet(source, options) { + return minify('stylesheet', source, options); +} + +function minifyBlock(source, options) { + return minify('declarationList', source, options); +} + +export { + version, + utils, + + // main methods + minifyStylesheet as minify, + minifyBlock, + + // css syntax parser/walkers/generator/etc + syntax +}; diff --git a/node_modules/csso/lib/replace/Atrule.js b/node_modules/csso/lib/replace/Atrule.js new file mode 100644 index 00000000..98f3248d --- /dev/null +++ b/node_modules/csso/lib/replace/Atrule.js @@ -0,0 +1,9 @@ +import { keyword as resolveKeyword } from 'css-tree'; +import compressKeyframes from './atrule/keyframes.js'; + +export default function(node) { + // compress @keyframe selectors + if (resolveKeyword(node.name).basename === 'keyframes') { + compressKeyframes(node); + } +}; diff --git a/node_modules/csso/lib/replace/AttributeSelector.js b/node_modules/csso/lib/replace/AttributeSelector.js new file mode 100644 index 00000000..3821530c --- /dev/null +++ b/node_modules/csso/lib/replace/AttributeSelector.js @@ -0,0 +1,28 @@ +// Can unquote attribute detection +// Adopted implementation of Mathias Bynens +// https://github.com/mathiasbynens/mothereff.in/blob/master/unquoted-attributes/eff.js +const blockUnquoteRx = /^(-?\d|--)|[\u0000-\u002c\u002e\u002f\u003A-\u0040\u005B-\u005E\u0060\u007B-\u009f]/; + +function canUnquote(value) { + if (value === '' || value === '-') { + return false; + } + + return !blockUnquoteRx.test(value); +} + +export default function(node) { + const attrValue = node.value; + + if (!attrValue || attrValue.type !== 'String') { + return; + } + + if (canUnquote(attrValue.value)) { + node.value = { + type: 'Identifier', + loc: attrValue.loc, + name: attrValue.value + }; + } +}; diff --git a/node_modules/csso/lib/replace/Dimension.js b/node_modules/csso/lib/replace/Dimension.js new file mode 100644 index 00000000..edb00388 --- /dev/null +++ b/node_modules/csso/lib/replace/Dimension.js @@ -0,0 +1,63 @@ +import { packNumber } from './Number.js'; + +const MATH_FUNCTIONS = new Set([ + 'calc', + 'min', + 'max', + 'clamp' +]); +const LENGTH_UNIT = new Set([ + // absolute length units + 'px', + 'mm', + 'cm', + 'in', + 'pt', + 'pc', + + // relative length units + 'em', + 'ex', + 'ch', + 'rem', + + // viewport-percentage lengths + 'vh', + 'vw', + 'vmin', + 'vmax', + 'vm' +]); + +export default function compressDimension(node, item) { + const value = packNumber(node.value); + + node.value = value; + + if (value === '0' && this.declaration !== null && this.atrulePrelude === null) { + const unit = node.unit.toLowerCase(); + + // only length values can be compressed + if (!LENGTH_UNIT.has(unit)) { + return; + } + + // issue #362: shouldn't remove unit in -ms-flex since it breaks flex in IE10/11 + // issue #200: shouldn't remove unit in flex since it breaks flex in IE10/11 + if (this.declaration.property === '-ms-flex' || + this.declaration.property === 'flex') { + return; + } + + // issue #222: don't remove units inside calc + if (this.function && MATH_FUNCTIONS.has(this.function.name)) { + return; + } + + item.data = { + type: 'Number', + loc: node.loc, + value + }; + } +}; diff --git a/node_modules/csso/lib/replace/Number.js b/node_modules/csso/lib/replace/Number.js new file mode 100644 index 00000000..3420812d --- /dev/null +++ b/node_modules/csso/lib/replace/Number.js @@ -0,0 +1,40 @@ +const OMIT_PLUSSIGN = /^(?:\+|(-))?0*(\d*)(?:\.0*|(\.\d*?)0*)?$/; +const KEEP_PLUSSIGN = /^([\+\-])?0*(\d*)(?:\.0*|(\.\d*?)0*)?$/; +const unsafeToRemovePlusSignAfter = new Set([ + 'Dimension', + 'Hash', + 'Identifier', + 'Number', + 'Raw', + 'UnicodeRange' +]); + +export function packNumber(value, item) { + // omit plus sign only if no prev or prev is safe type + const regexp = item && item.prev !== null && unsafeToRemovePlusSignAfter.has(item.prev.data.type) + ? KEEP_PLUSSIGN + : OMIT_PLUSSIGN; + + // 100 -> '100' + // 00100 -> '100' + // +100 -> '100' + // -100 -> '-100' + // 0.123 -> '.123' + // 0.12300 -> '.123' + // 0.0 -> '' + // 0 -> '' + // -0 -> '-' + value = String(value).replace(regexp, '$1$2$3'); + + if (value === '' || value === '-') { + value = '0'; + } + // FIXME: is it solution simplier? + // value = String(Number(value)).replace(/^(-?)0+\./, '$1.'); + + return value; +} + +export function Number(node) { + node.value = packNumber(node.value); +}; diff --git a/node_modules/csso/lib/replace/Percentage.js b/node_modules/csso/lib/replace/Percentage.js new file mode 100644 index 00000000..4a2d70e8 --- /dev/null +++ b/node_modules/csso/lib/replace/Percentage.js @@ -0,0 +1,37 @@ +import { lexer } from 'css-tree'; +import { packNumber } from './Number.js'; + +const blacklist = new Set([ + // see https://github.com/jakubpawlowicz/clean-css/issues/957 + 'width', + 'min-width', + 'max-width', + 'height', + 'min-height', + 'max-height', + + // issue #410: Don’t remove units in flex-basis value for (-ms-)flex shorthand + // issue #362: shouldn't remove unit in -ms-flex since it breaks flex in IE10/11 + // issue #200: shouldn't remove unit in flex since it breaks flex in IE10/11 + 'flex', + '-ms-flex' +]); + +export default function compressPercentage(node, item) { + node.value = packNumber(node.value); + + if (node.value === '0' && this.declaration && !blacklist.has(this.declaration.property)) { + // try to convert a number + item.data = { + type: 'Number', + loc: node.loc, + value: node.value + }; + + // that's ok only when new value matches on length + if (!lexer.matchDeclaration(this.declaration).isType(item.data, 'length')) { + // otherwise rollback changes + item.data = node; + } + } +}; diff --git a/node_modules/csso/lib/replace/Url.js b/node_modules/csso/lib/replace/Url.js new file mode 100644 index 00000000..00149218 --- /dev/null +++ b/node_modules/csso/lib/replace/Url.js @@ -0,0 +1,4 @@ +export default function(node) { + // convert `\\` to `/` + node.value = node.value.replace(/\\/g, '/'); +}; diff --git a/node_modules/csso/lib/replace/Value.js b/node_modules/csso/lib/replace/Value.js new file mode 100644 index 00000000..05d1d57b --- /dev/null +++ b/node_modules/csso/lib/replace/Value.js @@ -0,0 +1,26 @@ +import { property as resolveName } from 'css-tree'; +import font from './property/font.js'; +import fontWeight from './property/font-weight.js'; +import background from './property/background.js'; +import border from './property/border.js'; +import outline from './property/border.js'; + +const handlers = { + 'font': font, + 'font-weight': fontWeight, + 'background': background, + 'border': border, + 'outline': outline +}; + +export default function compressValue(node) { + if (!this.declaration) { + return; + } + + const property = resolveName(this.declaration.property); + + if (handlers.hasOwnProperty(property.basename)) { + handlers[property.basename](node); + } +}; diff --git a/node_modules/csso/lib/replace/atrule/keyframes.js b/node_modules/csso/lib/replace/atrule/keyframes.js new file mode 100644 index 00000000..62e6aef7 --- /dev/null +++ b/node_modules/csso/lib/replace/atrule/keyframes.js @@ -0,0 +1,21 @@ +export default function(node) { + node.block.children.forEach((rule) => { + rule.prelude.children.forEach((simpleselector) => { + simpleselector.children.forEach((data, item) => { + if (data.type === 'Percentage' && data.value === '100') { + item.data = { + type: 'TypeSelector', + loc: data.loc, + name: 'to' + }; + } else if (data.type === 'TypeSelector' && data.name === 'from') { + item.data = { + type: 'Percentage', + loc: data.loc, + value: '0' + }; + } + }); + }); + }); +}; diff --git a/node_modules/csso/lib/replace/color.js b/node_modules/csso/lib/replace/color.js new file mode 100644 index 00000000..7f3db13d --- /dev/null +++ b/node_modules/csso/lib/replace/color.js @@ -0,0 +1,498 @@ +import { lexer } from 'css-tree'; +import { packNumber } from './Number.js'; + +// http://www.w3.org/TR/css3-color/#svg-color +const NAME_TO_HEX = { + 'aliceblue': 'f0f8ff', + 'antiquewhite': 'faebd7', + 'aqua': '0ff', + 'aquamarine': '7fffd4', + 'azure': 'f0ffff', + 'beige': 'f5f5dc', + 'bisque': 'ffe4c4', + 'black': '000', + 'blanchedalmond': 'ffebcd', + 'blue': '00f', + 'blueviolet': '8a2be2', + 'brown': 'a52a2a', + 'burlywood': 'deb887', + 'cadetblue': '5f9ea0', + 'chartreuse': '7fff00', + 'chocolate': 'd2691e', + 'coral': 'ff7f50', + 'cornflowerblue': '6495ed', + 'cornsilk': 'fff8dc', + 'crimson': 'dc143c', + 'cyan': '0ff', + 'darkblue': '00008b', + 'darkcyan': '008b8b', + 'darkgoldenrod': 'b8860b', + 'darkgray': 'a9a9a9', + 'darkgrey': 'a9a9a9', + 'darkgreen': '006400', + 'darkkhaki': 'bdb76b', + 'darkmagenta': '8b008b', + 'darkolivegreen': '556b2f', + 'darkorange': 'ff8c00', + 'darkorchid': '9932cc', + 'darkred': '8b0000', + 'darksalmon': 'e9967a', + 'darkseagreen': '8fbc8f', + 'darkslateblue': '483d8b', + 'darkslategray': '2f4f4f', + 'darkslategrey': '2f4f4f', + 'darkturquoise': '00ced1', + 'darkviolet': '9400d3', + 'deeppink': 'ff1493', + 'deepskyblue': '00bfff', + 'dimgray': '696969', + 'dimgrey': '696969', + 'dodgerblue': '1e90ff', + 'firebrick': 'b22222', + 'floralwhite': 'fffaf0', + 'forestgreen': '228b22', + 'fuchsia': 'f0f', + 'gainsboro': 'dcdcdc', + 'ghostwhite': 'f8f8ff', + 'gold': 'ffd700', + 'goldenrod': 'daa520', + 'gray': '808080', + 'grey': '808080', + 'green': '008000', + 'greenyellow': 'adff2f', + 'honeydew': 'f0fff0', + 'hotpink': 'ff69b4', + 'indianred': 'cd5c5c', + 'indigo': '4b0082', + 'ivory': 'fffff0', + 'khaki': 'f0e68c', + 'lavender': 'e6e6fa', + 'lavenderblush': 'fff0f5', + 'lawngreen': '7cfc00', + 'lemonchiffon': 'fffacd', + 'lightblue': 'add8e6', + 'lightcoral': 'f08080', + 'lightcyan': 'e0ffff', + 'lightgoldenrodyellow': 'fafad2', + 'lightgray': 'd3d3d3', + 'lightgrey': 'd3d3d3', + 'lightgreen': '90ee90', + 'lightpink': 'ffb6c1', + 'lightsalmon': 'ffa07a', + 'lightseagreen': '20b2aa', + 'lightskyblue': '87cefa', + 'lightslategray': '789', + 'lightslategrey': '789', + 'lightsteelblue': 'b0c4de', + 'lightyellow': 'ffffe0', + 'lime': '0f0', + 'limegreen': '32cd32', + 'linen': 'faf0e6', + 'magenta': 'f0f', + 'maroon': '800000', + 'mediumaquamarine': '66cdaa', + 'mediumblue': '0000cd', + 'mediumorchid': 'ba55d3', + 'mediumpurple': '9370db', + 'mediumseagreen': '3cb371', + 'mediumslateblue': '7b68ee', + 'mediumspringgreen': '00fa9a', + 'mediumturquoise': '48d1cc', + 'mediumvioletred': 'c71585', + 'midnightblue': '191970', + 'mintcream': 'f5fffa', + 'mistyrose': 'ffe4e1', + 'moccasin': 'ffe4b5', + 'navajowhite': 'ffdead', + 'navy': '000080', + 'oldlace': 'fdf5e6', + 'olive': '808000', + 'olivedrab': '6b8e23', + 'orange': 'ffa500', + 'orangered': 'ff4500', + 'orchid': 'da70d6', + 'palegoldenrod': 'eee8aa', + 'palegreen': '98fb98', + 'paleturquoise': 'afeeee', + 'palevioletred': 'db7093', + 'papayawhip': 'ffefd5', + 'peachpuff': 'ffdab9', + 'peru': 'cd853f', + 'pink': 'ffc0cb', + 'plum': 'dda0dd', + 'powderblue': 'b0e0e6', + 'purple': '800080', + 'rebeccapurple': '639', + 'red': 'f00', + 'rosybrown': 'bc8f8f', + 'royalblue': '4169e1', + 'saddlebrown': '8b4513', + 'salmon': 'fa8072', + 'sandybrown': 'f4a460', + 'seagreen': '2e8b57', + 'seashell': 'fff5ee', + 'sienna': 'a0522d', + 'silver': 'c0c0c0', + 'skyblue': '87ceeb', + 'slateblue': '6a5acd', + 'slategray': '708090', + 'slategrey': '708090', + 'snow': 'fffafa', + 'springgreen': '00ff7f', + 'steelblue': '4682b4', + 'tan': 'd2b48c', + 'teal': '008080', + 'thistle': 'd8bfd8', + 'tomato': 'ff6347', + 'turquoise': '40e0d0', + 'violet': 'ee82ee', + 'wheat': 'f5deb3', + 'white': 'fff', + 'whitesmoke': 'f5f5f5', + 'yellow': 'ff0', + 'yellowgreen': '9acd32' +}; + +const HEX_TO_NAME = { + '800000': 'maroon', + '800080': 'purple', + '808000': 'olive', + '808080': 'gray', + '00ffff': 'cyan', + 'f0ffff': 'azure', + 'f5f5dc': 'beige', + 'ffe4c4': 'bisque', + '000000': 'black', + '0000ff': 'blue', + 'a52a2a': 'brown', + 'ff7f50': 'coral', + 'ffd700': 'gold', + '008000': 'green', + '4b0082': 'indigo', + 'fffff0': 'ivory', + 'f0e68c': 'khaki', + '00ff00': 'lime', + 'faf0e6': 'linen', + '000080': 'navy', + 'ffa500': 'orange', + 'da70d6': 'orchid', + 'cd853f': 'peru', + 'ffc0cb': 'pink', + 'dda0dd': 'plum', + 'f00': 'red', + 'ff0000': 'red', + 'fa8072': 'salmon', + 'a0522d': 'sienna', + 'c0c0c0': 'silver', + 'fffafa': 'snow', + 'd2b48c': 'tan', + '008080': 'teal', + 'ff6347': 'tomato', + 'ee82ee': 'violet', + 'f5deb3': 'wheat', + 'ffffff': 'white', + 'ffff00': 'yellow' +}; + +function hueToRgb(p, q, t) { + if (t < 0) { + t += 1; + } + if (t > 1) { + t -= 1; + } + if (t < 1 / 6) { + return p + (q - p) * 6 * t; + } + if (t < 1 / 2) { + return q; + } + if (t < 2 / 3) { + return p + (q - p) * (2 / 3 - t) * 6; + } + return p; +} + +function hslToRgb(h, s, l, a) { + let r; + let g; + let b; + + if (s === 0) { + r = g = b = l; // achromatic + } else { + const q = l < 0.5 ? l * (1 + s) : l + s - l * s; + const p = 2 * l - q; + + r = hueToRgb(p, q, h + 1 / 3); + g = hueToRgb(p, q, h); + b = hueToRgb(p, q, h - 1 / 3); + } + + return [ + Math.round(r * 255), + Math.round(g * 255), + Math.round(b * 255), + a + ]; +} + +function toHex(value) { + value = value.toString(16); + + return value.length === 1 ? '0' + value : value; +} + +function parseFunctionArgs(functionArgs, count, rgb) { + let cursor = functionArgs.head; + let args = []; + let wasValue = false; + + while (cursor !== null) { + const { type, value } = cursor.data; + + switch (type) { + case 'Number': + case 'Percentage': + if (wasValue) { + return; + } + + wasValue = true; + args.push({ + type, + value: Number(value) + }); + + break; + + case 'Operator': + if (value === ',') { + if (!wasValue) { + return; + } + wasValue = false; + } else if (wasValue || value !== '+') { + return; + } + + break; + + default: + // something we couldn't understand + return; + } + + cursor = cursor.next; + } + + if (args.length !== count) { + // invalid arguments count + // TODO: remove those tokens + return; + } + + if (args.length === 4) { + if (args[3].type !== 'Number') { + // 4th argument should be a number + // TODO: remove those tokens + return; + } + + args[3].type = 'Alpha'; + } + + if (rgb) { + if (args[0].type !== args[1].type || args[0].type !== args[2].type) { + // invalid color, numbers and percentage shouldn't be mixed + // TODO: remove those tokens + return; + } + } else { + if (args[0].type !== 'Number' || + args[1].type !== 'Percentage' || + args[2].type !== 'Percentage') { + // invalid color, for hsl values should be: number, percentage, percentage + // TODO: remove those tokens + return; + } + + args[0].type = 'Angle'; + } + + return args.map(function(arg) { + let value = Math.max(0, arg.value); + + switch (arg.type) { + case 'Number': + // fit value to [0..255] range + value = Math.min(value, 255); + break; + + case 'Percentage': + // convert 0..100% to value in [0..255] range + value = Math.min(value, 100) / 100; + + if (!rgb) { + return value; + } + + value = 255 * value; + break; + + case 'Angle': + // fit value to (-360..360) range + return (((value % 360) + 360) % 360) / 360; + + case 'Alpha': + // fit value to [0..1] range + return Math.min(value, 1); + } + + return Math.round(value); + }); +} + +export function compressFunction(node, item) { + let functionName = node.name; + let args; + + if (functionName === 'rgba' || functionName === 'hsla') { + args = parseFunctionArgs(node.children, 4, functionName === 'rgba'); + + if (!args) { + // something went wrong + return; + } + + if (functionName === 'hsla') { + args = hslToRgb(...args); + node.name = 'rgba'; + } + + if (args[3] === 0) { + // try to replace `rgba(x, x, x, 0)` to `transparent` + // always replace `rgba(0, 0, 0, 0)` to `transparent` + // otherwise avoid replacement in gradients since it may break color transition + // http://stackoverflow.com/questions/11829410/css3-gradient-rendering-issues-from-transparent-to-white + const scopeFunctionName = this.function && this.function.name; + + if ((args[0] === 0 && args[1] === 0 && args[2] === 0) || + !/^(?:to|from|color-stop)$|gradient$/i.test(scopeFunctionName)) { + + item.data = { + type: 'Identifier', + loc: node.loc, + name: 'transparent' + }; + + return; + } + } + + if (args[3] !== 1) { + // replace argument values for normalized/interpolated + node.children.forEach((node, item, list) => { + if (node.type === 'Operator') { + if (node.value !== ',') { + list.remove(item); + } + return; + } + + item.data = { + type: 'Number', + loc: node.loc, + value: packNumber(args.shift()) + }; + }); + + return; + } + + // otherwise convert to rgb, i.e. rgba(255, 0, 0, 1) -> rgb(255, 0, 0) + functionName = 'rgb'; + } + + if (functionName === 'hsl') { + args = args || parseFunctionArgs(node.children, 3, false); + + if (!args) { + // something went wrong + return; + } + + // convert to rgb + args = hslToRgb(...args); + functionName = 'rgb'; + } + + if (functionName === 'rgb') { + args = args || parseFunctionArgs(node.children, 3, true); + + if (!args) { + // something went wrong + return; + } + + item.data = { + type: 'Hash', + loc: node.loc, + value: toHex(args[0]) + toHex(args[1]) + toHex(args[2]) + }; + + compressHex(item.data, item); + } +} + +export function compressIdent(node, item) { + if (this.declaration === null) { + return; + } + + let color = node.name.toLowerCase(); + + if (NAME_TO_HEX.hasOwnProperty(color) && + lexer.matchDeclaration(this.declaration).isType(node, 'color')) { + const hex = NAME_TO_HEX[color]; + + if (hex.length + 1 <= color.length) { + // replace for shorter hex value + item.data = { + type: 'Hash', + loc: node.loc, + value: hex + }; + } else { + // special case for consistent colors + if (color === 'grey') { + color = 'gray'; + } + + // just replace value for lower cased name + node.name = color; + } + } +} + +export function compressHex(node, item) { + let color = node.value.toLowerCase(); + + // #112233 -> #123 + if (color.length === 6 && + color[0] === color[1] && + color[2] === color[3] && + color[4] === color[5]) { + color = color[0] + color[2] + color[4]; + } + + if (HEX_TO_NAME[color]) { + item.data = { + type: 'Identifier', + loc: node.loc, + name: HEX_TO_NAME[color] + }; + } else { + node.value = color; + } +} diff --git a/node_modules/csso/lib/replace/index.js b/node_modules/csso/lib/replace/index.js new file mode 100644 index 00000000..de90ee46 --- /dev/null +++ b/node_modules/csso/lib/replace/index.js @@ -0,0 +1,32 @@ +import { walk } from 'css-tree'; +import Atrule from './Atrule.js'; +import AttributeSelector from './AttributeSelector.js'; +import Value from './Value.js'; +import Dimension from './Dimension.js'; +import Percentage from './Percentage.js'; +import { Number } from './Number.js'; +import Url from './Url.js'; +import { compressHex, compressIdent, compressFunction } from './color.js'; + +const handlers = { + Atrule, + AttributeSelector, + Value, + Dimension, + Percentage, + Number, + Url, + Hash: compressHex, + Identifier: compressIdent, + Function: compressFunction +}; + +export default function(ast) { + walk(ast, { + leave(node, item, list) { + if (handlers.hasOwnProperty(node.type)) { + handlers[node.type].call(this, node, item, list); + } + } + }); +}; diff --git a/node_modules/csso/lib/replace/property/background.js b/node_modules/csso/lib/replace/property/background.js new file mode 100644 index 00000000..847a8cff --- /dev/null +++ b/node_modules/csso/lib/replace/property/background.js @@ -0,0 +1,50 @@ +import { List } from 'css-tree'; + +export default function compressBackground(node) { + function flush() { + if (!buffer.length) { + buffer.unshift( + { + type: 'Number', + loc: null, + value: '0' + }, + { + type: 'Number', + loc: null, + value: '0' + } + ); + } + + newValue.push.apply(newValue, buffer); + + buffer = []; + } + + let newValue = []; + let buffer = []; + + node.children.forEach((node) => { + if (node.type === 'Operator' && node.value === ',') { + flush(); + newValue.push(node); + return; + } + + // remove defaults + if (node.type === 'Identifier') { + if (node.name === 'transparent' || + node.name === 'none' || + node.name === 'repeat' || + node.name === 'scroll') { + return; + } + } + + buffer.push(node); + }); + + flush(); + node.children = new List().fromArray(newValue); +}; diff --git a/node_modules/csso/lib/replace/property/border.js b/node_modules/csso/lib/replace/property/border.js new file mode 100644 index 00000000..c470b66f --- /dev/null +++ b/node_modules/csso/lib/replace/property/border.js @@ -0,0 +1,16 @@ +export default function compressBorder(node) { + node.children.forEach((node, item, list) => { + if (node.type === 'Identifier' && node.name.toLowerCase() === 'none') { + if (list.head === list.tail) { + // replace `none` for zero when `none` is a single term + item.data = { + type: 'Number', + loc: node.loc, + value: '0' + }; + } else { + list.remove(item); + } + } + }); +}; diff --git a/node_modules/csso/lib/replace/property/font-weight.js b/node_modules/csso/lib/replace/property/font-weight.js new file mode 100644 index 00000000..3b901d33 --- /dev/null +++ b/node_modules/csso/lib/replace/property/font-weight.js @@ -0,0 +1,22 @@ +export default function compressFontWeight(node) { + const value = node.children.head.data; + + if (value.type === 'Identifier') { + switch (value.name) { + case 'normal': + node.children.head.data = { + type: 'Number', + loc: value.loc, + value: '400' + }; + break; + case 'bold': + node.children.head.data = { + type: 'Number', + loc: value.loc, + value: '700' + }; + break; + } + } +}; diff --git a/node_modules/csso/lib/replace/property/font.js b/node_modules/csso/lib/replace/property/font.js new file mode 100644 index 00000000..38e903a2 --- /dev/null +++ b/node_modules/csso/lib/replace/property/font.js @@ -0,0 +1,30 @@ +export default function compressFont(node) { + const list = node.children; + + list.forEachRight(function(node, item) { + if (node.type === 'Identifier') { + if (node.name === 'bold') { + item.data = { + type: 'Number', + loc: node.loc, + value: '700' + }; + } else if (node.name === 'normal') { + const prev = item.prev; + + if (prev && prev.data.type === 'Operator' && prev.data.value === '/') { + this.remove(prev); + } + + this.remove(item); + } + } + }); + + if (list.isEmpty) { + list.insert(list.createItem({ + type: 'Identifier', + name: 'normal' + })); + } +}; 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(<top>, <right>, <bottom>, <left>) - standart + // rect(<top> <right> <bottom> <left>) – 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 <pseudo-class-selector> 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; +} diff --git a/node_modules/csso/lib/syntax.js b/node_modules/csso/lib/syntax.js new file mode 100644 index 00000000..724bd0fb --- /dev/null +++ b/node_modules/csso/lib/syntax.js @@ -0,0 +1,60 @@ +import { fork, string, url, tokenTypes as TYPE } from 'css-tree'; +import compress from './compress.js'; +import specificity from './restructure/prepare/specificity.js'; + +function encodeString(value) { + const stringApostrophe = string.encode(value, true); + const stringQuote = string.encode(value); + + return stringApostrophe.length < stringQuote.length + ? stringApostrophe + : stringQuote; +} + +const { + lexer, + tokenize, + parse, + generate, + walk, + find, + findLast, + findAll, + fromPlainObject, + toPlainObject +} = fork({ + node: { + String: { + generate(node) { + this.token(TYPE.String, encodeString(node.value)); + } + }, + Url: { + generate(node) { + const encodedUrl = url.encode(node.value); + const string = encodeString(node.value); + + this.token(TYPE.Url, + encodedUrl.length <= string.length + 5 /* "url()".length */ + ? encodedUrl + : 'url(' + string + ')' + ); + } + } + } +}); + +export { + lexer, + tokenize, + parse, + generate, + walk, + find, + findLast, + findAll, + fromPlainObject, + toPlainObject, + specificity, + compress +}; diff --git a/node_modules/csso/lib/usage.js b/node_modules/csso/lib/usage.js new file mode 100644 index 00000000..1618e931 --- /dev/null +++ b/node_modules/csso/lib/usage.js @@ -0,0 +1,71 @@ +const { hasOwnProperty } = Object.prototype; + +function buildMap(list, caseInsensitive) { + const map = Object.create(null); + + if (!Array.isArray(list)) { + return null; + } + + for (let name of list) { + if (caseInsensitive) { + name = name.toLowerCase(); + } + + map[name] = true; + } + + return map; +} + +function buildList(data) { + if (!data) { + return null; + } + + const tags = buildMap(data.tags, true); + const ids = buildMap(data.ids); + const classes = buildMap(data.classes); + + if (tags === null && + ids === null && + classes === null) { + return null; + } + + return { + tags, + ids, + classes + }; +} + +export function buildIndex(data) { + let scopes = false; + + if (data.scopes && Array.isArray(data.scopes)) { + scopes = Object.create(null); + + for (let i = 0; i < data.scopes.length; i++) { + const list = data.scopes[i]; + + if (!list || !Array.isArray(list)) { + throw new Error('Wrong usage format'); + } + + for (const name of list) { + if (hasOwnProperty.call(scopes, name)) { + throw new Error(`Class can't be used for several scopes: ${name}`); + } + + scopes[name] = i + 1; + } + } + } + + return { + whitelist: buildList(data), + blacklist: buildList(data.blacklist), + scopes + }; +} diff --git a/node_modules/csso/lib/utils.js b/node_modules/csso/lib/utils.js new file mode 100644 index 00000000..d41b7756 --- /dev/null +++ b/node_modules/csso/lib/utils.js @@ -0,0 +1,2 @@ +export { default as processSelector } from './restructure/prepare/processSelector.js'; +export * from './restructure/utils.js'; diff --git a/node_modules/csso/lib/version.js b/node_modules/csso/lib/version.js new file mode 100644 index 00000000..dde3a83f --- /dev/null +++ b/node_modules/csso/lib/version.js @@ -0,0 +1,5 @@ +import { createRequire } from 'module'; + +const require = createRequire(import.meta.url); + +export const { version } = require('../package.json'); |