Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

css-conflict-inspector

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

css-conflict-inspector - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

1

esm/analyze.d.ts

@@ -8,3 +8,4 @@ import type { CssConflict, CssInspectorOptions } from './types';

totalPenalty: number;
maxPenalty: number;
score: number;
};
import { transform } from 'lightningcss';
import { inspect } from './inspect';
import { stringify } from './stringify';
function sum(penalties) {
return Math.ceil(penalties.reduce((s, p) => s + p, 0));
}
export function analyzeCss(content, options = {}) {

@@ -34,2 +37,7 @@ const conflicts = [];

});
const penalties = conflicts.map((c) => c.penalty);
const totalPenalty = sum(penalties);
const topThree = penalties.sort((a, b) => b - a).filter((_, i) => i < 3);
const maxPenalty = Math.ceil(conflicts.reduce((p, c) => Math.max(p, c.penalty), 0));
const score = Math.max(0, 100 - sum(topThree));
return {

@@ -40,6 +48,7 @@ selectors,

dependencies: result.dependencies,
totalPenalty: Math.ceil(conflicts.reduce((p, c) => p + c.penalty, 0)),
score: 100 - Math.ceil(conflicts.reduce((p, c) => Math.max(p, c.penalty), 0)),
totalPenalty,
maxPenalty,
score,
};
}
//# sourceMappingURL=analyze.js.map

@@ -10,2 +10,41 @@ function getPenalty(options, name, defaultValue) {

}
function getDefaultTypePenalty(type) {
switch (type) {
case 'body':
return 80;
case 'img':
case 'input':
case 'a':
case 'button':
return 70;
case 'textarea':
return 60;
case 'h1':
case 'h2':
case 'h3':
case 'h4':
case 'h5':
case 'h6':
case 'figure':
case 'article':
case 'section':
return 30;
case 'span':
case 'div':
case 'td':
case 'th':
case 'tr':
return 50;
case 'p':
case 'ol':
case 'ul':
case 'li':
case 'table':
case 'thead':
case 'tfoot':
return 40;
default:
return 20;
}
}
export function inspect(selectors, violations, options, scale = 1) {

@@ -38,3 +77,3 @@ let violation = undefined;

// e.g., "*"
const penalty = getPenalty(options, 'universalPenalty', 50) * scale;
const penalty = getPenalty(options, 'universalPenalty', 90) * scale;
if (penalty) {

@@ -53,3 +92,4 @@ violation = {

// e.g., "p"
const elementPenalty = getPenalty(options, 'elementPenalty', 20) * scale;
const defaultPenalty = getDefaultTypePenalty(sel.name);
const elementPenalty = getPenalty(options, 'elementPenalty', defaultPenalty) * scale;
const customElementPenalty = getPenalty(options, 'customElementPenalty', 10) * scale;

@@ -56,0 +96,0 @@ const isCustomElement = sel.name.includes('-');

@@ -8,3 +8,4 @@ import type { CssConflict, CssInspectorOptions } from './types';

totalPenalty: number;
maxPenalty: number;
score: number;
};

@@ -18,2 +18,5 @@ "use strict";

var stringify_1 = require("./stringify");
function sum(penalties) {
return Math.ceil(penalties.reduce(function (s, p) { return s + p; }, 0));
}
function analyzeCss(content, options) {

@@ -47,2 +50,7 @@ if (options === void 0) { options = {}; }

});
var penalties = conflicts.map(function (c) { return c.penalty; });
var totalPenalty = sum(penalties);
var topThree = penalties.sort(function (a, b) { return b - a; }).filter(function (_, i) { return i < 3; });
var maxPenalty = Math.ceil(conflicts.reduce(function (p, c) { return Math.max(p, c.penalty); }, 0));
var score = Math.max(0, 100 - sum(topThree));
return {

@@ -53,4 +61,5 @@ selectors: selectors,

dependencies: result.dependencies,
totalPenalty: Math.ceil(conflicts.reduce(function (p, c) { return p + c.penalty; }, 0)),
score: 100 - Math.ceil(conflicts.reduce(function (p, c) { return Math.max(p, c.penalty); }, 0)),
totalPenalty: totalPenalty,
maxPenalty: maxPenalty,
score: score,
};

@@ -57,0 +66,0 @@ }

@@ -13,2 +13,41 @@ "use strict";

}
function getDefaultTypePenalty(type) {
switch (type) {
case 'body':
return 80;
case 'img':
case 'input':
case 'a':
case 'button':
return 70;
case 'textarea':
return 60;
case 'h1':
case 'h2':
case 'h3':
case 'h4':
case 'h5':
case 'h6':
case 'figure':
case 'article':
case 'section':
return 30;
case 'span':
case 'div':
case 'td':
case 'th':
case 'tr':
return 50;
case 'p':
case 'ol':
case 'ul':
case 'li':
case 'table':
case 'thead':
case 'tfoot':
return 40;
default:
return 20;
}
}
function inspect(selectors, violations, options, scale) {

@@ -42,3 +81,3 @@ if (scale === void 0) { scale = 1; }

// e.g., "*"
var penalty = getPenalty(options, 'universalPenalty', 50) * scale;
var penalty = getPenalty(options, 'universalPenalty', 90) * scale;
if (penalty) {

@@ -57,3 +96,4 @@ violation = {

// e.g., "p"
var elementPenalty = getPenalty(options, 'elementPenalty', 20) * scale;
var defaultPenalty = getDefaultTypePenalty(sel.name);
var elementPenalty = getPenalty(options, 'elementPenalty', defaultPenalty) * scale;
var customElementPenalty = getPenalty(options, 'customElementPenalty', 10) * scale;

@@ -60,0 +100,0 @@ var isCustomElement = sel.name.includes('-');

2

package.json
{
"name": "css-conflict-inspector",
"version": "0.2.0",
"version": "0.2.1",
"description": "Find potential conflict in your CSS files - to avoid surprises when used in the context of Micro Frontends.",

@@ -5,0 +5,0 @@ "main": "lib/index.js",

@@ -6,2 +6,6 @@ import { transform } from 'lightningcss';

function sum(penalties: Array<number>) {
return Math.ceil(penalties.reduce((s, p) => s + p, 0));
}
export function analyzeCss(content: string, options: CssInspectorOptions = {}) {

@@ -42,2 +46,8 @@ const conflicts: Array<CssConflict> = [];

const penalties = conflicts.map((c) => c.penalty);
const totalPenalty = sum(penalties);
const topThree = penalties.sort((a, b) => b - a).filter((_, i) => i < 3);
const maxPenalty = Math.ceil(conflicts.reduce((p, c) => Math.max(p, c.penalty), 0));
const score = Math.max(0, 100 - sum(topThree));
return {

@@ -48,5 +58,6 @@ selectors,

dependencies: result.dependencies,
totalPenalty: Math.ceil(conflicts.reduce((p, c) => p + c.penalty, 0)),
score: 100 - Math.ceil(conflicts.reduce((p, c) => Math.max(p, c.penalty), 0)),
totalPenalty,
maxPenalty,
score,
};
}

@@ -16,2 +16,42 @@ import type { Selector } from 'lightningcss';

function getDefaultTypePenalty(type: string) {
switch (type) {
case 'body':
return 80;
case 'img':
case 'input':
case 'a':
case 'button':
return 70;
case 'textarea':
return 60;
case 'h1':
case 'h2':
case 'h3':
case 'h4':
case 'h5':
case 'h6':
case 'figure':
case 'article':
case 'section':
return 30;
case 'span':
case 'div':
case 'td':
case 'th':
case 'tr':
return 50;
case 'p':
case 'ol':
case 'ul':
case 'li':
case 'table':
case 'thead':
case 'tfoot':
return 40;
default:
return 20;
}
}
export function inspect(

@@ -50,3 +90,3 @@ selectors: Selector | Array<Selector>,

// e.g., "*"
const penalty = getPenalty(options, 'universalPenalty', 50) * scale;
const penalty = getPenalty(options, 'universalPenalty', 90) * scale;

@@ -66,3 +106,4 @@ if (penalty) {

// e.g., "p"
const elementPenalty = getPenalty(options, 'elementPenalty', 20) * scale;
const defaultPenalty = getDefaultTypePenalty(sel.name);
const elementPenalty = getPenalty(options, 'elementPenalty', defaultPenalty) * scale;
const customElementPenalty = getPenalty(options, 'customElementPenalty', 10) * scale;

@@ -69,0 +110,0 @@ const isCustomElement = sel.name.includes('-');

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc