css-fruit

css-fruit

• 中文说明

A Parser and Analysis of CSS Declaration.

Features

• Can set parse depth
• Chained call
• ...

Install

npm install --save-dev css-fruit

Example

Quickstart

import Fruit from 'css-fruit';

const background = Fruit.absorb('background', 'url(abc.png) #eee right top / 100% repeat-x');

CommonJS Code

const Fruit = require('css-fruit').default;

const background = Fruit.absorb('background', 'url(abc.png) #eee right top / 100% repeat-x');

Following is the structure of generated backgroud object:

background: Background {
    valid: true,
    color: #eee,
    image: 'url(\'abc.png\')',
    position: BackgroundPosition {
        valid: true,
        x: { origin: 'right', offset: undefined },
        y: { origin: 'top', offset: undefined },
    },
    size: BackgroundSize {
        valid: true,
        width: '100%',
        height: 'auto',
    },
    repeat: BackgroundRepeat {
        valid: true,
        x: 'repeat',
        y: 'no-repeat',
    },
    attachment: undefined,
    origin: undefined,
    clip: undefined
}

Chained call

Make sure props of declarations related to same shorthand.

import Fruit from 'css-fruit';
const background = Fruit
    .absorb('background', 'url(abc.png) #eee repeat-x')
    .absorb('background-size', '100%')
    .absorb('background-position', 'top right');

Decl or Array

An object like postcss decl struct is allowed:

import Fruit from 'css-fruit';
const background = Fruit
    .absorb({ prop: 'background', value: 'url(abc.png) #eee repeat-x' })
    .absorb({ prop: 'background-size', value: '100%' })
    .absorb({ prop: 'background-position', value: 'top right' });

You can pass an Array also.

import Fruit from 'css-fruit';
const background = Fruit.absorb([
    { prop: 'background', value: 'url(abc.png) #eee repeat-x' },
    { prop: 'background-size', value: '100%' },
    { prop: 'background-position', value: 'top right' }
]);

import as required

If you want process CSS properties only about background in your project, it is better to import as required.

import { Background } from 'css-fruit';

const background = Background
    .absorb('background', 'url(abc.png) #eee repeat-x')
    .absorb('background-size', '100%')
    .absorb('background-position', 'top right');

Develop

build

npm run build

test

npm run test

Changelog

See Releases

Contributing

See Contributing Guide

License

MIT