https://github.com/fabiospampinato/css-eval

Tiny library for fully evaluating CSS properties and variables on a target element.
https://github.com/fabiospampinato/css-eval

css eval resolve

Last synced: about 1 month ago
JSON representation

Tiny library for fully evaluating CSS properties and variables on a target element.

• Host: GitHub
• URL: https://github.com/fabiospampinato/css-eval
• Owner: fabiospampinato
• License: mit
• Created: 2022-09-16T20:16:30.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2023-09-24T16:28:48.000Z (over 1 year ago)
• Last Synced: 2024-11-13T13:35:55.417Z (about 2 months ago)
• Topics: css, eval, resolve
• Language: TypeScript
• Homepage:
• Size: 9.77 KB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# CSS Eval

Tiny library for fully evaluating CSS properties and variables on a target element.

## Install

```sh

npm install --save css-eval

```

## Usage

The following functions are provided:

```ts

function get ( property: string, target: HTMLElement | SVGElement | MathMLElement = document.body ): string;

function getAngle ( property: string, target: HTMLElement | SVGElement | MathMLElement = document.body ): number;

function getLength ( property: string, target: HTMLElement | SVGElement | MathMLElement = document.body ): number;

function getTime ( property: string, target: HTMLElement | SVGElement | MathMLElement = document.body ): number;

```

They can be used like this:

```ts

import Eval from 'css-eval';

// Getting a custom target node, otherwise it'll be "document.body" if one is not manually provided

const target = document.querySelector ( '#foo' );

// Reading an unresolved style property or variable

Eval.get ( 'width' );

Eval.get ( 'width', target );

Eval.get ( '--custom' );

Eval.get ( '--custom', target );

// Reading a resolved angle property or variable, the number of "deg" will be returned

Eval.getAngle ( 'rotate' );

Eval.getAngle ( 'rotate', target );

Eval.getAngle ( '--custom' );

Eval.getAngle ( '--custom', target );

// Reading a resolved length property or variable, the number of "px" will be returned

Eval.getLength ( 'width' );

Eval.getLength ( 'width', target );

Eval.getLength ( '--custom' );

Eval.getLength ( '--custom', target );

// Reading a resolved time property or variable, the number of "ms" will be returned

Eval.getTime ( 'transition-duration' );

Eval.getTime ( 'transition-duration', target );

Eval.getTime ( '--custom' );

Eval.getTime ( '--custom', target );

```

## License

MIT © Fabio Spampinato