Disabling the "Unexpected unknown type" rule in Sonarqube for CSS selectors starting with "pr-"

While analyzing my Angular 7 project with SonarQube's CSS analyzer, I noticed that all references to material2 elements in my SCSS are being flagged as critical bugs.

One example of this is:

Unexpected unknown type selector "mat-form-field"

I am wondering how I can add exceptions for selectors with the "mat-" prefix using the sonar-project.properties file.

I have attempted various approaches based on information found here, but so far I have not been successful in implementing it within a properties file.

My desired configuration would look something like this:

sonar.css.selector-type-no-unknown.ignoreTypes=["/^mat-/"]

Answer №1

When encountering this scenario, StyleLint offers a solution through a specific parameter:

"rules": {
     "selector-type-no-unknown": [true, { "ignoreTypes": ["/^mat-/","/^retrace-/"] }]
  }

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

Next.js is causing me some trouble by adding an unnecessary top margin in my index.js file

I started a new project using next.js by running the command: yarn create next-app However, I noticed that all heading and paragraph tags in my code have default top margins in next.js. index.js import React, { Component } from "react"; import ...

`A problem with HTML element display in Internet Explorer versions 8 and 9 involving <p> and <h2> tags`

While working on my website, I encountered an issue with the way text is being rendered in <p> and <h2>. The footer of my site has three columns, but for some reason the middle column is displaying its <p> text within the <h2> text ...

There seems to be an issue with the functionality of MatSort

I am having an issue with MatSort functionality in my project. The problem I am encountering is that MatSort is only working for the first two rows, despite importing the MatSort module from @angular/material. <mat-table [dataSource]="dataSource" matSo ...

Add an image to a directory with Angular 7

I am having trouble uploading an Image to the assets/ folder using Angular 7. Below is my attempted solution: HTML: <form [formGroup]="form" (ngSubmit)="postData()" class="intro-form-css"> <div class="form-row"> ...

Leveraging SASS for injecting a variable into a mixin where the declaration is in string format

I have been developing a SASS mixin that allows for the input of various variables to construct a font-awesome declaration in the following format: @mixin after-font-awesome($unicode, $size, $margin, $color, $weight) { &:after { content:$unicode ...

Attempting to incorporate text into a CSS Grid

I am currently experimenting with creating a grid layout inspired by a resume design. Essentially, my grid consists of 2 columns - one set to 1 fraction and the other set to 3 fractions. The column with 1fr contains section titles, while the 3fr column h ...

Unable to capture errors during input validation in Angular 6

My form is designed to validate user input to check if it meets minimum length requirements, displaying an alert if it doesn't. While there may be additional validation checks needed in the future, the initial check for minlength is not functioning co ...

The MIME type 'text/plain' is not compatible with JavaScript in the AWS Load Balancer

My angular application is currently running on AWS ECS (EC2 Instance) behind a load balancer. I have noticed that when I access the application using the direct IP address of my EC2 instance, everything loads perfectly without any issues. However, when I t ...

Locate specific phrases within the text and conceal the corresponding lines

I have a JavaScript function that loops through each line. I want it to search for specific text on each line and hide the entire line if it contains that text. For example: <input id="search" type="button" value="Run" /> <textarea id ...

What modifications were implemented in Bootstrap 5 to cause controls to automatically assume their maximum size?

After upgrading NodeJs to version 16.13.0 from 14.x, one of the modules that was updated was bootstrap. This caused me to remove my Jumbotron control due to the upgrade, although I don't believe that is directly related to the issue I am experiencing. ...

There is no available binary for the Chrome browser on your platform within the Docker container

While attempting to run Angular unit tests inside a Docker container, I encountered the following error message: 21 01 2021 01:51:10.057:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited 21 01 2021 01:51:10.063:INFO [launcher]: ...

"Enhance Your Website with a Stunning Background Image Using Twitter Boot

With a fixed navigation bar at the top and a container spanning span12 with full-width background, it is important for the content of the background image to be displayed fully regardless of window size. What would be the most effective way to create or c ...

What is the best way to trim the edge of a container without causing the contents to spill over?

A request has come in from a client asking for a unique image slider that is quadrilateral in shape, but not rectangular. The slider should only occupy half of the page and should not overlap the content on the right side. An example of what is needed can ...

Is it feasible to adjust the width of a character?

Is there a way to determine the width of each character in a text area, either through setting or retrieval? <Field style={{ width: "60ch", height ...

Ways to create a collapsing navigation with a fixed top navbar and scrolling functionality

How can I create a collapsing navigation bar that scrolls with the page using navbar-fixed-top in Bootstrap 4? <!DOCTYPE html> <html lang="en>"> <head> <meta charset="UTF-8"> <title>Document</title> <script src= ...

Assigning IDs to jQuery tabs

My view contains something similar to this: <li><a href="SearchQC.do?mode=view">Add to QC List</a></li> While running, jQuery automatically generates a div with the id ui-tabs-1. How can I modify this ID? UPDATE If the ID remain ...

Troubleshooting CSS Display Problem on Chrome and Firefox

While working on the design of a website offline, everything seemed to be running smoothly. However, upon uploading it to the server, various issues began to arise. Initially, the file loaded correctly upon first visit. Unfortunately, after reloading the ...

Angular 4 Filtering Pipe: Simplify Data Filtering in Angular

Attempting to replicate AngularJS's OrderBy feature. Working with an array like this, I am aiming to filter the cars by their car category. [ { "car_category": 3, "name": "Fusion", "year": "2010" }, { "car_category": 2, "na ...

When CSS animations are used on numerous elements, it can lead to variations in the speed of

I made an animation to move elements from the top to the bottom of a page. I have 4 objects with this animation applied, but for some reason, they are moving at different speeds. It's confusing me. What could be causing this inconsistency? body { ...

Encountering an error when trying to use the Google Picker API with Angular2: Uncaught TypeError - Unable to access property 'handleAuthResult' as it

Currently in the process of integrating the Google Picker API into my application. Following along with the official documentation provided on Google Picker API The google API JS has been included in the index.html page as recommended by the docs. <s ...