Logo for jsDocs.io

free-style

  • Version 5.0.1
  • Published
  • 47.3 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

Classes

Interfaces

Type Aliases

Functions

function compile

compile: (styles: Styles) => Compiled;

  • Compile styles into a registerable object.

function create

create: (changes?: Changes, prefix?: string) => Sheet;

  • 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 children

        protected children: T[];

          property counters

          protected counters: Map<string, number>;

            property sheet

            protected sheet: string[];

              method add

              add: (style: T) => void;

                method merge

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

                  method remove

                  remove: (style: T) => void;

                    method unmerge

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

                      class Rule

                      class Rule extends Cache<Rule | Style> implements Container<Rule> {}

                      • Implement rule logic for style output.

                      constructor

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

                        property id

                        id: string;

                          property rule

                          rule: string;

                            property style

                            style: string;

                              method cid

                              cid: () => 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 selector

                                      selector: string;

                                        method cid

                                        cid: () => string;

                                          method clone

                                          clone: () => Selector;

                                            method getStyles

                                            getStyles: () => string;

                                              class Sheet

                                              class Sheet extends Cache<Rule | Style> {}

                                              • The FreeStyle class implements the API for everything else.

                                              constructor

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

                                                property prefix

                                                prefix: string;

                                                  method getStyles

                                                  getStyles: () => string;

                                                    method register

                                                    register: (compiled: Compiled) => string;

                                                      method registerStyle

                                                      registerStyle: (styles: Styles) => string;

                                                        class Style

                                                        class Style extends Cache<Selector> implements Container<Style> {}

                                                        • The style container registers a style string with selectors.

                                                        constructor

                                                        constructor(style: string, id: string);

                                                          property id

                                                          id: string;

                                                            property style

                                                            style: string;

                                                              method cid

                                                              cid: () => 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>, index: number) => void;

                                                                        method remove

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

                                                                          interface Compiled

                                                                          interface Compiled {}

                                                                          • Pre-registered container for cached styles and rules.

                                                                          property displayName

                                                                          displayName: string | undefined;

                                                                            property id

                                                                            id: string;

                                                                              property rules

                                                                              rules: CompiledRule[];

                                                                                property styles

                                                                                styles: CompiledStyle[];

                                                                                  interface CompiledRule

                                                                                  interface CompiledRule {}

                                                                                    property rules

                                                                                    rules: CompiledRule[];

                                                                                      property selector

                                                                                      selector: string;

                                                                                        property style

                                                                                        style: string;

                                                                                          property styles

                                                                                          styles: CompiledStyle[];

                                                                                            interface CompiledStyle

                                                                                            interface CompiledStyle {}

                                                                                              property isUnique

                                                                                              isUnique: boolean;

                                                                                                property selector

                                                                                                selector: string;

                                                                                                  property style

                                                                                                  style: string;

                                                                                                    interface Container

                                                                                                    interface Container<T> {}

                                                                                                    • Cache-able interface.

                                                                                                    method cid

                                                                                                    cid: () => string;

                                                                                                    • Unique identifier for the cache, used for merging styles.

                                                                                                    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 (9)

                                                                                                                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>