How to use the aphrodite/no-important.StyleSheet.extend function in aphrodite

import { StyleSheet as baseStyleSheet } from 'aphrodite/no-important';
import store from 'kolibri.coreVue.vuex.store';
import theme from './theme';

const globalSelectorHandler = (selector, _, generateSubtreeStyles) => {
  if (selector[0] !== '*') {
    return null;
  }

  return generateSubtreeStyles(selector.slice(1));
};

const globalExtension = { selectorHandler: globalSelectorHandler };

const { StyleSheet, css } = baseStyleSheet.extend([globalExtension]);

function generateGlobalStyles() {
  const htmlBodyStyles = {
    color: theme.$themeTokens().text,
    backgroundColor: theme.$themeColors().palette.grey.v_100,
  };

  const globalStyles = StyleSheet.create({
    globals: {
      '*html': htmlBodyStyles,
      '*body': htmlBodyStyles,
      '*:focus': theme.$coreOutline(),
      '*hr': {
        borderTop: `1px solid ${theme.$themeTokens().textDisabled}`,
      },
      '*::selection': {

import { colors } from 'constants'

const globalSelectorHandler = (
  selector: string[],
  _: string,
  generateSubtreeStyles: (string[]) => *
): * => {
  if (selector[0] !== '*') {
    return null
  }
  return generateSubtreeStyles(selector.slice(1))
}

const globalExtension: Object = { selectorHandler: globalSelectorHandler }
const extended = StyleSheet.extend([globalExtension])

const styles = extended.StyleSheet.create({
  globals: {
    '*html': {
      margin: 0,
      padding: 0,
      fontSize: 16,
    },
    '*button': {
      margin: 0,
      padding: 0,
      border: 0,
      background: 'none',
      fontSize: '100%',
      verticalAlign: 'baseline',
      fontFamily: 'inherit',