ℹ️ Select 'Choose Exercise', or randomize 'Next Random Exercise' in selected language.

Choose Exercise:
Timer 00:00
WPM --
Score --
Acc --
Correct chars --

CSS Variable Scope Resolver

CSS

Goal -- WPM

Ready
Exercise Algorithm Area
1function resolveCssVariables(rules, parentScopeVariables = {}) {

2let resolvedVariables = { ...parentScopeVariables };

3

4for (const rule of rules) {

5if (rule.type === 'declaration') {

6if (rule.property.startsWith('--')) {

7// This is a variable declaration

8resolvedVariables[rule.property] = rule.value;

9}

10} else if (rule.type === 'rule') {

11// This is a nested rule

12// Create a new scope for this rule

13const childScopeVariables = { ...resolvedVariables };

14

15// Recursively resolve variables in the nested rule

16const nestedResolved = resolveCssVariables(rule.declarations, childScopeVariables);

17

18// Merge resolved variables from child scope back, but only if they are specific to that scope

19// In a real scenario, we'd need to track which variables are truly overridden vs inherited.

20// For this simple example, we'll just update the main list.

21resolvedVariables = { ...resolvedVariables, ...nestedResolved };

22}

23}

24return resolvedVariables;

25}

26

27// Example usage:

28// const cssRules = [

29//     { type: 'declaration', property: '--main-color', value: 'blue' },

30//     {

31//         type: 'rule',

32//         selector: '.container',

33//         declarations: [

34//             { type: 'declaration', property: '--text-color', value: 'black' },

35//             {

36//                 type: 'rule',

37//                 selector: '.container p',

38//                 declarations: [

39//                     { type: 'declaration', property: '--main-color', value: 'red' }, // Overrides parent

40//                     { type: 'declaration', property: '--padding', value: '10px' } // New variable

41//                 ]

42//             }

43//         ]

44//     }

45// ];

46// console.log(resolveCssVariables(cssRules));

47// Expected: { '--main-color': 'red', '--text-color': 'black', '--padding': '10px' }
Algorithm description viewbox

CSS Variable Scope Resolver

Algorithm description:

This algorithm resolves CSS custom properties (variables) based on their scope within a set of CSS rules. It simulates how browsers apply variables, respecting inheritance and overrides in nested selectors. Understanding variable scope is fundamental for efficient and maintainable CSS, enabling developers to manage styles dynamically and reduce repetition.

Algorithm explanation:

The `resolveCssVariables` function takes an array of CSS rules and an optional object of parent scope variables. It iterates through the rules, identifying variable declarations (`--variable-name: value;`) and nested rules. When a variable is declared, it's added to the `resolvedVariables` object. For nested rules, a new scope is created by copying the current `resolvedVariables`, and the function is called recursively. This ensures that variables declared in outer scopes are available to inner scopes, and variables declared in inner scopes override those from outer scopes. The time complexity is O(N*D) where N is the number of rules and D is the maximum depth of nested rules, due to recursion. Space complexity is O(N*D) in the worst case for storing scopes on the call stack.

Pseudocode:

FUNCTION resolveCssVariables(rules, parentScopeVariables = {}):
  INITIALIZE resolvedVariables = copy of parentScopeVariables

  FOR EACH rule IN rules:
    IF rule.type is 'declaration':
      IF rule.property starts with '--':
        SET resolvedVariables[rule.property] = rule.value
      END IF
    ELSE IF rule.type is 'rule':
      // Create a new scope for the nested rule
      INITIALIZE childScopeVariables = copy of resolvedVariables
      
      // Recursively resolve variables in the nested rule
      nestedResolved = resolveCssVariables(rule.declarations, childScopeVariables)
      
      // Merge resolved variables from child scope back
      // In a real scenario, careful merging is needed to handle true overrides vs inheritance.
      // For this example, we simply update the main list.
      MERGE nestedResolved INTO resolvedVariables
    END IF
  END FOR

  RETURN resolvedVariables
END FUNCTION