Git Product home page Git Product logo

jest-preset-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.

jest-preset-stylelint's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

jest-preset-stylelint's Issues

Fix testing disable comment plugins by using `ignoreDisables`

What is the problem you're trying to solve?

I am currently writing a plugin for disable comments.

The problem are disable comments like /* stylelint disable */ as they disable all rules.
As such they also disable the rule I try to test.

What solution would you like to see?

I saw #26 which would solve the issue partially but for some reason that PR is not merged.
Personally I would prefer directly passing the config to getTestRule like the options so they are shared between the rules.

Another way to solve this is to always set ignoreDisables to true as no rule author should test whether the disables work.

Add JSDoc for testRule

For better editor integration (especially VS Code) I would like to add JSDoc to a testRule. This way editor would help working with testRule with useful autocomplete.

Adopting preset

I'm modifying this preset to work with plugins and stylelint core. https://github.com/stylelint/jest-preset-stylelint/compare/adapting

I've extracted testRule into another function for dependency injection. Here's how injecting npm published stylelint into it:

// jest.setup.js
const getTestRule = require('./getTestRule');
const stylelint = require('stylelint');

global.testRule = getTestRule(stylelint);

This change keeps experience the same for plugin author as currently in master.

I started to trying this preset with stylelint-order and discovered an unpleasant surprise :( With this preset every time plugin author calls testRule they need to add plugins parameter.

In stylelint-order I have 46 calls for this function. In stylelint-scss there maybe even more calls. It's not user-friendly to add plugins in every call, because it doesn't change from call to call. What make it a little bit even more confusing, that plugins path should be from the root of the project. In my case I have test in ./rules/order/tests/index.js, but I need to put plugins: ['./'].

Possible solution is to accept plugins in getTestRule function from a branch mentioned above. This is how it will look like for the plugin author:

// jest.setup.js
const getTestRule = require('jest-preset-stylelint/getTestRule');
const stylelint = require('stylelint');
const plugins = ['./'];

global.testRule = getTestRule(stylelint, plugins);

In this case it's not confusing that path is relative to project root, because jest configuration is there. (Maybe path not from root, but relative to Jest configuration location)

With all this, I'm not sure jest-preset-stylelint could be used in a form that we currently describe in readme. I think we need rename repository (or create new). Then we just expose getTestRule and plugin author (or in stylelint core) need to use snippet just like above to add testRule in their Jest setup.

Fix TypeScript errors

What steps are needed to reproduce the bug?

Open the index.d.ts declaration file in VSCode or paste its contents in the TypeScript Sandbox:

https://www.typescriptlang.org/play?declaration=false#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

What did you expect to happen?

There shouldn't be any errors.

What actually happened?

There are two errors. You can ignore the first one on line 157 as this is a declaration file, but the second one on line 160 seems to be an actual issue: 'testRule' is referenced directly or indirectly in its own type annotation.

It causes a TypeScript build error in my project and also prevents the analysis of the testRule() parameters.

I managed to fix this by using a TestRule type:

/**
 * Test a rule with the specified schema.
 */
- export declare function testRule(schema: TestSchema): void;
+ type TestRule = (schema: TestSchema) => void;

/**
 * Create a `testRule()` function with any specified plugins.
 */
- export function getTestRule(options?: { plugins?: TestSchema['plugins'] }): typeof testRule;
+ export function getTestRule(options?: { plugins?: TestSchema['plugins'] }): TestRule;

declare global {
-	var testRule: typeof testRule;
+	var testRule: TestRule;
}

With this change the build succeeds and my editor duly complains when I try to use testRule() incorrectly.

Throws when used with latest stylelint

Clearly describe the bug

When I use this preset as described in the README it throws an error.

What steps are needed to reproduce the bug?

jest.config.js

'use strict';

module.exports = {
    preset: 'jest-preset-stylelint',
};

What did you expect to happen?

Tests work

What actually happened (e.g. what warnings or errors did you get)?

  ● rg/existing-import-path › reject › [true,{}] › "@import url(theme);" › reject multiple imports

    TypeError: stylelint is not a function

      at Object.spec (node_modules/jest-preset-stylelint/jest-setup.js:84:24)

stylelint version: 13.2.0
jest version: 24.9.0
nodejs version 12.16.1

Release 2.0.0

We should release 2.0.0.

I don't have access to the npm package. Please can someone with access either:

  • grant me access
  • release the package themselves

Add support for custom unfixable error messages

What is the problem you're trying to solve?

My plugin supports to customize unfixable error messages.

But testing them with always fails

{
  fix: true,
  reject: [{
    unfixable: true,
    message: "This message passes first assertion, but alwys fail the one below",
  }]

What solution would you like to see?

Would it make sense to assert following only if unfixable is falsy?

// Checks whether only errors other than those fixed are reported
const outputAfterLintOnFixedCode = await lint({
...stylelintOptions,
code: fixedCode,
});
expect(outputAfterLintOnFixedCode.results[0]).toMatchObject({
warnings: outputAfterFix.results[0].warnings,
parseErrors: [],
});

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.