How to use the @uifabric/merge-styles.Stylesheet.getInstance function in @uifabric/merge-styles

To help you get started, we’ve selected a few @uifabric/merge-styles examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github OfficeDev / office-ui-fabric-react / packages / jest-serializer-merge-styles / src / index.ts View on Github external
export function print(val: string, serialize: () => string, indent: (val: string) => string): string {
  const classNames = [];
  const rules = [];
  const parts = val.split(' ');

  // Iterate through all class names in the value, and for each, determine if merge-styles
  // has a ruleset registered for the class. If so, serialize it to an expanded string. If not
  // add it to the static classNames array, as it's likely a global class name.
  for (const part of parts) {
    const ruleSet = Stylesheet.getInstance().insertedRulesFromClassName(part);

    if (ruleSet) {
      rules.push(_serializeRules(ruleSet, indent));
    } else {
      classNames.push(part);
    }
  }

  return [``, `${classNames.map((cn: string) => indent(cn)).join('\n')}`, `${rules.join('\n')}`].join('\n');
}
github OfficeDev / office-ui-fabric-react / packages / jest-serializer-merge-styles / src / index.ts View on Github external
function _serializeRules(rules: string[], indent: (val: string) => string): string {
  const ruleStrings: string[] = [];
  const stylesheet = Stylesheet.getInstance();

  for (let i = 0; i < rules.length; i += 2) {
    const selector = rules[i];
    const insertedRules = rules[i + 1];

    if (insertedRules) {
      // Keyframes should not be parsed like other selector/rule mappings.
      if (selector !== 'keyframes') {
        ruleStrings.push(indent((i === 0 ? '' : selector + ' ') + `{`));
        insertedRules
          .split(';')
          .sort()
          .forEach((rule: string) => {
            if (rule) {
              const [name, value] = rule.split(':');
              let delimiter: string | RegExp = ' ';
github s-bauer / office-ui-fabric-vue / packages / styling / src / styles / getGlobalClassNames.ts View on Github external
(classNames: GlobalClassNames | any, disableGlobalClassNames?: boolean): Partial> => {
    const styleSheet = Stylesheet.getInstance();

    if (disableGlobalClassNames) {
      // disable global classnames
      return Object.keys(classNames).reduce((acc: any, className: string) => {
        acc[className] = styleSheet.getClassName(classNames[className]);
        return acc;
      }, {});
    }

    // use global classnames
    return classNames;
  }
);
github OfficeDev / office-ui-fabric-react / packages / utilities / src / classNamesFunction.ts View on Github external
import { mergeCssSets, IStyleSet, IProcessedStyleSet, Stylesheet } from '@uifabric/merge-styles';
import { IStyleFunctionOrObject } from '@uifabric/merge-styles';
import { getRTL } from './rtl';

const MAX_CACHE_COUNT = 50;
let _memoizedClassNames = 0;

const stylesheet = Stylesheet.getInstance();

if (stylesheet && stylesheet.onReset) {
  stylesheet.onReset(() => _memoizedClassNames++);
}

// Note that because of the caching nature within the classNames memoization,
// I've disabled this rule to simply be able to work with any types.
// tslint:disable:no-any

// This represents a prop we attach to each Map to indicate the cached return value
// associated with the graph node.
const RetVal = '__retval__';

interface IRecursiveMemoNode extends Map {
  [RetVal]?: string;
}
github microsoft / accessibility-insights-web / src / injected / stylesheet-init.ts View on Github external
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
import { Stylesheet } from '@uifabric/merge-styles';

const stylesheet = Stylesheet.getInstance();

stylesheet.setConfig({
    defaultPrefix: 'insights',
});
github OfficeDev / office-ui-fabric-react / packages / utilities / src / object.ts View on Github external
for (let sourceObject of args) {
    if (sourceObject) {
      for (let propName in sourceObject) {
        if (sourceObject.hasOwnProperty(propName) && (!isAllowed || isAllowed(propName))) {
          target[propName] = sourceObject[propName];
        }
      }
    }
  }

  return target;
}

// Configure ids to reset on stylesheet resets.
const stylesheet = Stylesheet.getInstance();

if (stylesheet && stylesheet.onReset) {
  stylesheet.onReset(resetIds);
}

/* Takes an enum and iterates over each value of the enum (as a string), running the callback on each, returning a mapped array.
 * The callback takes as a first parameter the string that represents the name of the entry, and the second parameter is the
 * value of that entry, which is the value you'd normally use when using the enum (usually a number).
 * */
export function mapEnumByName(
  // tslint:disable-next-line:no-any
  theEnum: any,
  callback: (name?: string, value?: string | number) => T | undefined
): (T | undefined)[] | undefined {
  // map to satisfy compiler since it doesn't realize we strip out undefineds in the .filter() call
  return Object.keys(theEnum)
github OfficeDev / office-ui-fabric-react / packages / styling / src / styles / getGlobalClassNames.ts View on Github external
(classNames: GlobalClassNames, disableGlobalClassNames?: boolean): Partial> => {
    const styleSheet = Stylesheet.getInstance();

    if (disableGlobalClassNames) {
      // disable global classnames
      return Object.keys(classNames).reduce((acc: {}, className: string) => {
        acc[className] = styleSheet.getClassName(classNames[className]);
        return acc;
      }, {});
    }

    // use global classnames
    return classNames;
  }
);
github s-bauer / office-ui-fabric-vue / packages / styling / src / utilities / icons.ts View on Github external
__remapped: { [key: string]: string };
  [key: string]: IIconRecord | {};
}

const ICON_SETTING_NAME = 'icons';

const _iconSettings = GlobalSettings.getValue(ICON_SETTING_NAME, {
  __options: {
    disableWarnings: false,
    warnOnMissingIcons: true
  },
  __remapped: {}
});

// Reset icon registration on stylesheet resets.
const stylesheet = Stylesheet.getInstance();

if (stylesheet && stylesheet.onReset) {
  stylesheet.onReset(() => {
    for (const name in _iconSettings) {
      if (_iconSettings.hasOwnProperty(name) && !!(_iconSettings[name] as IIconRecord).subset) {
        (_iconSettings[name] as IIconRecord).subset.className = undefined;
      }
    }
  });
}

/**
 * Normalizes an icon name for consistent mapping.
 * Current implementation is to convert the icon name to lower case.
 *
 * @param name - Icon name to normalize.
github s-bauer / office-ui-fabric-vue / packages / utilities / src / object.ts View on Github external
for (const sourceObject of args) {
    if (sourceObject) {
      for (const propName in sourceObject) {
        if (sourceObject.hasOwnProperty(propName) && (!isAllowed || isAllowed(propName))) {
          target[propName] = sourceObject[propName];
        }
      }
    }
  }

  return target;
}

// Configure ids to reset on stylesheet resets.
const stylesheet = Stylesheet.getInstance();

if (stylesheet && stylesheet.onReset) {
  stylesheet.onReset(resetIds);
}

/**
 * Generates a unique id in the global scope (this spans across duplicate copies of the same library.)
 *
 * @public
 */
export function getId(prefix?: string): string {
  const index = _global[CURRENT_ID_PROPERTY]++;

  return (prefix || DEFAULT_ID_STRING) + index;
}
github OfficeDev / office-ui-fabric-react / packages / jest-serializer-merge-styles / src / index.ts View on Github external
    return parts.some((part: string): boolean => !!Stylesheet.getInstance().insertedRulesFromClassName(part));
  }