1"use strict";(self.webpackChunkstylelint_io=self.webpackChunkstylelint_io||[]).push([["3839"],{7259:function(e,n,t){t.r(n),t.d(n,{metadata:function(){return s},default:function(){return d},frontMatter:function(){return i},contentTitle:function(){return c},toc:function(){return a},assets:function(){return l}});var s=JSON.parse('{"id":"developer-guide/syntaxes","title":"Writing custom syntaxes","description":"Custom syntaxes are PostCSS syntaxes written by the community to support other styling languages, e.g. SCSS, and containers, e.g. HTML, using the customSyntax option.","source":"@site/docs/developer-guide/syntaxes.md","sourceDirName":"developer-guide","slug":"/developer-guide/syntaxes","permalink":"/developer-guide/syntaxes","draft":false,"unlisted":false,"editUrl":"https://github.com/stylelint/stylelint/edit/main/docs/developer-guide/syntaxes.md","tags":[],"version":"current","frontMatter":{"title":"Writing custom syntaxes","sidebar_label":"Writing custom syntaxes"},"sidebar":"docs","previous":{"title":"Writing plugins","permalink":"/developer-guide/plugins"},"next":{"title":"Writing custom formatters","permalink":"/developer-guide/formatters"}}'),o=t(4848),r=t(8453);let i={title:"Writing custom syntaxes",sidebar_label:"Writing custom syntaxes"},c="Writing custom syntaxes",l={},a=[];function u(e){let n={a:"a",code:"code",h1:"h1",header:"header",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"writing-custom-syntaxes",children:"Writing custom syntaxes"})}),"\n",(0,o.jsxs)(n.p,{children:["Custom syntaxes are ",(0,o.jsx)(n.a,{href:"https://github.com/postcss/postcss",children:"PostCSS"})," syntaxes written by the community to support other styling languages, e.g. SCSS, and containers, e.g. HTML, using the ",(0,o.jsxs)(n.a,{href:"/user-guide/options#customsyntax",children:[(0,o.jsx)(n.code,{children:"customSyntax"})," option"]}),"."]}),"\n",(0,o.jsxs)(n.p,{children:["To write one, familiarize yourself with PostCSS's ",(0,o.jsx)(n.a,{href:"https://postcss.org/docs/how-to-write-custom-syntax",children:"how to write custom syntax"})," guide. You can use one of the existing custom syntaxes from ",(0,o.jsx)(n.a,{href:"/awesome-stylelint",children:"Awesome Stylelint"})," for reference."]}),"\n",(0,o.jsx)(n.p,{children:"For example:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'import postcss from "postcss";\n\nfunction parse(css, opts) {\n const root = postcss.root();\n // adding other nodes to root...\n return root;\n}\n\nfunction stringify(node, builder) {\n // just use the default stringifier\n postcss.stringify(node, builder);\n\n // or write custom stringifier...\n}\n\nexport default { parse, stringify };\n'})}),"\n",(0,o.jsx)(n.p,{children:"After publishing your custom syntax, we recommend creating a shared config that:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["extends the ",(0,o.jsx)(n.a,{href:"https://github.com/stylelint/stylelint-config-standard",children:"standard config"})]}),"\n",(0,o.jsx)(n.li,{children:"bundles your custom syntax"}),"\n",(0,o.jsx)(n.li,{children:"turns off any incompatible built-in rules"}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:["All within an ",(0,o.jsx)(n.code,{children:"overrides"})," for the supported file extensions."]}),"\n",(0,o.jsxs)(n.p,{children:['For example, if you\'re creating a custom syntax for a language called "foo" (which uses the file extension ',(0,o.jsx)(n.code,{children:".foo"}),'), we recommend creating a shared-config called "stylelint-config-standard-foo" with the following content:']}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:'import yourCustomSyntax from "postcss-your-custom-syntax";\n\nexport default {\n overrides: [\n {\n files: ["*.foo", "**/*.foo"],\n customSyntax: yourCustomSyntax,\n extends: ["stylelint-config-standard"],\n rules: {\n "at-rule-no-unknown": null\n // ..\n }\n }\n ]\n};\n'})}),"\n",(0,o.jsx)(n.p,{children:"We recommended requiring the custom syntax until PostCSS v7 is no longer in circulation."})]})}function d(e={}){let{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(u,{...e})}):u(e)}},8453:function(e,n,t){t.d(n,{R:function(){return i},x:function(){return c}});var s=t(6540);let o={},r=s.createContext(o);function i(e){let n=s.useContext(r);return s.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(o):e.components||o:i(e.components),s.createElement(r.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.