fncss

Functional style CSS declarations generator

Features

• Flexible ways to generate CSS declarations.
• Generates rules in Arrays.

Why?

Describing CSS rules in Objects is a bad idea:

• You can't have duplicated properties in Object, so you can't do CSS fallback properties.
• Each css-in-js library has its own opinionated structures to describe CSS, which will introduce vendor lock-in.
• Performance is bad. Objects need to be parsed, also you need to convert camelCase to dash-case for every properties every time.

Usage

import { prop as p, sel as s, media, decl } from 'fncss';

decl(
  p.color('#fff'),
  p.backgroundColor('#0275d8'),
  p.borderColor('#0275d8'),

  s.hover(
    p.color('red'),
    p.backgroundColor('#025aa5'),
    p.borderColor('#01549b')
  )
);

// => result
[
  { prop: 'color', value: '#fff' },
  { prop: 'background-color', value: '#0275d8' },
  { prop: 'border-color', value: '#0275d8' },
  { prop: 'color', value: 'red', sel: ':hover' },
  { prop: 'background-color', value: '#025aa5', sel: ':hover' },
  { prop: 'border-color', value: '#01549b', sel: ':hover' }
]



// do some media queries
const phone = media('screen and (device-width: 320px) and (device-height: 640px)');
const pad = media('screen and (min-device-width: 768px) and (max-device-width: 1024px)');

decl(
  p.color('#fff'),
  p.backgroundColor('#0275d8'),
  p.borderColor('#0275d8'),

  phone(
    p.borderColor('#eee')
  ),
  pad(
    p.borderColor('#ebebeb')
  ),

  s.hover(
    p.color('red'),
    p.backgroundColor('#025aa5'),
    p.borderColor('#01549b'),

    phone(
      p.backgroundColor('#3b3c40')
    ),
    pad(
      p.borderColor('#558abb')
    )
  )
);

// => result
[
  { prop: 'color', value: '#fff' },
  { prop: 'background-color', value: '#0275d8' },
  { prop: 'border-color', value: '#0275d8' },
  {
    prop: 'border-color',
    value: '#eee',
    media: 'screen and (device-width: 320px) and (device-height: 640px)'
  },
  {
    prop: 'border-color',
    value: '#ebebeb',
    media: 'screen and (min-device-width: 768px) and (max-device-width: 1024px)'
  },
  { prop: 'color', value: 'red', sel: ':hover' },
  { prop: 'background-color', value: '#025aa5', sel: ':hover' },
  { prop: 'border-color', value: '#01549b', sel: ':hover' },
  {
    prop: 'background-color',
    value: '#3b3c40',
    media: 'screen and (device-width: 320px) and (device-height: 640px)',
    sel: ':hover'
  },
  {
    prop: 'border-color',
    value: '#558abb',
    media: 'screen and (min-device-width: 768px) and (max-device-width: 1024px)',
    sel: ':hover'
  }
]



// nested selectors will be concatenated
const before = s['::before'];
const after = s['::after'];
const content = prop('content');

decl(
  p.color('#fff'),

  hover(
    p.color('red'),

    before(
      p.content('hello')
    ),
    after(
      p.content('there!')
    )
  )
);

// => result
[
  { prop: 'color', value: '#fff' },
  { prop: 'color', value: 'red', sel: ':hover' },
  { prop: 'content', value: 'hello', sel: ':hover::before' },
  { prop: 'content', value: 'there!', sel: ':hover::after' }
]



// create custom functions
p.color.rgb = function(r, g, b) {
  return this(`rgb(${r},${g},${b})`);
}

decl(
  p.color.rgb(10, 20, 30)
);

// => result
[ { prop: 'color', value: 'rgb(10,20,30)' } ]