React Functional Component (FC) with external Vanilla Extract Stylesheet

Create files based on this template with:

npx @lukasbach/scripts template react-fc-vanillaextract

After installing ldo with npm install -g @lukasbach/scripts, you can use any of the shortcuts fcv, fcvanilla to run this script, such as:

npm install -g @lukasbach/scripts
ldot fcv

Variables

• name: Component Name (default: MyComponent)
  • Specify with --name <value>
• stylesheet: Stylesheet File name (default: {{ pascalCase name }})
  • Specify with --stylesheet <value>

Files

Running the template will create the following files:

Component (./{{ kebabCase name }}.tsx)

import { FC } from "react";
import * as styles from "./{{ kebabCase stylesheet }}.css.ts";

export const {{ pascalCase name }}: FC<{}> = ({}) => {
  return (
    <div className={styles.container}>
      hello
    </div>
  );
};

Stylesheet (./{{ kebabCase stylesheet }}.css.ts)

import { style } from "@vanilla-extract/css";

export const container = style({
  backgroundColor: "red",
});

Jest (./{{ kebabCase stylesheet }}.css)

This file will only be created when called with --jest.

import { render } from "@testing-library/react";
import { {{ pascalCase name}} } from "./{{ kebabCase name }}";

describe("{{ kebabCase name }}", () => {
  it("should render", () => {
    const { getByText } = render(<{{ pascalCase name}} />);
    expect(getByText("hello")).toBeInTheDocument();
  });
});

Vitest (./{{ kebabCase stylesheet }}.css)

This file will only be created when called with --vitest.

import { describe, expect, it } from "vitest";
import { render } from "@testing-library/react";
import { {{ pascalCase name}} } from "./{{ kebabCase name }}";

describe("{{ kebabCase name }}", () => {
  it("should render", () => {
    const { getByText } = render(<{{ pascalCase name}} />);
    expect(getByText("hello")).toBeInTheDocument();
  });
});