Pexts NPM | npm.io

PexTS

Pex is a simple library to create CSS strings within TypeScript inside the browser.

See this project in GitHub

Install

npm install pexts

Basic Usage

import Pex from "../src/Pex";

// Name aliasing might be a good idea
const { Hex } = Pex.Color;
const { Static } = Pex.Unit;

let css = new Pex.CJS(_ => {
  body: {
		background: Hex(0xfefefe),
		margin: Static(0)
	}
});

css.bundle() // returns css string
css.append() // appends a style element to the head

See extended usage

Legend

All the namespaces, classes, functions, interfaces and types Pex library has.

Main headings include:

Namespaces
- Pex
Interfaces and Types
Classes

Namespaces

Pex

namespace Pex {}

Interfaces and Types

PexCSSDeclaration

interface PexCSSDeclaration extends CSSStyleDeclaration {
  listStyle: ListStyle;
  listStyleType: ListStyle;
  color: IColor;
  backgroundColor: IColor;
  fontFamily: IFonts;
}

IRuleSet

type IRuleSet = Partial<PexCSSDeclaration>;

FromToKeyframe

interface FromToKeyframe {
  from: IRuleSet;
  to: IRuleSet;
}

SteppedKeyframe

interface SteppedKeyframe {
  [key: string]: IRuleSet;
}

ICSSRule

interface ICSSRule {
  target: string;
  rules: IRuleSet;
}

IKeyframe

type IKeyframe = {
  name: string;
  rules: FromToKeyframe | SteppedKeyframe;
};

IMediaQuery

interface IMediaQuery {
  typeAndFeatures: string;
  rules: ICJS;
}

CSSSet

type CSSSet = Rule | CSSRule | Keyframe | MediaQuery;

ICJS

interface ICJS {
  [key: string]: ICSSRule["rules"] | IKeyframe["rules"] | IMediaQuery;
}

BorderStyles

type BorderStyles =
  | "none"
  | "solid"
  | "ridge"
  | "outset"
  | "inset"
  | "hidden"
  | "groove"
  | "double"
  | "dotted"
  | "dashed";

Direction

type Direction = "to left" | "to top" | "to bottom" | "to right";

Display

type Display =
  | "inline"
  | "table-row-group"
  | "table-row"
  | "table-header-group"
  | "table-footer-group"
  | "table-column-group"
  | "table-column"
  | "table-cell"
  | "table-caption"
  | "table"
  | "run-in"
  | "list-item"
  | "grid"
  | "inline-table"
  | "inline-flex"
  | "inline-block"
  | "flex"
  | "container"
  | "compact"
  | "block";

ListStyle

type ListStyle =
  | "disc"
  | "upper-roman"
  | "upper-latin"
  | "upper-alpha"
  | "square"
  | "lower-roman"
  | "lower-latin"
  | "lower-greek"
  | "lower-alpha"
  | "georgian"
  | "decimal-leading-zero"
  | "decimal"
  | "circle"
  | "armenian";

BareDirection

type BareDirection = "left" | "top" | "bottom" | "right";

Other string based type aliases

type IFonts = string;
type IColor = string;
type IUnit = string;

Classes

RuleSet

export class RuleSet {
  constructor(public set: IRuleSet) {}
}

RuleSet defines a set of rules as in;

background: white;
font-family: "Roboto";

new RuleSet({ width: Px(500) }).text; // returns "width: 500px;"

It does not cover a target element or any identifier.

Rule

export class Rule {
  bundle(): string { ... }
}

Rule is a class to which every rule set constructor extends. A rule set constructor is a class defines a css rule targeting an element, a keframes animation or a media query. General usage of this class would be extending another class to it.

CSSRule

export class CSSRule extends Rule {
  constructor(public input: ICSSRule) {}
}

CSSRule defines a set of rules for a targeted element. Its prototype 'Rule', includes a 'bundle' method that you can call after initiating the instance of the class that will return the css equivalent of the object.

Keyframe

export class Keyframe extends Rule {
  constructor(public input: IKeyframe) {}
}

Keyframe defines a set of rules for keyframes animation. Its prototype 'Rule', includes a 'bundle' method that you can call after initiating the instance of the class that will return the css equivalent of the object.

MediaQuery

export class MediaQuery extends Rule {
  constructor(public input: IMediaQuery) {}
}

MediaQuery defines a set of rules for any type of css media query. Its prototype 'Rule', includes a 'bundle' method that you can call after initiating the instance of the class that will return the css equivalent of the object.

CJS

export class CJS extends Rule {
  constructor(input: (getter: (query: string) => string) => ICJS) {}
}

CJS class creates a whole stylesheet while maintaining readiblity. You would mostly work with this object. CJS class requires a function that would return a ICJS object which can include all rule set constructors, namely: CSSRule, Keyframe and MediaQuery. Its prototype 'Rule', includes a 'bundle' method that you can call after initiating the instance of the class that will return the css equivalent of the object.

Constructs

export class Constructs {}

Constructs is a class that only contains static properties and/or methods which can help you write better code. Constructs includes a set of so called construct sets that would need intricate css, such as animations and borders and shadows.

Methods include;

Animation

static Animation(name: string, duration: string, timing: string = "", delay: string = "", iteration: string = "", direction: string = "" ): string { ... }

Border

static Border(width: string, style: BorderStyles, color: string = ""): string { ... }

Shadow

static Shadow(hOffset: string, vOffset: string, blur: string, color: string): string { ... }

Important: '!important' keyword is also located in Constructs for convenience. You can wrap any rule with this method and its priority will change.

static Important(rule: string): string { ... }

Serialize: similar to Static method of the Unit class, this method serializes strings in a comma seperated template. It is quite useful for borders and shadows

static Serialize(...args: string[]): string { ... }

Serialize(
  Shadow(Px(5), Px(5), Px(30), Px(7), RGBA(0, 0, 0, 0.25)),
  Shadow(Px(-5), Px(-5), Px(30), Px(7), RGBA(0, 0, 0, 0.22))
); // returns "5px 5px 30px 7px rgb(0, 0, 0, 0.25), -5px -5px 30px 7px rgb(0, 0, 0, 0.22)"

MediaQuery: helps you create media query type and features and can be used as 'typeAndFeatures' property of a MediaQuery constructor.

static MediaQuery(type: string, features: string[]): string { ... }

Constructs.MediaQuery(Constants.Screen, [new RuleSet({ maxWidth: Px(500) }).text]); // returns "@media screen and (max-width: 500px)"

Color

export class Color {}

Color is a class that only contains static properties and/or methods which can help you write better code. Color includes a set of methods and properties that can help you create the palette you want.

Methods include;

Hex: creates a hex color based on given six digit hexadecimal string.

static Hex(color: number): string { ... }

Hex(0xffffff); // returns white / "#ffffff"
Hex(0x000000); // returns black / "#000000"

RGB: creates an rgb color based on given red, green and blue values. Green and blue values are optional in that they are populated with the given red value if not provided.

static RGB(red: number, green?: number, blue?: number): string { ... }

RGBA: creates an rgba color based on given red, green, blue and alpha values.

static RGBA(red: number, green: number, blue: number, alpha: number): string { ... }

HSL: creates an hsl color based on given hue, saturation and lightness values.

static HSL(hue: number, saturation: string, lightness: string): string { ... }

HSLA: creates an hsla color based on given hue, saturation, lightness and alpha values.

static HSLA(hue: number, saturation: string, lightness: string, alpha: number): string { ... }

Properties include;

static Lightsalmon = "lightsalmon";
static Salmon = "salmon";
static Darksalmon = "darksalmon";
static Lightcoral = "lightcoral";
static Indianred = "indianred";
...

and 125 other static colors that css supports.

Fonts

export class Fonts {}

Fonts is a class that only contains static properties and/or methods which can help you write better code. Fonts includes a set of commonly used fonts.

Properties include;

static Arial = "Arial";
static Helvetica = "Helvetica";
static TimesNewRoman = "Times New Roman";
static Montserrat = "Montserrat";
static Monospace = "Monospace";

and 95 other static fonts.

Functions

export class Functions {}

Functions is a class that only contains static properties and/or methods which can help you write better code. Functions includes general css and transform functions.

Methods include;

(css' own rules apply for the functions)

static Attr(attribute: string): string { ... }
static CubicBezier(x1: number, y1: number, x2: number, y2: number): string { ... }
static Repeat(...args: string[]): string { ... }
static MinMax(min: string, max: string): string { ... }
static RGB(red: number, green?: number, blue?: number): string { ... }
static RGBA(red: number, green: number, blue: number, alpha: number): string { ... }
static HSL(hue: number, saturation: string, lightness: string): string { ... }
static HSLA(hue: number, saturation: string, lightness: string, alpha: number): string { ... }
static LinearGradient(direction: Direction | string, ...colors: string[]): string { ... }
static RadialGradient = {
  constraints(...args: string[]): string { ... },
  create(shapeSizeAtPosition: string, ...colors: string[]): string { ... }
};
static Matrix(a: number, b: number, c: number, d: number, tx: number, ty: number): string { ... }
static Matrix3D(a1: number, b1: number, c1: number, d1: number, a2: number, b2: number, c2: number, d2: number, a3: number, b3: number, c3: number, d3: number, a4: number, b4: number, c4: number, d4: number): string { ... }
static Perspective(d: string): string { ... }
static Rotate(angle: string): string { ... }
static Rotate3D(x: number, y: number, z: number, angle: string): string { ... }
static RotateX(angle: string): string { ... }
static RotateY(angle: string): string { ... }
static RotateZ(angle: string): string { ... }
static Scale(sx: number, sy: number = sx): string { ... }
static Scale3D(sx: number, sy: number, sz: number): string { ... }
static ScaleX(s: number): string { ... }
static ScaleY(s: number): string { ... }
static ScaleZ(s: number): string { ... }
static Skew(ax: string, ay: string = null): string { ... }
static SkewX(a: string): string { ... }
static SkewY(a: string): string { ... }
static Translate(a: string, b: string = null): string { ... }
static Translate3D(tx: string | number, ty: string | number, tz: string | number): string { ... }
static TranslateX(tx: string): string { ... }
static TranslateY(ty: string): string { ... }
static TranslateZ(tz: string): string { ... }

Constants

export class Constants {}

Constants is a class that only contains static properties and/or methods which can help you write better code. Constants includes all the keywords that can be used as a value in css.

Properties include;

static AutoFit = "auto-fit";
static MaxContent = "max-content";
static MinContent = "min-content";
static AutoFill = "auto-fill";
static Initial = "initial";
...

and all the other keywords.

Unit

export class Unit {}

Unit is a class that only contains static properties and/or methods which can help you write better code. Unit includes almost every unit you might encounter in css.

Methods include;

Static: creates a static string from a given value or values. It can take infinite number of arguments and it will concatenate them with a space character. Arguments type may be strings and numbers. If a unit function is provided as the las argument, every other arument will be asserted to that unit.

static Static(...args: Array<number | string | Function>): string { ... }

Static(0); // returns "0"
Static(10, 20, 30); // returns "10 20 30"
Static(10, 20, 30, Px); // returns "10px 20px 30px"
Static(10, 20, "30", Px); // returns "10px 20px 30px"
Static(0, Constants.Auto); // returns "0 auto"

Horizontal: creates a horizontal value for quadruple instances. It takes another Unit function as its last argument and asserts given number values to given unit. First argument may be either a number or list of numbers. If a number is given, that number will be used to create both top and bottom values, if an array is provided first value will be used for top, second value will be used for bottom value and any other given values will be discarded.

static Horizontal(unit: number | number[], type: Function): string { ... }

Horizontal(20, Px); // returns "20px 0"
Horizontal([20, 10], Px); // returns "20px 0 10px"

Vertical: creates a vertical value for quadruple instances. It takes another Unit function as its last argument and asserts given number values to given unit. First argument may be either a number or list of numbers. If a number is given, that number will be used to create both left and right values, if an array is provided first value will be used for left, second value will be used for right value and any other given values will be discarded.

static Vertical(unit: number | number[], type: Function): string { ... }

Vertical(20, Px); // returns "0 20px"
Vertical([20, 10], Px); // returns "0 20px 0 10px"

and ohter methods;

static Px(unit: number): string { ... }
static Fr(unit: number): string { ... }
static Percent(unit: number): string { ... }
static Vh(unit: number): string { ... }
static Vw(unit: number): string { ... }
static Em(unit: number): string { ... }
static Rem(unit: number): string { ... }
static Ex(unit: number): string { ... }
static Ch(unit: number): string { ... }
static Vmin(unit: number): string { ... }
static Vmax(unit: number): string { ... }
static Cm(unit: number): string { ... }
static Mm(unit: number): string { ... }
static In(unit: number): string { ... }
static Pt(unit: number): string { ... }
static Pc(unit: number): string { ... }
static Ms(unit: number): string { ... }
static S(unit: number): string { ... }
static Deg(unit: number): string { ... }
static Turn(unit: number): string { ... }
static Rad(unit: number): string { ... }

Extended Usage

A simple navbar. Design by: W3Schools

import Pex from "../src/Pex";

const { Constants, Unit, Color, Fonts } = Pex;
const { Px, Static } = Unit;
const { Hex } = Color;

export default new Pex.CJS(_ => ({
  body: {
    margin: Static(0),
    fontFamily: Fonts.Montserrat
  },
  ".topnav": {
    backgroundColor: Hex(0x333333),
    overflow: Constants.Hidden
  },
  ".topnav a": {
    float: Constants.Left,
    color: Hex(0xf2f2f2),
    textAlign: Constants.Center,
    padding: Static(14, 16, Px),
    textDecoration: Constants.None,
    fontSize: Px(17)
  },
  ".topnav a:hover": {
    backgroundColor: Hex(0xdddddd),
    color: Color.Black
  },
  ".topnav a.active": {
    backgroundColor: Hex(0x4caf50),
    color: Color.White
  }
}));

Simple card design Design by: Abhishek Mane

import Pex from "../src/Pex";

const { Constants, Constructs, Unit, Color, Fonts, Functions } = Pex;
const { Px, Static, Percent, S } = Unit;
const { RGBA } = Color;
const { Serialize, Shadow } = Constructs;

export default new Pex.CJS(_ => ({
  ".card-list": {
    zIndex: Static(0),
    width: Percent(100),
    display: Constants.Flex,
    flexDirection: Constants.Row,
    justifyContent: Constants.SpaceAround,
    flexWrap: Constants.Wrap
  },
  ".card": {
    margin: Static(Px(30), Constants.Auto),
    width: Px(300),
    height: Px(300),
    borderRadius: Px(40),
    boxShadow: Serialize(
      Shadow(Px(5), Px(5), Px(30), Px(7), RGBA(0, 0, 0, 0.25)),
      Shadow(Px(-5), Px(-5), Px(30), Px(7), RGBA(0, 0, 0, 0.22))
    ),
    cursor: Constants.Pointer,
    transitionDuration: Static(0.4, S)
  },
  ".card .card_image": {
    width: Constants.Inherit,
    height: Constants.Inherit,
    borderRadius: Px(40)
  },
  ".card .card_image img": {
    width: Constants.Inherit,
    height: Constants.Inherit,
    borderRadius: Px(40),
    objectFit: Constants.Cover
  },
  ".card .card_title": {
    textAlign: Constants.Center,
    borderRadius: Static(0, 0, 40, 40, Px),
    fontFamily: Fonts.Helvetica,
    fontWeight: Constants.Bold,
    fontSize: Px(30),
    marginTop: Px(-80),
    height: Px(40)
  },
  ".card:hover": {
    transform: Functions.Scale(0.9, 0.9),
    boxShadow: Serialize(
      Shadow(Px(5), Px(5), Px(30), Px(15), RGBA(0, 0, 0, 0.25)),
      Shadow(Px(-5), Px(-5), Px(30), Px(15), RGBA(0, 0, 0, 0.22))
    )
  },
  ".title-white": { color: Color.White },
  ".title-black": { color: Color.Black },
  mobile: {
    typeAndFeatures: Constructs.MediaQuery(Constants.Screen, [
      new RuleSet({ maxWidth: Px(500) }).text
    ]),
    rules: {
      ".card-list": {
        flexDirection: Constants.Column
      }
    }
  }
}));

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago