mattpfeffer/stylelint-config-astro

Cant detect bugs

Closed this issue · 9 comments

jojojojojoj5564656465465 commented

I am a noob, i did npx stylelint "**/*.astro" i get those errors but no more than that even if i did mistakes

src/layouts/Layout.astro
6:9 ✖ Unknown word CssSyntaxError

src/pages/index.astro
1:1 ✖ Unknown word CssSyntaxError

i tried to install on this boillerplate
https://github.com/oliverturner/astro-svelte-postcss

I d like also to have scss by postcss compiler

mattpfeffer commented

Hi! Would you be able to share your package.json and Stylelint config file (e.g. stylelintrc.js)?

jojojojojoj5564656465465 commented 
{
  "name": "@example/portfolio",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
  "devDependencies": {
    "@astrojs/preact": "^0.3.1",
    "astro": "^1.0.0-beta.63",
    "sass": "^1.53.0",
    "stylelint-config-astro": "^1.0.3",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-recess-order": "^3.0.0",
    "stylelint-config-standard": "^26.0.0",
    "stylelint-config-standard-scss": "^4.0.0"
  },
  "dependencies": {
    "postcss": "^8.4.14",
    "preact": "^10.8.2"
  },
  "peerdependencies": {
    "postcss-html": "^1.4.1",
    "stylelint": "^14.9.1"
  }
}
jojojojojoj5564656465465 commented 
module.exports = {
  extends: [
    "stylelint-config-standard",
    "stylelint-config-recess-order",
    "stylelint-config-prettier",
    "stylelint-config-astro",
    "stylelint-config-standard-scss",
  ],
  rules: {
    "unit-whitelist": ["em", "rem", "%", "s", "px", "deg"],
    "block-no-empty": true,
    "at-rule-no-unknown": null,
  },
};
mattpfeffer commented

postcss-html needs to be installed as a dev dependency not a peer dependency. Also, the order of the configs does matter, depending on what they set. In this case stylelint-config-standard-scss seems to be causing some issues, try moving stylelint-config-astro to the end, that did the trick for me. Like so:

module.exports = {
  extends: [
    "stylelint-config-standard",
    "stylelint-config-recess-order",
    "stylelint-config-prettier",
    "stylelint-config-standard-scss",
    "stylelint-config-astro"
  ],
};
mattpfeffer commented

I think the README is a little unclear on the point above so I'll make some changes in the next release.

jojojojojoj5564656465465 commented

Do you mind on next commit make an exemple install from scratch we could clone to be ready to go with the prettier and eslint if you don't mind

mattpfeffer commented

Potentially something i could look at down the road, I'll close this issue for now as the plugin itself is working.