Function galeCopy item path

Tailwind-like style engine, but uses griffel

the benefit with griffel is we don't get duplicate CSS rules from griffel and tailwind, and LTR/RTL works (which is one of the main reasons we use griffel in the first place).

There are 3 places to define styles in this architecture:

• Built-in style names - see GALE_BUILTIN_STYLES
• Project-level styles defined with gale function. For example:

  import { gale } from "@pistonite/celera";
  
  export const useStyleEngine = gale({
      "pad-s": {
          padding: 8
      }
  });
  Copy

  These will be merged with the built-in styles (and could override them)
• Lastly, component-level styles defined with useStyleEngine exported from above. This is similar to makeStyles from griffel.

  import { useStyleEngine } from "./path/to/my_style.ts";
  
  const useStyles = useStyleEngine.extend({
      "my-container": {
          width: 500
      }
  });
  Copy

To use the style engine in a component, either invoke the project-level hook useStyleEngine(), or the component-level hook useStyles(). The style string passed to m is type-checked by TypeScript to be a space-separated list of style classes.

import { makeStyles } from "@fluentui/react-components";

export const MyComponent = () => {
    const m = useStyleEngine(); // project-level style idents
    return <div className={m("wh-100 padding-0")}>my component</div>;
};

export const MyComponent2 = () => {
    const m = useStyles(); // component-level style idents
    return <div className={m("h-100 my-container")}>my component</div>;
};

const useExtraStyles = makeStyles({
    extra: {
        overflow: "hidden"
    }
});

export const MyComponent3 = () => {
    const m = useStyles(); // component-level style idents
    // if needed (should be rare), you can interop with hooks from griffel
    const c = useExtraStyles();
    return <div className={m("h-100 my-container", c.extra)}>my component</div>;
};
Copy