{"id":17133278,"url":"https://github.com/gilbox/blint","last_synced_at":"2025-10-07T03:22:53.155Z","repository":{"id":30907652,"uuid":"34465468","full_name":"gilbox/blint","owner":"gilbox","description":"css-bliss linter","archived":false,"fork":false,"pushed_at":"2015-04-28T06:35:19.000Z","size":136,"stargazers_count":19,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-13T08:11:40.082Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/gilbox.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":"2015-04-23T15:42:03.000Z","updated_at":"2018-09-26T03:04:52.000Z","dependencies_parsed_at":"2022-09-08T11:51:05.186Z","dependency_job_id":null,"html_url":"https://github.com/gilbox/blint","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbox%2Fblint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbox%2Fblint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbox%2Fblint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gilbox%2Fblint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gilbox","download_url":"https://codeload.github.com/gilbox/blint/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248681497,"owners_count":21144700,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-10-14T19:41:49.443Z","updated_at":"2025-10-07T03:22:48.109Z","avatar_url":"https://github.com/gilbox.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# blint\n\nBlint is a pair of linting tools for the [css-bliss](https://github.com/gilbox/css-bliss) style\nguide: [blint-react](#blint-react) and [scss-lint-bliss](#scss-lint-bliss).\nThey can be used individually or together. They complement each other very well\nsince one enforces a number of rules that the other cannot, and vice-versa.\n`blint-react` focuses on linting markup, while `scss-lint-bliss` focuses on the styles.\nThe goal is to guide the developer in building scalable CSS by enforcing\nthe rules of css-bliss. This README file documents both linting tools, although only `blint-react`\nsource code actually lives in this repo.\n\n-------------------------------------------------------------------\n\n\n## blint-react\n\n`blint-react` works by monkey-patching `React#createElement` and linting the `className`\nprop of every single component instantiated by the application, in real-time. If\na `className` fails the linter, an error is thrown which is intended to bring the application\nto it's knees, forcing the developer to fix the mistake before doing anything else.\n\n### installation\n\nInstall using npm:\n\n    npm install blint-react\n\nOnce installed, pull in `blint-react` as early as possible via:\n\n    require('blint-react');\n\nThat's all there is to is. Now sit back and worry less about reviewing bad css code.\n\n### advantages\n\n`blint-react` has a full suite of [unit tests](https://github.com/gilbox/blint/blob/master/spec/blint-react.spec.js).\nIn a properly configured build pipeline, `blint-react` will not compile into the minified bundle,\nadding zero overhead in production.\n\n### error messages\n\nAll linting error messages include a detailed explanation, an accurate\nstack trace pointing you right to the problem area, and often\na link to css-bliss documentation about the rule. Sometimes you get a suggestion, for example an\nerror related to a Module Modifier looks like:\n\n\u003e In `div[className=\"Foo--bar\"]` there is a CSS Module Modifier,\n\u003e but no CSS Module specified. If you are passing a Module Modifier into\n\u003e another element that will always combine it with a CSS Module, use a custom prop like\n\u003e classModifier instead\n\nNote that this is an especially opinionated rule that assumes if you've created a\n`Foo` component which renders `\u003cdiv class=\"Foo\"\u003eHello World\u003c/div\u003e` and would like to\nsubclass an instance of the component with a module modifier you would do so with\na custom prop (named `classModifer` for example), and not by passing the modifier into\nthe `className` prop.\n\nIn other words, instead of\n\n    \u003cFoo className=\"Foo--bar\" /\u003e\n\nWe must do:\n\n    \u003cFoo classModifier=\"Foo--bar\" /\u003e\n\nWhere Foo's render function looks like:\n\n    render() {\n      return (\n        \u003cdiv className={cx('Foo', this.props.classModifier)}\u003e\n          Hello World\n        \u003c/div\u003e\n      )\n    }\n\n### rules\n\n- Enforces the Module class naming scheme. Any class beginning with an uppercase\n  letter is assumed to be following the css-bliss Module naming rules. This includes\n  so-called Module *Element*, *Element Modifier*, and *Module Modifier* classes.\n\n- Ensures that a DOM element has classes from as most one CSS Module.\n\n- A DOM element may have an Element class or a Module class, but not both.\n\n- A DOM element may have an Element class or a Module Modifier class, but not both.\n\n- A DOM element may have an Element Modifier class or a Module class, but not both.\n\n- If a DOM element has a Module Modifier class, it must have a Module class.\n\n- If a DOM element has an Element Modifier class, it must have an Element class.\n\n### options\n\nThere are currently no configurable options.\n\n-------------------------------------------------------------------\n\n## scss-lint-bliss\n\nThe [scss-lint-bliss](https://github.com/gilbox/scss-lint/tree/bliss) tool\nis a [fork](https://github.com/gilbox/scss-lint/tree/bliss)\nof the popular [scss-lint](https://github.com/brigade/scss-lint),\nwith the addition of rules specific to css-bliss modules. It is *not* the goal of this project\nto maintain a fork. Instead, it will be converted to a plugin\n[when scss-lint's plugin system is available](https://github.com/brigade/scss-lint/issues/440).\n\nTo install scss-lint-bliss simply install the gem:\n\n    gem install scss-lint-bliss\n\nWhich will install the global binary `scss-lint`. Note that this is the same binary filename\nused by the `scss-lint` gem. Then to lint some files do:\n\n    scss-lint ./path/to/css/\n\n### configuration\n\nIt might interest you to [read about scss-lint configuration](https://github.com/gilbox/scss-lint#configuration).\nscss-lint-bliss adds the following options and defaults:\n\n      Bliss::Module:\n        enabled: true\n        severity: error\n        module_file_pattern: !ruby/regexp '/[\\/\\\\]_?([A-Z][a-zA-Z0-9]+)\\.scss/'\n        allow_id_selector_in_module: false\n        allow_attribute_selector_in_module: true\n        allow_element_selector_in_module: true\n\n        allow_module_margin: false\n        allow_module_width: false\n\n        allow_utility_classes_in_module: false\n        ignored_utility_class_prefixes: ['is', 'ie']\n\n        allow_utility_direct_styling: false\n\n### `Bliss::Module:` linting behavior\n\n - only lints files matching the `module_file_pattern` regex pattern\n\n - does not allow any id selector in a Module unless `allow_id_selector_in_module` is `true`\n\n - does not allow any attribute selector in a Module unless `allow_attribute_selector_in_module` is `true`\n\n - does not allow any element selector in a Module unless `allow_element_selector_in_module` is `true`\n\n - does not allow a module to have a `margin` property unless the `allow_module_margin` option is `true` (todo: add support for `auto`)\n\n - does not allow a module to have a `width` property unless the `allow_module_width` option is `true`\n\n - Does not allow any utility class in a module unless it is included in the `ignored_utility_class_prefixes`\n list or the `allow_utility_classes_in_module` option is `true`\n\n - Does not allow a rule to end with a utility class as a descended selector\n (`.Foo .isOpen` is bad but `.Foo.isOpen` is good) unless `allow_utility_direct_styling` is `true`\n\n### Reliability\n\nscss-lint-bliss is [fully unit tested](https://github.com/gilbox/scss-lint/blob/bliss/spec/scss_lint/linter/bliss/module_spec.rb)\nbut could still be circumvented by the developer with ugly code.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgilbox%2Fblint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgilbox%2Fblint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgilbox%2Fblint/lists"}