Socket
Book a DemoInstallSign in
Socket

cxsync

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

cxsync

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

2.2.2
latest
Source
npmnpm
Version published
Weekly downloads
95
35.71%
Maintainers
1
Weekly downloads
 
Created
Source

ϟ cxsync

npm i -S cxsync
yarn add cxsync

Improves on CXS in the following ways:

  • memoizes repetitive tasks because rendering speed > memory concerns
  • stores media queries in a separate sheet, so that they always take precedence
  • supports keyframes
  • accepts any number of style objects passed as args
  • always prefixes all styles (so it's useful in production)
  • correctly handles IE's ms vendor prefix
  • only prefixes necessary properties (those required by the environment) and only when necessary
  • handles content: '' to not require content: '""'
  • handles IE11's broken "support" for justifyContent

Additional Features:

"Styled" HoC for react components

import styled from 'csync/dist/styled'
...
const Button = styled(styles.button)('button')

Utilities to assist in creating re-usable css traits

import {colorGenerator, fluidType} from 'cxsync/dist/trait-utils'

colorGenerator

// colorGenerator(colorMapOfRGBArrays, [tintsObject|optional], [opacitiesArray|optional])
// tints colors by conversion through lab color space

const colors = colorGenerator({
  red: [255, 0, 0],
  blue: [0, 0, 255]
}, {
  dark: 0.8,
  light: 1.2
}, [33, 66])

// Object.keys(colors) -> [
  red_dark,
  red,
  red_light,
  red_dark_33,
  red_dark_66,
  red_33,
  red_66,
  red_light_33,
  red_light_66,
  blue_dark,
  blue,
  blue_light,
  blue_dark_33,
  blue_dark_66,
  blue_33,
  blue_66,
  blue_light_33,
  blue_light_66,
]

fluidType

const typeBasis = {
  minFontSize = 14,
  maxFontSize = 20,
  minLeading = 1.2,
  maxLeading = 1.62,
  minViewWidth = 320,
  maxViewWidth = 1600,
  minTypeScale = 1.1,
  maxTypeScale = 1.4
} // these are the provided defaults, override some or all with whatever your design requires
const paragraphStyles = fluidType(typographybase)
const h1Styles = fluidType({...typeBasis, typeLevel: 6})
const h2Styles = fluidType({...typeBasis, typeLevel: 5})
const h3Styles = fluidType({...typeBasis, typeLevel: 4})
const h4Styles = fluidType({...typeBasis, typeLevel: 3})
const h5Styles = fluidType({...typeBasis, typeLevel: 2})
const h6Styles = fluidType({...typeBasis, typeLevel: 1})
// typeLevel is the exponent applied to (min|max)TypeScale. Default is 0

TODO:

  • handle server-side rendering by doing all the vendor prefixing

FAQs

Package last updated on 29 May 2017

Did you know?

Socket

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

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.