new `stylelint` support. #686

gucong3000 · 2018-05-29T06:35:16Z

I am working on stylelint and postcss that support emotion.
I need more testing and feedback. Can someone help me?
All you need to do is just install postcss-jsx

npm install --save-dev stylelint/stylelint postcss-jsx
stylelint **/*.{js,jsx,css}

processors and syntax must remove from .stylelintrc and CLI

The text was updated successfully, but these errors were encountered:

ai · 2018-06-02T10:40:31Z

import styled from 'emotion'

const Container = styled('div')({
  position: 'relative',
  fontSize: 13,
  fontWeight: 'bold',
  lineHeight: '30px',
  color: 'white',
  textAlign: 'center',
  cursor: 'default',
  backgroundColor: 'gray',
  borderRadius: 15,
  size: 30,
  marginTop: 10,
  margin: '0 auto'
})

const Avatar = () => {
  return h(Container)
}

export default Avatar

{
  "extends": [
    "stylelint-config-standard"
  ]
}

➤ npm ls | grep stylelint
├─┬ [email protected]
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected]
├── [email protected]
├─┬ [email protected]
├─┬ [email protected]

➤ npm ls | grep postcss-jsx
├─┬ [email protected]

➤ n stylelint components/avatar.js
TypeError: this[node.type] is not a function
    at Stringifier.stringify (/home/ai/Dev/amplifr-front/node_modules/postcss/lib/stringifier.js:33:24)
    at stringify (/home/ai/Dev/amplifr-front/node_modules/postcss/lib/stringify.js:14:9)
    at Obj.toString (/home/ai/Dev/amplifr-front/node_modules/postcss/lib/node.js:195:9)
    at module.exports (/home/ai/Dev/amplifr-front/node_modules/stylelint/lib/utils/rawNodeString.js:12:18)
    at module.exports (/home/ai/Dev/amplifr-front/node_modules/stylelint/lib/utils/blockString.js:22:10)
    at root.walkDecls.decl (/home/ai/Dev/amplifr-front/node_modules/stylelint/lib/rules/declaration-block-semicolon-newline-after/index.js:54:23)
    at /home/ai/Dev/amplifr-front/node_modules/postcss/lib/container.js:188:28
    at /home/ai/Dev/amplifr-front/node_modules/postcss/lib/container.js:144:26
    at Obj.each (/home/ai/Dev/amplifr-front/node_modules/postcss/lib/container.js:110:22)
    at Obj.walk (/home/ai/Dev/amplifr-front/node_modules/postcss/lib/container.js:143:21)

ai · 2018-06-02T10:42:03Z

import styled from 'stylelint'

const Container = styled.div`
  position: relative;
  font-size: 13px;
  font-weight: bold;
  line-height: 30px;
  color: white;
  text-align: center;
  cursor: default;
  background-color: gray;
  border-radius: 15px;
  size: 30px;
  margin-top: 10px;
  margin: 0 auto;
`

const Avatar = () => {
  return h(Container)
}

export default Avatar

➤ n stylelint components/avatar.js

No error, margin overriding margin-top error was missed

ai · 2018-06-02T10:43:04Z

import styled from 'stylelint'

const Container = styled.div`
  position: relative;
  font-size: 13px;
  font-weight: bold;
  line-height: 30px;
  color: white;
  text-align: center;
  cursor: default;
  background-color: gray;
  border-radius: 15px;
  size: 30px;
  margin-top: 10px;
  margin: 0 auto;
`

const Avatar = () => {
  return h(Container)
}

export default Avatar

{
  "processors": ["stylelint-processor-styled-components"],
  "extends": [
    "stylelint-config-standard"
  ]
}

➤ n stylelint components/avatar.js

components/avatar.js
 15:3  ✖  Unexpected          declaration-block-no-shorthand-property-overrides
          shorthand "margin"                                                   
          after "margin-top"

stale · 2018-08-07T06:07:12Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

ai · 2018-08-07T14:13:47Z

@Andarist what do you think?

Andarist · 2018-08-07T15:18:18Z

the idea is good, im totally out of the loop here though, not knowing this tool etc and cant evaluate it right now

also - what's this issue about? adding this to the docs?

ai · 2018-08-07T15:19:02Z

Yeap. Adding it to docs.

Andarist · 2018-08-07T15:20:40Z

Somebody would have to create a PR for this - preferably to some ecosystem/community-like page 😉 I think it should get merged in without much hesitation on our side.

ai · 2018-08-07T15:21:14Z

@gucong3000 will you send a PR?

gucong3000 · 2018-08-13T03:13:23Z

#800

stale · 2018-10-12T03:50:47Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

ai · 2018-10-12T15:39:26Z

Instead of working with issues, you created a bot which says “we don’t care” for you. Not good feedback for users and contributors.

ai · 2018-10-12T15:39:45Z

The PR is merged, just close the issue.

Ailrun · 2018-10-12T17:10:57Z

Close this by #800.

ilias-t · 2019-06-12T01:21:43Z

Not sure how #800 fixes this issue. It's just a reference to use stylelint. Tried adding postcss-jsx and also linting javascript files like @gucong3000's initial example, but it's not catching issues. There doesn't seem to be any documentation on the recommended way to lint emotion aside from the not very helpful reference to stylelint. Am I missing something?

ilias-t · 2019-06-12T01:38:54Z

FYI ended up getting it working with the above advice:

In .stylelintrc use "stylelint-processor-styled-components" as processor & extend with "stylelint-config-styled-components" (does anyone else find it odd to use a different library's lint config?)
Install postcss-jsx & run stylelint

HOWEVER in my case I wanted to lint both css and tsx and found that stylelint **/*.{css,tsx} did not work while stylelint **/*.tsx && stylelint **/*.css did. Not sure why that's the case... Curious if anyone else is able to repro.

Sawtaytoes · 2021-08-11T04:54:30Z

@ilias-t Have you tried using parens instead?

stylelint **/*.(css|tsx)

When running StylelintWepackPlugin, this is what I'm using:

'**/*.(js|jsx)'

Nantris · 2021-09-06T18:59:36Z

Anyone able to get this working these days with [email protected]? We get "Unknown word CssSyntaxError" all over the place unfortunately - it seems mostly due to comments, but sometimes the line/column numbers don't exactly match where I'd expected, so I'm not entirely sure.

Edit: Hm.. definitely related to // style comments, but some // comments work fine, so I'm not sure.

The discrepancy in lines is due to this though:

const a = 1;
const b = 2;

const tweaks = css`
  color: white; // some comment
                ^--- Error at 2:17, because line 1, as reported by stylelint, is the first line of the template literal 

  && {
    padding: 36px;
  }
`;

kelly-tock · 2022-05-26T20:36:24Z

@slapbox I get the same issue. gonna try the comment about styled components

kelly-tock · 2022-05-26T21:22:00Z

there should be some docs on this :)

karlhorky · 2022-11-20T14:52:02Z

There are more details over here: styled-components/styled-components#3607 (comment)

Our config, which we use for linting CSS in .css files, Emotion in .js and .tsx files:

stylelint.config.cjs

/** @type { import('stylelint').Config } */
const config = {
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-styled-components',
    'stylelint-config-prettier',
  ],
  rules: {
    'no-descending-specificity': null,
  },
  overrides: [
    {
      files: [
        '**/*.js',
        '**/*.cjs',
        '**/*.mjs',
        '**/*.jsx',
        '**/*.ts',
        '**/*.tsx',
      ],
      processors: ['stylelint-processor-styled-components'],
      customSyntax: 'postcss-scss',
    },
  ],
};

module.exports = config;

https://github.com/upleveled/eslint-config-upleveled/blob/main/templates/stylelint.config.cjs

It mostly works - at least better than nothing.

As soon as either Emotion or Styled Components can provide an updated solution (eg. a customSyntax) for Stylelint v14, we will gladly switch to that.

This was referenced May 29, 2018

Deprecate glamorous 💄 in favor of emotion 👩‍🎤 paypal/glamorous#419

Closed

Add Using with Stylelint section #185

Closed

gucong3000 mentioned this issue Jun 4, 2018

TypeError: this[node.type] is not a function gucong3000/postcss-syntax#23

Closed

Ailrun added discussion labels Jun 8, 2018

This was referenced Jun 9, 2018

Fix false positives on non-standard syntax in declaration-block-no-* stylelint/stylelint#3380

Closed

Fix false positives on non-standard syntax in declaration-block-no-* stylelint/stylelint#3381

Merged

stale bot added the stale label Aug 7, 2018

stale bot removed the stale label Aug 7, 2018

gucong3000 mentioned this issue Aug 13, 2018

Add link of stylelint #800

Merged

3 tasks

stale bot added the stale label Oct 12, 2018

stale bot removed the stale label Oct 12, 2018

Ailrun closed this as completed Oct 12, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

new `stylelint` support. #686

new `stylelint` support. #686

gucong3000 commented May 29, 2018 •

edited

Loading

ai commented Jun 2, 2018

ai commented Jun 2, 2018 •

edited

Loading

ai commented Jun 2, 2018

stale bot commented Aug 7, 2018

ai commented Aug 7, 2018

Andarist commented Aug 7, 2018

ai commented Aug 7, 2018

Andarist commented Aug 7, 2018

ai commented Aug 7, 2018

gucong3000 commented Aug 13, 2018

stale bot commented Oct 12, 2018

ai commented Oct 12, 2018

ai commented Oct 12, 2018

Ailrun commented Oct 12, 2018

ilias-t commented Jun 12, 2019

ilias-t commented Jun 12, 2019

Sawtaytoes commented Aug 11, 2021 •

edited

Loading

Nantris commented Sep 6, 2021 •

edited

Loading

kelly-tock commented May 26, 2022

kelly-tock commented May 26, 2022

karlhorky commented Nov 20, 2022

new stylelint support. #686

new stylelint support. #686

Comments

gucong3000 commented May 29, 2018 • edited Loading

ai commented Jun 2, 2018

ai commented Jun 2, 2018 • edited Loading

ai commented Jun 2, 2018

stale bot commented Aug 7, 2018

ai commented Aug 7, 2018

Andarist commented Aug 7, 2018

ai commented Aug 7, 2018

Andarist commented Aug 7, 2018

ai commented Aug 7, 2018

gucong3000 commented Aug 13, 2018

stale bot commented Oct 12, 2018

ai commented Oct 12, 2018

ai commented Oct 12, 2018

Ailrun commented Oct 12, 2018

ilias-t commented Jun 12, 2019

ilias-t commented Jun 12, 2019

Sawtaytoes commented Aug 11, 2021 • edited Loading

Nantris commented Sep 6, 2021 • edited Loading

kelly-tock commented May 26, 2022

kelly-tock commented May 26, 2022

karlhorky commented Nov 20, 2022

new `stylelint` support. #686

new `stylelint` support. #686

gucong3000 commented May 29, 2018 •

edited

Loading

ai commented Jun 2, 2018 •

edited

Loading

Sawtaytoes commented Aug 11, 2021 •

edited

Loading

Nantris commented Sep 6, 2021 •

edited

Loading