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

"There was an issue loading the gRPC binary module as it was not properly installed for this particular system" exclusive to Windows users

I encountered the following error when attempting to run my packaged app on Windows, despite it working perfectly on Linux. Expected directory: electron-v2.0-win32-ia32-unknown Found: node-v57-linux-x64-glibc This is where the expected directory should h ...

Having trouble with nodemon, supervisor, and forever - all are throwing various errors. Any advice on how to

I have attempted to use all three of these commands individually by installing them globally, but none of them seem to be working. I am using these commands to automatically restart the server whenever I make changes. Here are the commands that I am curre ...

Can we stop a specific container from resizing on mobile devices?

My goal is to have the entire page scale down, except for the navigation container. I'm adjusting some CSS rules to improve accessibility on smartphones, but the issue arises with the multiple images it uses. I need these images to display in their or ...

I encountered a "permission denied" error in the terminal while attempting to install sass through node.js - can someone

I'm having trouble with installing a program. I followed the steps in a tutorial that instructed me to install node.js first, which I did. However, when trying to install sass globally using npm, I encountered an error message: karenchan:~ karenchan$ ...

Error: Git fatal - Could not locate the remote assistant for 'git+https'

I'm encountering an issue while attempting to update my npm packages. The issue lies in the fact that it utilizes git+https for cloning, but when I try to use git, I get the error message 'fatal: Unable to find remote helper for 'git+https&a ...

The clearfix feature fails to function properly with overflow:auto

I could really use some help with my CSS skills: Here is the HTML code I am working with: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Cluster Test</title> <link rel="stylesheet" href= ...

Setting up the Font Awesome Pro version in Angular using the Font-Awesome package

The process of installing the pro version of Angular Font-awesome began with setting up my registry using these commands: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ && \ npm config set "//npm.fontawesome.com/:_authTo ...

Steps to create a zigzagging line connecting two elements

Is it possible to create a wavy line connecting two elements in HTML while making them appear connected because of the line? I want it to look something like this: Take a look at the image here The HTML elements will be structured as follows: <style&g ...

Struggling with getting the JavaScript, scss, and CSS television animation to turn on and off properly? Seeking assistance to troubleshoot this

After finding this javascript code on Codepen and seeing that it worked perfectly in the console there, I tried to run it on my computer with jQuery but it didn't work outside of Codepen. Even when attempting to use it on JSfiddle or compile the SCSS ...

What is the correct method to define the width as a percentage while also maintaining a minimum width in pixels?

My header/navigation bar div features a repeat-x background image. Within this, I have a horizontal navigation that needs to be centered over the background with a specified min-width and normal width. I want the navigation to be 80% of the full width, wi ...

JavaScript not properly rendering CSS styles

If I insert the following HTML statically, the CSS style is correctly applied. HTML: <li class="connector"> <a href="#"> <img src="css/images/temp/connector2.png" alt="" width="192" height="192"> <span class="sr-only"& ...

What's the best way to add line numbers to source code on an HTML webpage after parsing?

I am currently working with AngularJS and MongoDB. In my MongoDB data, there are some text elements that contain a \n, causing each line to be displayed on a new line based on the occurrence of \n. However, I also want to add line numbers to each ...

Is there a simpler method to enable built-in CSS-Sass in Next.js without the need for excessive configuration?

Is there a way to maintain the built-in CSS/SASS feature in Next.js without extensive configuration? Utilizing the built-in CSS/SASS is convenient, but introducing less to next.config.js triggers the disabling of this feature, requiring manual configurati ...

Ways to match a string against a numeric value

I have a span id with textContent which have their own time(hour/minutes) <div class="here"> <span class="time" >8 min</span> </div> <div class="here"> <span class="time" >22 min&l ...

Is it possible for a website administrator to view the modifications I have made to the CSS and HTML code?

Is it possible for a website to detect any temporary changes made to their CSS or Html through developer tools, even though these changes are not permanent? ...

Adjust the stroke and fill color of an SVG upon hovering over it

I have a unique SVG image with an intricate stroke around it that matches the color of a filled icon. Positioned on a black background within the image, you can view my example here: https://jsfiddle.net/o48629qs/ The challenge I am facing involves changi ...

Successfully integrating the twit npm package into meteor.js

I'm currently facing some challenges in fetching tweets using the twit npm package and meteor. Despite installing meteorhacks:npm and http as dependencies, I'm still unable to make it work. Below is my code: /* server/lib/twitter-api.js */ Me ...

Leveraging npm packages within a Meteor project through cosmos:browserify

Trying to implement Radium, a JavaScript library for inline CSS, by following the instructions located here. In my app.browserify.js file: Radium = require("radium"); Within package.json: "radium": "0.13.4" Upon attempting to utilize Radium in the app&a ...

Adjust the width of a float-right container to its maximum width

Looking for a solution similar to the one discussed in this question: CSS - Float to max width In my project, I am working on a layout that involves a <pic> / <info> style setup, with a twist - I want it to be responsive when the user resizes ...

When attempting to build a react-native project using `react-native init AwesomeProject`, an ETIMEDOUT error is encountered during

I'm struggling with initializing a new react-native project every time I try, encountering the same annoying ETIMEDOUT error. After running "react-native init AwesomeProject --verbose" in Terminal Here is my npm-debug.log: https://gist.github.co ...