73 lines
1.6 KiB
TypeScript
73 lines
1.6 KiB
TypeScript
import {CSSOMAddon} from './cssom';
|
|
import {Css} from './vcssom/cssToTree';
|
|
import {NanoRenderer} from '../types/nano';
|
|
import {CSSOMRule} from './cssom';
|
|
import {CssProps} from '../types/common';
|
|
|
|
export interface VRule {
|
|
/**
|
|
* CSS declarations, like `{color: 'red'}`
|
|
*/
|
|
decl: CssProps;
|
|
rule: CSSOMRule;
|
|
|
|
/**
|
|
* Re-render css rule according to new CSS declarations.
|
|
* @param decl CSS declarations, like `{color: 'red'}`
|
|
*/
|
|
diff(decl: CssProps);
|
|
|
|
/**
|
|
* Removes this `VRule` from CSSOM. After calling this method, you
|
|
* cannot call `diff` anymore as this rule will be removed from style sheet.
|
|
*/
|
|
del();
|
|
}
|
|
|
|
export interface VSheet {
|
|
/**
|
|
* Re-renders style sheet according to specified CSS-like object. The `css`
|
|
* object is a 3-level tree structure:
|
|
*
|
|
* ```
|
|
* {
|
|
* media-query-prelude: {
|
|
* selector: {
|
|
* declarations
|
|
* }
|
|
* }
|
|
* }
|
|
* ```
|
|
*
|
|
* Example:
|
|
*
|
|
* ```js
|
|
* sheet.diff({
|
|
* '': {
|
|
* '.my-class': {
|
|
* color: 'red',
|
|
* },
|
|
* '.my-class:hover': {
|
|
* color: 'blue',
|
|
* },
|
|
* },
|
|
* '@media only screen and (max-width: 600px)': {
|
|
* '.my-class': {
|
|
* color: 'green',
|
|
* },
|
|
* },
|
|
* });
|
|
* ```
|
|
*
|
|
* @param css CSS-like object with media queries as top level.
|
|
*/
|
|
diff(css: Css);
|
|
}
|
|
|
|
export interface VCSSOMAddon {
|
|
VRule: new (selector: string, mediaQuery?: string) => VRule;
|
|
VSheet: new () => VSheet;
|
|
}
|
|
|
|
export function addon(nano: NanoRenderer);
|