nestedLikePlugin() — vite Function Reference

Architecture documentation for the nestedLikePlugin() function in lightningcss-plugins.js from the vite codebase.

Function javascript ViteCore BuildPipeline

Entity Profile

ViteCore→ BuildPipeline→ nestedLikePlugin() — vite Function Reference

Dependency Diagram

graph TD
  adf80660_fee2_6590_5178_e49c45f01ee9["nestedLikePlugin()"]
  c618defc_3b57_317d_60a6_8c85cb7f6060["lightningcss-plugins.js"]
  adf80660_fee2_6590_5178_e49c45f01ee9 -->|defined in| c618defc_3b57_317d_60a6_8c85cb7f6060
  style adf80660_fee2_6590_5178_e49c45f01ee9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

playground/css/lightningcss-plugins.js lines 115–173

export function nestedLikePlugin() {
  return {
    Rule: {
      style(rule) {
        // NOTE: multiple selectors are not supported
        if (rule.value.selectors.length > 1) {
          return
        }
        const parentSelector = rule.value.selectors[0]

        const nestedRules = rule.value.rules
        /** @type {import('lightningcss').Rule[]} */
        const additionalRules = []
        if (nestedRules) {
          const filteredNestedRules = []
          for (const nestedRule of nestedRules) {
            if (nestedRule.type === 'style') {
              const selectors = nestedRule.value.selectors
              // NOTE: multiple selectors are not supported
              if (selectors.length === 1) {
                const selector = selectors[0]
                if (
                  selector.length >= 2 &&
                  selector[0].type === 'nesting' &&
                  selector[1].type === 'type'
                ) {
                  const lastParentSelectorComponent =
                    parentSelector[parentSelector.length - 1]
                  if ('name' in lastParentSelectorComponent) {
                    const newSelector = [
                      ...parentSelector.slice(0, -1),
                      {
                        ...lastParentSelectorComponent,
                        name:
                          lastParentSelectorComponent.name + selector[1].name,
                      },
                    ]
                    additionalRules.push({
                      type: 'style',
                      value: {
                        selectors: [newSelector],
                        declarations: nestedRule.value.declarations,
                        loc: nestedRule.value.loc,
                      },
                    })
                    continue
                  }
                }
              }
            }
            filteredNestedRules.push(nestedRule)
          }
          rule.value.rules = filteredNestedRules
        }
        return [rule, ...additionalRules]
      },
    },
  }
}