Can you point me in the direction of some resources for developing a custom plugin with stylelint?

After visiting the stylelint website and github, I downloaded it locally using npm. The stylelint website suggests using the following format to create my own plugin:

var myPluginRule = stylelint.createPlugin(ruleName, function(primaryOption, secondaryOptionObject) {
  return function(postcssRoot, postcssResult) {
    var validOptions = stylelint.utils.validateOptions(postcssResult, ruleName, { .. })
    if (!validOptions) { return }
    // ... some logic ...
    stylelint.utils.report({ .. })
  }
})

Despite searching through the npm folder for examples, I couldn't find any that follow this format. Does anyone know of a helpful tutorial for creating custom plugins?

Thanks!

Answer №1

After some experimentation, I have successfully discovered a solution.

1) Before you begin:

$ npm init
$ npm install gulp stylelint gulp-style-lint --save-dev

2) Start by creating some scss files in ./scss/myfile.scss

body{background:red;}

3) Now, create ./gulpfile.js

var gulp          = require('gulp');
var gulpStylelint = require('gulp-stylelint');

gulp.task('stylelint',function(){
  return gulp        
    .src('./scss/*.scss')
    .pipe(
      gulpStylelint({
        reporters: [
          {formatter: 'string', console: true}
        ]
      })
    );
})

4) Next, create ./stylelintCustom/index.js

var stylelint = require("stylelint");
var ruleName = "steves/steve1";

var messages = stylelint.utils.ruleMessages(ruleName, {
  rejected: 'steve rejects this',
});

module.exports = stylelint.createPlugin(ruleName, function(max, options) {

    return function(root, result) {     
      // Access the variable for the entire SCSS file below           
      console.log(root.source.input);

      // Apply rules here...
      // Use the reporter to output

    }
});

module.exports.ruleName = ruleName;
module.exports.messages = messages;

Make sure to name ruleName as "plugins/plugin". For example, steves/steverule1 etc.

5) Don't forget to create stylelintCustom/package.json

{
  "name": "stylelint-steves-steve1", 
  "version": "0.0.1",
  "main": "index.js",
  "devDependencies": {
    "stylelint": "~2.6.0"
  },
  "engines": {
    "node": ">=0.10.0"
  }
}

6) Create: stylelint.rc

{
  "plugins": [
    "./stylelintCustom/index.js"
  ],
  "rules": {
    "steves/steve1": true
  }
}

7) Run gulp

$ gulp stylelint

This will output the SCSS so you can implement any necessary JS or regex functions.

Answer №2

If you want to understand the functionality of the current rules in stylelint, you may visit the following directory:

yourproject/node_modules/stylelint/dist/rules/*

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

Clicking on the images will display full page versions

Apologies for not making an attempt just yet, but I'm struggling to locate what I need. Here's the menu structure in question: <div class="overlay-navigation"> <nav role="navigation"> <ul class="test"> & ...

Encountered a Gulp error: unable to spawn process due to E

gulpfile.js 'use strict'; var gulp = require('gulp'); gulp.paths = { src: 'src', dist: 'dist', tmp: '.tmp', e2e: 'e2e' }; require('require-dir')('./gulp'); gulp.ta ...

Tips for preventing the line through effect on a span element when it is checked

I am working on a project that involves a list of items labeled as li. For example: <ul class="list"> <li class="checked">Groceries <span>&#215;</span></li> <li>Medicine <span>& ...

Scrolling with Buttons in both Right and Left directions

I am working with three divs: left, middle, and right. The middle div will contain content, while the left and right divs are designated for buttons that will scroll the middle div. Specifically, I plan to display lists of pictures in the middle div. If a ...

Javascript and CSS combo for creating a stylish fade effect

Hey everyone, I have a design challenge where I need to change the color of a picture inside a box when the user hovers over it. I have four boxes like this and my goal is to make everything else fade out when a user hovers over a specific box. Anyone kn ...

The root directory in the disk has been changed, causing the compilation to CSS to no longer occur in Grunt

A recent problem arose with my Grunt setup on a Windows 8 machine. Initially, everything was running smoothly with tasks like ['sass', 'autoprefixer', 'connect', 'watch'] refreshing the design in the browser seamless ...

Steps for setting all textareas on a website to "readonly" mode

My website contains numerous textareas but they currently do not have the read-only attribute. It would be very time-consuming to manually add the readonly attribute to each one. Is there a more efficient method to make all textareas read-only? ...

When the CSS is rendered, it automatically appends a forward slash

I have successfully implemented CSS on the page. @font-face { font-family: "feather"; src:url("fonts/feather-webfont.eot"); src:url("fonts/feather-webfont.eot?#iefix") format("embedded-opentype"), url(&qu ...

What could be causing my modal to not animate from the center of the screen?

I am aiming to have my .modal div class smoothly scale from 0 to 1 right in the center of the screen instead of starting at the bottom right and then moving to the center before settling in its final position. I have checked various resources like MDN docu ...

Turn off the CSS hover effect for a custom button if the ng disabled attribute is set to true

My goal is to disable custom buttons, and the disable(pointer) function is working correctly. The issue arises when we try to hover on the button, as the hover effect still works. I therefore need to disable hover as well. I am looking to apply ng-disabl ...

"Interact with jQuery by sliding side to side or in a circular motion

I am in need of assistance with sliding images using jQuery back and forth, or making them go round in a loop. Currently, the images slide up to the last element and then swiftly return to the first div, which is not visually appealing at all. I understa ...

Foundation-sites module missing - new project requires installation of Node modules

I recently encountered an issue that has been discussed multiple times here, but unfortunately, I couldn't find a suitable solution. After formatting my disk and installing macOS Monterey, the following software versions were installed: node.js v16. ...

HTML and CSS: Centering elements inside div containers

Is it possible to align elements within a </div> using the align attribute? For example, as shown in the image below: e1:align="top" e2:align="right" e3:align="bottom" e4:align="left" EDIT: This query is purely for self-learning purposes in HTML ...

Creating full-width divs using BootstrapLearn how to easily create full-width div

Bootstrap is being utilized in my current project. I have been creating divs inside columns, but they are not extending to the full width of the columns. Below is a snippet of the code: <!DOCTYPE html> <html lang="en"> <head> ...

Revamping outdated dependencies in package.json for Angular 6

Currently, I am working with the latest version of Angular (6) and have been attempting to update my dependencies in the package.json. I was wondering if it is safe to use the npm update command to update all dependencies, or if there are other methods th ...

Is it possible to manipulate div elements with JavaScript while utilizing node.js?

It seems like I'm missing something obvious here, as I'm working with node.js and I have correctly linked a javascript file (alert("hello"); works). However, I can't seem to make any changes to the DOM. Here's a simple example: jade: ...

Firefox is not rendering HTML5 elements properly

While my website performs well in Chrome and Safari, there seems to be an issue with how elements are displayed in Firefox or IE. Some elements are being pushed to the right, and I am unsure of how to fix this problem. You can view the site here To aid i ...

Obtaining the directory of a node package in a visual interface

As a newcomer to NodeJS, I am diving into using a plugin named videojs-playlist alongside video-js. According to the documentation, the plugins should be included as follows: <script src="path/to/video.js/dist/video.js"></script> <script s ...

Dynamic Email Design

Currently, I am working on coding an HTML email that needs to be optimized for perfect rendering on all mobile devices. While I have expertise in coding emails for desktop and ensuring compatibility with various email clients and browsers, the challenge no ...

CSS Media Query Assistance - optimizing text display for mobile responsiveness

I am currently facing an issue with my CSS code where the content is displaying as one long sentence on mobile devices, requiring users to scroll to read it. I am trying to modify it so that it displays as two lines on mobile. <!-- promo banner --> ...