Skip to content
/ raikou Public

Mantine fork to support Css-in-js build time

License

Notifications You must be signed in to change notification settings

paulm17/raikou

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


Logo

RAIKOU

Raikou is a mantine fork which replaces css modules to adopt a unocss first-use approach.

Push the envelope, watch it bend.

About The Project

Mantine 6 with CSS-in-JS allowed for styles to be adjacent to the component it was styling. However with Mantine 7 styling has switched to CSS Modules. Many in the industry see CSS Modules as a step backwards and I (the fork author) share this sentiment. Therefore forking the project to integrate unocss was the obvious choice.

The project was conceived with these 4 long-term goals:

  1. Facilitate css-in-js for all components.
  2. To ensure that there were no clashes between the bootstrapped CSS of the component and when using the Styles API via the emotion plugin.
  3. Once the pigment-css team move from WYW-in-JS to React compiler. To move from the emotion plugin generating runtime styles to the build process.

Project Caveats

  1. NextJS, Qwik and any other non-vite javascript frameworks are not supported. There are no intentions of supporting anything other than Vite javascript frameworks.

  2. There may be design decisions implemented that will diverge from Mantine.

    • Mantine and Raikou employ different approaches to manage the theme. While Mantine uses context and can be a runtime process for overrides. Raikou utilizes the pigment-css theme.

    • Next Themes is used in favour of the native mantine implementation.

    • Raikou uses Stylefusion which is a fork of pigment-css. Stylefusion negates the need for postcss and includes all the same functionality of postcss-mantine-preset.

(back to top)

Why not integrate pigment-css with mantine in the App?

Integrating Pigment-css with mantine at the app layer raises the complexity of the stack, also other issues of specificity are present.

CSS Modules is the wrong choice

Less headaches not dealing with postcss from a developer UX point of view.

Complaint

(back to top)

Built With

React

(back to top)

Mirrored Mantine release

Latest release = 7.13.2

Getting Started

To get a local copy up and running follow these simple example steps.

Installation to a vite application

  1. Install the required packages.
  • npm
npm install @raikou/core @raikou/emotion @raikou/system
npm -D install @stylefusion/vite-plugin
  • yarn
yarn add @raikou/core @raikou/emotion @raikou/system
yarn add -D @stylefusion/vite-plugin
  1. Change the vite.config.js to:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { pigment, extendTheme } from "@stylefusion/vite-plugin";
import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
import { getPigmentCSSTheme } from "@raikou/system";

const { cssTheme, rawTheme } = getPigmentCSSTheme();

const theme = extendTheme({
  cssVarPrefix: "raikou",
  getSelector: (colorScheme) =>
    colorScheme ? `[data-raikou-color-scheme='${colorScheme}']` : ":root",
  ...cssTheme,
});

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    pigment({
      atomic: false,
      theme,
      rawTheme,
    }),
    TanStackRouterVite({}),
    react(),
  ],
});

Pro-tip: When atomic is set to true, the build process will atomicify the final css payload.

  1. Add the Providers and stylesheets for the application:
import { Outlet, createRootRoute } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/router-devtools";
import { RaikouProvider } from "@raikou/system";
import { emotionTransform, RaikouEmotionProvider } from "@raikou/emotion";
import "@raikou/system/styles.css";
import "@stylefusion/react/styles.css";

export const Route = createRootRoute({
  component: RootComponent,
});

function RootComponent() {
  return (
    <>
      <RaikouProvider stylesTransform={emotionTransform}>
        <RaikouEmotionProvider>
          <Outlet />
        </RaikouEmotionProvider>
      </RaikouProvider>
      <TanStackRouterDevtools position="bottom-right" />
    </>
  );
}

(back to top)

Cloning the repo

  1. Run the following command
git clone https://github.com/paulm17/raikou
  1. Install all the package prerequisites
pnpm i
  1. To run the vite website
pnpm run dev
  1. To run storybook
pnpm run storybook

(back to top)

Roadmap

Raikou Components

  • Extend loader component to support more loaders from react-spinners-kit, react-spinners.
  • Include the original button spinner for mantine 6.
  • Extend Button to support the button spinner from mantine 6.
  • Copy the button loader from nextui.
  • Add ripple effect to the action icon and button components from nextui.
  • Add hero patterns from heropatterns.

Framer Motion

New Components

Storybook

  • Pigment-css team fixed Storybook 8 issues.

(back to top)

At this time, no contributions are sought. Thank you.

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Paul M - no social - no email

(back to top)

Acknowledgments

(back to top)

(back to top)

About

Mantine fork to support Css-in-js build time

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

Packages

No packages published

Languages