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-system-mapper

v0.0.2

Published

A library that allows using style functions from [styled-sytem](https://github.com/jxnblk/styled-system) with values that map to the keys of theme objects instead of array indices.

Downloads

10

Readme

Styled system mapper

A library that allows using style functions from styled-sytem with values that map to the keys of theme objects instead of array indices.

Why?

In order to use style property space from styled-system with custom values, a space array should be added to theme. Then the array indices could be used as values for space properties on a component:

<Box mt={2} pt={[ 0, 1, 2 ]} mb={{ xs: 1, md: 3 }}/>

However, it can be difficult to get used to indices for values of spacing and challenging to remember the correct values that have to be applied on different breakpoints. Moreover, theme properties are quite often defined as key/values, e.g.:

const spacingUnit = 10

const space = {
  xsmall: spacingUnit,
  small: spacingUnit * 2,
  medium: spacingUnit * 4,
  large: spacingUnit * 6,
  xlarge: spacingUnit * 8,
}

It might be more intuitive and convenient to define spacing values as an object with key/values and use the actual keys instead of indicies:

<Box mt="small" pt={[ "xsmall", "small", "medium" ]} mb={{ xs: "small", md: "large" }}/>

And that's what the library does. It exposes utility functions that try to map the values for space and width properties passed into the component to the custom keys defined in theme before they reach styled-system. If no mapping exists, the value is passed as is, which means that all kinds of values supported by styled-system can be used.

Typescript support includes autocompletion for the keys in the space object in theme.

Usage

Currently supports space and width props that will be mapped to the keys of the space object. The examples below demonstrate usage with Typescript and emotion.

First, create a typed version of styled with a theme that will have a space object and the types for space and width props that will be used as component's props:

import styled, { CreateStyled } from '@emotion/styled'
import { StyledSpaceProps, StyledWidthProps } from 'styled-system-mapper'

const spacingUnit = 10

const space = {
  xsmall: spacingUnit,
  small: spacingUnit * 2,
  medium: spacingUnit * 4,
  large: spacingUnit * 6,
  xlarge: spacingUnit * 8,
}

const theme = {
  space,
}

export type SpaceProps = StyledSpaceProps<typeof space>
export type WidthProps = StyledWidthProps<typeof space>

export default styled as CreateStyled<typeof theme>

Pass the theme object into ThemeProvider of a CSS-in -JS library that has theming support:

import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import { theme } from '.\styled'

const App: React.FunctionComponent = () => (
  <ThemeProvider theme={theme}>
    <...>
  </ThemeProvider>
)

Create a reusable component that will use the space and width props:

import { BgColorProps, bgColor } from 'styled-system'
import { space, width } from 'styled-system-mapper'

import styled, { SpaceProps, WidthProps } from './styled'

type Props = BgColorProps & SpaceProps & WidthProps

const Box = styled('div')<Props>(
  {
    boxSizing: 'border-box'
  },
  bgColor,
  space,
  width
)

export default Box

Any other style props from styled-system can combined together with style and width from styled-system-mapper.

Now the component is ready to be used:

<Box bgColor="#A4A4A4" p={{ xs: "small", sm: "medium", md: "xlarge" }} mb="medium">
  Look at me!
</Box>

TODO

  • mapper for color keys and font sizes,
  • tests, tests, tests...