free-style

  • Version 4.1.0
  • Published
  • 277 kB
  • No dependencies
  • MIT license

Install

npm i free-style
yarn add free-style
pnpm add free-style

Overview

Make CSS easier and more maintainable by using JavaScript

Index

Functions

function create

create: (changes?: Changes) => FreeStyle;
  • Exports a simple function to create a new instance.

Classes

class Cache

class Cache<T extends Container<any>> {}
  • Implement a cache/event emitter.

constructor

constructor(changes?: Changes);

    property changeId

    changeId: number;

      property changes

      changes?: Changes;

        property sheet

        sheet: string[];

          method add

          add: (style: T) => void;

            method clone

            clone: () => Cache<T>;

              method merge

              merge: (cache: Cache<any>) => this;

                method remove

                remove: (style: T) => void;

                  method unmerge

                  unmerge: (cache: Cache<any>) => this;

                    method values

                    values: () => T[];

                      class FreeStyle

                      class FreeStyle extends Cache<Rule | Style> implements Container<FreeStyle> {}
                      • The FreeStyle class implements the API for everything else.

                      constructor

                      constructor(id: string, changes?: Changes);

                        property id

                        id: string;

                          method clone

                          clone: () => FreeStyle;

                            method getStyles

                            getStyles: () => string;

                              method registerStyle

                              registerStyle: (styles: Styles) => string;

                                class Rule

                                class Rule extends Cache<Rule | Style> implements Container<Rule> {}
                                • Implement rule logic for style output.

                                constructor

                                constructor(rule: string, style: string, pid: string);

                                  property id

                                  readonly id: string;

                                    property rule

                                    rule: string;

                                      property style

                                      style: string;

                                        method clone

                                        clone: () => Rule;

                                          method getStyles

                                          getStyles: () => string;

                                            class Selector

                                            class Selector implements Container<Selector> {}
                                            • Selector is a dumb class made to represent nested CSS selectors.

                                            constructor

                                            constructor(selector: string);

                                              property id

                                              readonly id: string;

                                                property selector

                                                selector: string;

                                                  method clone

                                                  clone: () => Selector;

                                                    method getStyles

                                                    getStyles: () => string;

                                                      class Style

                                                      class Style extends Cache<Selector> implements Container<Style> {}
                                                      • The style container registers a style string with selectors.

                                                      constructor

                                                      constructor(style: string, pid: string);

                                                        property id

                                                        readonly id: string;

                                                          property style

                                                          style: string;

                                                            method clone

                                                            clone: () => Style;

                                                              method getStyles

                                                              getStyles: () => string;

                                                                Interfaces

                                                                interface Changes

                                                                interface Changes {}
                                                                • Propagate change events.

                                                                method add

                                                                add: (style: Container<any>, index: number) => void;

                                                                  method change

                                                                  change: (style: Container<any>, oldIndex: number, newIndex: number) => void;

                                                                    method remove

                                                                    remove: (style: Container<any>, index: number) => void;

                                                                      interface Container

                                                                      interface Container<T> {}
                                                                      • Cache-able interface.

                                                                      property id

                                                                      id: string;

                                                                        method clone

                                                                        clone: () => T;

                                                                          method getStyles

                                                                          getStyles: () => string;

                                                                            interface Styles

                                                                            interface Styles {}
                                                                            • Input styles object.

                                                                            property $displayName

                                                                            $displayName?: string;

                                                                              property $global

                                                                              $global?: boolean;

                                                                                property $unique

                                                                                $unique?: boolean;

                                                                                  index signature

                                                                                  [selector: string]: PropertyValue | PropertyValue[] | Styles;

                                                                                    Type Aliases

                                                                                    type PropertyValue

                                                                                    type PropertyValue = number | boolean | string | null | undefined;
                                                                                    • Valid CSS property values.

                                                                                    Package Files (1)

                                                                                    Dependencies (0)

                                                                                    No dependencies.

                                                                                    Dev Dependencies (18)

                                                                                    Peer Dependencies (0)

                                                                                    No peer dependencies.

                                                                                    Badge

                                                                                    To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                    You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/free-style.

                                                                                    • Markdown
                                                                                      [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/free-style)
                                                                                    • HTML
                                                                                      <a href="https://www.jsdocs.io/package/free-style"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>