search

hudochenkov / postcss-styled-syntax

PostCSS syntax for CSS-in-JS like styled-components
MIT License
69 stars 4 forks source link

TypeError: Cannot read properties of undefined (reading '2') when Referring to other components #18

Closed lashawty closed 10 months ago

lashawty commented 11 months ago

Everything is working fine except when trying Referring to other components, thanks for the hard work!!

Here's the code:

// this works
${Button}
        {
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            border-top-right-radius: 0;
            width: 100%;
            p{
                transform: rotate(0deg);
            }
        }
// this will throw an error
${Button}
        {
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            border-top-right-radius: 0;
            width: 100%;
            p{
                transform: rotate(0deg);
            }
        }
${AnotherButton}
        {
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            border-top-right-radius: 0;
            width: 100%;
            p{
                transform: rotate(0deg);
            }
        }

.stylelintrc

{
    "processors": ["stylelint-processor-styled-components"],
    "extends": [
        "stylelint-config-recommended",
        "stylelint-config-styled-components",
        "stylelint-config-recess-order"
    ],
    "customSyntax": "postcss-styled-syntax"
}

Error on terminal

TypeError: Cannot read properties of undefined (reading '2')
    at Parser.rule (/Users/seanhsiao/Documents/project/210315-member-v4-web/node_modules/postcss-styled-syntax/lib/parser.js:200:28)
    at Parser.other (/Users/seanhsiao/Documents/project/210315-member-v4-web/node_modules/postcss-styled-syntax/lib/parser.js:130:11)
    at Parser.parse (/Users/seanhsiao/Documents/project/210315-member-v4-web/node_modules/postcss-styled-syntax/lib/parser.js:86:12)
    at parse (/Users/seanhsiao/Documents/project/210315-member-v4-web/node_modules/postcss-styled-syntax/lib/parse.js:84:10)
    at new LazyResult (/Users/seanhsiao/Documents/project/210315-member-v4-web/node_modules/postcss/lib/lazy-result.js:133:16)
    at getPostcssResult (/Users/seanhsiao/Documents/project/210315-member-v4-web/node_modules/stylelint/lib/getPostcssResult.js:53:30)
    at async lintSource (/Users/seanhsiao/Documents/project/210315-member-v4-web/node_modules/stylelint/lib/lintSource.js:99:4)
    at async /Users/seanhsiao/Documents/project/210315-member-v4-web/node_modules/stylelint/lib/standalone.js:211:27
    at async Promise.all (index 0)
    at async standalone (/Users/seanhsiao/Documents/project/210315-member-v4-web/node_modules/stylelint/lib/standalone.js:254:22)

package.json

"styled-components": "5.3.9",
"stylelint": "^15.10.2",
"stylelint-config-recess-order": "^4.3.0",
"stylelint-config-recommended": "^13.0.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.10.0",
hudochenkov commented 10 months ago

Thank you for reporting!

Indeed, I can reproduce it.

Until this is fixed you can write in more CSS in common way, where selector is on the same line as opening bracket.

This causes issue:

${AnotherButton}
        {
                ...

And this is not:

${AnotherButton} {
        ...
lashawty commented 10 months ago

Thank you for the reply, problem solved!