https://github.com/jimkyndemeyer/react-css-modules-intellij-plugin

React CSS Modules support in IntelliJ IDEA and WebStorm for components written in JavaScript and TypeScript.
https://github.com/jimkyndemeyer/react-css-modules-intellij-plugin

css css-modules intellij react webstorm

Last synced: about 1 year ago
JSON representation

React CSS Modules support in IntelliJ IDEA and WebStorm for components written in JavaScript and TypeScript.

• Host: GitHub
• URL: https://github.com/jimkyndemeyer/react-css-modules-intellij-plugin
• Owner: jimkyndemeyer
• License: mit
• Created: 2016-11-07T19:01:33.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-12-03T13:37:24.000Z (over 9 years ago)
• Last Synced: 2025-03-29T07:11:17.521Z (about 1 year ago)
• Topics: css, css-modules, intellij, react, webstorm
• Language: Java
• Homepage:
• Size: 1.14 MB
• Stars: 41
• Watchers: 2
• Forks: 5
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React CSS Modules IntelliJ Plugin

React CSS Modules support for components written in JavaScript and TypeScript.

It provides the following features in IntelliJ IDEA, WebStorm, RubyMine, PhpStorm, and PyCharm:

- Completion and error highlighting for require'd CSS classes used in React `styleName` attributes

- Completion and error highlighting for require'd CSS classes used in styles string literals, e.g. `styles['my-class']`

- Intention to create missing CSS class from usage in React

- Integrates React references to CSS class names with 'Find Usages', 'Rename', and 'Go to Declaration'

## Features demo

**Completion, error highlighting, find usages**

![](docs/react-css-modules-webstorm-demo.gif)

## Known limitations

`@value` shows "Unknown CSS at-rule" error in the editor. There doesn't appear to be an API hook for adding @value as a known rule, or for filtering the error. To remove the error marker (but also other at-rule error markers) disable the inspection.

Accessing style names via fields (e.g. `styles.myClassName`) is not supported. There doesn't appear to be any PSI API hooks for achieving this. Instead, use `styles['my-class-name']` which also doesn't limit class names to camel-case.

The plugin assumes a one-to-one relationship between a React component and the require'd .css/.scss/.less file.

PR's are welcome.

## FAQ

**Does this also work with .scss and .less files?**

Yes. It should work for all CSS dialects supported by the IntelliJ platform.

**Which IDEs are compatible with the plugin?**

The plugin is compatible with version 163+ (2016.3 or newer) of IntelliJ IDEA, WebStorm, RubyMine, PhpStorm, and PyCharm. 2016.3 is the first official version that supports `:global`, `:local`, and `composes` used by CSS Modules.

PyCharm CE is not supported since the plugin depends on two other plugins: NodeJS and JavaScript.

**Where can I get the plugin?**

The plugin is available from the JetBrains Plugin Repository at https://plugins.jetbrains.com/plugin/9275

To install it, open "Settings", "Plugins", "Browse repositories..." and search for "CSS Modules".

## License

MIT