https://github.com/axelo/tslint-jsx-typed-class-name

TSLint rule to provide typed class names for the jsx attribute className. Add more safety to your react components, especially with the css utility library of your choice.
https://github.com/axelo/tslint-jsx-typed-class-name

classname css jsx react tachyons-css tailwind-css tslint tslint-rules typed

Last synced: 3 months ago
JSON representation

TSLint rule to provide typed class names for the jsx attribute className. Add more safety to your react components, especially with the css utility library of your choice.

• Host: GitHub
• URL: https://github.com/axelo/tslint-jsx-typed-class-name
• Owner: axelo
• Archived: true
• Created: 2018-02-15T18:55:50.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2020-11-01T19:19:14.000Z (about 4 years ago)
• Last Synced: 2024-04-25T01:08:27.163Z (9 months ago)
• Topics: classname, css, jsx, react, tachyons-css, tailwind-css, tslint, tslint-rules, typed
• Language: TypeScript
• Homepage:
• Size: 42 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# DEPRECATED

I no longer use use or recommend the use of jsx/tsx. There is safer alternatives, for example [Elm](https://elm-lang.org).

tslint-jsx-typed-class-name

---------------------------

[TSLint](https://github.com/palantir/tslint/) rule to provide typed class names for the jsx attribute `className`. Add more safety to your react components, especially with the css utility library of your choice. 

### Installation

    npm install tslint-jsx-typed-class-name --save-dev

or 

    yarn add --dev tslint-jsx-typed-class-name

### Usage

tslint-jsx-typed-class-name has peer dependencies on [TSLint](https://www.npmjs.com/package/tslint) and [TypeScript](https://www.npmjs.com/package/typescript).

To use this rule, add `"tslint-jsx-typed-class-name"` to the `rulesDirectory`.

Here's a sample configuration where `tslint.json` lives adjacent to your `node_modules` folder and with an existing css file `styles/index.css`:

```js

{

  "extends": ["tslint:latest"],

  "rulesDirectory": [

      "tslint-jsx-typed-class-name"

  ],

  "rules": {

    // Configure jsx-typed-class-name here

    "jsx-typed-class-name": {

        "severity": "warning",

        "options": [

            "styles/index.css"

        ]

    }

  }

}

```

### Css parsing

All listed css files are parsed for [class selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors).

`@import` rules are automatically followed. If an import path starts with `~` the import is treated as a node module relative to current working directory.

All parsed css files are watched for file changes. When a change is detected the parsing is redone. Useful when in development watch mode.