Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
css-conflict-inspector
Advanced tools
css-conflict-inspector - npm Package Compare versions
Comparing version 0.1.1 to 0.2.0
@@ -11,17 +11,22 @@ function getPenalty(options, name, defaultValue) { | ||
| export function inspect(selectors, violations, options, scale = 1) { | ||
| const startIndex = selectors.findLastIndex(m => m.type === 'combinator'); | ||
| selectors.slice(startIndex + 1).forEach((sel) => { | ||
| let violation = undefined; | ||
| selectors.forEach((sel) => { | ||
| switch (sel.type) { | ||
| case 'combinator': { | ||
| // e.g., ">" | ||
| switch (sel.value) { | ||
| case 'descendant': | ||
| // e.g., " " | ||
| scale *= 0.4; | ||
| break; | ||
| case 'child': | ||
| // e.g., ">" | ||
| scale *= 0.2; | ||
| break; | ||
| case 'next-sibling': | ||
| // e.g., "+" | ||
| scale *= 0.08; | ||
| break; | ||
| case 'later-sibling': | ||
| scale *= 0.1; | ||
| // e.g., "~" | ||
| scale *= 0.16; | ||
| break; | ||
@@ -35,7 +40,10 @@ } | ||
| if (penalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: 'Detected use of an universal selector ("*")', | ||
| penalty, | ||
| }); | ||
| }; | ||
| } | ||
| else { | ||
| violation = undefined; | ||
| } | ||
| break; | ||
@@ -49,13 +57,16 @@ } | ||
| if (isCustomElement && customElementPenalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: `Detected use of a type selector (custom element "${sel.name}")`, | ||
| penalty: customElementPenalty, | ||
| }); | ||
| }; | ||
| } | ||
| else if (!isCustomElement && elementPenalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: `Detected use of a type selector (element "${sel.name}")`, | ||
| penalty: elementPenalty, | ||
| }); | ||
| }; | ||
| } | ||
| else { | ||
| violation = undefined; | ||
| } | ||
| break; | ||
@@ -73,23 +84,25 @@ } | ||
| scale = 0; | ||
| violation = undefined; | ||
| } | ||
| else if (numHyphens < 1 && sel.name.length < 8 && simplePenalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: `Detected use of a simple class selector ("${sel.name}")`, | ||
| penalty: simplePenalty, | ||
| }); | ||
| }; | ||
| } | ||
| else if (numHyphens < 1 && sel.name.length < 20 && simplerPenalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: `Detected use of an almost simple class selector ("${sel.name}")`, | ||
| penalty: simplerPenalty, | ||
| }); | ||
| }; | ||
| } | ||
| else if (numHyphens < 2 && sel.name.length < 10 && simplestPenalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: `Detected use of an almost simple class selector ("${sel.name}")`, | ||
| penalty: simplestPenalty, | ||
| }); | ||
| }; | ||
| } | ||
| else { | ||
| scale = 0; | ||
| violation = undefined; | ||
| } | ||
@@ -102,7 +115,10 @@ break; | ||
| if (penalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: `Detected use of an ID selector ("${sel.name}")`, | ||
| penalty, | ||
| }); | ||
| }; | ||
| } | ||
| else { | ||
| violation = undefined; | ||
| } | ||
| break; | ||
@@ -112,9 +128,12 @@ } | ||
| // e.g., "hidden" | ||
| const penalty = getPenalty(options, 'attributePenalty', 0) * scale; | ||
| const penalty = getPenalty(options, 'attributePenalty', 10) * scale; | ||
| if (penalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: `Detected use of an attribute selector ("${sel.name}")`, | ||
| penalty, | ||
| }); | ||
| }; | ||
| } | ||
| else { | ||
| violation = undefined; | ||
| } | ||
| break; | ||
@@ -124,16 +143,11 @@ } | ||
| // e.g., ":where" | ||
| if (sel.kind === 'not') { | ||
| inspect(sel.selectors, violations, options, 0.5); | ||
| if (sel.kind === 'not' || sel.kind === 'has') { | ||
| // Does not change the outcome as we just don't know what else can be selected (like anything) | ||
| } | ||
| else if (sel.kind === 'where') { | ||
| inspect(sel.selectors, violations, options, 0.5); | ||
| else if (sel.kind === 'where' || sel.kind === 'is') { | ||
| violation = undefined; | ||
| inspect(sel.selectors, violations, options, scale * 0.5); | ||
| } | ||
| else if (sel.kind === 'has') { | ||
| inspect(sel.selectors, violations, options, 0.2); | ||
| } | ||
| else if (sel.kind === 'is') { | ||
| inspect(sel.selectors, violations, options, 0.1); | ||
| } | ||
| else { | ||
| // | ||
| // These don't matter for the outcome | ||
| } | ||
@@ -156,3 +170,6 @@ break; | ||
| }); | ||
| if (violation) { | ||
| violations.push(violation); | ||
| } | ||
| } | ||
| //# sourceMappingURL=inspect.js.map |
@@ -15,17 +15,22 @@ "use strict"; | ||
| if (scale === void 0) { scale = 1; } | ||
| var startIndex = selectors.findLastIndex(function (m) { return m.type === 'combinator'; }); | ||
| selectors.slice(startIndex + 1).forEach(function (sel) { | ||
| var violation = undefined; | ||
| selectors.forEach(function (sel) { | ||
| switch (sel.type) { | ||
| case 'combinator': { | ||
| // e.g., ">" | ||
| switch (sel.value) { | ||
| case 'descendant': | ||
| // e.g., " " | ||
| scale *= 0.4; | ||
| break; | ||
| case 'child': | ||
| // e.g., ">" | ||
| scale *= 0.2; | ||
| break; | ||
| case 'next-sibling': | ||
| // e.g., "+" | ||
| scale *= 0.08; | ||
| break; | ||
| case 'later-sibling': | ||
| scale *= 0.1; | ||
| // e.g., "~" | ||
| scale *= 0.16; | ||
| break; | ||
@@ -39,7 +44,10 @@ } | ||
| if (penalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: 'Detected use of an universal selector ("*")', | ||
| penalty: penalty, | ||
| }); | ||
| }; | ||
| } | ||
| else { | ||
| violation = undefined; | ||
| } | ||
| break; | ||
@@ -53,13 +61,16 @@ } | ||
| if (isCustomElement && customElementPenalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: "Detected use of a type selector (custom element \"".concat(sel.name, "\")"), | ||
| penalty: customElementPenalty, | ||
| }); | ||
| }; | ||
| } | ||
| else if (!isCustomElement && elementPenalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: "Detected use of a type selector (element \"".concat(sel.name, "\")"), | ||
| penalty: elementPenalty, | ||
| }); | ||
| }; | ||
| } | ||
| else { | ||
| violation = undefined; | ||
| } | ||
| break; | ||
@@ -77,23 +88,25 @@ } | ||
| scale = 0; | ||
| violation = undefined; | ||
| } | ||
| else if (numHyphens < 1 && sel.name.length < 8 && simplePenalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: "Detected use of a simple class selector (\"".concat(sel.name, "\")"), | ||
| penalty: simplePenalty, | ||
| }); | ||
| }; | ||
| } | ||
| else if (numHyphens < 1 && sel.name.length < 20 && simplerPenalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: "Detected use of an almost simple class selector (\"".concat(sel.name, "\")"), | ||
| penalty: simplerPenalty, | ||
| }); | ||
| }; | ||
| } | ||
| else if (numHyphens < 2 && sel.name.length < 10 && simplestPenalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: "Detected use of an almost simple class selector (\"".concat(sel.name, "\")"), | ||
| penalty: simplestPenalty, | ||
| }); | ||
| }; | ||
| } | ||
| else { | ||
| scale = 0; | ||
| violation = undefined; | ||
| } | ||
@@ -106,7 +119,10 @@ break; | ||
| if (penalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: "Detected use of an ID selector (\"".concat(sel.name, "\")"), | ||
| penalty: penalty, | ||
| }); | ||
| }; | ||
| } | ||
| else { | ||
| violation = undefined; | ||
| } | ||
| break; | ||
@@ -116,9 +132,12 @@ } | ||
| // e.g., "hidden" | ||
| var penalty = getPenalty(options, 'attributePenalty', 0) * scale; | ||
| var penalty = getPenalty(options, 'attributePenalty', 10) * scale; | ||
| if (penalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: "Detected use of an attribute selector (\"".concat(sel.name, "\")"), | ||
| penalty: penalty, | ||
| }); | ||
| }; | ||
| } | ||
| else { | ||
| violation = undefined; | ||
| } | ||
| break; | ||
@@ -128,16 +147,11 @@ } | ||
| // e.g., ":where" | ||
| if (sel.kind === 'not') { | ||
| inspect(sel.selectors, violations, options, 0.5); | ||
| if (sel.kind === 'not' || sel.kind === 'has') { | ||
| // Does not change the outcome as we just don't know what else can be selected (like anything) | ||
| } | ||
| else if (sel.kind === 'where') { | ||
| inspect(sel.selectors, violations, options, 0.5); | ||
| else if (sel.kind === 'where' || sel.kind === 'is') { | ||
| violation = undefined; | ||
| inspect(sel.selectors, violations, options, scale * 0.5); | ||
| } | ||
| else if (sel.kind === 'has') { | ||
| inspect(sel.selectors, violations, options, 0.2); | ||
| } | ||
| else if (sel.kind === 'is') { | ||
| inspect(sel.selectors, violations, options, 0.1); | ||
| } | ||
| else { | ||
| // | ||
| // These don't matter for the outcome | ||
| } | ||
@@ -160,4 +174,7 @@ break; | ||
| }); | ||
| if (violation) { | ||
| violations.push(violation); | ||
| } | ||
| } | ||
| exports.inspect = inspect; | ||
| //# sourceMappingURL=inspect.js.map |
| { | ||
| "name": "css-conflict-inspector", | ||
| "version": "0.1.1", | ||
| "version": "0.2.0", | ||
| "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", |
@@ -22,18 +22,23 @@ import type { Selector } from 'lightningcss'; | ||
| ) { | ||
| const startIndex = selectors.findLastIndex(m => m.type === 'combinator'); | ||
| let violation: CssConflict = undefined; | ||
| selectors.slice(startIndex + 1).forEach((sel) => { | ||
| selectors.forEach((sel) => { | ||
| switch (sel.type) { | ||
| case 'combinator': { | ||
| // e.g., ">" | ||
| switch (sel.value) { | ||
| case 'descendant': | ||
| // e.g., " " | ||
| scale *= 0.4; | ||
| break; | ||
| case 'child': | ||
| // e.g., ">" | ||
| scale *= 0.2; | ||
| break; | ||
| case 'next-sibling': | ||
| // e.g., "+" | ||
| scale *= 0.08; | ||
| break; | ||
| case 'later-sibling': | ||
| scale *= 0.1; | ||
| // e.g., "~" | ||
| scale *= 0.16; | ||
| break; | ||
@@ -48,6 +53,8 @@ } | ||
| if (penalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: 'Detected use of an universal selector ("*")', | ||
| penalty, | ||
| }); | ||
| }; | ||
| } else { | ||
| violation = undefined; | ||
| } | ||
@@ -64,11 +71,13 @@ | ||
| if (isCustomElement && customElementPenalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: `Detected use of a type selector (custom element "${sel.name}")`, | ||
| penalty: customElementPenalty, | ||
| }); | ||
| }; | ||
| } else if (!isCustomElement && elementPenalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: `Detected use of a type selector (element "${sel.name}")`, | ||
| penalty: elementPenalty, | ||
| }); | ||
| }; | ||
| } else { | ||
| violation = undefined; | ||
| } | ||
@@ -89,19 +98,21 @@ | ||
| scale = 0; | ||
| violation = undefined; | ||
| } else if (numHyphens < 1 && sel.name.length < 8 && simplePenalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: `Detected use of a simple class selector ("${sel.name}")`, | ||
| penalty: simplePenalty, | ||
| }); | ||
| }; | ||
| } else if (numHyphens < 1 && sel.name.length < 20 && simplerPenalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: `Detected use of an almost simple class selector ("${sel.name}")`, | ||
| penalty: simplerPenalty, | ||
| }); | ||
| }; | ||
| } else if (numHyphens < 2 && sel.name.length < 10 && simplestPenalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: `Detected use of an almost simple class selector ("${sel.name}")`, | ||
| penalty: simplestPenalty, | ||
| }); | ||
| }; | ||
| } else { | ||
| scale = 0; | ||
| violation = undefined; | ||
| } | ||
@@ -116,6 +127,8 @@ | ||
| if (penalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: `Detected use of an ID selector ("${sel.name}")`, | ||
| penalty, | ||
| }); | ||
| }; | ||
| } else { | ||
| violation = undefined; | ||
| } | ||
@@ -127,9 +140,11 @@ | ||
| // e.g., "hidden" | ||
| const penalty = getPenalty(options, 'attributePenalty', 0) * scale; | ||
| const penalty = getPenalty(options, 'attributePenalty', 10) * scale; | ||
| if (penalty) { | ||
| violations.push({ | ||
| violation = { | ||
| message: `Detected use of an attribute selector ("${sel.name}")`, | ||
| penalty, | ||
| }); | ||
| }; | ||
| } else { | ||
| violation = undefined; | ||
| } | ||
@@ -141,12 +156,9 @@ | ||
| // e.g., ":where" | ||
| if (sel.kind === 'not') { | ||
| inspect(sel.selectors, violations, options, 0.5); | ||
| } else if (sel.kind === 'where') { | ||
| inspect(sel.selectors, violations, options, 0.5); | ||
| } else if (sel.kind === 'has') { | ||
| inspect(sel.selectors, violations, options, 0.2); | ||
| } else if (sel.kind === 'is') { | ||
| inspect(sel.selectors, violations, options, 0.1); | ||
| if (sel.kind === 'not' || sel.kind === 'has') { | ||
| // Does not change the outcome as we just don't know what else can be selected (like anything) | ||
| } else if (sel.kind === 'where' || sel.kind === 'is') { | ||
| violation = undefined; | ||
| inspect(sel.selectors, violations, options, scale * 0.5); | ||
| } else { | ||
| // | ||
| // These don't matter for the outcome | ||
| } | ||
@@ -170,2 +182,6 @@ | ||
| }); | ||
| if (violation) { | ||
| violations.push(violation); | ||
| } | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.11%
52203
- Lines of code
- increased by5.32%
970
- Number of medium supply chain risk alerts
- decreased by-100%
0
No dependency changes