Skip to content

Commit

Permalink
Minor
Browse files Browse the repository at this point in the history
  • Loading branch information
rnyell committed Nov 15, 2024
1 parent 1c9f5a4 commit e70684f
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 18 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"version": "0.1.0",
"description": "A PostCSS plugin to styles selectors based on specific declaration or property.",
"keywords": [
"css",
"postcss",
"postcss-plugin"
],
Expand Down
2 changes: 2 additions & 0 deletions readme.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# postcss-contains

![Build status](https://github.com/rnyell/postcss-contains/actions/workflows/ci.yml/badge.svg)

**postcss-contains** enables you to apply styles to selectors based on specific property or declaration (property-value pair).

The `@contains` at-rule targets elements and selectors when they _contain_:
Expand Down
35 changes: 17 additions & 18 deletions src/contains.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Container, Root, AtRule, Result } from "postcss";
import type { Container, AtRule, Result } from "postcss";
import { extract, getParams, lastDecl } from "./utils.js";

type Duplication = "merge" | "replace";
Expand Down Expand Up @@ -170,15 +170,15 @@ export default class Contains {
#container: Container | undefined;
#pairs;
#singles;
static declarations = new Map<string, Vals>(); // holds all containers' decls temporarily
#declarations = new Map<string, Vals>(); // holds all containers' decls temporarily

constructor(duplication: Duplication) {
this.#duplication = duplication;
this.#singles = new Singles(this.#duplication);
this.#pairs = new Pairs(this.#duplication);
}

// 1) collecting all @contains: conditions and their declarations
// 1) collecting all @contains: queries and their declarations
collect(atRule: AtRule, result: Result) {
const params = getParams(atRule.params);
const overrides = atRule.params.startsWith("overrides");
Expand Down Expand Up @@ -272,7 +272,6 @@ export default class Contains {
find() {
let found: boolean | undefined;

// #container can't be `undefined` here, so `!` is used //!
this.#container!.each((child) => {
if (child.type === "decl") {
for (const pack of STORE) {
Expand All @@ -281,12 +280,12 @@ export default class Contains {

if (bucket.variant === "pair") {
if (child.prop === property && child.value === bucket.value) {
Contains.setDecls(bucket);
this.#setDecls(bucket);
found = true;
}
} else if (bucket.variant === "single") {
if (child.prop === property) {
Contains.setDecls(bucket);
this.#setDecls(bucket);
found = true;
}
}
Expand All @@ -299,28 +298,28 @@ export default class Contains {
return found;
}

static setDecls(bucket: Bucket) {
#setDecls(bucket: Bucket) {
let variant = bucket.variant;
let overrides = bucket.overrides;
let declarations = bucket.declarations;

for (const [property, value] of declarations) {
/**
* if a property already exist:
* if a property already exists:
* - the "pair" one should overwrite the "single" one
* - the later "pair" should overwrite the previous one
* - the later "pair"/"single" should overwrite the previous "pair"/"single"
*/
if (this.declarations.has(property)) {
const existingVariant = this.declarations.get(property)?.variant;
if (this.#declarations.has(property)) {
const existingVariant = this.#declarations.get(property)?.variant;
if (existingVariant === "pair" && variant === "single") {
continue;
} else {
const val = { value, overrides, variant };
this.declarations.set(property, val);
this.#declarations.set(property, val);
}
} else {
const val = { value, overrides, variant };
this.declarations.set(property, val);
this.#declarations.set(property, val);
}
}
}
Expand All @@ -336,12 +335,12 @@ export default class Contains {
if (found) {
this.#container?.each((child) => {
if (child.type === "decl") {
if (Contains.declarations.has(child.prop)) {
const vals = Contains.declarations.get(child.prop);
if (this.#declarations.has(child.prop)) {
const vals = this.#declarations.get(child.prop);
if (vals?.overrides) {
child.remove();
} else {
Contains.declarations.delete(child.prop);
this.#declarations.delete(child.prop);
}
}
}
Expand All @@ -353,7 +352,7 @@ export default class Contains {
const last = lastDecl(this.#container!); //!
const temp = last?.cloneAfter();

for (const [property, vals] of Contains.declarations) {
for (const [property, vals] of this.#declarations) {
temp?.before({
prop: property,
value: vals.value,
Expand All @@ -365,7 +364,7 @@ export default class Contains {

end() {
this.#container = undefined;
Contains.declarations.clear();
this.#declarations.clear();
}

reset() {
Expand Down

0 comments on commit e70684f

Please sign in to comment.