{"id":16941534,"url":"https://github.com/hawtim/stylelint-config","last_synced_at":"2026-04-24T16:32:35.984Z","repository":{"id":42699963,"uuid":"176214289","full_name":"hawtim/stylelint-config","owner":"hawtim","description":"Integrated stylelint into your project.","archived":false,"fork":false,"pushed_at":"2023-01-06T15:23:09.000Z","size":362,"stargazers_count":1,"open_issues_count":12,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-03-09T14:46:24.065Z","etag":null,"topics":["css","css-properties","husky","integrated-stylelint","lint","lint-css","reorder-css","stylelint","stylelint-config","stylelint-order"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hawtim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-18T06:01:22.000Z","updated_at":"2022-03-22T01:17:32.000Z","dependencies_parsed_at":"2023-02-06T05:46:44.934Z","dependency_job_id":null,"html_url":"https://github.com/hawtim/stylelint-config","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hawtim/stylelint-config","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hawtim%2Fstylelint-config","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hawtim%2Fstylelint-config/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hawtim%2Fstylelint-config/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hawtim%2Fstylelint-config/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hawtim","download_url":"https://codeload.github.com/hawtim/stylelint-config/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hawtim%2Fstylelint-config/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32230936,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-24T13:21:15.438Z","status":"ssl_error","status_checked_at":"2026-04-24T13:21:15.005Z","response_time":64,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-properties","husky","integrated-stylelint","lint","lint-css","reorder-css","stylelint","stylelint-config","stylelint-order"],"created_at":"2024-10-13T21:09:43.850Z","updated_at":"2026-04-24T16:32:35.953Z","avatar_url":"https://github.com/hawtim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# How to integrate stylelint into your project\n\n## Get started 🚀\n\n```bash\nyarn add stylelint stylelint-order stylelint-config-standard\n# or\nnpm install stylelint stylelint-order stylelint-config-standard --save-dev\n```\n\n## Create `stylelint.config.js` file 🌟\n\nYou can custom the rule for your teamwork rules.\n\n```js\n// basic rules\nmodule.exports = {\n  extends: 'stylelint-config-standard',\n  ignoreFiles: ['**/*.js', '**/*.md'],\n  plugins: ['stylelint-order'],\n  rules: {\n    'at-rule-no-unknown': [\n      true,\n      {\n        ignoreAtRules: ['function', 'if', 'each', 'include', 'mixin']\n      }\n    ],\n    'no-empty-source': null,\n    'rule-empty-line-before': 'never',\n    'at-rule-empty-line-before': null,\n    'no-missing-end-of-source-newline': null,\n    'selector-list-comma-newline-after': null,\n    'font-family-no-missing-generic-family-keyword': null,\n    'indentation': 2,\n    // ...\n  }\n}\n```\n\n## Reorder CSS Properties 💡\n\nYou might notice that there is a plugin named `stylelint order`.\n\nAs the name shows, it can use to reorder CSS Properties with the priority that you set.\n\nSo you can add rule just like that:\n\n```js\nrules: {\n  \"order/order\": [\n  \"declarations\",\n  \"custom-properties\",\n  \"dollar-variables\",\n  \"rules\",\n  \"at-rules\"\n],\n// According to Andy Ford \"Order of the Day: CSS Properties\"\n// You can seprate CSS Properties into different group\n\"order/properties-order\": [{\n    groundName: \"Display \u0026 Flow\",\n    emptyLineBefore: \"never\",\n    properties: [\n      \"display\",\n      \"visibility\",\n      \"float\",\n      \"clear\",\n    ]\n  },\n  {\n    groundName: \"Positioning\",\n    emptyLineBefore: \"never\",\n    properties: [\n      \"position\",\n      \"top\",\n      \"right\",\n      \"bottom\",\n      \"left\",\n      \"z-index\",\n      \"transform\",\n    ]\n  },\n  {\n    groupName: \"Flex\",\n    emptyLineBefore: \"never\",\n    properties: [\n      \"flex\",\n      \"flex-direction\",\n      \"flex-grow\",\n      \"flex-shrink\",\n      \"flex-basis\",\n      \"flex-wrap\",\n      \"justify-content\",\n      \"align-items\"\n    ]\n  },\n  {\n    groupName: \"Dimensions\",\n    emptyLineBefore: \"never\",\n    properties: [\n      \"width\",\n      \"min-width\",\n      \"max-width\",\n      \"height\",\n      \"min-height\",\n      \"max-height\",\n      \"overflow\",\n    ],\n  },\n  {\n    groupName: \"Margins, Padding, Borders, Outline\",\n    emptyLineBefore: \"never\",\n    properties: [\n      \"margin\",\n      \"margin-top\",\n      \"margin-right\",\n      \"margin-bottom\",\n      \"margin-left\",\n      \"padding\",\n      \"padding-top\",\n      \"padding-right\",\n      \"padding-bottom\",\n      \"padding-left\",\n      \"border-radius\",\n      \"border\",\n      \"border-top\",\n      \"border-right\",\n      \"border-bottom\",\n      \"border-left\",\n      \"border-width\",\n      \"border-top-width\",\n      \"border-right-width\",\n      \"border-bottom-width\",\n      \"border-left-width\",\n      \"border-style\",\n      \"border-top-style\",\n      \"border-right-style\",\n      \"border-bottom-style\",\n      \"border-left-style\",\n      \"border-color\",\n      \"border-top-color\",\n      \"border-right-color\",\n      \"border-bottom-color\",\n      \"border-left-color\",\n      \"outline\",\n      \"list-style\",\n      \"table-layout\",\n      \"border-collapse\",\n      \"border-spacing\",\n      \"empty-cells\",\n    ],\n  },\n  {\n    groundName: \"Typographic Styles\",\n    emptyLineBefore: \"never\",\n    properties: [\n      \"font\",\n      \"font-family\",\n      \"font-size\",\n      \"line-height\",\n      \"font-weight\",\n      \"text-align\",\n      \"text-indent\",\n      \"text-transform\",\n      \"text-decoration\",\n      \"letter-spacing\",\n      \"word-spacing\",\n      \"white-space\",\n      \"vertical-align\",\n      \"color\",\n    ]\n  },\n  {\n    groupName: \"Backgrounds\",\n    emptyLineBefore: \"never\",\n    properties: [\n      \"background\",\n      \"background-color\",\n      \"background-image\",\n      \"background-repeat\",\n      \"background-position\",\n    ]\n  },\n  {\n    groundName: \"Opacity, Cursors, Generated Content, Transition\",\n    emptyLineBefore: \"never\",\n    properties: [\n      \"opacity\",\n      \"cursor\",\n      \"content\",\n      \"quotes\",\n      \"transition\"\n    ]\n  },\n  {\n    ...\n  }\n]\n}\n```\n\n## Run tasks 🛠️\n\n```json\n\"scripts\": {\n  \"lint\": \"npm run lint:vue \u0026\u0026 npm run lint:css\",\n  \"lint:vue\": \"stylelint test/**/*.vue --fix\",\n  \"lint:css\": \"stylelint test/**/*.less --custom-syntax ./node_modules/postcss-less --fix\"\n}\n```\n\nHere I use `postcss-less` syntax to lint less file.\nIf you need to lint less file, just type this in your terminal and it works.\n\n```bash\nnpm install postcss\n# or\nyarn add postcss\n```\n\n## Using husky 🐶 \n\nAdditional, you can use husky to lint your code before git commit.\n\n```json\n// package.json\n\"husky\": {\n  \"hooks\": {\n    \"pre-commit\": \"npm run lint\",\n  }\n},\n```\n\nFeel it better now ? Enjoy it :tada:\n\n## License\n\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhawtim%2Fstylelint-config","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhawtim%2Fstylelint-config","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhawtim%2Fstylelint-config/lists"}