1"use strict";(self.webpackChunkstylelint_io=self.webpackChunkstylelint_io||[]).push([["9234"],{7704:function(e,n,r){r.r(n),r.d(n,{metadata:function(){return t},default:function(){return u},frontMatter:function(){return i},contentTitle:function(){return c},toc:function(){return l},assets:function(){return o}});var t=JSON.parse('{"id":"user-guide/rules/container-name-pattern","title":"container-name-pattern","description":"Specify a pattern for container names.","source":"@site/docs/user-guide/rules/container-name-pattern.md","sourceDirName":"user-guide/rules","slug":"/user-guide/rules/container-name-pattern","permalink":"/user-guide/rules/container-name-pattern","draft":false,"unlisted":false,"editUrl":"https://github.com/stylelint/stylelint/edit/main/lib/rules/container-name-pattern/README.md","tags":[],"version":"current","frontMatter":{"title":"container-name-pattern","sidebar_label":"container-name-pattern"},"sidebar":"docs","previous":{"title":"comment-word-disallowed-list","permalink":"/user-guide/rules/comment-word-disallowed-list"},"next":{"title":"custom-media-pattern","permalink":"/user-guide/rules/custom-media-pattern"}}'),a=r(4848),s=r(8453);let i={title:"container-name-pattern",sidebar_label:"container-name-pattern"},c="container-name-pattern",o={},l=[{value:"Options",id:"options",level:2},{value:"<code>string</code>",id:"string",level:3}];function d(e){let n={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.header,{children:(0,a.jsx)(n.h1,{id:"container-name-pattern",children:"container-name-pattern"})}),"\n",(0,a.jsx)(n.p,{children:"Specify a pattern for container names."}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"@container foo (width > 400px) {}\n/** \u2191\n * The pattern of this */\n"})}),"\n",(0,a.jsxs)(n.p,{children:["This rule supports 2 ",(0,a.jsx)(n.a,{href:"/user-guide/configure#message",children:"message arguments"}),": the container name and the configured pattern."]}),"\n",(0,a.jsx)(n.h2,{id:"options",children:"Options"}),"\n",(0,a.jsx)(n.h3,{id:"string",children:(0,a.jsx)(n.code,{children:"string"})}),"\n",(0,a.jsxs)(n.p,{children:["Specify a regex string not surrounded with ",(0,a.jsx)(n.code,{children:'"/"'}),"."]}),"\n",(0,a.jsx)(n.p,{children:"Given:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-json",children:'{\n "container-name-pattern": "foo-.+"\n}\n'})}),"\n",(0,a.jsx)(n.p,{children:"The following patterns are considered problems:"}),"\n",(0,a.jsxs)("div",{class:"invalid-pattern",children:[(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"@container foo {}\n"})}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"a { container-name: bar; }\n"})}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"a { container: baz / inline-size; }\n"})})]}),"\n",(0,a.jsxs)(n.p,{children:["The following patterns are ",(0,a.jsx)(n.em,{children:"not"})," considered problems:"]}),"\n",(0,a.jsxs)("div",{class:"valid-pattern",children:[(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"@container foo-bar {}\n"})}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"a { container-name: foo-bar; }\n"})}),(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-css",children:"a { container: foo-baz / inline-size; }\n"})})]})]})}function u(e={}){let{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(d,{...e})}):d(e)}},8453:function(e,n,r){r.d(n,{R:function(){return i},x:function(){return c}});var t=r(6540);let a={},s=t.createContext(a);function i(e){let n=t.useContext(s);return t.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.