Git Product home page Git Product logo

stylelint-config-html's Introduction

stylelint-config-html

NPM license NPM version NPM downloads NPM downloads Build Status

The shareable HTML (and HTML-like) config for Stylelint.

This config bundles the postcss-html custom syntax and configures it.
If you use this config in your Stylelint config, HTML, XML, Vue, Svelte, Astro, and PHP files will be parsable. The Stylelint rules you have configured will be able to check these files.

Requirements

  • Stylelint v14.0.0 and above
    This config cannot be used with Stylelint v13 and below. Also, if you are using Stylelint v13, you do not need to use this config.

Stylelint v14 and above has been changed to not bundle non-CSS parsing such as HTML. The goal of this config is to make Stylelint v14 work with HTML (and HTML-like) files, like Stylelint v13.

To see this config, please read the config itself.

๐Ÿ‘ซ Related Packages

The shareable config for Vue.
If you want to check Vue files, consider using this as well. It is useful because it contains the config for Vue.

PostCSS syntax for parsing HTML (and HTML-like).
If you have problems with parses using this config, please open the new issue in that repository.

๐Ÿ’ฟ Installation

npm install --save-dev postcss-html stylelint-config-html

๐Ÿ“– Usage

Set your stylelint config to:

{
  "extends": "stylelint-config-html"
}

Note: This config enables HTML (and HTML-like) syntax parsing.

If you want to enable parsing for only specific language, use each language config as follows:

{
  "extends": [
    "stylelint-config-html/html",
    "stylelint-config-html/xml",
    "stylelint-config-html/vue",
    "stylelint-config-html/svelte",
    "stylelint-config-html/astro",
    "stylelint-config-html/php"
  ]
}

๐Ÿ’ป Editor integrations

Visual Studio Code

Use the stylelint.vscode-stylelint extension that Stylelint provides officially.

You have to configure the stylelint.validate option of the extension to check .html, .vue, .svelte, .astro, and HTML-like files, because the extension does not check the *.html and HTML-like file by default.

Example .vscode/settings.json:

{
  "stylelint.validate": [
      ...,
      // โ†“ Add "html" language.
      "html",
      // โ†“ Add "vue" language.
      "vue",
      // โ†“ Add "svelte" language.
      "svelte",
      // โ†“ Add "astro" language.
      "astro",
  ]

๐Ÿ”’ License

See the LICENSE file for license rights and limitations (MIT).

stylelint-config-html's People

Contributors

ota-meshi avatar renovate[bot] avatar

Stargazers

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

Watchers

 avatar  avatar  avatar

Forkers

fylgja

stylelint-config-html's Issues

CssSyntaxError when using Stylelint on Svelte files with SCSS

We've got a SvelteKit project that's running svelte-preprocess to allow for SCSS in our .svelte files. That part's working great.

We've got your config running to allow Stylelint to lint the CSS in our .svelte files. That part's working great.

The only problem we've run into is that if we use SCSS comments in our .svelte files, Stylelint throws an error:

Unknown word (CssSyntaxError)

The problem goes away if we use CSS comments.

I'm not sure how we can address this. Any help or pointers in the right direction would be really appreciated!

I understand this may not be caused by your stylelint config, I'm just trying to find the best place to look for help.

Reproduction Instructions

  • @sveltejs/kit @ next
  • svelte @ 3.44.0
  • svelte-preprocess @ 4.94
  • stylelint @ 14.2.0
  • stylelint-config-html @ 1.0.0
  • stylelint-config-recommended-scss @ 5.0.2

.stylelintrc.js

module.exports = {
  extends: [
    'stylelint-config-recommended-scss',
    'stylelint-config-html/svelte',
  ],
  rules: {...}
};```

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (github>whitesource/merge-confidence:beta)

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.