als-css-optimizer

CSS Optimizer Hooks for CssParser

als-css-optimizer is an object containing hooks for use with CssParser.

Usage

Instalation

npm i als-css-optimizer

Node.js

const ruleSetsHooks = require('als-css-optimizer')
const CssParser = require('als-css-parser')
const hooks = {
   ruleSets:ruleSetsHooks,
}
let obj = new CssParser(rawCss,hooks)

Browser:

<script src="node_modules/als-css-optimizer/css-optimizer.js"></script>
<script src="node_modules/als-css-parser/css-parser.js"></script>
<script>
const hooks = {
   ruleSets:ruleSetsHooks,
}
let obj = new CssParser(rawCss,hooks)
</script>

ruleSetsHooks is an object which include the folowing structure:

{
   selector:[normalizeSelector,checkSelectors,removeSelectorSpaces],
   propname:[checkProp],
   value:[optimizeValue,optimizeColors],
   ruleSets:[],
   mainRuleSets:[
      groupSelectors,removeSameProps,groupValues,valuesToVars,removeEmptyRuleSets
   ],
}

Each element in object is a function for CssParser hook which checking and optimizing CssParser ruleSets object.

CSS Property Validator

options.checkProp = false will disable this validator.

This JavaScript function checks if a given CSS property is valid or not. If the specified property is invalid, a warning message is logged in the errors object.

CSS Selector Validator

options.checkSelectors == false will disable validator.

This function checks if a given CSS selector is valid or not. If the specified selector is invalid, a warning message is logged in the errors object.

Group rules with same properties

options.groupSelectors == false will disable this validator.

The groupSelectors function is a utility function that takes a list of CSS rule sets, groups the selectors with the same properties, and optimizes the nested media queries. The main goal of this function is to improve the readability and maintainability of the resulting CSS code.

Benefits

• Reduces redundancy: By grouping the selectors with the same properties, the function eliminates duplicate code, making the CSS more concise and easier to maintain.
• Improves readability: The resulting CSS code is more organized, making it easier to understand and work with.
• Optimizes nested media queries: The function groups selectors within nested media queries, further improving the code structure.

Example

Before:

.example1 {
  color: blue;
  display: none;
}

@media screen and (max-width: 601px) {
  .example1 {
    display: inline-block;
  }
  .example1 {
    color: blue;
    display: none;
  }
}

After:

.example1 {
  color: blue;
  display: none;
}

@media screen and (max-width: 601px) {
  .example1 {
    display: inline-block;
    color: blue;
    display: none;
  }
}

Group rules with common property-value pairs

options.groupValues = false will disable this validator.

groupValues is a function that optimizes the size of a CSS file by identifying and grouping rulesets with common property-value pairs. The function works by scanning the given rulesets and creating a new joined selector with the common property-value pairs. The new rulesets are then added to the original CSS file, and the grouped properties are removed from the individual rulesets.

Benefits

• Reduces the size of the CSS file by grouping common property-value pairs.
• Improves the maintainability of the CSS code by reducing redundancy.
• Optimizes the CSS file without affecting the appearance of the web page.

| After runing this function, you need to run removeEmptyRulesets

Example

Before

{ '.example1': [{ 'color': 'blue' },{width:'50px'}] },
{ '.example2': [{ 'color': 'blue' },{width:'50px'}] },
{ '.example3': [{ 'color': 'red' }] }

After

[
  { '.example1': [] }, // run removeEmptyRulesets to remove it
  { '.example2': [] }, // run removeEmptyRulesets to remove it
  { '.example3': [{ 'color': 'red' }] },
  { '.example1,.example2': [{ 'color': 'blue' }] }
]

Normalize selectors

options.normalizeSelector = false will disable this function.

The normalizeSelector function is used to optimize and clean up CSS selectors by removing extra whitespace, normalizing the space around combinators, and sorting comma-separated selectors and media query conditions. The main goal of this function is to make the CSS code more readable, maintainable, and reduce the file size.

Benefits

• Readability: By removing extra whitespace and sorting selectors, the CSS code becomes easier to read and understand.
• Maintainability: Normalized and sorted selectors make it easier to maintain and update the CSS code, as they follow a consistent structure.
• File Size Optimization: The removal of unnecessary spaces and the organization of selectors help reduce the size of the CSS file, which can lead to faster loading times and improved performance.

Examples

Example 1: Normalizing space around combinators Input:

.example1 > .example2   +   .example3

Output:

.example1>.example2+.example3

Example 2: Normalizing and sorting comma-separated selectors Input:

.example3, .example1, .example2

Output:

.example1,.example2,.example3

Example 3: Normalizing and sorting media query conditions Input:

@media screen and (max-width: 600px) and (min-width: 300px)

Output:

@media screen and (min-width:300px) and (max-width:600px)

Reduce size for rgb and hsl colors

options.optimizeColors = false will disable this function.

optimizeColors is a hook function that optimizes CSS colors by converting them from RGB or HSL color formats to their HEX equivalent. This can help reduce the size of your CSS files and improve readability.

Benefits

• Reduces the size of your CSS files by converting RGB and HSL color formats to their shorter HEX equivalents.
• Improves the readability of your CSS files by using a consistent color format.
• Provides color change events for tracking the optimization process.

Example

let before1 = 'hsl(0, 100%, 50%)'
let after1 = '#ff0000'
let before2 = 'rgb(255, 0, 0)'
let after2 = '#ff0000'

Reduce size for values

options.optimizeValue == false will disable this function.

The optimizeValue hook is used to optimize CSS property values by removing unnecessary whitespace and leading zeros from decimal values. It helps to minimize the size of the CSS code, resulting in faster loading times and better performance.

• The optimizeValue hook does not modify values that start with 'url' or 'content'.

Benefits

• Reduces the size of the CSS code
• Improves loading times and performance
• Simplifies CSS property values for better readability

Examples

Example 1: Optimizing a value with unnecessary whitespace

const before = 'rgba( 255 , 0 , 0 , 0.5 )';
let after = 'rgba(255,0,0,.5)'

Example 2: Optimizing a value with a leading zero in a decimal

const before = '0.5rem';
let after = '.5rem'

Remove empty rules

The removeEmptyRuleSets hook is responsible for removing empty rule sets from a given list of CSS rule sets. It also handles nested @media queries, making sure to remove empty rule sets within them as well.

If the options.removeEmptyRuleSets flag is set to false, the function will return the original list of rule sets without any modifications.

Benefits

By removing empty rule sets, this function helps:

• Reduce the size of the resulting CSS file, leading to faster download times and reduced bandwidth usage.
• Improve the readability and maintainability of the CSS code by removing unnecessary clutter.

Example

Before:

.example1 : {}
.example2: {color: blue; }
@media (max-width: 800px) {
   .example3: {}
   .example4: {background-color: red;}
}

After:

.example2: {color: blue; }
@media (max-width: 800px) {
   .example4: {background-color: red;}
}

Remove same properties

The removeSameProps hook is designed to remove duplicated properties within the same rule set in a given set of CSS rules. This hook helps to optimize the CSS code by removing redundant property-value pairs and keeping only the last one, which would have the final effect.

Benefits

• Optimization: By removing redundant properties, the size of the CSS file is reduced, which in turn improves the website's performance.
• Readability: The removal of unnecessary duplicated properties improves the readability of the CSS code, making it easier to maintain.

Examples

Before:

.example1 {
  color: red;
  color: blue;
}

.example2 {
  font-size: 16px;
  font-size: 18px;
  background-color: green;
}

@media (max-width: 800px) {
  .example3 {
    color: yellow;
    color: purple;
  }

  .example4 {
    background-color: red;
    background-color: orange;
    margin-top: 10px;
  }
}

After:

.example1 {
  color: blue;
}

.example2 {
  font-size: 18px;
  background-color: green;
}

@media (max-width: 800px) {
  .example3 {
    color: purple;
  }

  .example4 {
    background-color: orange;
    margin-top: 10px;
  }
}

Remove extra space in selectors

options.removeSelectorSpaces == false will disable this function.

This function takes a CSS selector string as input and removes unnecessary spaces around combinators, parentheses, and pseudo-classes. It's useful for minifying CSS and improving readability.

Transform long repeated values to variables

The valuesToVars hook is used to transform long repeated values in the CSS rules into custom variables and store them in the :root rule set. This helps to reduce the CSS file size and improves maintainability by centralizing the values.

Example

.example1: {
   background-image: linear-gradient(to bottom, #ffffff 0%, #eeeeee 100%);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
}
.example2: {
   background-image: linear-gradient(to bottom, #ffffff 0%, #eeeeee 100%);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
}
@media (max-width: 800px): {
   .example3: {
      background-image: linear-gradient(to bottom, #ffffff 0%, #eeeeee 100%);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
   }
}

After:

:root{
  --__a:linear-gradient(to bottom, #ffffff 0%, #eeeeee 100%);
  --__b:0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1)
}
.example1:{
  background-image:var(--__a);
  box-shadow:var(--__b)
}
.example2:{
  background-image:var(--__a);
  box-shadow:var(--__b)
}
@media (max-width: 800px):{
  .example3:{
    background-image:var(--__a);
    box-shadow:var(--__b)
  }
}