https://github.com/juandac/get-custom-properties

https://github.com/juandac/get-custom-properties

Last synced: about 7 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/juandac/get-custom-properties
• Owner: JuanDAC
• License: mit
• Created: 2021-11-17T05:33:25.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2021-11-20T14:29:10.000Z (almost 3 years ago)
• Last Synced: 2024-10-08T14:08:17.943Z (about 1 month ago)
• Language: JavaScript
• Size: 13.7 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![npm version](https://badge.fury.io/js/angular2-expandable-list.svg)](https://badge.fury.io/js/angular2-expandable-list)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

# Get Custom Properties

> The library get custom properties from selector that you defined in your styles

## Table of contents

- [Project Name](#project-name)

  - [Table of contents](#table-of-contents)

  - [Getting Started](#getting-started)

  - [Installation](#installation)

  - [Usage](#usage)

  - [Contributing](#contributing)

  - [Versioning](#versioning)

  - [Authors](#authors)

  - [License](#license)

## Getting Started

Bring the custom properties defined by the selectors in the css styles or properties that you defined in the styles element inside the html document.

## Installation

**BEFORE YOU INSTALL:** please read the [prerequisites](#prerequisites)

To install and set up the library, run:

```sh

$ npm install get-custom-properties

```

Or if you prefer using Yarn:

```sh

$ yarn add get-custom-properties

```

## Usage

### from rule

custom properties from selector rule

Example:

`in CSS file`

```css

:root {

  --color-primary-600: #a33c3b;

  --color-primary-400: #f0706e;

  --color-primary-200: #ff918f;

  --custom-without-value: ;

}

```

`in JS file`

```mjs

import { getCustomProperties } from "get-custom-properties";

console.log(getCustomProperties(":root"));

// ['--color-primary-600', '--color-primary-400', '--color-primary-200', '--custom-without-value']

```

### from properties registered

custom properties from registered in `` label

Example:

`in HTML file`

```html

<style id="customs-registers">

  @property --my-color {

    syntax: <color>;

    inherits: false;

    initialvalue: #c0ffee;

  }

  @property --my-othe-color {

    syntax: <color>;

    inherits: false;

    initialvalue: #570705;

  }

```

`in JS file`

```mjs

import { getCustomPropertiesRegisted } from "get-custom-properties";

console.log(getCustomPropertiesRegisted("#customs-registers"));

/* 

  [

    {

      name: "--my-color",

      syntax: "",

      initialValue: "#c0ffee",

      inherits: false

    },  

    {

      name: "--my-other-color",

      syntax: "",

      initialValue: "#570705",

      inherits: false

    },  

  ] 

  */

```

## Contributing

Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.

1.  Fork it!

2.  Create your feature branch: `git checkout -b my-new-feature`

3.  Add your changes: `git add .`

4.  Commit your changes: `git commit -am 'Add some feature'`

5.  Push to the branch: `git push origin my-new-feature`

6.  Submit a pull request :sunglasses:

## Versioning

We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/JuanDAC/get-custom-properties/tags).

## Authors

	

		Juan David Avila - JuanDAC

	

	




See also the list of [contributors](https://github.com/JuanDAC/get-custom-properties/contributors) who participated in this project.

## License

[MIT License](https://andreasonny.mit-license.org/2019)