search

amatlash / vite-plugin-stylelint

Vite 2 plugin to lint CSS with stylelint
MIT License
12 stars 2 forks source link

plugin not running #6

Open cmcnicholas opened 3 years ago

cmcnicholas commented 3 years ago

Describe the bug Installing this plugin into my project with previously working stylelint using webpack doesn't work as expected (no console output for errors etc.).

Is there a verbose mode to see what it is doing?

To Reproduce have .stylelintrc.js in root, with:

module.exports = {
  syntax: 'less',
  ignoreFiles: ['**/src/assets/icons/**'],
  rules: {
    indentation: 2,
    'string-quotes': 'double',
    'color-hex-case': 'lower',
    'selector-combinator-space-after': 'always',
    'declaration-block-trailing-semicolon': 'always',
    'declaration-colon-space-before': 'never',
    'declaration-colon-space-after': 'always',
    'property-no-vendor-prefix': true,
    'value-no-vendor-prefix': true,
    'at-rule-no-vendor-prefix': true,
    'rule-empty-line-before': [
      'always',
      {
        except: ['after-single-line-comment', 'first-nested'],
      },
    ],
    'selector-pseudo-element-colon-notation': 'single',
    'selector-no-vendor-prefix': true,
    'media-feature-name-no-vendor-prefix': true,
  },
};

config for vite.config.js

import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2';
import viteComponents from 'vite-plugin-components';
import viteTsConfigPaths from 'vite-tsconfig-paths';
import viteStylelint from '@amatlash/vite-plugin-stylelint';
import viteEnvCompatible from 'vite-plugin-env-compatible';
import path from 'path';

export default defineConfig({
  server: {
    port: 8080,
  },
  plugins: [
    createVuePlugin(),
    viteEnvCompatible(),
    viteTsConfigPaths(),
    viteComponents({
      transformer: 'vue2',
    }),
    viteStylelint({
      include: ['./src/assets/less/**/*.less', './src/assets/less/**/*.css'],
    }),
  ],
  optimizeDeps: {
    include: [
      'vue',
      'vue-router',
      'vuex',
      // etc.
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.json', '.mjs'],
    alias: {
      '@': path.resolve(__dirname, '../alloy-web-legacy/src'),
      '@map': path.resolve(__dirname, '../map/src'),
      '@codegen-alloy-mesh': path.resolve(__dirname, '../codegen-alloy-mesh/src'),
      '@core': path.resolve(__dirname, '../core/src'),
      '@ui': path.resolve(__dirname, '../ui/src'),
      // fixes issue with @yottaltd/typescript-codegen where it uses the builtin node
      // url.parse, we have to replace this. once we remove the old codegen this can
      // also be removed along with the "url" dependency
      'url': path.resolve(__dirname, './node_modules/url/url.js'),
    },
  }
});

then update any .less file to break the rule e.g. use single quotes.

Expected behavior linting to work, feedback in console.

Screenshots If applicable, add screenshots to help explain your problem.

Additional context

package.json

{
  "name": "x",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "serve": "vite --mode dev"
  },
  "dependencies": {
    "@mapbox/geojsonhint": "^3.0.1",
    "@sentry/browser": "^6.5.1",
    "@sentry/integrations": "^6.5.1",
    "@shopify/draggable": "^1.0.0-beta.8",
    "@turf/area": "^6.3.0",
    "@turf/length": "^6.3.0",
    "@types/random-words": "^1.1.1",
    "@yottaltd/alloy-icons": "^1.0.22061",
    "@yottaltd/alloy-typescript-codegen": "1.0.23853",
    "annyang": "^2.6.1",
    "bson": "^4.4.0",
    "buffer": "^6.0.3",
    "chalk": "^4.1.0",
    "codemirror": "^5.61.1",
    "color": "^3.1.3",
    "d3": "^6.6.2",
    "d3-flextree": "^2.1.1",
    "dayjs": "^1.10.5",
    "decimal.js": "^10.2.1",
    "file-saver": "^2.0.5",
    "fuzzy-search": "^3.2.0",
    "js-cookie": "^2.2.0",
    "jsonlint-mod": "^1.7.6",
    "lodash": "^4.17.20",
    "logrocket": "^1.2.3",
    "logrocket-vuex": "^0.0.3",
    "markdown-it": "^12.0.4",
    "mustache": "^4.2.0",
    "node-polyglot": "^2.4.0",
    "portable-fetch": "^3.0.0",
    "random-words": "^1.1.1",
    "scrollmagic": "^2.0.8",
    "shepherd.js": "^8.3.1",
    "url": "^0.11.0",
    "uuid": "^8.3.2",
    "voca": "^1.4.0",
    "vue": "^2.6.14",
    "vue-class-component": "^7.2.6",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@amatlash/vite-plugin-stylelint": "^1.1.1",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.2",
    "@babel/plugin-proposal-optional-chaining": "^7.14.2",
    "@currents/cli": "^1.0.7",
    "@cypress/webpack-preprocessor": "^5.9.0",
    "@types/annyang": "^2.6.1",
    "@types/chai": "^4.2.18",
    "@types/chance": "^1.1.2",
    "@types/codemirror": "^5.60.0",
    "@types/color": "^3.0.1",
    "@types/d3": "^6.7.0",
    "@types/file-saver": "^2.0.2",
    "@types/fuzzy-search": "^2.1.0",
    "@types/geojson": "^7946.0.7",
    "@types/js-cookie": "^2.2.6",
    "@types/lodash": "^4.14.170",
    "@types/markdown-it": "^12.0.1",
    "@types/mocha": "^8.2.2",
    "@types/mustache": "^4.1.1",
    "@types/node-polyglot": "^2.4.1",
    "@types/scrollmagic": "^2.0.1",
    "@types/sinon": "^10.0.2",
    "@types/uuid": "^8.3.0",
    "@types/voca": "^1.4.0",
    "@typescript-eslint/eslint-plugin": "^4.26.0",
    "@typescript-eslint/parser": "^4.26.0",
    "@vue/cli": "^4.5.13",
    "@vue/cli-plugin-babel": "~4.5.13",
    "@vue/cli-plugin-eslint": "~4.5.13",
    "@vue/cli-plugin-router": "~4.5.13",
    "@vue/cli-plugin-typescript": "~4.5.13",
    "@vue/cli-plugin-unit-mocha": "~4.5.13",
    "@vue/cli-plugin-vuex": "~4.5.13",
    "@vue/cli-service": "^4.5.13",
    "@yottaltd/eslint-config": "^1.0.21282",
    "@yottaltd/eslint-plugin": "^1.0.20939",
    "chai": "^4.3.4",
    "chance": "^1.1.7",
    "core-js": "^3.13.1",
    "cypress": "^6.9.1",
    "cypress-junit-reporter": "^1.3.1",
    "cypress-multi-reporters": "^1.4.0",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-chai-friendly": "^0.7.1",
    "eslint-plugin-cypress": "^2.11.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.10.0",
    "json-stable-stringify": "^1.0.1",
    "less": "^4.1.1",
    "less-loader": "^7.3.0",
    "mocha": "^9.0.2",
    "mocha-junit-reporter": "^2.0.0",
    "mocha-multi-reporters": "^1.5.1",
    "npm": "^7.15.1",
    "prettier": "^2.3.0",
    "sinon": "^11.1.1",
    "start-server-and-test": "^1.12.3",
    "stylelint": "^13.12.0",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^22.0.0",
    "stylelint-processor-arbitrary-tags": "^0.1.0",
    "stylelint-webpack-plugin": "^2.1.1",
    "superheroes": "^3.0.0",
    "supervillains": "^3.0.0",
    "typescript": "3.9.9",
    "vite": "^2.4.2",
    "vite-plugin-components": "^0.13.0",
    "vite-plugin-env-compatible": "^1.0.0",
    "vite-plugin-vue2": "^1.7.3",
    "vite-tsconfig-paths": "^3.3.13",
    "vue-template-compiler": "^2.6.14"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 11"
  ],
  "optionalDependencies": {
    "fsevents": "^2.3.2"
  }
}
khalwat commented 2 years ago

Also experiencing this -- the plugin doesn't seem to do anything. No errors, no status, and doesn't catch obvious errors introduced to the CSS on purpose.

crystalfp commented 2 years ago

The plugin has run once, but then nothing even restarting the vite server. Note that stylelint on the same files with the same configuration works without problems.