LUM3016: Invalid :global() or :deep() selector

Severity: error · Category: styles (3xxx)

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

#What it means

:global(sel) leaves sel unscoped, and :deep(sel) scopes only the part of the selector before it so that sel can match inside child components. Both need a selector argument, and a selector may contain at most one :deep(), not nested in another.

#Example

<style>
  :global { color: red; }
  .list :deep(.item :deep(.icon)) { inline-size: 1rem; }
</style>

#How to fix it

Give the pseudo-class an argument (:global(.toast)), and use a single, top-level :deep() per selector (.list :deep(.item .icon)). For app-wide CSS, prefer a <style global> block.

#Related

• Styles: how scoping works