effcss 1.0.0

package/dist/types/src/types.d.ts

@@ -0,0 +1,358 @@
+/**
+ * Style manager
+ * @description
+ * Class that manage CSSStylesheets
+ */
+export interface IStyleManager {
+    /**
+     * Get stylesheet
+     * @param key - stylesheet key
+     */
+    get(key: string): CSSStyleSheet | undefined;
+    /**
+     * Get all stylesheets
+     */
+    getAll(): Record<string, CSSStyleSheet>;
+    /**
+     * Add stylesheet
+     * @param key - stylesheet key
+     * @param stylesheet - CSSStylesheet instance
+     */
+    add(key: string, stylesheet: CSSStyleSheet): true | void;
+    /**
+     * Remove sheet
+     * @param key - stylesheet key
+     */
+    remove(key: string): true | void;
+    /**
+     * Remove all stylesheets
+     */
+    removeAll(): void;
+    /**
+     * Pack styles into CSSStyleSheet
+     * @param key - stylesheet key
+     * @param styles - stylesheet content
+     */
+    pack(key: string, styles: string): CSSStyleSheet | void;
+    /**
+     * Cache computed CSS rules
+     * @param key
+     * @param styleSheet
+     */
+    cacheRules: (key: string, stylesheet: CSSStyleSheet) => void;
+    /**
+     * Get expanded selectors
+     * @param key
+     */
+    getExpandedSelectors: (key: string) => Set<string>;
+    /**
+     * Expand existing CSS rule
+     * @param key - stylesheet key
+     * @param init - initial selector
+     * @param exp - expanded selector
+     */
+    expandRule: (key: string, init: string, exp: string) => true | void;
+    /**
+     * Apply stylesheets to node
+     * @param root
+     */
+    apply(root: {
+        adoptedStyleSheets: CSSStyleSheet[];
+    }): void;
+}
+/**
+ * Style processor
+ * @description
+ * Class that compiles style object to CSSStylesheet string content
+ */
+export interface IStyleProcessor {
+    /**
+     * Basic styles
+     */
+    baseStyles: string;
+    /**
+     * Create expanded selector with state
+     * @param b
+     * @param selector
+     */
+    expandSelector(b: string, selector: string): [string, string];
+    /**
+     * Compile style config to CSS stylesheet text content
+     * @param b - block key
+     * @param styleConfig - style config
+     */
+    compile(b: string, styleConfig: TStyleConfig): string;
+}
+export interface IStyleProvider extends HTMLElement {
+    manager?: IStyleManager;
+    processor?: IStyleProcessor;
+    /**
+     * Compile sheet
+     */
+    compileStyleSheet(key: string, config: TStyleConfig): CSSStyleSheet | void;
+    /**
+     * Expand stylesheet
+     * @param key
+     * @param selectors
+     */
+    expandStyleSheet(key: string, selectors: string[]): number | undefined;
+    /**
+     * Process configs
+     * @param styles
+     * @param ext
+     */
+    processStyles(styles: Record<string, TStyleConfig>, ext: Record<string, string[]>): void;
+}
+/**
+ * Variable type
+ */
+export type TVariable = {
+    syn?: string;
+    ini?: number | string;
+    inh?: boolean;
+    typ?: unknown;
+} | {
+    syn?: string;
+    ini?: number | string;
+    inh?: boolean;
+    typ: 'c';
+    all?: boolean;
+};
+/**
+ * Style config
+ */
+export type TStyleConfig = {
+    /**
+     * CSS variables config
+     */
+    _?: Record<string, TVariable>;
+    /**
+     * Keys dictionary
+     * @description
+     */
+    k?: Record<string, string>;
+    /**
+     * Values dictionary
+     * @description
+     */
+    v?: Record<string, Record<string, string | number>>;
+    /**
+     * Style config object
+     * @description
+     * Config to be compiled to CSSStylesheet string content
+     */
+    c: Record<string, Record<string, string | number> | string>;
+};
+type TVariants = Record<string | number, string | number>;
+export interface IValues {
+    /**
+     * lightness
+     */
+    lig: TVariants;
+    /**
+     * hue
+     */
+    hue: TVariants;
+    /**
+     * chroma
+     */
+    chr: TVariants;
+    /**
+     * alpha
+     */
+    alp: TVariants;
+    /**
+     * Time
+     */
+    time: TVariants;
+    /**
+     * Iteration-count coefficients
+     */
+    ic: TVariants;
+    /**
+     * font-family
+     */
+    ff: TVariants;
+    /**
+     * Font-weight
+     */
+    fwg: TVariants;
+    /**
+     * Font-size coefficients
+     */
+    fsz: TVariants;
+    /**
+     * Root font-size
+     */
+    rem: TVariants;
+    /**
+     * Breakpoints
+     */
+    bp: TVariants;
+    /**
+     * Spacing
+     */
+    sp: TVariants;
+    /**
+     * Size
+     */
+    sz: TVariants;
+    /**
+     * Universal size units
+     */
+    szu: TVariants;
+    /**
+     * Thickness
+     */
+    th: TVariants;
+    /**
+     * Radius
+     */
+    rad: TVariants;
+    /**
+     * relative values
+     */
+    coef: TVariants;
+    /**
+     * Ratio coefficients
+     */
+    rat: TVariants;
+    /**
+     * Fractions (between 0 and 1)
+     */
+    fr: TVariants;
+    /**
+     * Opacity
+     */
+    o: TVariants;
+    /**
+     * Z-index coefficients
+     */
+    zi: TVariants;
+    /**
+     * Letter-spacing coefficients
+     */
+    lsp: TVariants;
+    /**
+     * Line-height coefficients
+     */
+    lh: TVariants;
+    /**
+     * Viewport units
+     */
+    vu: TVariants;
+    /**
+     * Viewport width
+     */
+    vw: TVariants;
+    /**
+     * Viewport height
+     */
+    vh: TVariants;
+    /**
+     * Viewport min size
+     */
+    vmin: TVariants;
+    /**
+     * Viewport max size
+     */
+    vmax: TVariants;
+    /**
+     * Container query units
+     */
+    cqu: TVariants;
+    /**
+     * Container query block size
+     */
+    cqb: TVariants;
+    /**
+     * Container query inline size
+     */
+    cqi: TVariants;
+    /**
+     * Container query min size
+     */
+    cqmin: TVariants;
+    /**
+     * Container query max size
+     */
+    cqmax: TVariants;
+    /**
+     * Perspective coefficients
+     */
+    pers: TVariants;
+    /**
+     * Zoom coefficients
+     */
+    zm: TVariants;
+    /**
+     * Rotate coefficients
+     */
+    rot: TVariants;
+    /**
+     * Skew coefficients
+     */
+    sk: TVariants;
+    /**
+     * Translate coefficients
+     */
+    tr: TVariants;
+    /**
+     * Scale coefficients
+     */
+    sc: TVariants;
+    /**
+     * Inset
+     */
+    ins: TVariants;
+    /**
+     * Flex-grow
+     */
+    fg: TVariants;
+    /**
+     * Flex-shrink
+     */
+    fs: TVariants;
+    /**
+     * Flex-basis
+     */
+    fb: TVariants;
+    /**
+     * Flex-order
+     */
+    fo: TVariants;
+    /**
+     * Grid row amount
+     */
+    ra: TVariants;
+    /**
+     * Grid column amount
+     */
+    co: TVariants;
+    /**
+     * Grid row offset
+     */
+    ro: TVariants;
+    /**
+     * Grid column offset
+     */
+    ca: TVariants;
+}
+export type TModeValues = Record<string, Record<string, Record<string, string | number>>>;
+export interface IStyleProvider {
+    /**
+     * Settings script element id
+     */
+    settingsid?: string;
+    /**
+     * CSS var prefix
+     */
+    prefix?: string | null;
+    /**
+     * Style generation mode
+     * @description
+     * `a` - data-attributes, `c` - classes
+     */
+    mode?: 'a' | 'c' | null;
+}
+export {};

package/dist/types/src/utils.d.ts

@@ -0,0 +1,88 @@
+import { IStyleProvider, TStyleConfig } from "types";
+export declare const SETTINGS_ID = "effcss";
+export declare const COMPONENT_NAME = "style-provider";
+/**
+ * Get provider styles
+ */
+export declare const getProviderStyles: () => string;
+/**
+ * Create settings script element
+ * @param settings
+ * @param params
+ */
+export declare const createSettingsElement: (settings: object, params?: {
+    id: string;
+}) => Node;
+/**
+ * Create settings HTML string
+ * @param settings
+ * @param params
+ */
+export declare const createSettingsHTML: (settings: object, params?: {
+    id: string;
+}) => string;
+/**
+ * Get provider component
+ */
+export declare const getProvider: (root?: Document) => IStyleProvider;
+/**
+ * Compile stylesheet
+ * @param key - stylesheet key
+ * @param config - style config
+ * @param provider - style provider
+ */
+export declare const compileStyleSheet: (key: string, config: TStyleConfig, provider?: IStyleProvider) => void | CSSStyleSheet;
+/**
+ * Expand stylesheet
+ * @param key - stylesheet key
+ * @param config - style config
+ * @param provider - style provider
+ */
+export declare const expandStyleSheet: (key: string, config: string[], provider?: IStyleProvider) => number | undefined;
+/**
+ * Get stylesheet from provider
+ * @param key
+ */
+export declare const getStyleSheet: (key: string, provider?: IStyleProvider) => CSSStyleSheet | undefined;
+/**
+ * Add stylesheet to provider
+ * @param key
+ */
+export declare const addStyleSheet: (key: string, stylesheet: CSSStyleSheet, provider?: IStyleProvider) => true | void | undefined;
+/**
+ * Remove stylesheet from provider
+ * @param key
+ */
+export declare const removeStyleSheet: (key: string, provider?: IStyleProvider) => true | void | undefined;
+/**
+ * Stringify stylesheet
+ * @param key
+ * @param provider
+ */
+export declare const stringifyStyleSheet: (key: string, provider?: IStyleProvider) => string;
+/**
+ * Get all stylesheets
+ * @param key
+ */
+export declare const stringifyAllStyles: (provider?: IStyleProvider) => string;
+/**
+ * Get rules count for stylesheet
+ * @param key
+ * @param provider
+ */
+export declare const getRulesCount: (key: string, provider?: IStyleProvider) => number;
+/**
+ * Get total rules count
+ * @param provider
+ */
+export declare const getTotalRulesCount: (provider?: IStyleProvider) => number;
+export declare class StylesCollector {
+    getElementsByTagName(key: string): {}[] | undefined;
+}
+export declare class StyleDispatcher {
+    root: Document;
+    provider?: IStyleProvider;
+    construstor(root?: Document): void;
+    compile: (key: string, config: TStyleConfig) => void | CSSStyleSheet;
+    expand: (key: string, config: string[]) => number | undefined;
+}

package/dist/types/tests/Processor.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils.js

@@ -0,0 +1 @@
+const e="effcss",r="style-provider",t=()=>`${r} {display: contents;}`,i=(r,t)=>{const i=JSON.stringify(r),n=(null==t?void 0:t.id)||e,o=document.createElement("script");return o.id=n,o.type="application/json",o.innerHTML=i,o},n=(r,t)=>{const i=JSON.stringify(r);return`<script id="${(null==t?void 0:t.id)||e}" type="application/json">${i}<\/script>`},o=(e=document)=>{var r;return null===(r=e.getElementsByTagName("style-provider"))||void 0===r?void 0:r[0]},l=(e,r,t=o())=>t.compileStyleSheet(e,r),d=(e,r,t=o())=>t.expandStyleSheet(e,r),s=(e,r=o())=>{var t;return null===(t=null==r?void 0:r.manager)||void 0===t?void 0:t.get(e)},v=(e,r,t=o())=>{var i;return null===(i=null==t?void 0:t.manager)||void 0===i?void 0:i.add(e,r)},a=(e,r=o())=>{var t;return null===(t=null==r?void 0:r.manager)||void 0===t?void 0:t.remove(e)},u=(e,r=o())=>{var t;return[...(null===(t=s(e,r))||void 0===t?void 0:t.cssRules)||[]].map((e=>e.cssText)).join("")},c=(e=o())=>{var r;return Object.keys((null===(r=null==e?void 0:e.manager)||void 0===r?void 0:r.getAll())||{}).map((r=>u(r,e))).join("")},p=(e,r=o())=>{var t,i;return(null===(i=null===(t=s(e,r))||void 0===t?void 0:t.cssRules)||void 0===i?void 0:i.length)||0},m=(e=o())=>{var r;return Object.keys((null===(r=null==e?void 0:e.manager)||void 0===r?void 0:r.getAll())||{}).reduce(((r,t)=>r+p(t,e)),0)};class g{getElementsByTagName(e){if("style-provider"===e)return[{}]}}class y{constructor(){this.root=document,this.compile=(e,r)=>l(e,r,this.provider),this.expand=(e,r)=>d(e,r,this.provider)}construstor(e){e&&(this.root=e),this.provider=o(this.root)}}export{r as COMPONENT_NAME,e as SETTINGS_ID,y as StyleDispatcher,g as StylesCollector,v as addStyleSheet,l as compileStyleSheet,i as createSettingsElement,n as createSettingsHTML,d as expandStyleSheet,o as getProvider,t as getProviderStyles,p as getRulesCount,s as getStyleSheet,m as getTotalRulesCount,a as removeStyleSheet,c as stringifyAllStyles,u as stringifyStyleSheet};

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "effcss",
+  "version": "1.0.0",
+  "description": "Next generation CSS-in-JS library",
+  "scripts": {
+    "build": "rollup -c",
+    "test": "vitest"
+  },
+  "keywords": [
+    "web components",
+    "ui",
+    "typescript",
+    "css",
+    "css-in-js"
+  ],
+  "author": "Marat Sabitov",
+  "license": "Apache 2.0",
+  "main": "dist/index.js",
+  "types": "dist/types/src/types.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/src/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./configs/basic": {
+      "types": "./dist/types/src/configs/basic.d.ts",
+      "import": "./dist/configs/basic.js"
+    },
+    "./configs/ext": {
+      "types": "./dist/types/src/configs/ext.d.ts",
+      "import": "./dist/configs/ext.js"
+    },
+    "./css/dict": {
+      "types": "./dist/types/src/css/dict.d.ts",
+      "import": "./dist/css/dict.js"
+    },
+    "./css/functions": {
+      "types": "./dist/types/src/css/functions.d.ts",
+      "import": "./dist/css/functions.js"
+    },
+    "./utils": {
+      "types": "./dist/types/src/utils.d.ts",
+      "import": "./dist/utils.js"
+    },
+    "./types": {
+      "types": "./dist/types/src/types.d.ts",
+      "import": "./dist/types/src/types.d.ts"
+    }
+  },
+  "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "vitest": "^2.1.8"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "package.json",
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://gitverse.ru/msabitov/effcss.git"
+  },
+  "homepage": "https://gitverse.ru/msabitov/effcss/content/master/README.md"
+}