@dxworks/miles
Miles is an experimental CSS-in-JS library. It takes a hybrid approach to CSS-in-JS. It is design to be used in conjunction with css-modules. It makes use of css custom properties to allow for the dynamic updating of css values and sharing of values betw
Last updated a year ago by edwardirby .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @dxworks/miles 
SYNC missed versions from official npm registry.

Miles (EXPERIMENTAL)

Miles is an experimental CSS-in-JS library. It takes a hybrid approach to CSS-in-JS. It is design to be used in conjunction with css-modules. It makes use of css custom properties to allow for the dynamic updating of css values and sharing of values between components in the light-dom. Miles consist of two simple utility functions with a very small runtime footprint, classNames, and tokens.


Install

npm install -s @dxworks/miles


className usage

Simple Example

component.js

import { classNames } from '@dxworks/miles';
import styles from 'Component.css';

<div className={
 classNames(
   className, // pass through className prop
   style.example,
 ) }
/>

Component.css

.example{
  /* your example class styles here */
}

Conditional Example

component.js

import { classNames } from '@dxworks/miles';
import styles from 'Component.css';

<div className={
 classNames(
   className, // pass through className prop
   styles.example,
   condition && styles.conditionalClass
 ) }
/>

Component.css

.example{
  /* your example class styles here */
}

.conditionalClass {
   /* your conditional class styles here */
}

tokens usage

Simple Example

Component.js

import { tokens } from '@dxworks/miles';

<span className='example' style={tokens({
   lineHeight: 1.2,
   fontSize: 47.78,
   randomColor: 'blue',
})} />

Component.css

.example{
  line-height: var(--lineHeight);
  font-size: var(--fontSize);
  color: var(--randomColor);
}

Conditional Example

Component.js

import { tokens } from '@dxworks/miles';

<span className='example' style={tokens(
 inline ? { display: 'inline' } : { display: 'block' },
 {
   lineHeight: 1.2,
   fontSize: 47.78,
 },
)} />

Component.css

.example{
  display: var(--display);
  line-height: var(--lineHeight);
  font-size: var(--fontSize);
}

Current Tags

  • 1.0.1                                ...           latest (a year ago)

14 Versions

  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
  • 0.6.9                                ...           a year ago
  • 0.6.8                                ...           a year ago
  • 0.6.7                                ...           a year ago
  • 0.6.6                                ...           a year ago
  • 0.6.5                                ...           a year ago
  • 0.6.4                                ...           a year ago
  • 0.6.3                                ...           a year ago
  • 0.6.2                                ...           a year ago
  • 0.6.1                                ...           a year ago
  • 0.6.0                                ...           a year ago
  • 0.5.1                                ...           a year ago
  • 0.5.0                                ...           a year ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 14
Dependencies (0)
None
Dev Dependencies (7)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |