How to use the aphrodite.StyleSheet.extend function in aphrodite

To help you get started, we’ve selected a few aphrodite 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 milesj / aesthetic / packages / adapter-aphrodite / src / AphroditeAdapter.ts View on Github external
constructor(extensions: Extension[] = []) {
    super();

    this.aphrodite = Aphrodite.extend([
      ...extensions,
      { selectorHandler: this.handleHierarchySelector },
      { selectorHandler: this.handleGlobalSelector },
    ]);

    this.syntax
      .on('attribute', this.handleNested)
      .on('css', this.handleCss)
      .on('font-face', this.handleFontFace)
      .on('global', this.handleGlobal)
      .on('keyframe', this.handleKeyframe)
      .on('media', this.handleMedia)
      .on('property', this.handleProperty)
      .on('pseudo', this.handleNested)
      .on('selector', this.handleNested);
  }
github contentacms / contenta_react / src / App.jsx View on Github external
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import routes from './routes';
import LoadingBar from 'react-redux-loading-bar';
import 'normalize.css/normalize.css';
import { StyleSheet } from 'aphrodite';

const globalSelectorHandler = (selector, _, generateSubtreeStyles) => {
  if (selector[0] !== "*") {
    return null;
  }
  return generateSubtreeStyles(selector.slice(1));
};
const extendedStylesheet = StyleSheet.extend([{selectorHandler: globalSelectorHandler}]);

const App = () => (
  <div>
    
    
  </div>