npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

styled-jss

v2.2.3

Published

Styled Components on top of JSS.

Downloads

3,352

Readme

Styled Components on top of JSS

Travis branch Coverage Status branch npm version npm license

Styled-JSS implements a styled-primitives interface on top of JSS. Its API is similar to styled-components but thanks to the JSS core, it supports all features and plugins JSS does. For e.g. you can use full JSON Syntax inside.

Try it out on playground.

Default styled function

import styled from 'styled-jss'

const Button = styled('button')({
  fontSize: 12,
  color: (props) => props.theme.textColor
})

// You can also use curried interface this way.
const div = styled('div')

const Container = div({
  padding: 20
})

// Composition.
const PrimaryButton = styled(Button)({
  color: 'red'
})

// Composition with unstyled React Components too.
const Button = styled(UnstyledButton)({
  color: 'blue'
})

// Component Selectors.
const ButtonContainer = styled(Container)({
  [`& ${PrimaryButton}`]: {
    color: 'green'
  }
})

Theming

styled-jss has out of the box support for theme customization with the unified theming package.

import styled, {ThemeProvider} from 'styled-jss'

const Button = styled('button')(({margin, theme}) => ({
  margin,
  color: theme.color,
  backgroundColor: theme.backgroundColor,
}))

const themes = {
  light: {
    color: 'black',
    backgroundColor: 'yellow',
  },
}

const App = () => (
  <ThemeProvider theme={themes.light}>
    <Button margin={20}>This is themed Button</Button>
  </ThemeProvider>
)

export default App

Composable styles

Example on the CodeSandbox

You can compose your style-objects and style-functions.

Let's say this is our mods.js:

export const theme = ({ theme }) => ({
  color: theme.colors.primary,
  backgroundColor: theme.colors.secondary,
})

export const font = ({ bold }) => ({
  font: {
    weight: bold ? 'bold' : 'normal',
    family: 'Arial',
  },
})

export const size = ({ size = 'm' }) => ({
  s: {
    fontSize: 12,
    lineHeight: 1.2,
  },
  m: {
    fontSize: 16,
    lineHeight: 1.5
  }
})[size]

export const rounded = ({ rounded }) => rounded && { borderRadius: 5 }

Now we can mix them to our Button Component:

import styled from 'styled-jss'
import {theme, font, size, rounded} from 'mods'

const Button = styled('button')(
  {
    border: 0,
    padding: [5, 10],
    display: 'inline-block',
  },
  theme,
  font,
  size,
  rounded,
)

export default Button

And Usage:

import {ThemeProvider} from 'styled-jss'
import Button from './components/Button'

const theme = {
  dark: {
    colors: {
      primary: 'white',
      secondary: 'purple'
    }
  }
}

export default () => (
  <ThemeProvider theme={theme.dark}>
    <Button>normal button</Button>
    <Button bold>bold button</Button>
    <Button size="s">small button</Button>
    <Button rounded>rounded button</Button>
  </ThemeProvider>
)

Base Style Sheet

Using base Style Sheet we can reuse classes in the render function and inside of a styled component.

import { Styled, injectStyled } from 'styled-jss'

// Base styles, like a regular jss object.
const styled = Styled({
  root: {
    margin: 10,
    '& $baseButton': {
      fontSize: 16
    }
  },
  baseButton: {
    padding: 10,
    '& + &': {
      marginLeft: 10
    }
  }
})

const NormalButton = styled('button')({
  composes: '$baseButton',
  border: [1, 'solid', 'grey'],
  color: 'black'
})

// Composition - same way.
const PrimaryButton = styled(NormalButton)({
  color: 'red'
})

// One can use classes AND styled primitives.
const MyComponent = ({classes}) => (
  <div className={classes.root}>
    <NormalButton>normal button</NormalButton>
    <PrimaryButton>primary button</PrimaryButton>
  </div>
)

const MyStyledComponent = injectStyled(styled)(MyComponent)

Custom JSS setup

Styled-JSS uses jss-preset-default by default. You can require createStyled function and provide your custom JSS instance.

import { create as createJss } from 'jss'
import vendorPrefixer from 'jss-vendor-prefixer'
import createStyled from 'styled-jss/createStyled'

const jss = createJss()
jss.use(vendorPrefixer())

// Create a custom Styled function, that allows to set BaseStyles.
export const Styled = createStyled(jss)

// Create a custom styled function that allows to create styled components.
const styled = Styled()

export default styled

Install

npm install --save styled-jss

Install peer dependencies react and react-dom in your project.

License

MIT