Do you know of a solution to fix the Stylelint error regarding semicolons when using CSS variables?

  • React.js
  • Css in JS(Emotion)

The components above are part of this setup.

Here is the configuration for Stylelint:

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,
  },
};

The CSS styles are defined as follows:

import emotionReset from "emotion-reset";

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

An error message appears regarding ${emotionReset};.

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

Error

Is there a solution to fix this error?
Although the error shows, the CSS still functions properly.

I attempted to disable no-extra-semicolons to resolve the issue, but it seems there is no option provided for disabling it.
no-extra-semicolons · stylelint

javascriptcssreactjsstylelintscss-lint

Answer №1

This warning appears to be valid and can be resolved by deleting the semicolon from the highlighted line.

Instead of:

  ${emotionReset};

use:

  ${emotionReset}

Although you will still see the error message, your CSS code should function correctly.

Having an extra semicolon is not likely to cause issues with your CSS. However, it serves no purpose and removing it is a safe practice.

I tried disabling the rule for extra semicolons, but there doesn't seem to be an option available for that.

To disable a specific rule, you can use null. Refer to stylelint's configuration documentation for more information.

Answer №2

My opinion is that this guideline should suit your needs

"avoid-unecessary-semicolons": [
 null,
  {
    "alert": "There is an extra semi-colon present."
  }
],

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to split strings in an input field?

My task is to create a form with an input field and a dropdown list containing options for Checkbox and Radio. The user should enter text in the input field and select a type from the dropdown. For example: Input field: One, Two, Three Radio The expecte ...

javascripthtmlstringinput

Error message: React Native encountered a prop type failure when an invalid prop of type array was passed to the Overlay component

I am brand new to React Native and encountering an error message when opening a specific component. Although it doesn't hinder navigation, I would like to resolve this issue. I suspect it could be related to a syntax or typo error, but pinpointing the ...

javascriptreactjsreact-nativecomponents

Complete Search with the press of Enter on the Auto Textbox

I have implemented an Ajax auto complete extender on a TextBox control. As the user begins typing, suggestive options are displayed below the input field based on data retrieved from a webservice call. When OnClientItemSelected="GetCode" is triggered, the ...

c#javascriptjqueryasp.netajaxcontroltoolkit

The dropdown menu for `react-google-autocomplete` does not appear when used with an MUI

Currently, I am attempting to create an Address form dialog using the Google Places API. The issue arises when I utilize the react-google-autocomplete's usePlacesWidget along with MUI TextField in a Material UI Dialog. The dropdown menu for Google Pl ...

reactjsmaterial-uidialogreact-google-autocomplete

Display the element only when the request sent with getJSON exceeds a certain threshold of time in milliseconds

Here's a snippet of my JavaScript code: surveyBusy.show(); $.getJSON(apiUrl + '/' + id) .done(function (data) { ... surveyBusy.hide(); }) .fail(function (jqXHR, textStatus, err) { ... surveyBusy. ...

javascriptjqueryhtmlajax

Tips for leveraging async and await within actions on google and API integration

Currently, I am developing an Actions on Google project that utilizes an API. To handle the API calls, I am using request promise for implementation. Upon testing the API call, I observed that it takes approximately 0.5 seconds to retrieve the data. Theref ...

javascriptnode.jsasync-awaitactions-on-google

What is the most effective way to bring in "server-side only" code in Next.js?

I am currently working on my index page's getServerSideProps function and I want to utilize a function called foo, which is imported from another local file. This function relies on a specific Node library that cannot be executed in the browser becaus ...

javascriptnode.jsnext.jsisomorphic-javascript

Creating a Dropdown list using Javascript

I am currently working on implementing inline CRUD operations in MVC 5. When a user clicks a specific button to add new records, it should create a dynamic table row. Below is the JavaScript code I am using: function tblnewrow() { var newrow = ' ...

javascriptc#asp.net-mvc

Linking functions as needed

I apologize for the not-so-great title of this question. Basically, I have a library that generates users with predetermined capabilities. Currently, it involves creating a new user instance and calling asynchronous methods like: var User = require(...).U ...

javascriptnode.jsasynchronous

The Ultimate Guide to Initializing Variables in UI Router State Access

In my application, I have defined 2 states. One is "tickets" which matches /tickets ... $stateProvider // defines the states of my application .state("tickets", { // assigns properties to each state url: "/tickets", // route templateUrl: "m ...

javascriptangularjsangular-ui-router

Struggling with the addition of the 'Other' option in React manually. Any tips or suggestions?

I've encountered a slight issue regarding the functionality of my React Component below. Specifically, I want users to have the ability to enter a poll category that is not listed in the select component options by using an input field. This scenario ...

javascriptreactjs

What is the process for dynamically declaring a variable within the data function in Vue.js?

Looking for a solution where I can have the ability to dynamically add input fields to a form. Currently, my form consists of three input fields - name, email, and phone. However, I would like users to be able to add more input fields as needed. In order t ...

javascriptformsvue.js

jQuery struggles to process large response

I am currently developing an application that sends requests to a URL and parses the table found in the HTML response using jQuery. While this method works well for smaller amounts of HTML code, it runs into issues with larger datasets. The problem arises ...

javascripthtmljquery

The member 'email' is not found in the promise type 'KindeUser | null'

I'm currently developing a chat feature that includes PDF document integration, using '@kinde-oss/kinde-auth-nextjs/server' for authentication. When trying to retrieve the 'email' property from the user object obtained through &apo ...

javascriptreactjstypescriptauthenticationnext.js

Differentiating font sizes for headings (h1-h6) based on Bootstrap breakpoints

Is there a way to utilize bootstrap's font size breakpoints (sm, md, lg, xl, etc.) for the various font sizes provided by bootstrap: <p class="fs-1">.fs-1 text</p> <p class="fs-2">.fs-2 text</p> <p class= ...

htmlcssbootstrap-5

Visual Studio 2017 experiencing compatibility issues with Bootstrap

I've been working on creating a carousel using bootstrap within Visual Studio 2017. I utilized the NuGet package manager to install jQuery and Bootstrap, and to test its functionality, I generated a bootstrap snippet for the carousel. Take a look at ...

htmlcssbootstrap-4visual-studio-2017

How can the first character position be reached by moving the cursor using the jquery mask plugin?

I have done a lot of research but couldn't find the exact same question with a satisfactory answer. Therefore, I decided to ask a more specific question. I am using the Jquery mask plugin and I want my cursor to always be at the beginning of the textb ...

javascriptc#asp.netjquery-pluginsjquery-mask

Is it common for Google Chrome console snapshots to have a prolonged idle time?

I noticed in Google Chrome console snapshot that my JavaScript code has a long "Idle" time. I'm not sure if this is normal. Attached is a screenshot for reference: https://i.stack.imgur.com/k0mkp.png Could this extended "Idle" time be attributed to ...

javascriptjqueryajaxgoogle-chromeconsole

Acquire the S3 URL link for the uploaded file upon completion of the file upload process

Is there a way to securely upload and generate a public Amazon S3 URL for a PDF file when a user clicks on a specific link? I'd like to avoid exposing the actual link to the user by uploading it to S3. Here's a sample code snippet: module.expo ...

javascriptnode.jsamazon-web-servicesamazon-s3

JavaScript Routing with Multiple Files

I tried to access api.js from Routes.js, but I encountered an issue stating that the function my_function_in_api is not defined. Here is my code, could you please help me identify where the problem lies: Routes.js var val = require('file name') ...

javascriptangularjsjs-routes