Permalink
374 lines (339 sloc) 11.1 KB
export interface CSSProperties {
/**
* In dev mode, adding a `label` string prop will reflect its value in devtools. Useful
* when debugging, and a good alternative to 'semantic' classnames.
*/
label?: string;
// for now just allow everything
[propertyName: string]: any;
}
export interface StyleAttribute {
[attributeName: string]: '';
}
type FalsyValues = null | undefined | false;
type Rule = StyleAttribute | CSSProperties | FalsyValues;
/**
* Defines a `rule` with the given key-value pairs. Returns an object (of shape
* `{'data-css-<id>': ''}`), to be added to an element's attributes. This is not the same
* as element's style, and doesn't interfere with the element's `className` / `class`.
*/
export function style(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function active(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function any(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function checked(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function _default(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function disabled(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function empty(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function enabled(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function first(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function firstChild(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function firstOfType(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function fullscreen(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function focus(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function hover(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function indeterminate(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function inRange(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function invalid(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function lastChild(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function lastOfType(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function left(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function link(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function onlyChild(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function onlyOfType(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function optional(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function outOfRange(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function readOnly(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function readWrite(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function required(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function right(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function root(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function scope(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function target(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function valid(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function visited(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function dir(param: string, props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function lang(param: string, props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function not(param: string, props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function nthChild(param: string | number, props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function nthLastChild(param: string | number, props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function nthLastOfType(param: string | number, props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function nthOfType(param: string | number, props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function after(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function before(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function firstLetter(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function firstLine(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function selection(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function backdrop(props: CSSProperties): StyleAttribute;
/**
* Defines a rule for the given pseudoclass selector.
*/
export function placeholder(props: CSSProperties): StyleAttribute;
/**
* An escape hatch to define styles for arbitrary CSS selectors. Your selector is appended
* directly to the css rule, letting you define 'whatever' you want. Use sparingly!
*
* (nb1: don't forget to add a leading space for 'child' selectors. eg - `$(' .item', {...}`).
* (nb2: `simulate()` does not work on these selectors yet.)
*/
export function select(selector: string, props: CSSProperties): StyleAttribute;
/**
* An escape hatch to define styles for arbitrary CSS selectors. Your selector is appended
* directly to the css rule, letting you define 'whatever' you want. Use sparingly!
*
* (nb1: don't forget to add a leading space for 'child' selectors. eg - `$(' .item', {...}`).
* (nb2: `simulate()` does not work on these selectors yet.)
*/
export function $(selector: string, props: CSSProperties): StyleAttribute;
/**
* An escape hatch to target elements based on it's parent.
*/
export function parent(selector: string, props: CSSProperties): StyleAttribute;
/**
* Combine rules, with latter styles taking precedence over previous ones.
*/
export function compose(...rules: Array<Rule>): StyleAttribute;
/**
* Combine rules, with latter styles taking precedence over previous ones.
*/
export function merge(...rules: Array<Rule>): StyleAttribute;
/**
* Loads the given font-face at most once into the document, returns the font family name.
*/
export interface FontProperties {
[propertyName: string]: any;
}
export function fontFace(font: FontProperties): string;
/**
* Adds animation keyframes into the document, with an optional name.
*/
export function keyframes(timeline: TimeLine): string;
/**
* Adds animation keyframes into the document, with an optional name.
*/
export function keyframes(name: string, timeline: TimeLine): string;
/**
* In glamor, css rules are treated as values. The css function lets you define these values.
*/
export function css(...rules: Array<Rule>): StyleAttribute;
export namespace css {
export function insert(css: string): void;
export function global(selector: string, style: CSSProperties): void;
// Aliasing keyframes
export function keyframes(timeline: TimeLine): string;
export function keyframes(name: string, timeline: TimeLine): string;
// Aliasing fontFace
export function fontFace(font: FontProperties): string;
}
/**
* Define plugins
*/
type PluginProperties = {
selector: string,
style: CSSProperties
}
type PluginFn = (arg: PluginProperties) => PluginProperties
export interface PluginSet {
fns: PluginFn[]
add(...fns: PluginFn[]): void
remove(fn: PluginFn): void
clear(): void
transform(arg: PluginProperties): PluginProperties
}
export namespace plugins {
export const keyframes: PluginSet
export const fontFace: PluginSet
export const media: PluginSet
export const fns: PluginFn[]
export function add(...fns: PluginFn[]): void
export function remove(fn: PluginFn): void
export function clear(): void
export function transform(arg: PluginProperties): PluginProperties
}
/**
* Media queries!
*/
export function media(query: string, ...rules: Array<Rule>): StyleAttribute;
/**
* Included Media query presets.
*/
export const presets: {
mobile: '(min-width: 400px)';
phablet: '(min-width: 550px)';
tablet: '(min-width: 750px)';
desktop: '(min-width: 1000px)';
hd: '(min-width: 1200px)';
};
/**
* In development, lets you trigger any pseudoclass on an element.
*/
export function simulate(...pseudoclasses: Array<string>): StyleAttribute;
export interface TimeLine {
[timelineValue: string]: CSSProperties;
}
/**
* Append a raw css rule at most once to the stylesheet. The ultimate escape hatch.
*/
export function insertRule(css: string): void;
/**
* Append a css rule as a key-value object at most once to the stylesheet. The ultimate escape hatch.
*/
export function insertGlobal(selector: string, style: CSSProperties): void;
/**
* A helper to extract the css for given rules. useful for debugging, and webcomponents.
*/
export function cssFor(...rules: Array<StyleAttribute>): string;
/**
* Another helper for webcomponents, this generates the attributes to be included when
* constructing an element's html.
*/
export function attribsFor(...rules: Array<StyleAttribute>): string;
/**
* Rehydrate with server-side rendered rule IDs
*/
export function rehydrate(ids: string[]): void;
/**
* Toggle speedy mode
*/
export function speedy(mode: boolean): void;
/**
* Clears out the cache and empties the stylesheet
*/
export function flush(): void;