Editor integration

className snippet for css macro

In VScode create a shortcut for the css.props() object expansion in className.
shift + command + p >
select > Snippets: Configure Snippets
select > typescriptreact.json (TypeScript JSX) or javascriptreact.json (JavaScript JSX)

{
  "React className": {
    "prefix": "css",
    "body": "className={css.props($1)}",
    "description": "React className with css.props()",
  }
}

Macro Usage

<div css /> -> Enter -> <div className={css.props(|)} />

ESLint

It is the plumeria Linter @plumeria/eslint-plugin package

Terminal

npm i --save-dev @plumeria/eslint-plugin

Terminal

pnpm i --save-dev @plumeria/eslint-plugin

Terminal

yarn add -D @plumeria/eslint-plugin

eslint.config.ts

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import { defineConfig } from 'eslint/config';
import { plumeria } from '@plumeria/eslint-plugin';

export default defineConfig(
  eslint.configs.recommended,
  tseslint.configs.recommended,
  plumeria.flatConfigs.recommended,
  {
    files: ['**/*.{ts,tsx}'],
  }
);

eslint.config.js

const eslint = require('@eslint/js');
const tseslint = require('typescript-eslint');
const { defineConfig } = require('eslint/config');
const { plumeria } = require('@plumeria/eslint-plugin');

module.exports = defineConfig(
  eslint.configs.recommended,
  tseslint.configs.recommended,
  plumeria.flatConfigs.recommended,

  {
    files: ['**/*.{ts,tsx}'],
  }
);

.eslintrc.json

{
  "plugins": ["@plumeria"],
  "extends": ["plugin:@plumeria/recommended"],     
  "rules": {}
}

It is good know navigation

You can jump to definitions from styles even if they are not written in JSX command or Alt + click.

Editor integration

className snippet for css macro

Macro Usage

ESLint

See more about @plumeria/eslint-plugin

On this page