Fix CSS-in-JS problems

[jeddy3]

We have a bunch of CSS-in-JS related problems. I've gathered them here:

• #4119 — Fix autofix for nested tagged template literals
• #4490 — Fix autofix erroneous changes for float property
• #4560 — Fix autofix transforming media queries when no errors
• #4401 — Fix 'cannot parse selector' error for nested HTML elements
• #4247 — Support Vue-emotion syntax
• #4635 — Fix false positives for "always" option in declaration-empty-line-before
• #4655 — Fix false positives for single value within template literal
• #4662 — Fix autofix for variable name matching property name
• #4684 — Fix false positives for rule-set interpolation in selector-max-empty-lines
• #4706 — Fix false positives when importing from module with css in name
• #4761 — Fix false negatives for decorators
• #4732 — Fix false negatives for TypeScript files and Babel config
• #4713 — Fix false positives for negation within interpolation in declaration-bang-space-before
• #4919 — Fix false positives for jQuery CSS function in value-keyword-case
• #5185 — Fix false positives for JS variables in value-keyword-case
• #5235 — Fix false positives for attrs in property-no-unknown
• #5229 — Fix false negatives for babel with preset "react-app"

Template literal interpolations:

• #4140 — Fix false positives for array literal expressions
• #4728 — Fix false positives for nested literals in unit-no-unknown
• #4953 — False positives for interpolations in CSS-in-JS
• #4987 — Fix false positives for template literal interpolations in media-feature-name-no-unknown
• #5051 — Fix autofix for switch statements within literals
• #5200 — Fix false positives for interpolation in font-family-no-duplicate-names

We recently forked the parser we use for CSS-in-JS into the stylelint organisation. We can fix all the above issues by patching and maintaining this fork.

These issues are, along with the glob issues and the one for disable comments, our most pressing ones right now. They all prevent people from using stylelint completely.

If you can help us fix our fork of the parser, please add a comment below!

[jeddy3]

As of stylelint@13.3.1 we now use our fork of the CSS-in-JS parser, making it easier for us to roll-out any fixes to the parser that address the issues above. If you can help us fix our fork, please dive in!

[abdonrd]

Probably related: #4800

[rowa-audil]

Hey stylelint Team, any plans for #4713?

[Nantris]

Is there any work ongoing on the forked parser? (https://github.com/stylelint/postcss-css-in-js)

[hudochenkov]

@slapbox non that we aware of. In the next major version v14 we're going remove it from stylelint.

I started working on another CSS-in-JS syntax, which would be possible to use with stylelint.

[jeddy3]

For context, the issues with the existing syntax are:

• it relies on postcss-syntax, which monkey-patches PostCSS@7
• it's monolithic; trying to support every CSS-in-JS flavour under the sun, of which there are hundreds (list of just the 10 newest/most popular)
• the original author is no longer active on GitHub

Thanks to @hudochenkov, we now have a Document node type in PostCSS@8.

Summary of the plan for 14.0.0:

• remove the syntax option in favour of customSyntax
• add an overrides property to the configuration object to aid the use of customSyntax
• encourage the community to write custom PostCSS syntaxes that focus on a single CSS-in-JS library and make use of the Document node type

A lot has already been done for 14.0.0, including a chunk of refactoring. Importantly, the v14 branch has already been migrated to PostCSS@8, and the customSyntax option is ready to use as a CLI flag.

@slapbox If you, or anyone else, would like to help us get 14.0.0 ready for release, please help with the remaining tasks. In particular:

• adding the customSyntax and overrides properties to the configuration object
• migrating postcss-html and postcss-markdown to PostCSS@8 (and the new Document node type)

Once @hudochenkov's reference syntax is ready, we can start encouraging the community to work on syntaxes for their CSS-in-JS library of choice.

[heath-freenome]

@slapbox non that we aware of. In the next major version v14 we're going remove it from stylelint.

I started working on another CSS-in-JS syntax, which would be possible to use with stylelint.

@hudochenkov So I'm migrating to stylelint 14 and all my styles are in .js files (using the Material-ui 4 JSS syntax). Using the customSyntax @stylelint/postcss-css-in-js doesn't seem to pick up any of the rules I have for my styles... will yours
work?

[Lornz-]

@slapbox non that we aware of. In the next major version v14 we're going remove it from stylelint.
I started working on another CSS-in-JS syntax, which would be possible to use with stylelint.

@hudochenkov So I'm migrating to stylelint 14 and all my styles are in .js files (using the Material-ui 4 JSS syntax). Using the customSyntax @stylelint/postcss-css-in-js doesn't seem to pick up any of the rules I have for my styles... will yours work?

Same issue here. I only get it worked from the command line. I use styled-components in one of my projects and the code is not highlighted on error in vscode. It seems like the vscode extension can't see the rules in my config file. I also combine stylelint with prettier by using the stylelint-prettier plugin.

I followed steps as described here with my own setup:

package.json

{
  "scripts": {
    // other scripts omitted for brevity
   "lint:style": "npx stylelint \"**/*.{css,jsx,js}\"",
  },
  "dependencies": {
    // other deps omitted for brevity
    "styled-components": "^5.3.0",
  },
  "devDependencies": {
    // other deps omitted for brevity
    "@stylelint/postcss-css-in-js": "^0.37.2",
    "postcss": "^8.4.5",
    "postcss-syntax": "^0.36.2",
    "stylelint": "^14.2.0",
    "stylelint-a11y": "^1.2.3",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-rational-order": "^0.1.2",
    "stylelint-config-recommended": "^6.0.0",
    "stylelint-config-standard": "^24.0.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-high-performance-animation": "^1.5.1",
    "stylelint-no-unsupported-browser-features": "^5.0.2",
    "stylelint-order": "^5.0.0",
    "stylelint-prettier": "^2.0.0",
  },
}

.stylelintrc.js

module.exports = {
  plugins: [
    'stylelint-a11y',
    'stylelint-config-rational-order/plugin',
    'stylelint-high-performance-animation',
    'stylelint-no-unsupported-browser-features',
    'stylelint-order',
    'stylelint-prettier',
  ],
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recommended',
    'stylelint-config-rational-order',
    'stylelint-a11y/recommended',
    'stylelint-prettier/recommended',
    'stylelint-config-styled-components',
  ],
  overrides: [
    {
      files: ['**/*.{js,jsx}'],
      customSyntax: '@stylelint/postcss-css-in-js',
    },
  ],

Here's also my vscode settings:

{
  // other settings omitted for brevity
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.format.enable": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.formatDocument": true,
    "source.fixAll": true
  },
}

Did someone find a solution for that? Any help would be appreciated.

[puku0x]

@Lornz- I did.

// package.json
"devDependencies": {
  "@babel/core": "7.16.0",  // Do not update babel v7.16.5 or higher (https://github.com/stylelint/postcss-css-in-js/issues/247)
  "@babel/parser": "7.16.0",
  "postcss-jsx": "~0.36.0",  // Do not use stylelint/postcss-css-in-js with decorators (https://github.com/stylelint/postcss-css-in-js/issues/236)
  "postcss-scss": "~4.0.0",
  "postcss-syntax": "~0.36.0",
  "stylelint": "~14.2.0",
  "stylelint-config-prettier": "~9.0.0",
  "stylelint-config-recess-order": "~3.0.0",
  "stylelint-config-recommended": "~6.0.0"
}

// .stylelintrc.json
{
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-recess-order",
    "stylelint-config-prettier"
  ],
  "ignoreFiles": ["node_modules/**", "dist/**"],
  "overrides": [
    {
      "files": ["**/*.scss"],
      "customSyntax": "postcss-scss"
    },
    {
      "files": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"],
      "customSyntax": "postcss-jsx"
    }
  ]
}

// .vscode/settings.json
{
  "css.validate": false,
  "scss.validate": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "stylelint.validate": ["css", "scss", "typescript", "typescriptreact"]  // 👈 Use stylelint for validation
}

[jeddy3]

Closing as the syntax option was removed for the 14.0.0 release. (See the migration guide.)

We'll also be deprecating our forked CSS-in-JS package, in favour of leaner custom syntaxes.

Please consider writing a custom syntax specific to your CSS-in-JS library of choice and addressing there any of the bugs above that are applicable.