Code Monkey home page Code Monkey logo

create-stylelint's Introduction

Stylelint

npm version Build Status npm downloads

A mighty CSS linter that helps you avoid errors and enforce conventions.

Features

It's mighty as it:

  • has over 100 built-in rules for modern CSS syntax and features
  • supports plugins so you can create your own custom rules
  • automatically fixes problems where possible
  • supports shareable configs that you can create or extend
  • can be customized to your exact needs
  • has 15k unit tests making it robust
  • is trusted by companies worldwide like Google and GitHub

And it can be extended to:

  • extract embedded styles from HTML, Markdown and CSS-in-JS template literals
  • parse CSS-like languages like SCSS, Sass, Less and SugarSS

How it'll help you

It'll help you avoid errors, for example:

  • invalid things, e.g. malformed grid areas
  • valid things that are problematic, e.g. duplicate selectors
  • unknown things, e.g. misspelled property names

And enforce conventions, for example:

  • disallow things, e.g. specific units
  • enforce naming patterns, e.g. for custom properties
  • set limits, e.g. the number of ID selectors
  • specify notations, e.g. for modern color functions

We recommend using a pretty printer like Prettier alongside Stylelint. Linters and pretty printers are complementary tools that work together to help you write consistent and error-free code.

Example output

Example

Guides

Contributors

Stylelint is maintained by volunteers. Without the code contributions from all these fantastic people, Stylelint would not exist. Become a contributor.

Sponsors

Thank you to all our sponsors! Become a sponsor.

Backers

Thank you to all our backers! Become a backer.

Website hosting

Deploys by Netlify

License

The MIT License.

create-stylelint's People

Contributors

dependabot[bot] avatar jeddy3 avatar mattxwang avatar ybiquitous avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

create-stylelint's Issues

Release 0.3.0

In stylelint/stylelint#6743 (comment):

It might be good timing to publish also create-stylelint: 0.2.0...main

I agree! Happy to do the release process for this one if we'd like. It seems like the workflow is:

  1. update changelog
  2. update package.json
  3. push to npm

If we think this is a good idea, I can open a "Prepare 0.3.0" PR (or commit) that does the first two items.

Add a `--dry-run` option

What is the problem you're trying to solve?

Most tools that perform destructive actions have a --dry-run option, where the tool prints out everything it would have done normally, but doesn't actually touch the filesystem (or perform other actions). This can be helpful to validate how the tool would work before committing to it, or debugging.

In implementing #1, I tabled this feature for a follow-up.

What solution would you like to see?

A --dry-run option for this tool.

Since this would be one of our first options, we can decide what our approach is for argument parsing; I've seen yargs used frequently, including in create-astro. That being said, I'm not wedded to any implementation.

I'm happy to contribute this feature, especially as it's a follow-up to #1.

Stylelint is broken and can't be installed. Please help

What minimal example or steps are needed to reproduce the bug?

npm init stylelint
npx: installed 76 in 8.406s
/home/db/.npm/_npx/583809/lib/node_modules/create-stylelint/create-stylelint.mjs:5
import process from 'node:process';
^^^^^^^

SyntaxError: Unexpected identifier
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)

What minimal configuration is needed to reproduce the bug?

1- Fresh Ubuntu 20.04.5 LTS
2- sudo apt-get install nodejs
3- sudo apt-get install npm
4- npm init stylelint

How did you run Stylelint?

npm init stylelint

Which Stylelint-related dependencies are you using?

None

What did you expect to happen?

To install stylelint

What actually happened?

Error

Do you have a proposal to fix the bug?

No response

Add a flag for SCSS

What is the problem you're trying to solve?

Currently, the tool assumes a standard vanilla CSS setup. This may not work for projects that use SCSS (among other preprocessors, etc.).

What solution would you like to see?

In stylelint/stylelint#4269 (comment), @Jeddy mentioned:

Then we can add a flag for SCSS, e.g.

npm init stylelint -- --template scss

This seems like a good idea to me, though also happy to workshop what it'd be named, etc.

In addition, are there other templates that we should consider?

Happy to contribute this feature as well!

Use `cosmiconfig` to resolve configuration files

What is the problem you're trying to solve?

In #1, I implemented a rough heuristic to check if the user already has Stylelint configured: by checking the current working directory for a set of files. However, this ignores several areas that Stylelint users could configure their configurations in, including the stylelint property in package.json.

What solution would you like to see?

In #1 (comment), @ntwb said:

Potentially additional files and paths based on cosmiconfig:
https://github.com/davidtheclark/cosmiconfig/#cosmiconfig

  • "any of the above two inside a .config subdirectory"
  • "a .config.js or .config.cjs CommonJS module"

i.e., we could use cosmiconfig to detect a valid Stylelint configuration in the CWD.

There may also be a different approach that I'm missing; though, keeping exact parity with Stylelint seems like a good idea.

Regardless of whatever approach we pick, I'm happy to take this on, especially as it's a follow-up to #1.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.