React-Nano style: React functional CSS-in-JS

nano-style

React functional CSS-in-JS

Build Status Coverage

npm i nano-style
  • Use object literals or CSS syntax
  • Pure React - no side effects
  • Functional styles
  • Theming support
  • Universal rendering with no additional setup
  • Removes props defined as propTypes from rendered HTML

Usage

Object Literal Syntax

import styled from 'nano-style'

const Button = styled('button')(props => ({
  fontFamily: 'inherit',
  fontSize: '14px',
  fontWeight: props.theme.bold,
  lineHeight: 16/14,
  display: 'inline-block',
  margin: 0,
  paddingLeft: props.theme.space[3] + 'px',
  paddingRight: props.theme.space[3] + 'px',
  paddingTop: props.theme.space[2] + 'px',
  paddingBottom: props.theme.space[2] + 'px',
  verticalAlign: 'middle',
  textAlign: 'center',
  textDecoration: 'none',
  borderRadius: props.theme.radius,
  border: 0,
  appearance: 'none',
  color: 'white',
  backgroundColor: props.theme.colors.blue,
  '&:hover': {
    boxShadow: `inset 0 0 0 999px ${darken(1/8)}`
  },
  '&:focus': {
    outline: 0,
    boxShadow: `0 0 0 2px ${props.theme.colors.blue}`
  },
  '&:active': {
    boxShadow: `inset 0 0 8px ${darken(1/4)}`
  },
  '&:disabled': {
    opacity: 1/4
  }
}))

CSS Syntax

import styled from 'nano-style/css'

const Button = styled('button')`
  font-family: inherit;
  font-size: 14px;
  font-weight: ${props => props.theme.bold};
  line-height: ${16/14};
  display: inline-block;
  margin: 0;
  padding-left: ${props => props.theme.space[3] + 'px'};
  padding-right: ${props => props.theme.space[3] + 'px'};
  padding-top: ${props => props.theme.space[2] + 'px'};
  padding-bottom: ${props => props.theme.space[2] + 'px'};
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  border-radius: ${props => props.theme.radius};
  border: 0;
  appearance: none;
  color: white;
  background-color: props.theme.colors.blue;

  &:hover {
    box-shadow: inset 0 0 0 999px ${darken(1/8)};
  }

  &:focus {
    outline: 0;
    box-shadow: 0 0 0 2px ${props => props.theme.colors.blue};
  }

  &:active {
    box-shadow: inset 0 0 8px ${darken(1/4)};
  }

  &:disabled {
    opacity: 1/4
  }
`

How it works

Using React 16's ability to return arrays of elements, nano-style generates CSS during component rendering and inserts CSS into a <style> element inlined with the component. The returned array looks something like this:

return [
  <Style css={css} />,
  <Component {...props} />
]

Caveats

Currently, this approach does not attempt to deduplicate repeated CSS when a single component is rendered in multiple instances. While this does work, it may present some slight performance issues when a component is used multiple times in a page.

Potential areas for improvement

  • Caching mechanism
  • Babel plugin

MIT License

Comments

  • nano-style for embedded devices
    nano-style for embedded devices

    Mar 22, 2018

    Inspired by this lib, created a 178 byte version as an exercise for lulz

    https://gist.github.com/streamich/09d99716d05304fe8c4ff9cf20d3c7d7

    Reply
  • Next v2
    Next v2

    Jun 24, 2018

                                                                                                                                                                                                           
    Reply
  • Bump codecov from 2.3.1 to 3.7.1
    Bump codecov from 2.3.1 to 3.7.1

    Jul 21, 2020

    Bumps codecov from 2.3.1 to 3.7.1.

    Release notes

    Sourced from codecov's releases.

    v3.6.4

    Fix for Cirrus CI

    v3.6.3

    AWS Codebuild fixes + package updates

    v3.6.2

    command line args sanitised

    v3.6.1

    Fix for Semaphore

    v3.6.0

    AWS CodeBuild Semaphore v2

    v3.3.0

    Added pipe --pipe, -l

    v3.1.0

    Custom Yaml file Token from .codecov.yml

    v3.0.4

    Security fixes

    v3.0.3

    Fix for not git repos

    V3.0.2

    No release notes provided.

    v3.0.1

    Fixing security vulnerability

    v3.0.0

    Removed support for node 0.12

    Commits
    Maintainer changes

    This version was pushed to npm by drazisil, a new releaser for codecov since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Add support for innerRef
    Add support for innerRef

    Jan 2, 2018

                                                                                                                                                                                                           
    Reply
  • Extend fix
    Extend fix

    Dec 3, 2017

                                                                                                                                                                                                           
    Reply
  • Render style tag after component
    Render style tag after component

    Oct 14, 2017

    • Ensures CSS source order when extending another nano-style component
    Reply
  • Stateful component
    Stateful component

    Oct 14, 2017

                                                                                                                                                                                                           
    Reply