LUM3005: Unused scoped selector

Severity: warning · Category: styles (3xxx)

Reported by: the CSS compiler (lumiose_css), in @lumiose/vite, lumiose check and the language server. A warning.

#What it means

A scoped block only styles the templates of its scope (the file, the component, or for a block nested under an element, that element's subtree). A selector whose classes, ids or tags never appear in those templates cannot match anything: usually a typo, leftover CSS, a selector meant for a child component, or one meant for a sibling subtree. The message names the scope, such as "matches no element in the <p> subtree of component Tree".

#Example

export function Card() {
  return (
    <div class="card">
      <style>
        .crad { padding: 1rem; }
      </style>
    </div>
  );
}

#How to fix it

Fix the selector or delete the rule. To style an element rendered by a child component, pass it a class (class passthrough carries your scope) or use :deep(.child). For classes added from outside the scope at runtime, use :global(.name).

JSX returned by a helper function is not part of a nested block's subtree, even when the helper is declared inside the component and called from inside the styled element:

export function Form() {
  const field = (name: string) => <label class="field">{name}</label>;
  return (
    <form class="form">
      {field("Title")}
      <style>
        .field { display: grid; } /* LUM3005: the helper's <label> is outside this subtree */
      </style>
    </form>
  );
}

Move the block to the top level of the file (a file-level block styles every element of the file), or write the <label> inside the <form> instead of returning it from a helper.

#Related

• Styles