Handle sub media matches (#1)

* handle partial matches

* next step, more sensible latest search

* add caching

* fix js clearing

* add basic import support

* adding support for entry points config

---------

Co-authored-by: Björn Büttner <[email protected]>

Author: Idrinth

package-lock.json

@@ -23,7 +23,10 @@
     "@types/css": "^0.0.37",
     "@types/node": "^20.10.6",
     "typescript": "^5.3.3",
-    "ts-node": "^10.9.2"
+    "ts-node": "^10.9.2",
+    "eslint": "^8.56.0",
+    "eslint-plugin-json": "^3.1.0",
+    "@typescript-eslint/parser": "^6.20.0"
   },
   "bin": {
     "lint-css-duplicates": "bin/lint-css-duplicates.js",

package.json

@@ -1,11 +1,25 @@
 import css from "css";
-import Rules from "./rules.js";
 import handleRule from "./handle-rule.js";
+import Media from "./media.js";
+import RuleStore from "./rule-store.js";
+import handleFile from "./handle-file.js";
 
-export default (rule: css.Media, rules: Rules): boolean => {
+const handleAtRule = (rule: css.Media, rules: RuleStore, media: Media): boolean => {
   let fails = false;
   for (const rul of rule.rules || []) {
-    fails = handleRule(rul, rules, rule.media) || fails;
+    if (rul.type === 'rule') {
+      const ru: css.Rule = rul;
+      fails = handleRule(ru, rules, media, ru.position.source) || fails;
+    } else if (rul.type === 'media') {
+      const ru: css.Media = rul;
+      fails = handleAtRule(ru, rules, media.createChild(ru.media || '',))
+    } else if (rul.type === 'import') {
+      const ru: css.Import = rul;
+      if (ru.import.match(/^[^/]/,)) {
+        fails = handleFile(ru.position.source.replace(/[\\/].*?\.css$/, '/') + ru.import, rules, media);
+      }
+    }
   }
   return fails;
 };
+export default handleAtRule;

src/build-map.ts

@@ -1,24 +1,20 @@
 import css from "css";
-import Rules from "./rules.js";
+import Media from "./media.js";
+import RuleStore from "./rule-store.js";
 
-export default (selector: string, declaration: css.Declaration, position: css.Position | undefined, media: string, rules: Rules): boolean => {
+export default (selector: string, declaration: css.Declaration, position: css.Position, media: Media, rules: RuleStore, file: string): boolean => {
   let fails = false;
-  if (rules[selector]) {
-    if (rules[selector][media]) {
-      if (rules[selector][media][declaration.property || '']) {
-        fails = true;
-        console.error(`${declaration.property} of ${selector} overwrites a previous definition in line ${position?.line} for media ${media}.`);
-      }
-    }
-    if (media !== '' && rules[selector]['']) {
-      if (rules[selector][''][declaration.property || ''] && rules[selector][''][declaration.property || ''] === declaration.value || '') {
-        fails = true;
-        console.error(`${declaration.property} of ${selector} overwrites a previous definition in line ${position?.line} general with the same value.`);
-      }
+  const property = declaration.property || '';
+  const latest = rules.latest(selector, media, property);
+  if (latest) {
+    if (latest.media.toString() === media.toString()) {
+      fails = true;
+      console.error(`${property} of ${selector} in file:line:column ${file}:${position.line}:${position.column} overwrites a previous definition for the same @media in file:line:column ${latest.file}:${latest.line}:${latest.column}.`);
+    } else if (latest.value === declaration.value) {
+      fails = true;
+      console.error(`${property} of ${selector} in file:line:column ${file}:${position.line}:${position.column} overwrites a previous definition in file:line:column ${latest.file}:${latest.line}:${latest.column} with the same value.`);
     }
   }
-  rules[selector] = rules[selector] || {};
-  rules[selector][media] = rules[selector][media] || {};
-  rules[selector][media][declaration.property || ''] = declaration.value || '';
+  rules.add(selector, media, property, declaration.value, position.line, position.column, file)
   return fails;
 }

src/handle-at-rule.ts

@@ -0,0 +1,31 @@
+import css from 'css';
+import {readFileSync} from 'fs';
+import handleRule from "./handle-rule.js";
+import handleAtRule from "./handle-at-rule.js";
+import Media from "./media.js";
+import RuleStore from "./rule-store.js";
+
+const handleFile = (file: string, ruleStore: RuleStore|undefined = undefined, parentMedia: Media|undefined = undefined): boolean => {
+  const rules = ruleStore || new RuleStore();
+  const media = parentMedia || new Media('');
+  let fails = false;
+  const code = css.parse(readFileSync(file, 'utf8'), {
+    source: file,
+  });
+  for (const rule of (code.stylesheet?.rules || [])) {
+    if (rule.type === 'rule') {
+      const rul: css.Rule = rule;
+      fails = handleRule(rul, rules, media, rul.position.source) || fails;
+    } else if(rule.type === 'media') {
+      const rul: css.Media = rule;
+      fails = handleAtRule(rul, rules, media.createChild(rul.media)) || fails;
+    } else if (rule.type === 'import') {
+      const rul: css.Import = rule;
+      if (rul.import.match(/^[^/]/,)) {
+        fails = handleFile(file.replace(/[\\/].*?\.css$/, '/') + rul.import, rules, media);
+      }
+    }
+  }
+  return !fails;
+};
+export default handleFile;

src/handle-declaration.ts

@@ -1,13 +1,14 @@
 import css from "css";
-import Rules from "./rules.js";
-import {handleDeclaration} from "./handle-declaration.js";
+import handleDeclaration from "./handle-declaration.js";
+import Media from "./media.js";
+import RuleStore from "./rule-store.js";
 
-export default (rule: css.Rule, rules: Rules, media: string = '') => {
+export default (rule: css.Rule, rules: RuleStore, media: Media, file: string|undefined) => {
   let fails = false;
   for (const selector of rule.selectors || []) {
     for (const declaration of rule.declarations || []) {
       if (declaration.type === 'declaration') {
-        fails = handleDeclaration(selector, declaration, rule.position?.start, media, rules) || fails;
+        fails = handleDeclaration(selector, declaration, rule.position?.start, media, rules, file) || fails;
       }
     }
   }

src/handle-file.ts

@@ -1,11 +1,27 @@
-import {readdirSync} from 'node:fs';
-import buildMap from './build-map.js';
+import {existsSync, readdirSync} from 'node:fs';
+import checkFile from './handle-file.js';
+import {readFileSync} from "fs";
 
 export default (cwd: string): boolean => {
-  let success = false;
+  let success = true;
+  if (existsSync(cwd + '/.idrinth-duplicate-style-check.json')) {
+    const data = JSON.parse(readFileSync(cwd + '/.idrinth-duplicate-style-check.json', 'utf8'));
+    if (typeof data === 'object' && typeof data.entrypoints === 'object' && Array.isArray(data.entrypoints)) {
+      for(const file of data.entrypoints) {
+        if (!existsSync(cwd + '/' + file)) {
+          success = false;
+          console.error(`Css file ${file} doesn't exist.`);
+        } else {
+          success = checkFile(cwd + '/' + file) && success;
+        }
+      }
+      return success;
+    }
+  }
+  console.warn('No configuration found, trying every css file outside node_modules as entry point.');
   for (const file of readdirSync(cwd, {recursive: true, encoding: 'utf8'})) {
-    if (file.endsWith('.css') && !file.includes('node_modules') && !file.includes('coverage') && !file.includes('dist')) {
-      success = buildMap(cwd + '/' + file) || success;
+    if (file.endsWith('.css') && !file.includes('node_modules')) {
+      success = checkFile(cwd + '/' + file) && success;
     }
   }
   return success;

src/handle-rule.ts

@@ -0,0 +1,70 @@
+export default class Media
+{
+  private requirements: string[] = [];
+  private media: string;
+  private options: string[] = [];
+  constructor(media: string) {
+    for (const requirement of media.split('and')) {
+      const trimmed = requirement.replace(/^\s+|\s+$/ug, '');
+      if (requirement && ! this.requirements.includes(trimmed)) {
+        this.requirements.push(trimmed);
+      }
+    }
+    this.requirements.sort();
+  }
+  public toString(): string
+  {
+    if (this.media) {
+      return this.media;
+    }
+    if (this.requirements.length === 0) {
+      return this.media = 'general';
+    }
+    return this.media = this.requirements.join(' and ');
+  }
+  private * getAllOptions(index: number): Generator<string>
+  {
+    if (! this.requirements[index]) {
+      return;
+    }
+    yield this.requirements[index];
+    for (const option of this.getAllOptions(index + 1)) {
+      yield `${ this.requirements[index] } and ${ option }`
+      yield option;
+    }
+  }
+  public * getOptions(): Generator<string>
+  {
+    if (this.options.length > 0) {
+      for(const option of this.options) {
+        yield option;
+      }
+      return;
+    }
+    this.options.push('');
+    yield '';
+    for (const option of this.getAllOptions(0)) {
+      this.options.push(option);
+      yield option;
+    }
+  }
+  public contains(media: Media): boolean
+  {
+    for (const option of this.getOptions()) {
+      if (media.toString() === option) {
+        return true;
+      }
+    }
+    return false;
+  }
+  public createChild(media: string) : Media
+  {
+    if (this.requirements.length === 0) {
+      return new Media(media);
+    }
+    if (media === '') {
+      return this;
+    }
+    return new Media(this.toString() + ' and ' + media);
+  }
+}

src/index.ts

@@ -0,0 +1,39 @@
+import Media from "./media.js";
+import Rule from "./rule.js";
+import Rules from "./rules.js";
+
+export default class RuleStore {
+  private index = 0;
+  private data: Rules = {};
+  public latest(selector: string, media: Media, property: string): Rule|undefined
+  {
+    if (typeof this.data[selector] === 'undefined' || typeof this.data[selector][property] === 'undefined') {
+      return;
+    }
+    let latest: Rule = undefined;
+    for (const md of Object.keys(this.data[selector][property])) {
+      if(media.contains(this.data[selector][property][md].media)) {
+        if (typeof latest === 'undefined') {
+          latest = this.data[selector][property][md];
+        } else if (latest.index < this.data[selector][property][md].index) {
+          latest = this.data[selector][property][md];
+        }
+      }
+    }
+    return latest;
+  }
+  public add(
+    selector: string,
+    media: Media,
+    property: string,
+    value: string,
+    line: number|undefined = undefined,
+    column: number|undefined = undefined,
+    file: string|undefined = undefined,
+  ): void {
+    this.data[selector] = this.data[selector] || {};
+    this.data[selector][property] = this.data[selector][property] || {};
+    this.data[selector][property][media.toString()] = new Rule(selector, property, media, value, this.index, line, column, file);
+    this.index++;
+  }
+}

src/media.ts

@@ -0,0 +1,15 @@
+import Media from "./media.js";
+
+export default class Rule {
+  constructor(
+    public readonly selector: string,
+    public readonly property: string,
+    public readonly media: Media,
+    public readonly value: string,
+    public readonly index: number,
+    public readonly line: number|undefined = undefined,
+    public readonly column: number|undefined = undefined,
+    public readonly file: string|undefined = undefined,
+  ) {
+  }
+}

src/rule-store.ts

@@ -1,7 +1,9 @@
+import Rule from "./rule.js";
+
 export default interface Rules {
   [selector: string]: {
-    [media: string]: {
-      [property: string]: string
+    [property: string]: {
+      [media: string]: Rule
     }
   }
 }

src/rule.ts

@@ -16,6 +16,3 @@ const clearFolder = (folder,) => {
   }
 };
 clearFolder(__dirname + '../src',);
-if (existsSync(__dirname + '../index.js')) {
-  rmSync(__dirname + '../index.js',);
-}