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

3.0.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

The simplest, smallest CSS-in-JS solution.

const className = cxs({ color: 'tomato' })

CXS is a functional CSS-in-JS solution that uses atomic styles to maximize deduplication and help with dead code elimination.

Features

~6KB
Avoids collisions with atomic rulesets
Deduplicates repeated styles
Dead-code elimination
Framework independent
CSS-in-JS
- Media queries
- Pseudoclasses
- Nested selectors
- Avoid maintaining separate stylesheets
- Use plain JS objects and types
- No tagged template literals

Install

npm install cxs

Usage

CXS works with any framework, but this example uses React for demonstration purposes.

import React from 'react'
import cxs from 'cxs'

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

const className = cxs({
  padding: 32,
  backgroundColor: 'tomato'
})

export default Box

Pseudoclasses

cxs({
  color: 'tomato',
  ':hover': {
    color: 'red'
  }
})

Media Queries

cxs({
  color: 'tomato',
  '@media (min-width: 40em)': {
    color: 'red'
  }
})

Nested Selectors

cxs({
  color: 'tomato',
  h1: {
    color: 'red'
  }
})

Server-Side Rendering

To use CXS in server environments, use the css() function to get the static CSS string after rendering a view.

import React from 'react'
import ReactDOMServer from 'react-dom/server'
import cxs, { css, reset } from 'cxs'
import App from './App'

const html = ReactDOMServer.renderToString(<App />)

const doc = `<!DOCTYPE html>
<style>${css()}</style>
${html}
`

// reset the cache for the next render
reset()

Monolithic Mode

To create encapsulated monolithic styles with CXS and use single hashed class names, import the monolithic module.

import cxs from 'cxs/monolithic'

The monolithic module also accepts custom selectors for styling things like the body element.

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

API

import cxs, {
  css,
  sheet,
  reset
} from 'cxs'
// Creates styles and returns micro classnames
cxs({ color: 'tomato' })

// Returns a CSS string of attached rules. Useful for server-side rendering
css()

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

// Clear the cache and flush the glamor stylesheet.
// This is useful for cleaning up in server-side contexts.
cxs.reset()

How it Works

The CXS function creates a separate rule for each declaration, adds CSS rules to a style tag in the head of the document, and returns multiple classnames.

The returned classname is based on the property and value of the declaration. Some classnames are abbreviated, and long classnames are hashed.

cxs({ color: 'tomato' })
// c-tomato

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)

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 05 Dec 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