CSS Selector Optimizer

Overview

Build a CSS optimization tool that processes CSS files and provides different selector ordering strategies to improve CSS file organization and maintainability.

Requirements

Create a Node.js module that:

1. Accepts CSS input containing multiple selectors and rules
2. Provides two ordering modes:
   • sorted: Orders selectors alphabetically (e.g., .apple, .mango, .zebra)
   • unsorted: Keeps selectors in their original order without sorting
3. Returns optimized CSS with selectors ordered according to the specified mode
4. Handles duplicate selectors by consolidating them appropriately

Implementation

Create two files:

1. css-optimizer.js

Implement a function optimizeCSS(cssString, options) that:

• Takes a CSS string as the first parameter
• Takes an options object as the second parameter with a sortMode property ('sorted' or 'unsorted')
• Returns an object with a styles property containing the optimized CSS string
• Minifies the CSS while applying the appropriate selector ordering

2. css-optimizer.test.js { .test }

Write tests that verify:

@test Sorted mode orders selectors alphabetically

const { optimizeCSS } = require('./css-optimizer');
const css = '.zebra { color: red; } .apple { color: blue; } .mango { color: green; }';
const result = optimizeCSS(css, { sortMode: 'sorted' });
// Result should have .apple before .mango before .zebra

@test Unsorted mode preserves selector order

const { optimizeCSS } = require('./css-optimizer');
const css = '.zebra { color: red; } .apple { color: blue; }';
const result = optimizeCSS(css, { sortMode: 'unsorted' });
// Result should maintain zebra before apple

Dependencies { .dependencies }

clean-css { .dependency }

Provides CSS optimization and minification with selector sorting capabilities.

Acceptance Criteria

• Both sorting modes (sorted and unsorted) work correctly
• CSS is properly minified/optimized
• Duplicate selectors are handled appropriately
• Tests pass and demonstrate the different ordering behaviors