Is there a way to resolve the Stylelint error for semicolons in CSS variables?

Question

• React.js
• Css in JS(Emotion)

It consists of the above.

Stylelint is configured as follows.

module.exports = {
  extends: [
    "stylelint-config-standard",
    "./node_modules/prettier-stylelint/config.js",
  ],
  ignoreFiles: ["**/node_modules/**", "src/styles/**"],
  plugins: ["stylelint-order"],
  rules: {
    "declaration-empty-line-before": "never",
    indentation: 2,
    "no-missing-end-of-source-newline": null,
    "string-quotes": "single",
    "order/properties-alphabetical-order": true,
  },
};

CSS is as follows.

import emotionReset from "emotion-reset";

const globalStyle = css`
  ${emotionReset};
`;

The following error message appears for ${emotionReset};.

Unexpected extra semicolon (no-extra-semicolons)stylelint(no-extra-semicolons)

Error

Is there any way to resolve this error?
By the way, you will see the error, but the CSS is working.

---

I thought that disabling no-extra-semicolons would solve the problem, but there doesn't seem to be an option provided to disable it.
no-extra-semicolons · stylelint

Answer 1

This looks like a valid warning. You should be able to fix it by removing the semicolon from the highlighted line.

Replace:

  ${emotionReset};

with:

  ${emotionReset}

By the way, you will see the error, but the CSS is working.

The extra semicolon generally won't break your CSS. But it doesn't add anything either, so it should be safe to remove it.

I thought that disabling no-extra-semicolons would solve the problem, but there doesn't seem to be an option provided to disable it.

You can use null to disable a rule. See stylelint's configuration docs for more details.