or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

configuration.md font-animation.md index.md server-rendering.md style-sets.md styling.md

tile.json

Core Styling Functions

Primary functions for creating CSS classes from JavaScript style objects. These functions handle the core functionality of converting style objects into CSS class names with advanced features like pseudo-selectors, media queries, and conditional styling.

Capabilities

mergeStyles Function

The main styling function that takes one or more style objects and returns a single CSS class name. It handles arrays, falsy values, and combines styles in the specified order.

/**
 * Concatenation helper, which can merge class names together. Skips over falsey values.
 * @param args - Style objects, arrays, strings, or falsy values to merge
 * @returns A single CSS class name string
 */
function mergeStyles(...args: (IStyle | IStyleBaseArray | false | null | undefined)[]): string;

Usage Examples:

import { mergeStyles } from '@uifabric/merge-styles';

// Basic styling
const className = mergeStyles({
  background: 'red',
  color: 'white',
  padding: '10px'
});

// With pseudo-selectors
const buttonClass = mergeStyles({
  background: 'blue',
  color: 'white',
  ':hover': {
    background: 'darkblue'
  },
  ':focus': {
    outline: '2px solid lightblue'
  }
});

// Conditional styling with arrays
const dynamicClass = mergeStyles([
  { background: 'white' },
  isActive && { background: 'blue' },
  isDisabled && { opacity: 0.5 }
]);

// Media queries
const responsiveClass = mergeStyles({
  width: '100%',
  '@media (max-width: 600px)': {
    width: '50%'
  }
});

mergeCss Function

Lower-level function that accepts custom style options for advanced styling scenarios. Use this when you need specific control over RTL handling, specificity, or other processing options.

/**
 * Concatenation helper with custom options for style processing
 * @param args - Style objects or array of style objects to merge
 * @param options - Optional configuration for style processing
 * @returns A single CSS class name string
 */
function mergeCss(
  args: (IStyle | IStyleBaseArray | false | null | undefined) | (IStyle | IStyleBaseArray | false | null | undefined)[],
  options?: IStyleOptions
): string;

Usage Examples:

import { mergeCss } from '@uifabric/merge-styles';

// With custom options
const className = mergeCss([
  { marginLeft: '10px' },
  { paddingRight: '5px' }
], {
  rtl: true, // Enable RTL transformations
  specificityMultiplier: 2 // Increase CSS specificity
});

// Disable RTL for specific styles
const noRtlClass = mergeCss({
  left: '10px @noflip' // Won't be flipped in RTL mode
}, { rtl: true });

Advanced Style Object Features

Style objects support advanced CSS features through special syntax and properties.

Selector Support:

// Pseudo-selectors
const hoverStyle = mergeStyles({
  background: 'white',
  ':hover': { background: 'gray' },
  ':active': { background: 'darkgray' },
  ':focus': { outline: '2px solid blue' }
});

// Parent selectors
const parentStyle = mergeStyles({
  color: 'black',
  '.parent:hover &': {
    color: 'red'
  }
});

// Child selectors
const childStyle = mergeStyles({
  fontSize: '16px',
  '& .child': {
    fontSize: '14px'
  }
});

// Global selectors
const globalStyle = mergeStyles({
  ':global(body)': {
    margin: 0,
    padding: 0
  }
});

Media Queries and Feature Queries:

// Media queries
const responsiveStyle = mergeStyles({
  width: '100%',
  '@media (max-width: 768px)': {
    width: '50%'
  },
  '@media (max-width: 480px)': {
    width: '100%'
  }
});

// Feature queries
const modernStyle = mergeStyles({
  display: 'block',
  '@supports (display: grid)': {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr'
  }
});

Custom Display Names:

// Custom class name prefix
const customNameStyle = mergeStyles({
  displayName: 'MyComponent',
  background: 'red'
});
// Generates class like: .MyComponent-0

RTL Support:

// Automatic RTL flipping
const rtlStyle = mergeStyles({
  marginLeft: '10px',      // Becomes marginRight in RTL
  paddingRight: '5px',     // Becomes paddingLeft in RTL
  textAlign: 'left'        // Becomes textAlign: 'right' in RTL
});

// Prevent RTL flipping
const noFlipStyle = mergeStyles({
  left: '10px @noflip'     // Won't be flipped in RTL mode
});

Style Object Types

type IStyle = IStyleBase | IStyleBaseArray;

type IStyleBase = IRawStyle | string | false | null | undefined;

interface IStyleBaseArray extends Array<IStyle> {}

interface IRawStyle extends IRawStyleBase {
  /** Allow css variables, strings, objects for flexible styling */
  [key: string]: any;
  
  /** Display name for the CSS class */
  displayName?: string;
  
  /** @deprecated - Add selectors as siblings to other style properties */
  selectors?: {
    [key: string]: IStyle;
  };
}

interface IStyleOptions {
  /** Enable RTL (right-to-left) transformations */
  rtl?: boolean;
  
  /** Multiply CSS specificity by this factor */
  specificityMultiplier?: number;
}