npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sass-lint-auto-fix

v0.21.2

Published

Automatically resolve sass-linting issues through CLI

Downloads

17,787

Readme

Sass Lint Auto Fix

NPM Version npm Build Status dependencies Status Coverage Status semantic-release

Description

This package serves as a complement to sass-lint, giving you the ability to resolve simple linting issues with an easy to use command line interface. Issues are resolved by parsing the s(a|c)ss as an ast, traversing through it, and modifying certain branches to be in accordance to the .sass-lint.yml standards.

Getting Started

Usage

  Usage: sass-lint-auto-fix "<pattern>" [options]

  Options:

    -V, --version                    output the version number
    -c, --config <path>              custom config path (e.g /path/to/.sass-lint-auto-fix.yml)
    --config-sass-lint <path>        custom sass lint config path (e.g /path/to/.sass-lint.yml
    -s, --silent                     runs in silent mode
    -d, --debug                      runs in debug mode
    -h, --help                       output usage information

Installing as a dependency

To begin install the package as a dev-dependency for your repository.

npm install --save-dev sass-lint-auto-fix

Modify package.json scripts to include lint:fix

{
  ...,
  "scripts": {
    "lint": "sass-lint -v",
    "lint:fix": "sass-lint-auto-fix"
  }
}

lint:fix works really well with husky, which allows you to run commands on hooks that fire when running git commands

Add the following to your package.json

{
  "husky": {
    "hooks": {
      "pre-commit": "yarn lint:fix && yarn lint",
      "pre-push": "yarn test",
      "...": "..."
    }
  }
}

Installing globally

npm install -g sass-lint-auto-fix

Configuration

Configuration can be provided through as either json, yml, or js.

The generic structure of the configuration file you would provide would look something like this:

interface Ruleset {
  [ruleName: string]: number | { [ruleOption: string]: any };
}

interface ConfigOpts {
  logger: Logger;
  slRules?: any;
  slConfig?: any;
  files: {
    include: string;
    ignore?: string;
  };
  syntax: {
    include: (keyof typeof ValidFileType)[];
  };
  resolvers: Ruleset;
  options: {
    optOut: boolean;
  };
}

An example of this in yaml.

files:
  include: "**/*.s+(a|c)ss"
  ignore:
    - node_modules/**
syntax:
    include:
      - scss
      - sass
resolvers:
  property-sort-order: 1
  attribute-quotes: 1
  border-zero: 1
  no-color-keywords: 1
  no-css-comments: 0
  no-important: 0
  no-trailing-zero: 1
  space-after-bang: 1
  space-before-bang: 1
  space-after-colon: 1
  space-before-colon: 1
  hex-length: 1
  empty-line-between-blocks: 1
  url-quotes: 1
  zero-unit: 1
  hex-notation: 1
  indentation: 0
  final-newline: 1
options:
  optOut: false

Disabling Rules

resolvers:
  property-sort-order: 1
  attribute-quotes: 0

By default, all rule "resolvers" are enabled. If you wish to change that, specify a config file when running. Configuration of resolvers only allows you to enable or disable rules.

  sass-lint-auto-fix -c path/to/config.file

Configuring which rules to run against

By default, sass-lint will look for a .sass-lint.yml or .sasslintrc, or an entry in your package.json. When applying the resolver to a given rule, configuration is parsed from one of the above files..

More information is specified here.

In this snippet example, the only rule enabled is property-sort-order. If you wish to manually enable certain resolvers, you would do so for each one you wish to include.

For more information about the rules themselves, you can read the documentation from sass-lint

Opt out of error reporting

By default, all errors captured while attempting to resolve issues are reported by sentry.

You can opt out by adding a optOut flag in your sass-lint-auto-fix config file (yml, json, js, ts)

E.g

files:
  include: "**/*.s+(a|c)ss"
  ignore:
    - node_modules/**
syntax:
    include:
      - scss
resolvers:
  property-sort-order: 1
  attribute-quotes: 1
  ...
options:
  optOut: true

Developing

Setup

git clone https://github.com/srowhani/sass-lint-auto-fix.git;
yarn install;
yarn build;

Contributing

This project uses semantic-release. Scope of the commit's included in a pull request will decide whether a new release is warranted.

More information can be found here.

Testing

yarn test