New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

cxs

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

cxs

A CSS-in-JS solution for functional CSS in functional UI components

2.1.0-b0
npm

Version published: 8 years ago

Weekly downloads: 12K; increased by0.01%

Maintainers: 2

Weekly downloads

Created: 9 years ago

Source

ϟ cxs

Functional CSS for functional UI components

cxs is a css-in-js solution to dynamically create stylesheets with a functional approach

Features

5.6KB gzipped
Avoids collisions with consistently hashed classnames
Supports pseudo-classes without JS event listeners
Supports media queries without using window.matchMedia
Support @keyframe rules
Supports nested selectors - useful for styling markdown and other user-generated content
Dedupes repeated styles
Avoid maintaining and using custom syntax or classname DSLs from CSS frameworks and manually written CSS
Scoped styles with a component-based architecture
No separate CSS files to process or maintain
Optionally extract common CSS declarations like display: block and float: left
Use JavaScript to author styles
- Objects & Object.assign
- Module imports
- Anything from npm
- Numbers and operators
- Functions
- Plus whatever you can dream up
- No fiddling with tagged template literals

npm i cxs

Example Usage

// UI component example
import yo from 'yo-yo'
import cxs from 'cxs'

const Button = ({ text, onclick }) => {

  // Pass a style object to cxs, which returns a string for
  // adding hashed classnames to HTML.
  const className = cxs({
    // Numbers are converted to px values.
    fontSize: 14,
    color: 'white',
    backgroundColor: '#07c',
    // Pseudo classes and @media queries work as well.
    ':hover': {
      backgroundColor: '#06b'
    },
    '@media screen and (min-width:40em)': {
      fontSize: 18
    }
  })

  // cxs attaches a stylesheet to the head and updates
  // rules with each call.

  // Apply the classname to your component
  return yo`
    <button
      className=${className}
      onclick=${onclick}>
      ${text}
    </button>
  `
}

Server-Side Rendering

// For server-side rendering,
// get the CSS string after rendering a component tree
const body = view(state).toString()
const css = cxs.css

// Reset the cache for subsequent renders
cxs.reset()

const html `<!DOCTYPE html>
<html>
  <head>
    <style>${css}</style>
  </head>
  <body>${body}</body>
</html>
`

Using with React

import React from 'react'

const Box = (props) => {
  return (
    <div {...props} className={cx} />
  )
}

// Static styles can be outside of the component render function for better performance.
const cx = cxs({
  boxSizing: 'border-box',
  padding: 32,
  borderRadius: 3,
  backgroundColor: '#f6f6f6'
})

export default Button

Global Selectors

Normally, you should avoid adding global selectors to the page, but cxs can be used to set base body styles. Pass a string as the first argument to create a style with a custom selector.

cxs('body', {
  fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
  lineHeight: 1.5,
  margin: 0
})

Note: if you ARE NOT using babel, be sure to import with require('cxs').default

API

// Returns a hashed className string and creates CSS rules for style objects
const className = cxs({ color: 'tomato' })

// An array of attached CSS rules
const rules = cxs.rules

// A CSS string of attached rules. Useful for server-side rendering
const css = cxs.css

// The threepointone/glamor StyleSheet instance
// See https://github.com/threepointone/glamor
cxs.sheet

Vendor prefixes

cxs does not handle vendor prefixing to keep the module size at a minimum. To add vendor prefixes, use a prefixing module like inline-style-prefixer

import cxs from 'cxs'
import prefixer from 'inline-style-prefixer/static'

const prefixed = prefixer({
  display: 'flex'
})
const cx = cxs(prefixed)

Common Declaration Utilities

Cxs comes with an alternative, experimental module that attempts to extract commonly used declarations, such as margin: 0 and display: block, into global utility rulesets.

To use the common declarations version, import the following instead of cxs.

import cxs from 'cxs/optimized'

Each common utility selector follows this pattern: .cxs-<property>-<value>. Once a utility ruleset has been registered, cxs will not add that ruleset to the stylesheet again, unless the cxs.clear() method has been called.

Other CSS-in-JS options

Compared to other, similar modules, cxs is an attempt to create a smaller and simpler API and a smaller overall module. For more customizable and robust solutions, see the following:

Browser support

IE9+, due to the following:

Array.filter
Array.map
Array.reduce
Array.forEach

MIT License

FAQs

What is cxs?

Is cxs popular?

Is cxs well maintained?

Package last updated on 16 Nov 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install