Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jednano/parse-css-sides
Parses CSS sides (e.g., margin, padding, border) into an object.
https://github.com/jednano/parse-css-sides
css parse postcss sides
Last synced: 3 months ago
JSON representation
Parses CSS sides (e.g., margin, padding, border) into an object.
- Host: GitHub
- URL: https://github.com/jednano/parse-css-sides
- Owner: jednano
- License: mit
- Created: 2015-09-28T23:13:24.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-03-02T15:36:05.000Z (almost 2 years ago)
- Last Synced: 2024-10-18T04:14:17.523Z (3 months ago)
- Topics: css, parse, postcss, sides
- Language: TypeScript
- Size: 248 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# parse-css-sides
[![NPM version][npm-version-img]][npm-version-url]
[![npm license][npm-license-img]][npm-license-url]
[![Travis Build Status][travis-img]][travis-url]
[![codecov][codecov-img]][codecov-url]
[![Downloads][downloads-img]][downloads-url]
[![Minified size][min-size-img]][bundlephobia-url]
[![Gzip size][gzip-size-img]][bundlephobia-url]
[![Unicorn Approved][unicorn-img]][unicorn-url]
[![npm][npm-img]][npm-url]
This package exports a default function that parses CSS sides (e.g., the value of `margin`, `padding` and `border` declarations).
_Originally created for [PostCSS](https://github.com/postcss/postcss) plugins._
## Installation
```
$ npm install parse-css-sides [--save[-dev]]
```
## Usage
### JavaScript
```ts
import parseSides from 'parse-css-sides';
const sides = parseSides('0 5% 10px');
/**
* {
* top: '0',
* right: '5%',
* bottom: '10px',
* left: '5%',
* }
**/
```
All 4 sides are always returned and are always strings.
_Note: if `!important` is found, an additional `important: true` will be added to the result._
### TypeScript
This is a TypeScript project with generated type definitions included. There is an additional `ISides` interface that is exported if you need it for whatever reason. It just defines the shape of the result:
```ts
interface ISides {
top: string
right: string
bottom: string
left: string
important?: boolean
}
```
## Testing
```
$ npm test
```
This will run the tests in watch mode.
```
$ npm run cover
```
This will run tests and generate a code coverage report. Anything less than 100% coverage will throw an error.
[bundlephobia-url]: https://bundlephobia.com/result?p=parse-css-sides
[codecov-img]: https://codecov.io/gh/jedmao/parse-css-sides/branch/master/graph/badge.svg
[codecov-url]: https://codecov.io/gh/jedmao/parse-css-sides
[downloads-img]: http://img.shields.io/npm/dm/parse-css-sides.svg?style=flat-square
[downloads-url]: https://npmjs.org/package/parse-css-sides
[gzip-size-img]: https://badgen.net/bundlephobia/minzip/parse-css-sides?label=gzip
[min-size-img]: https://badgen.net/bundlephobia/min/parse-css-sides?label=minified
[npm-img]: https://nodei.co/npm/parse-css-sides.svg?downloads=true
[npm-license-img]: http://img.shields.io/npm/l/parse-css-sides.svg?style=flat-square
[npm-license-url]: https://www.npmjs.org/package/parse-css-sides
[npm-url]: https://nodei.co/npm/parse-css-sides/
[npm-version-img]: http://img.shields.io/npm/v/parse-css-sides.svg?style=flat
[npm-version-url]: https://www.npmjs.org/package/parse-css-sides
[travis-img]: https://img.shields.io/travis/jedmao/parse-css-sides.svg
[travis-url]: https://travis-ci.org/jedmao/parse-css-sides
[unicorn-img]: https://img.shields.io/badge/unicorn-approved-ff69b4.svg
[unicorn-url]: https://twitter.com/sindresorhus/status/457989012528316416?ref_src=twsrc%5Etfw&ref_url=https%3A%2F%2Fwww.quora.com%2FWhat-does-the-unicorn-approved-shield-mean-in-GitHub