From 219dac59508e17a2ab5e0ebabdc3b72d2a21daf2 Mon Sep 17 00:00:00 2001 From: Aleks Hudochenkov Date: Thu, 5 Jan 2023 01:08:01 +0100 Subject: [PATCH 1/6] Suggest postcss-styled-syntax instead of @stylelint/postcss-css-in-js --- lib/getPostcssResult.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/getPostcssResult.js b/lib/getPostcssResult.js index 2c4f1aff57..6e188ddda5 100644 --- a/lib/getPostcssResult.js +++ b/lib/getPostcssResult.js @@ -120,16 +120,16 @@ function getCustomSyntax(customSyntax, basedir) { /** @type {{ [key: string]: string }} */ const previouslyInferredExtensions = { html: 'postcss-html', - js: '@stylelint/postcss-css-in-js', - jsx: '@stylelint/postcss-css-in-js', + js: 'postcss-styled-syntax', + jsx: 'postcss-styled-syntax', less: 'postcss-less', md: 'postcss-markdown', sass: 'postcss-sass', sss: 'sugarss', scss: 'postcss-scss', svelte: 'postcss-html', - ts: '@stylelint/postcss-css-in-js', - tsx: '@stylelint/postcss-css-in-js', + ts: 'postcss-styled-syntax', + tsx: 'postcss-styled-syntax', vue: 'postcss-html', xml: 'postcss-html', xst: 'postcss-html', From 6f14af561e57addace983dda12ad1f0c460cd00c Mon Sep 17 00:00:00 2001 From: Aleks Hudochenkov Date: Thu, 5 Jan 2023 01:08:25 +0100 Subject: [PATCH 2/6] Re-enable most of CSS-in-JS tests --- lib/rules/color-hex-case/__tests__/index.js | 126 ++++++++-------- lib/rules/color-hex-length/__tests__/index.js | 138 +++++++++--------- lib/rules/color-no-hex/__tests__/index.js | 51 ++++--- .../color-no-invalid-hex/__tests__/index.js | 9 +- .../__tests__/index.js | 3 +- .../__tests__/index.js | 3 +- .../__tests__/index.js | 3 +- .../__tests__/index.js | 3 +- .../__tests__/index.js | 6 +- .../__tests__/index.js | 3 +- .../function-url-quotes/__tests__/index.js | 3 +- .../__tests__/index.js | 11 +- .../__tests__/index.js | 3 +- .../no-duplicate-selectors/__tests__/index.js | 3 +- .../no-eol-whitespace/__tests__/index.js | 15 +- .../__tests__/index.js | 5 +- package-lock.json | 126 ++++++++++++++++ package.json | 1 + 18 files changed, 313 insertions(+), 199 deletions(-) diff --git a/lib/rules/color-hex-case/__tests__/index.js b/lib/rules/color-hex-case/__tests__/index.js index 4c25bc7264..eefecc88ef 100644 --- a/lib/rules/color-hex-case/__tests__/index.js +++ b/lib/rules/color-hex-case/__tests__/index.js @@ -166,53 +166,52 @@ testRule( ); testRule({ - skip: true, ruleName, config: ['lower'], - customSyntax: 'postcss-css-in-js', + customSyntax: 'postcss-styled-syntax', fix: true, accept: [ { code: ` - export const s = styled.a({ - color: "#aaa", - }); + export const s = styled.a\` + color: #aaa; + \`; `, }, { code: ` - export const s = styled.a({ - stroke: "url(#AAA)", - }); + export const s = styled.a\` + stroke: url(#AAA); + \`; `, description: 'href with location', }, { code: ` - export const s = styled.a({ - color: "PINK", - }); + export const s = styled.a\` + color: PINK; + \`; `, }, { code: ` - export const s = styled.a({ - background: "linear-gradient(#aaa, #ffff, #0000ffcc)", - }); + export const s = styled.a\` + background: linear-gradient(#aaa, #ffff, #0000ffcc); + \`; `, }, { code: ` - export const s = styled("a::before")({ - content: '"#ABABAB"', - }); + export const s = styled.a\` + content: "#ABABAB"; + \`; `, }, { code: ` - export const s = styled.a({ - color: "white /* #FFF */", - }); + export const s = styled.a\` + color: white /* #FFF */; + \`; `, }, ], @@ -220,14 +219,14 @@ testRule({ reject: [ { code: ` - export const s = styled.a({ - color: "#aBABAA", - }); + export const s = styled.a\` + color: #aBABAA; + \`; `, fixed: ` - export const s = styled.a({ - color: "#ababaa", - }); + export const s = styled.a\` + color: #ababaa; + \`; `, message: messages.expected('#aBABAA', '#ababaa'), @@ -236,14 +235,14 @@ testRule({ }, { code: ` - export const s = styled.a({ - background: "linear-gradient(#AAA, #FaFa, #0000FFcc)", - }); + export const s = styled.a\` + background: linear-gradient(#AAA, #FaFa, #0000FFcc); + \`; `, fixed: ` - export const s = styled.a({ - background: "linear-gradient(#aaa, #fafa, #0000ffcc)", - }); + export const s = styled.a\` + background: linear-gradient(#aaa, #fafa, #0000ffcc); + \`; `, warnings: [ @@ -256,53 +255,52 @@ testRule({ }); testRule({ - skip: true, ruleName, config: ['upper'], - customSyntax: 'postcss-css-in-js', + customSyntax: 'postcss-styled-syntax', fix: true, accept: [ { code: ` - export const s = styled.a({ - color: "#AAA", - }); + export const s = styled.a\` + color: #AAA; + \`; `, }, { code: ` - export const s = styled.a({ - stroke: "url(#aaa)", - }); + export const s = styled.a\` + stroke: url(#aaa); + \`; `, description: 'href with location', }, { code: ` - export const s = styled.a({ - color: "pink", - }); + export const s = styled.a\` + color: pink; + \`; `, }, { code: ` - export const s = styled.a({ - background: "linear-gradient(#AAA, #FFFF, #0000FFCC)", - }); + export const s = styled.a\` + background: linear-gradient(#AAA, #FFFF, #0000FFCC); + \`; `, }, { code: ` - export const s = styled("a::before")({ - content: '"#ababab"', - }); + export const s = styled.a\` + content: "#ababab"; + \`; `, }, { code: ` - export const s = styled.a({ - color: "white /* #fff */", - }); + export const s = styled.a\` + color: white /* #fff */; + \`; `, }, ], @@ -310,14 +308,14 @@ testRule({ reject: [ { code: ` - export const s = styled.a({ - color: "#aBABAB", - }); + export const s = styled.a\` + color: #aBABAB; + \`; `, fixed: ` - export const s = styled.a({ - color: "#ABABAB", - }); + export const s = styled.a\` + color: #ABABAB; + \`; `, message: messages.expected('#aBABAB', '#ABABAB'), @@ -326,14 +324,14 @@ testRule({ }, { code: ` - export const s = styled.a({ - background: "linear-gradient(#aaa, #FaFa, #0000FFcc)", - }); + export const s = styled.a\` + background: linear-gradient(#aaa, #FaFa, #0000FFcc); + \`; `, fixed: ` - export const s = styled.a({ - background: "linear-gradient(#AAA, #FAFA, #0000FFCC)", - }); + export const s = styled.a\` + background: linear-gradient(#AAA, #FAFA, #0000FFCC); + \`; `, warnings: [ diff --git a/lib/rules/color-hex-length/__tests__/index.js b/lib/rules/color-hex-length/__tests__/index.js index 240eb6f3ae..2e9c031806 100644 --- a/lib/rules/color-hex-length/__tests__/index.js +++ b/lib/rules/color-hex-length/__tests__/index.js @@ -204,61 +204,60 @@ testRule( ); testRule({ - skip: true, ruleName, config: ['short'], - customSyntax: 'postcss-css-in-js', + customSyntax: 'postcss-styled-syntax', fix: true, accept: [ { code: ` - export const s = styled.a({ - color: "#aaa", - }); + export const s = styled.a\` + color: #aaa; + \`; `, }, { code: ` - export const s = styled.a({ - color: "#ababab", - }); + export const s = styled.a\` + color: #ababab; + \`; `, }, { code: ` - export const s = styled.a({ - stroke: "url(#aaaaaa)", - }); + export const s = styled.a\` + stroke: url(#aaaaaa); + \`; `, description: 'href with location', }, { code: ` - export const s = styled.a({ - color: "darkred", - }); + export const s = styled.a\` + color: darkred; + \`; `, }, { code: ` - export const s = styled.a({ - background: "linear-gradient(#aaa, #ffff, #01234567)", - }); + export const s = styled.a\` + background: linear-gradient(#aaa, #ffff, #01234567); + \`; `, }, { code: ` - export const s = styled("a::before")({ - content: '"#aabbcc"', - }); + export const s = styled.a\` + content: "#aabbcc"; + \`; `, }, { code: ` - export const s = styled.a({ - color: "white /* #ffffff */", - }); + export const s = styled.a\` + color: white /* #ffffff */; + \`; `, }, ], @@ -266,14 +265,14 @@ testRule({ reject: [ { code: ` - export const s = styled.a({ - color: "#aaaaaa", - }); + export const s = styled.a\` + color: #aaaaaa; + \`; `, fixed: ` - export const s = styled.a({ - color: "#aaa", - }); + export const s = styled.a\` + color: #aaa; + \`; `, message: messages.expected('#aaaaaa', '#aaa'), @@ -282,14 +281,14 @@ testRule({ }, { code: ` - export const s = styled.a({ - background: "linear-gradient(#aabbcc, #0000ffcc)", - }); + export const s = styled.a\` + background: linear-gradient(#aabbcc, #0000ffcc); + \`; `, fixed: ` - export const s = styled.a({ - background: "linear-gradient(#abc, #00fc)", - }); + export const s = styled.a\` + background: linear-gradient(#abc, #00fc); + \`; `, warnings: [ @@ -301,61 +300,60 @@ testRule({ }); testRule({ - skip: true, ruleName, config: ['long'], - customSyntax: 'postcss-css-in-js', + customSyntax: 'postcss-styled-syntax', fix: true, accept: [ { code: ` - export const s = styled.a({ - color: "#aaaaaa", - }); + export const s = styled.a\` + color: #aaaaaa; + \`; `, }, { code: ` - export const s = styled.a({ - color: "#abababab", - }); + export const s = styled.a\` + color: #abababab; + \`; `, }, { code: ` - export const s = styled.a({ - stroke: "url(#aaa)", - }); + export const s = styled.a\` + stroke: url(#aaa); + \`; `, description: 'href with location', }, { code: ` - export const s = styled.a({ - color: "pink", - }); + export const s = styled.a\` + color: pink; + \`; `, }, { code: ` - export const s = styled.a({ - background: "linear-gradient(#aaaaaa, #ffffffff, #01234567)", - }); + export const s = styled.a\` + background: linear-gradient(#aaaaaa, #ffffffff, #01234567); + \`; `, }, { code: ` - export const s = styled("a::before")({ - content: '"#abc"', - }); + export const s = styled.a\` + content: "#abc"; + \`; `, }, { code: ` - export const s = styled.a({ - color: "white /* #fff */", - }); + export const s = styled.a\` + color: white /* #fff */; + \`; `, }, ], @@ -363,14 +361,14 @@ testRule({ reject: [ { code: ` - export const s = styled.a({ - color: "#aaa", - }); + export const s = styled.a\` + color: #aaa; + \`; `, fixed: ` - export const s = styled.a({ - color: "#aaaaaa", - }); + export const s = styled.a\` + color: #aaaaaa; + \`; `, message: messages.expected('#aaa', '#aaaaaa'), @@ -379,14 +377,14 @@ testRule({ }, { code: ` - export const s = styled.a({ - background: "linear-gradient(#abc, #00fc)", - }); + export const s = styled.a\` + background: linear-gradient(#abc, #00fc); + \`; `, fixed: ` - export const s = styled.a({ - background: "linear-gradient(#aabbcc, #0000ffcc)", - }); + export const s = styled.a\` + background: linear-gradient(#aabbcc, #0000ffcc); + \`; `, warnings: [ diff --git a/lib/rules/color-no-hex/__tests__/index.js b/lib/rules/color-no-hex/__tests__/index.js index 92685ec20c..481a35d3a6 100644 --- a/lib/rules/color-no-hex/__tests__/index.js +++ b/lib/rules/color-no-hex/__tests__/index.js @@ -112,52 +112,51 @@ testRule({ }); testRule({ - skip: true, ruleName, config: [true], - customSyntax: 'postcss-css-in-js', + customSyntax: 'postcss-styled-syntax', accept: [ { code: ` - export const s = styled.a({ - color: "pink", - }); + export const s = styled.a\` + color: pink; + \`; `, }, { code: ` - export const s = styled.a({ - color: "rgba(0, 0, 0, 0)", - }); + export const s = styled.a\` + color: rgba(0, 0, 0, 0); + \`; `, }, { code: ` - export const s = styled.a({ - content: '"#abcdef"', - }); + export const s = styled.a\` + content: "#abcdef"; + \`; `, }, { code: ` - export const s = styled.a({ - background: 'url(#aabbcc)', - }); + export const s = styled.a\` + background: url(#aabbcc); + \`; `, }, { code: ` - export const s = styled.a({ - color: "red /* #ff0000 */", - }); + export const s = styled.a\` + color: red /* #ff0000 */; + \`; `, }, { code: ` - export const s = styled.a({ - color: "linear-gradient(green, rgb(123, 123, 123), hsl(24, 70%, 80%))", - }); + export const s = styled.a\` + color: linear-gradient(green, rgb(123, 123, 123), hsl(24, 70%, 80%)); + \`; `, }, ], @@ -165,9 +164,9 @@ testRule({ reject: [ { code: ` - export const s = styled.a({ - color: "#abcdef", - }); + export const s = styled.a\` + color: #abcdef; + \`; `, message: messages.rejected('#abcdef'), @@ -176,9 +175,9 @@ testRule({ }, { code: ` - export const s = styled.a({ - backgroundColor: "linear-gradient(#aaa, #ffff, #01234567)", - }); + export const s = styled.a\` + backgroundColor: linear-gradient(#aaa, #ffff, #01234567); + \`; `, warnings: [ diff --git a/lib/rules/color-no-invalid-hex/__tests__/index.js b/lib/rules/color-no-invalid-hex/__tests__/index.js index afd9a7d9d1..8911e8a57b 100644 --- a/lib/rules/color-no-invalid-hex/__tests__/index.js +++ b/lib/rules/color-no-invalid-hex/__tests__/index.js @@ -120,23 +120,22 @@ testRule({ }); testRule({ - skip: true, ruleName, config: [true], - customSyntax: 'postcss-css-in-js', + customSyntax: 'postcss-styled-syntax', accept: [ { - code: 'export default

Test

;', + code: 'let Component = styled.a`color: #ffff`;', }, ], reject: [ { - code: 'export default

Test

;', + code: 'let Component = styled.a`color: #fffff`;', message: messages.rejected('#fffff'), line: 1, - column: 36, + column: 33, }, ], }); diff --git a/lib/rules/declaration-block-no-duplicate-custom-properties/__tests__/index.js b/lib/rules/declaration-block-no-duplicate-custom-properties/__tests__/index.js index aa66562e76..61e44ee915 100644 --- a/lib/rules/declaration-block-no-duplicate-custom-properties/__tests__/index.js +++ b/lib/rules/declaration-block-no-duplicate-custom-properties/__tests__/index.js @@ -154,10 +154,9 @@ testRule({ }); testRule({ - skip: true, ruleName, config: [true], - customSyntax: 'postcss-css-in-js', + customSyntax: 'postcss-styled-syntax', accept: [ { diff --git a/lib/rules/declaration-block-no-duplicate-properties/__tests__/index.js b/lib/rules/declaration-block-no-duplicate-properties/__tests__/index.js index d0fe44bb57..5ce438b7c4 100644 --- a/lib/rules/declaration-block-no-duplicate-properties/__tests__/index.js +++ b/lib/rules/declaration-block-no-duplicate-properties/__tests__/index.js @@ -445,10 +445,9 @@ testRule({ }); testRule({ - skip: true, ruleName, config: [true], - customSyntax: 'postcss-css-in-js', + customSyntax: 'postcss-styled-syntax', accept: [ { diff --git a/lib/rules/declaration-block-no-redundant-longhand-properties/__tests__/index.js b/lib/rules/declaration-block-no-redundant-longhand-properties/__tests__/index.js index 680a75369c..3c79e1cd79 100644 --- a/lib/rules/declaration-block-no-redundant-longhand-properties/__tests__/index.js +++ b/lib/rules/declaration-block-no-redundant-longhand-properties/__tests__/index.js @@ -173,10 +173,9 @@ testRule({ }); testRule({ - skip: true, ruleName, config: [true], - customSyntax: 'postcss-css-in-js', + customSyntax: 'postcss-styled-syntax', accept: [ { diff --git a/lib/rules/declaration-block-no-shorthand-property-overrides/__tests__/index.js b/lib/rules/declaration-block-no-shorthand-property-overrides/__tests__/index.js index 27fe87f35a..fde54bfe6f 100644 --- a/lib/rules/declaration-block-no-shorthand-property-overrides/__tests__/index.js +++ b/lib/rules/declaration-block-no-shorthand-property-overrides/__tests__/index.js @@ -163,10 +163,9 @@ testRule({ }); testRule({ - skip: true, ruleName, config: [true], - customSyntax: 'postcss-css-in-js', + customSyntax: 'postcss-styled-syntax', accept: [ { diff --git a/lib/rules/declaration-block-trailing-semicolon/__tests__/index.js b/lib/rules/declaration-block-trailing-semicolon/__tests__/index.js index 2fa02e452e..7d2620f7b4 100644 --- a/lib/rules/declaration-block-trailing-semicolon/__tests__/index.js +++ b/lib/rules/declaration-block-trailing-semicolon/__tests__/index.js @@ -225,16 +225,14 @@ testRule({ }); testRule({ - skip: true, ruleName, config: ['always'], - customSyntax: 'postcss-css-in-js', + customSyntax: 'postcss-styled-syntax', fix: true, accept: [ { - code: 'const C = () => { return }', - description: 'css-in-js object', + code: 'const C = styled.a`color: red;`;', }, ], diff --git a/lib/rules/function-url-no-scheme-relative/__tests__/index.js b/lib/rules/function-url-no-scheme-relative/__tests__/index.js index def7f5cf4f..9a6a41a39e 100644 --- a/lib/rules/function-url-no-scheme-relative/__tests__/index.js +++ b/lib/rules/function-url-no-scheme-relative/__tests__/index.js @@ -156,10 +156,9 @@ testRule({ }); testRule({ - skip: true, ruleName, config: [true], - customSyntax: 'postcss-css-in-js', + customSyntax: 'postcss-styled-syntax', accept: [ { diff --git a/lib/rules/function-url-quotes/__tests__/index.js b/lib/rules/function-url-quotes/__tests__/index.js index aa6393996a..59e9d548ea 100644 --- a/lib/rules/function-url-quotes/__tests__/index.js +++ b/lib/rules/function-url-quotes/__tests__/index.js @@ -736,10 +736,9 @@ testRule({ }); testRule({ - skip: true, ruleName, config: ['always'], - customSyntax: 'postcss-css-in-js', + customSyntax: 'postcss-styled-syntax', accept: [ { diff --git a/lib/rules/function-whitespace-after/__tests__/index.js b/lib/rules/function-whitespace-after/__tests__/index.js index a8a92f8e31..7fe749f523 100644 --- a/lib/rules/function-whitespace-after/__tests__/index.js +++ b/lib/rules/function-whitespace-after/__tests__/index.js @@ -338,25 +338,24 @@ testRule({ }); testRule({ - skip: true, ruleName, config: ['always'], - customSyntax: 'postcss-css-in-js', + customSyntax: 'postcss-styled-syntax', fix: true, accept: [ { - code: "export default ;", + code: 'let Component = styled.a`transform: translate(1, 1);`;', }, ], reject: [ { - code: "export default ;", - fixed: "export default ;", + code: 'let Component = styled.a`transform: translate(1, 1)scale(3)`;', + fixed: 'let Component = styled.a`transform: translate(1, 1) scale(3)`;', message: messages.expected, line: 1, - column: 60, + column: 52, }, ], }); diff --git a/lib/rules/no-descending-specificity/__tests__/index.js b/lib/rules/no-descending-specificity/__tests__/index.js index 23cdc354fb..0860e62abe 100644 --- a/lib/rules/no-descending-specificity/__tests__/index.js +++ b/lib/rules/no-descending-specificity/__tests__/index.js @@ -220,9 +220,8 @@ testRule({ }); testRule({ - skip: true, ruleName, - customSyntax: 'postcss-css-in-js', + customSyntax: 'postcss-styled-syntax', config: [true], accept: [ diff --git a/lib/rules/no-duplicate-selectors/__tests__/index.js b/lib/rules/no-duplicate-selectors/__tests__/index.js index f7bc49ac3b..730bd8b754 100644 --- a/lib/rules/no-duplicate-selectors/__tests__/index.js +++ b/lib/rules/no-duplicate-selectors/__tests__/index.js @@ -280,9 +280,8 @@ it('with postcss-import and duplicates across files, no warnings', () => { }); testRule({ - skip: true, ruleName, - customSyntax: 'postcss-css-in-js', + customSyntax: 'postcss-styled-syntax', config: [true], accept: [ diff --git a/lib/rules/no-eol-whitespace/__tests__/index.js b/lib/rules/no-eol-whitespace/__tests__/index.js index f010c7cc2d..aa88f15d84 100644 --- a/lib/rules/no-eol-whitespace/__tests__/index.js +++ b/lib/rules/no-eol-whitespace/__tests__/index.js @@ -644,10 +644,10 @@ testRule({ }); testRule({ - skip: true, ruleName, - customSyntax: 'postcss-css-in-js', + customSyntax: 'postcss-styled-syntax', config: [true], + fix: true, accept: [ { @@ -661,10 +661,15 @@ testRule({ \`; `, }, + ], + + reject: [ { - code: `export default ;`, + code: 'let Component = styled.a`color: pink;\t\n`;', + fixed: 'let Component = styled.a`color: pink;\n`;', + message: messages.rejected, + line: 1, + column: 38, }, ], }); diff --git a/lib/rules/selector-type-no-unknown/__tests__/index.js b/lib/rules/selector-type-no-unknown/__tests__/index.js index ffc043e5b2..558603d0fc 100644 --- a/lib/rules/selector-type-no-unknown/__tests__/index.js +++ b/lib/rules/selector-type-no-unknown/__tests__/index.js @@ -463,14 +463,13 @@ testRule({ }); testRule({ - skip: true, ruleName, config: [true], - customSyntax: 'postcss-css-in-js', + customSyntax: 'postcss-styled-syntax', accept: [ { - code: "import styled from 'styled-components';\nexport default styled.div` ${/* sc-selector */ Button} {} `;", + code: "import styled from 'styled-components';\nexport default styled.div`${Button} {}`;", }, ], diff --git a/package-lock.json b/package-lock.json index 50e1ef79a0..8e996361e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -88,6 +88,7 @@ "postcss-less": "^6.0.0", "postcss-sass": "^0.5.0", "postcss-scss": "^4.0.6", + "postcss-styled-syntax": "^0.1.0", "remark-cli": "^11.0.0", "sugarss": "^4.0.1", "typescript": "^4.9.4" @@ -4596,6 +4597,12 @@ "node": ">=4.0" } }, + "node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true + }, "node_modules/esutils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", @@ -10769,6 +10776,76 @@ "node": ">=4" } }, + "node_modules/postcss-styled-syntax": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/postcss-styled-syntax/-/postcss-styled-syntax-0.1.0.tgz", + "integrity": "sha512-r7t5YnAOH10wb7HvDR9foC0hffbSBmBKZ8qb0IJBz1Mz3jABnpbxCkJ4ZH/aXG4a93mu2/w1jttR6mKr2uNpXg==", + "dev": true, + "dependencies": { + "@typescript-eslint/typescript-estree": "^5.47.0", + "estree-walker": "^2.0.2" + }, + "peerDependencies": { + "postcss": "^8.4.20" + } + }, + "node_modules/postcss-styled-syntax/node_modules/@typescript-eslint/types": { + "version": "5.48.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.48.0.tgz", + "integrity": "sha512-UTe67B0Ypius0fnEE518NB2N8gGutIlTojeTg4nt0GQvikReVkurqxd2LvYa9q9M5MQ6rtpNyWTBxdscw40Xhw==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/postcss-styled-syntax/node_modules/@typescript-eslint/typescript-estree": { + "version": "5.48.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.48.0.tgz", + "integrity": "sha512-7pjd94vvIjI1zTz6aq/5wwE/YrfIyEPLtGJmRfyNR9NYIW+rOvzzUv3Cmq2hRKpvt6e9vpvPUQ7puzX7VSmsEw==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "5.48.0", + "@typescript-eslint/visitor-keys": "5.48.0", + "debug": "^4.3.4", + "globby": "^11.1.0", + "is-glob": "^4.0.3", + "semver": "^7.3.7", + "tsutils": "^3.21.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/postcss-styled-syntax/node_modules/@typescript-eslint/visitor-keys": { + "version": "5.48.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.48.0.tgz", + "integrity": "sha512-5motVPz5EgxQ0bHjut3chzBkJ3Z3sheYVcSwS5BpHZpLqSptSmELNtGixmgj65+rIfhvtQTz5i9OP2vtzdDH7Q==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "5.48.0", + "eslint-visitor-keys": "^3.3.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", @@ -17545,6 +17622,12 @@ "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", "dev": true }, + "estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true + }, "esutils": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", @@ -21968,6 +22051,49 @@ "util-deprecate": "^1.0.2" } }, + "postcss-styled-syntax": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/postcss-styled-syntax/-/postcss-styled-syntax-0.1.0.tgz", + "integrity": "sha512-r7t5YnAOH10wb7HvDR9foC0hffbSBmBKZ8qb0IJBz1Mz3jABnpbxCkJ4ZH/aXG4a93mu2/w1jttR6mKr2uNpXg==", + "dev": true, + "requires": { + "@typescript-eslint/typescript-estree": "^5.47.0", + "estree-walker": "^2.0.2" + }, + "dependencies": { + "@typescript-eslint/types": { + "version": "5.48.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.48.0.tgz", + "integrity": "sha512-UTe67B0Ypius0fnEE518NB2N8gGutIlTojeTg4nt0GQvikReVkurqxd2LvYa9q9M5MQ6rtpNyWTBxdscw40Xhw==", + "dev": true + }, + "@typescript-eslint/typescript-estree": { + "version": "5.48.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.48.0.tgz", + "integrity": "sha512-7pjd94vvIjI1zTz6aq/5wwE/YrfIyEPLtGJmRfyNR9NYIW+rOvzzUv3Cmq2hRKpvt6e9vpvPUQ7puzX7VSmsEw==", + "dev": true, + "requires": { + "@typescript-eslint/types": "5.48.0", + "@typescript-eslint/visitor-keys": "5.48.0", + "debug": "^4.3.4", + "globby": "^11.1.0", + "is-glob": "^4.0.3", + "semver": "^7.3.7", + "tsutils": "^3.21.0" + } + }, + "@typescript-eslint/visitor-keys": { + "version": "5.48.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.48.0.tgz", + "integrity": "sha512-5motVPz5EgxQ0bHjut3chzBkJ3Z3sheYVcSwS5BpHZpLqSptSmELNtGixmgj65+rIfhvtQTz5i9OP2vtzdDH7Q==", + "dev": true, + "requires": { + "@typescript-eslint/types": "5.48.0", + "eslint-visitor-keys": "^3.3.0" + } + } + } + }, "postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", diff --git a/package.json b/package.json index 3ef1f083b5..feacc318b8 100644 --- a/package.json +++ b/package.json @@ -187,6 +187,7 @@ "postcss-less": "^6.0.0", "postcss-sass": "^0.5.0", "postcss-scss": "^4.0.6", + "postcss-styled-syntax": "^0.1.0", "remark-cli": "^11.0.0", "sugarss": "^4.0.1", "typescript": "^4.9.4" From 0f98378fa99f40fe2d6659f3bcd94d4a58943f6e Mon Sep 17 00:00:00 2001 From: Aleks Hudochenkov Date: Thu, 5 Jan 2023 01:47:39 +0100 Subject: [PATCH 3/6] Make sure isStandardSyntaxDeclaration doesn't ignore CSS-in-JS when not necessary --- .../property-no-unknown/__tests__/index.js | 29 +++---------------- lib/utils/isStandardSyntaxDeclaration.js | 4 +++ 2 files changed, 8 insertions(+), 25 deletions(-) diff --git a/lib/rules/property-no-unknown/__tests__/index.js b/lib/rules/property-no-unknown/__tests__/index.js index 62736625b1..3fbc2b0801 100644 --- a/lib/rules/property-no-unknown/__tests__/index.js +++ b/lib/rules/property-no-unknown/__tests__/index.js @@ -285,31 +285,21 @@ testRule({ }); testRule({ - skip: true, ruleName, config: [true], - customSyntax: 'postcss-css-in-js', + customSyntax: 'postcss-styled-syntax', accept: [ { - code: "import styled from 'styled-components';\nexport default styled.div` ${/* sc-prop */ something}: papayawhip; `;", + code: "import styled from 'styled-components';\nexport default styled.div`${something}: papayawhip; `;", }, { - code: "import styled from 'styled-components';\nexport default styled.div` margin-${/* sc-custom 'left' */ rtlSwitch}: 12.5px; `;", + only: true, + code: "import styled from 'styled-components';\nexport default styled.div`margin-${rtlSwitch}: 12px;`;", }, { code: 'const Component = styled.a`\n\t${rule}: 1;\n`', }, - { - code: ` - import glm from 'glamorous'; - const Component = glm.a({ - overflowX: 'auto', - overflowWrap: 'auto', - flexDirection: 'row', - }); - `, - }, ], reject: [ @@ -331,17 +321,6 @@ testRule({ line: 2, column: 2, }, - { - code: ` - import glm from 'glamorous'; - const Component = glm.a({ - overflwX: 'auto', - }); - `, - message: messages.rejected('overflw-x'), - line: 4, - column: 12, - }, ], }); diff --git a/lib/utils/isStandardSyntaxDeclaration.js b/lib/utils/isStandardSyntaxDeclaration.js index 2f1f8b5787..b4b0c7c7ff 100644 --- a/lib/utils/isStandardSyntaxDeclaration.js +++ b/lib/utils/isStandardSyntaxDeclaration.js @@ -7,6 +7,10 @@ const { isRoot, isRule } = require('./typeGuards'); * @param {string} [lang] */ function isStandardSyntaxLang(lang) { + if (!lang) { + return true; + } + return lang && (lang === 'css' || lang === 'custom-template' || lang === 'template-literal'); } From 2a3e8d3278e5cf4dd8f6015c632322f9149e21cb Mon Sep 17 00:00:00 2001 From: Aleks Hudochenkov Date: Fri, 6 Jan 2023 15:41:24 +0100 Subject: [PATCH 4/6] Revert "Suggest postcss-styled-syntax instead of @stylelint/postcss-css-in-js" This reverts commit 219dac59508e17a2ab5e0ebabdc3b72d2a21daf2. --- lib/getPostcssResult.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/getPostcssResult.js b/lib/getPostcssResult.js index 6e188ddda5..2c4f1aff57 100644 --- a/lib/getPostcssResult.js +++ b/lib/getPostcssResult.js @@ -120,16 +120,16 @@ function getCustomSyntax(customSyntax, basedir) { /** @type {{ [key: string]: string }} */ const previouslyInferredExtensions = { html: 'postcss-html', - js: 'postcss-styled-syntax', - jsx: 'postcss-styled-syntax', + js: '@stylelint/postcss-css-in-js', + jsx: '@stylelint/postcss-css-in-js', less: 'postcss-less', md: 'postcss-markdown', sass: 'postcss-sass', sss: 'sugarss', scss: 'postcss-scss', svelte: 'postcss-html', - ts: 'postcss-styled-syntax', - tsx: 'postcss-styled-syntax', + ts: '@stylelint/postcss-css-in-js', + tsx: '@stylelint/postcss-css-in-js', vue: 'postcss-html', xml: 'postcss-html', xst: 'postcss-html', From 2bff65a32b0ae63252ad4ee68c4d546aacaad263 Mon Sep 17 00:00:00 2001 From: Aleks Hudochenkov Date: Fri, 6 Jan 2023 15:56:59 +0100 Subject: [PATCH 5/6] Bump version --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index c1bd500607..f48dbef113 100644 --- a/package-lock.json +++ b/package-lock.json @@ -91,7 +91,7 @@ "postcss-less": "^6.0.0", "postcss-sass": "^0.5.0", "postcss-scss": "^4.0.6", - "postcss-styled-syntax": "^0.1.0", + "postcss-styled-syntax": "^0.2.0", "remark-cli": "^11.0.0", "sugarss": "^4.0.1", "typescript": "^4.9.4" @@ -10823,9 +10823,9 @@ } }, "node_modules/postcss-styled-syntax": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/postcss-styled-syntax/-/postcss-styled-syntax-0.1.0.tgz", - "integrity": "sha512-r7t5YnAOH10wb7HvDR9foC0hffbSBmBKZ8qb0IJBz1Mz3jABnpbxCkJ4ZH/aXG4a93mu2/w1jttR6mKr2uNpXg==", + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/postcss-styled-syntax/-/postcss-styled-syntax-0.2.0.tgz", + "integrity": "sha512-DSjmb0gzivkn7iF8sB54T+FKSDKMM7afwFvmdiYP5CBXtxfukh/jq/J2DtEbaHZlnHe0eY/bkfK/8jICg4GJ0Q==", "dev": true, "dependencies": { "@typescript-eslint/typescript-estree": "^5.47.0", @@ -22115,9 +22115,9 @@ } }, "postcss-styled-syntax": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/postcss-styled-syntax/-/postcss-styled-syntax-0.1.0.tgz", - "integrity": "sha512-r7t5YnAOH10wb7HvDR9foC0hffbSBmBKZ8qb0IJBz1Mz3jABnpbxCkJ4ZH/aXG4a93mu2/w1jttR6mKr2uNpXg==", + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/postcss-styled-syntax/-/postcss-styled-syntax-0.2.0.tgz", + "integrity": "sha512-DSjmb0gzivkn7iF8sB54T+FKSDKMM7afwFvmdiYP5CBXtxfukh/jq/J2DtEbaHZlnHe0eY/bkfK/8jICg4GJ0Q==", "dev": true, "requires": { "@typescript-eslint/typescript-estree": "^5.47.0", diff --git a/package.json b/package.json index af704f6c78..69e0f1bcc1 100644 --- a/package.json +++ b/package.json @@ -190,7 +190,7 @@ "postcss-less": "^6.0.0", "postcss-sass": "^0.5.0", "postcss-scss": "^4.0.6", - "postcss-styled-syntax": "^0.1.0", + "postcss-styled-syntax": "^0.2.0", "remark-cli": "^11.0.0", "sugarss": "^4.0.1", "typescript": "^4.9.4" From 1641cb7839278dbbeee65be34aa1d2cc292cceff Mon Sep 17 00:00:00 2001 From: Aleks Hudochenkov Date: Sun, 8 Jan 2023 20:03:42 +0100 Subject: [PATCH 6/6] Bump version --- package-lock.json | 28 ++++++++++++++-------------- package.json | 2 +- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index f48dbef113..21c80cdb76 100644 --- a/package-lock.json +++ b/package-lock.json @@ -91,7 +91,7 @@ "postcss-less": "^6.0.0", "postcss-sass": "^0.5.0", "postcss-scss": "^4.0.6", - "postcss-styled-syntax": "^0.2.0", + "postcss-styled-syntax": "^0.3.0", "remark-cli": "^11.0.0", "sugarss": "^4.0.1", "typescript": "^4.9.4" @@ -10678,9 +10678,9 @@ } }, "node_modules/postcss": { - "version": "8.4.20", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz", - "integrity": "sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==", + "version": "8.4.21", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz", + "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==", "funding": [ { "type": "opencollective", @@ -10823,16 +10823,16 @@ } }, "node_modules/postcss-styled-syntax": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/postcss-styled-syntax/-/postcss-styled-syntax-0.2.0.tgz", - "integrity": "sha512-DSjmb0gzivkn7iF8sB54T+FKSDKMM7afwFvmdiYP5CBXtxfukh/jq/J2DtEbaHZlnHe0eY/bkfK/8jICg4GJ0Q==", + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/postcss-styled-syntax/-/postcss-styled-syntax-0.3.0.tgz", + "integrity": "sha512-cEaPCuacp15PqHpL1GTlukhr2G8+xO+tqIHsdyKXu5yqTaLQ0GLMTBp6rAZv0wKz7PyEKggjZ5v7pEhUIdw0tw==", "dev": true, "dependencies": { "@typescript-eslint/typescript-estree": "^5.47.0", "estree-walker": "^2.0.2" }, "peerDependencies": { - "postcss": "^8.4.20" + "postcss": "^8.4.21" } }, "node_modules/postcss-styled-syntax/node_modules/@typescript-eslint/types": { @@ -22025,9 +22025,9 @@ "dev": true }, "postcss": { - "version": "8.4.20", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz", - "integrity": "sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==", + "version": "8.4.21", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz", + "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==", "requires": { "nanoid": "^3.3.4", "picocolors": "^1.0.0", @@ -22115,9 +22115,9 @@ } }, "postcss-styled-syntax": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/postcss-styled-syntax/-/postcss-styled-syntax-0.2.0.tgz", - "integrity": "sha512-DSjmb0gzivkn7iF8sB54T+FKSDKMM7afwFvmdiYP5CBXtxfukh/jq/J2DtEbaHZlnHe0eY/bkfK/8jICg4GJ0Q==", + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/postcss-styled-syntax/-/postcss-styled-syntax-0.3.0.tgz", + "integrity": "sha512-cEaPCuacp15PqHpL1GTlukhr2G8+xO+tqIHsdyKXu5yqTaLQ0GLMTBp6rAZv0wKz7PyEKggjZ5v7pEhUIdw0tw==", "dev": true, "requires": { "@typescript-eslint/typescript-estree": "^5.47.0", diff --git a/package.json b/package.json index 69e0f1bcc1..73e9d2c197 100644 --- a/package.json +++ b/package.json @@ -190,7 +190,7 @@ "postcss-less": "^6.0.0", "postcss-sass": "^0.5.0", "postcss-scss": "^4.0.6", - "postcss-styled-syntax": "^0.2.0", + "postcss-styled-syntax": "^0.3.0", "remark-cli": "^11.0.0", "sugarss": "^4.0.1", "typescript": "^4.9.4"