How to use the specificity.calculate function in specificity

To help you get started, we’ve selected a few specificity examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github macbre / analyze-css / rules / specificity.js View on Github external
analyzer.on('selector', function(rule, selector, expressions) {
		var selectorSpecificity = specificity.calculate(selector),
			parts;

		if (!selectorSpecificity) {
			debug('not counted for %s!', selector);
			return;
		}

		// parse the results
		parts = selectorSpecificity[0].specificity.
		split(',').
		slice(1).
		map(function(i) {
			return parseInt(i, 10);
		});

		debug('%s: %s', selector, parts.join(''));
github Munter / subfont / lib / getCssRulesByProperty.js View on Github external
(function visit(node) {
    // Check for selector. We might be in an at-rule like @font-face
    if (node.type === 'decl' && node.parent.selector) {
      const isCustomProperty = /^--/.test(node.prop);
      const propName = isCustomProperty ? node.prop : node.prop.toLowerCase(); // Custom properties ARE case sensitive
      if (isCustomProperty || properties.includes(propName)) {
        // Split up combined selectors as they might have different specificity
        specificity
          .calculate(node.parent.selector)
          .forEach(specificityObject => {
            const isStyleAttribute =
              specificityObject.selector === 'bogusselector';
            (rulesByProperty[propName] = rulesByProperty[propName] || []).push({
              predicates: getCurrentPredicates(),
              selector: isStyleAttribute
                ? undefined
                : specificityObject.selector.trim(),
              specificityArray: isStyleAttribute
                ? [1, 0, 0, 0]
                : specificityObject.specificityArray,
              prop: propName,
              value: node.value,
              important: !!node.important
            });
github pocketjoso / specificity-graph / lib / generateCssData.js View on Github external
var specSum = function(selector){
  var specs = specificity.calculate(selector)[0].specificity.split(',');
  var sum = (parseInt(specs[0])*1000) + (parseInt(specs[1])*100) + (parseInt(specs[2])*10) + (parseInt(specs[3]));
  return sum;
};
github Justineo / postcss-sort-style-rules / index.js View on Github external
function getRange(node) {
    if (isScope(node)) {
        return node.nodes
            .map(getRange)
            .reduce(reduceRanges);
    } else if (node.type === 'rule') {
        return specificity.calculate(node.selector)
            .map(result => {
                return result.specificity.split(',').map(v => Number(v));
            })
            .reduce(reduceRange, Object.assign({}, DEFAULT_RANGE));
    }
    return null;
}
github linkedin / opticss / packages / opticss / src / optimizations / MergeDeclarations / OptimizationContext.ts View on Github external
constructor(key: string, scope: RuleScope, root: postcss.Root, selectorContext: ParsedSelector | undefined) {
    this.key = key;
    this.scopes = [scope];
    this.root = root;
    this.selectorContext = selectorContext;
    this.declarationMap = new Dictionary>();
    this.authoredProps = new Set();
    this.declarationInfos = new Set();
    let specificitySelector = selectorContext &&
      selectorContext.toContext(selectorParser.className({ value: "foo" }));
    this.specificity = specificitySelector &&
      specificity.calculate(specificitySelector.toString())[0];
  }
github projectwallace / css-analyzer / src / analyzer / selectors / specificity.js View on Github external
.unique.map(({value, count}) => {
      const [a, b, c, d] = calculate(value).shift().specificityArray

      return {
        count,
        value,
        specificity: {a, b, c, d}
      }
    })
    .sort((a, b) => compare(b.value, a.value))
github azproduction / html-tui / lib / serializers / index.js View on Github external
export function addSerializer(selector, serializer) {
    if (typeof selector !== 'string') {
        throw new TypeError('`selector` should be a string');
    }

    if (typeof serializer !== 'function') {
        throw new TypeError('`serializer` should be a function');
    }

    calculateSpecificity(selector).forEach(({selector, specificity}) => {
        serializers.push({selector, serializer, specificity});
    });

    serializers.sort(sortBySpecificity);
}
github stylelint / stylelint / lib / rules / selector-max-specificity / index.js View on Github external
const simpleSpecificity = (selector) => {
			if (optionsMatches(options, 'ignoreSelectors', selector)) {
				return zeroSpecificity();
			}

			return specificity.calculate(selector)[0].specificityArray;
		};
github linkedin / opticss / src / optimizations / ShareDeclarations.ts View on Github external
selectors.forEach(selector => {
          let elements = new Array<element>();
          analyses.forEach(analysis =&gt; {
            elements.splice(elements.length, 0, ...analysis.querySelector(selector));
          });
          let selectorInfo: SelectorInfo = {
            rule,
            scope,
            selector,
            specificity: specificity.calculate(selector.toString())[0],
            file,
            fileIndex,
            sourceIndex,
            elements,
            overallIndex: -1,
            declarations,
            declarationInfos: new MultiDictionary()
          };
          this.selectorTree.add(selectorInfo);
        });
      });</element>

specificity

Calculate the specificity of a CSS selector

MIT
Latest version published 2 years ago

Package Health Score

70 / 100
Full package analysis

Popular specificity functions