npm package: @jaisocx/css-html
Description: ``` npm install @jaisocx/css-html ```
Author: Jaisocx
Latest version: 1.3.6

# Package with methods to work with CSS and HTML

```
npm install @jaisocx/css-html
```


## Status
Ready to use since the 06-th of May in the Year 2025.



## The aim of the setup

I shall publish in this package some basic methods to work with string variables, related to CSS and HTML.

The aim of the setup is to keep the package little and reusable, installing via npm on demand with very few kilobytes cost.


## Classes available
1. CssHtml
2. CssSelectorWeight

## Usage

### 1. CssHtml 

```
import { CssHtml } from "@jaisocx/css-html";


let cssHtmlPackage = new CssHtml();

let remBasePxValue = cssHtmlPackage.getRemBasePxValue(); // 16


// example 1
let sizeRem = "1rem";
let sizePx = cssHtmlPackage.remToPx( sizeRem );
console.log( sizeRem, sizePx );

// example 2
let sizeNotSureWhetherRem = "100%";
let sizeIfRemThenPx = cssHtmlPackage.remToPx( sizeNotSureWhetherRem ) || sizeNotSureWhetherRem;
console.log( sizeNotSureWhetherRem, sizeIfRemThenPx );

```

```
// example 3 in the @jaisocx/email-html-inliner
// 
import { CssHtml } from "@jaisocx/css-html";
import { Trimmer } from "@jaisocx/text";

constructor() {
  this.trimmer = new Trimmer(); 

  this.cssHtmlPackage = new CssHtml();
  this.remBasePxValue = this.cssHtmlPackage.getRemBasePxValue();
}

let variableValue = window.getComputedStyle( node ).getPropertyValue( variableName );
let matchedValue = this.trimmer.trimQuotes( variableValue ) || variableValue;

if ( matchedValue.includes("rem") ) {

  let values: string[] = matchedValue.split( " " );

  for ( let i = 0; i < values.length; i++ ) {
    let size: string = values[i];
    values[i] = this.cssHtmlPackage.remToPx( size, this.remBasePxValue ) || size;
  }

  matchedValue = values.join( " " );

}

```


### 1. CssSelectorWeight 


#### Example 1. Get Specifity value denoting weight of a css selector 
```
import { CssSelectorWeight } from "@jaisocx/css-html";

let selectorText = ".workkspace.long .theme-darkmode";
let specifity = this.cssSelectorWeightPackage.calculateOneRuleSpecificity ( selectorText );

console.log( specifity );
// [0, 0, 3, 0, 0, 0]

let selectorText2 = ".workkspace.long .theme-darkmode span.column-value";
let specifityHigher = this.cssSelectorWeightPackage.calculateOneRuleSpecificity ( selectorText2 );

console.log( specifityHigher );
// [0, 0, 4, 0, 1, 0]

let specifitiesComparison = this.cssSelectorWeightPackage.compareSpecificity( 
  specifity, 
  specifityHigher );

console.log( specifitiesComparison );
```


#### Example 2. Compare specifity values, to get know what css rule has the higher priority.
```
import { CssSelectorWeight } from "@jaisocx/css-html";

// specifityOfRuleSelector1 = [0, 0, 2, 0, 0, 0];
// specifityOfRuleSelector2 = [0, 0, 2, 0, 1, 0];

let specifitiesComparison = this.cssSelectorWeightPackage.compareSpecificity ( 
  specifityOfRuleSelector1, 
  specifityOfRuleSelector2 
);

```



#### Example 3. A more detailed example.
```
import { CssSelectorWeight } from "@jaisocx/css-html";

let rule1 = document.styleSheets[0].cssRules[0];
let rule2 = document.styleSheets[0].cssRules[1];

if ( rule1.matches( htmlElement ) && rule2.matches( htmlElement ) ) {

  let specifityOfRuleSelector1 = this.cssSelectorWeightPackage.calculateOneRuleSpecificity ( rule1.selectorText );

  let specifityOfRuleSelector2 = this.cssSelectorWeightPackage.calculateOneRuleSpecificity ( rule2.selectorText );

  let specifitiesComparison = this.cssSelectorWeightPackage.compareSpecificity( 
    specifityOfRuleSelector1, 
    specifityOfRuleSelector2 );

  let ruleChosen = null;
  if ( specifitiesComparison >= 0 ) {
    ruleChosen = rule1;
  } else {
    ruleChosen = rule2;
  }

  let styleToApply = ruleChosen.style.getPropertyValue( "background" );

  htmlElement.style.background = styleToApply;
}

```