@fluentui/babel-make-styles

@fluentui/babel-make-styles

A Babel plugin that performs build time transforms for @fluentui/react-make-styles.

Install

yarn add @fluentui/babel-make-styles

Usage

.babelrc

{
  "plugins": ["module:@fluentui/babel-make-styles"]
}

Transforms

This plugin is designed to performed build time transforms for @fluentui/react-make-styles, it supports both ES modules and CommonJS thus can be used in post processing after TypeScript, for example.

Transforms applied by this plugin allow to strip runtime part of makeStyles() and improve performance.

Example

Transforms

import { makeStyles } from '@fluentui/react-make-styles';

const useStyles = makeStyles({
  root: { color: 'red' },
});

roughly to

import { __styles } from '@fluentui/react-make-styles';

const useStyles = __styles({
  root: {
    /* resolved styles */
  },
});