assembly icon indicating copy to clipboard operation
assembly copied to clipboard

Create ESLint plugin for using Assembly with React

Open mbullington opened this issue 2 years ago • 1 comments

Description

Ideally in projects like Studio we'd only use Assembly classes, or a small amount of custom CSS. Sadly sometimes things in className={} are misnamed or don't actually exist.

I think we should make an ESLint plugin that checks all className={} and classnames statements to ensure all classes are valid in MBX Assembly.

An escape hatch could be an ESLint option that accepts additional class names.

mbullington avatar Oct 12 '21 16:10 mbullington

eslint-plugin-tailwindcss has most of the code needed for this! https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/lib/rules/no-custom-classname.js

I think it would be cool if this were generalized beyond just Assembly, like a eslint-plugin-atomiccss or something where you just pass a list of CSS files and it scans class names.

Also need to double check if it supports JSX and classnames helper.

mbullington avatar Nov 09 '21 17:11 mbullington