How to use jss-preset-default - 10 common examples

To help you get started, we’ve selected a few jss-preset-default 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 adibas03 / online-ethereum-abi-encoder-decoder / src / styles / createContext.js View on Github external
import { create, SheetsRegistry } from "jss";
import preset from "jss-preset-default";
import { createMuiTheme } from "@material-ui/core/styles";
import { blue, green } from "@material-ui/core/colors";
import createGenerateClassName from "@material-ui/core/styles/createGenerateClassName";

const theme = createMuiTheme({
  palette: {
    primary: blue,
    secondary: green,
  },
});

// Configure JSS
const jss = create(preset());
jss.options.createGenerateClassName = createGenerateClassName;

export default function createContext() {
  return {
    jss,
    theme,
    // This is needed in order to inject the critical CSS.
    sheetsRegistry: new SheetsRegistry(),
  };
}
github thedevs-network / website / styles / getContext.js View on Github external
import { create, SheetsRegistry } from 'jss';
import preset from 'jss-preset-default';
import { createMuiTheme } from 'material-ui/styles';
import deepPurple from 'material-ui/colors/deepPurple';
import blue from 'material-ui/colors/blue';
import createGenerateClassName from 'material-ui/styles/createGenerateClassName';

const theme = createMuiTheme({
  palette: {
    primary: deepPurple,
    secondary: blue,
  },
});

// Configure JSS
const jss = create(preset());
jss.options.createGenerateClassName = createGenerateClassName;

function createContext() {
  return {
    jss,
    theme,
    // This is needed in order to deduplicate the injection of CSS in the page.
    sheetsManager: new Map(),
    // This is needed in order to inject the critical CSS.
    sheetsRegistry: new SheetsRegistry(),
  };
}

export default function getContext() {
  // Make sure to create a new store for every server-side request so that data
  // isn't shared between connections (which would be bad)
github sharynjs / sharyn / src / components / Providers.js View on Github external
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider'
// flow-disable-next-line
import globalJss from 'jss'
import jssPreset from 'jss-preset-default'
import JssProvider from 'react-jss/lib/JssProvider'
import { Provider } from 'react-redux'
import { BrowserRouter, StaticRouter } from 'react-router-dom'
import nest from 'recompose/nest'
import withProps from 'recompose/withProps'

import createSharynStore from '../redux/store'
import spread from '../util/spread'
import spreadIf from '../util/spreadIf'
import GlobalStylesProvider from './GlobalStylesProvider'

const defaultJss = globalJss.setup(jssPreset())

const Providers = ({
  children,
  App,
  theme,
  globalStyles,
  store = createSharynStore(),
  isSsr,
  url,
  jss = defaultJss,
  routerContext,
  sheetsRegistry,
}: {
  children?: any,
  App?: Function,
  store?: Object,
github microsoft / fluent-ui-react / packages / react-theming / src / index.ts View on Github external
export { mergeSlotProps } from './utilities/mergeSlotProps';
export { compose } from './compose';

// Workaround for webpack warnings
import { IStandardProps as P } from './utilities/mergeSlotProps';
import { ForwardRefComponent as ForwardRefComponentInternal } from './compose';

export type IStandardProps = P;
export type ForwardRefComponent = ForwardRefComponentInternal;

export { ThemeContext } from './themeContext';
export { ThemeProvider } from './components/ThemeProvider/ThemeProvider';
export { Box } from './components/Box/Box';
export { createTheme } from './utilities/createTheme';

jss.setup(preset());
github kynikos / wiki-monkey / src / lib / index.js View on Github external
module.exports.init = function () {
  /* eslint-disable global-require */
  const Vue = require('vue').default
  const Vuex = require('vuex').default
  Vue.use(Vuex)
  module.exports = {Vue, Vuex}

  module.exports.h = require('hyperscript')

  module.exports.moment = require('moment')

  const jss = require('jss').default
  jss.setup(require('jss-preset-default').default())
  const jssopts = {classNamePrefix: 'WikiMonkey-'}

  module.exports.jssc = (style) => jss.createStyleSheet(style, jssopts).attach()

  module.exports.styled = require('@kynikos/vue-styled-jss')(jss, jssopts)

  // Clipboard.js doesn't import well with Browserify
  // https://github.com/zenorocha/clipboard.js/issues/535
  // module.exports.ClipboardJS = require('clipboard')
  module.exports.ClipboardJS = require('clipboard/dist/clipboard.min')

  const language = require('element-ui/lib/locale/lang/en').default
  const locale = require('element-ui/lib/locale').default
  locale.use(language)
  require('%/app/element.sass')
  Vue.use(require('element-ui/lib/autocomplete').default)
github milesj / aesthetic / tests / bundle.tsx View on Github external
  jss: () => new JSSAdapter(createJSS(jssPreset())),
  typeStyle: () => new TypeStyleAdapter(new TypeStyle({ autoGenerateTag: true })),
github KarolAltamirano / generator-react-web / app / templates / src / style / global.js View on Github external
},
    a: {
      color: theme.color04,
      textDecoration: 'underline',
      cursor: 'pointer',
      '&:hover': {
        color: theme.color05,
      },
    },
    canvas: {
      display: 'block',
    },
  },
};

jss.setup(preset());
jss.createStyleSheet(styles, { meta: __filename }).attach();
github teleporthq / teleport-code-generators / src / plugins / react / react-css-modules / utils.ts View on Github external
import * as types from '@babel/types'

import preset from 'jss-preset-default'
import jss from 'jss'
jss.setup(preset())

import { cammelCaseToDashCase, stringToCamelCase } from '../../../shared/utils/string-utils'
import {
  addJSXTagStyles,
  addExternalPropOnJsxOpeningTag,
} from '../../../shared/utils/ast-jsx-utils'
import { ParsedASTNode } from '../../../shared/utils/ast-js-utils'

import { ContentNode, StyleDefinitions } from '../../../uidl-definitions/types'

export const splitDynamicAndStaticProps = (style: Record) => {
  return Object.keys(style).reduce(
    (acc: { staticStyles: Record; dynamicStyles: Record }, key) => {
      const value = style[key]
      if (typeof value === 'string' && value.startsWith('$props.')) {
        acc.dynamicStyles[key] = value.replace('$props.', '')
github xenophilicibex / react-kronos / src / index.js View on Github external
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ReactDOM from 'react-dom'
import Moment from 'moment'

import cn from 'classnames'

import jss from 'jss'
import preset from 'jss-preset-default'
jss.setup(preset())

import { Keys, Levels, Units, Types } from './constants'
import Calendar from './calendar'
import createStyledComponent from './styled-component'
import getStyle from './styles'

const ISOregex = /((\d{4}\-\d\d\-\d\d)[tT]([\d:\.]*)?)([zZ]|([+\-])(\d\d):?(\d\d))/
const minutesOfDay = m => {
  return Moment(m).minutes() + Moment(m).hours() * 60
}

class Kronos extends Component {
  constructor(props) {
    super(props)

    this.state = {
github cssinjs / jss / packages / babel-plugin / src / index.js View on Github external
export default declare((api, {identifiers, jssOptions = preset(), theme = {}}) => {
  api.assertVersion(7)

  const jss = createJss(jssOptions)

  return {
    visitor: {
      CallExpression(callPath) {
        if (!isSupportedCallIdentifier(callPath, identifiers)) return
        const stylesNode = findStylesNode(callPath)
        const styles = serializeNode(callPath, stylesNode, theme)
        const sheet = jss.createStyleSheet(styles)

        if (!sheet.toString()) return

        insertRawRule(callPath, stylesNode, sheet)
        removeNonFunctionProps(callPath, stylesNode)

jss-preset-default

Default preset for JSS with selected plugins.

MIT
Latest version published 2 years ago

Package Health Score

70 / 100
Full package analysis

Popular jss-preset-default functions