https://github.com/dawaltconley/bg-size-parser

A parser for valid background-size CSS values.
https://github.com/dawaltconley/bg-size-parser

css parse parser

Last synced: 4 days ago
JSON representation

A parser for valid background-size CSS values.

• Host: GitHub
• URL: https://github.com/dawaltconley/bg-size-parser
• Owner: dawaltconley
• Created: 2020-10-07T18:00:42.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2022-03-31T05:04:19.000Z (over 2 years ago)
• Last Synced: 2024-10-04T21:07:10.024Z (about 1 month ago)
• Topics: css, parse, parser
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/bg-size-parser
• Size: 67.4 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Background Size Parser

Parses values for the CSS `background-size` property.

## Usage

The parse method takes [any valid](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) `background-size` property as a string.

```javascript

const { parse } = require('bg-size-parser');

parse('3em 25%');

// [{

//   width: { size: 3, unit: 'em' },

//   height: { size: 25, unit: '%' }

// }]

parse('cover');

// [{

//   keyword: 'cover'

// }]

parse('6px, auto, contain');

// [

//   {

//     width: { size: 6, unit: 'px' },

//     height: { size: 'auto' }

//   },

//   {

//     width: { size: 'auto' },

//     height: { size: 'auto' }

//   },

//   { keyword: 'contain' }

// ]

parse('calc(100% + 200px) 100px');

// [

//   {

//     width: { calculation: 'calc(100% + 200px)' },

//     height: { size: 100, unit: 'px' }

//   }

// ]

parse('400px var(--foo, 100px)');

// [

//   {

//     width: { size: 400, unit: 'px' },

//     height: {

//       variable: 'var(--foo, 100px)',

//       name: '--foo',

//       fallback: '100px'

//     }

//   }

// ]

```