Get Custom Properties

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

Table of contents

• Project Name
  • Table of contents
  • Getting Started
  • Installation
  • Usage
  • Contributing
  • Versioning
  • Authors
  • 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

To install and set up the library, run:

$ npm install get-custom-properties

Or if you prefer using Yarn:

$ yarn add get-custom-properties

Usage

from rule

custom properties from selector rule

Example:

in CSS file

:root {
  --color-primary-600: #a33c3b;
  --color-primary-400: #f0706e;
  --color-primary-200: #ff918f;
  --custom-without-value: ;
}

in JS file

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 <style> label

Example:

in HTML file

<style id="customs-registers">
  @property --my-color {
    syntax: <color>;
    inherits: false;
    initialvalue: #c0ffee;
  }

  @property --my-othe-color {
    syntax: <color>;
    inherits: false;
    initialvalue: #570705;
  }
</style>

in JS file

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

console.log(getCustomPropertiesRegisted("#customs-registers"));
/* 
  [
    {
      name: "--my-color",
      syntax: "<color>",
      initialValue: "#c0ffee",
      inherits: false
    },  
    {
      name: "--my-other-color",
      syntax: "<color>",
      initialValue: "#570705",
      inherits: false
    },  
  ] 
  */

Contributing

Please read 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 😎

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

Juan David Avila - JuanDAC

See also the list of contributors who participated in this project.

License

MIT License