scoped-rem
Version:
Makes CSS rem units relative to a custom root font size.
50 lines • 1.94 kB
TypeScript
//#region src/index.d.ts
/**
* Core idea of scoped-rem:
* 1. Transform rem values `x rem` to `calc(x * var(--varname))`
* 1. `x` is the original rem value
* 2. `varname` is a CSS variable name without `--` prefix, default `rem-relative-base`
* 3. `x` will be rounded to a specified `precision` if provided
* 2. (Skipped if `rootval` is not provided) Declare the CSS variable `--varname` in a specified scope `varselector` with a relative root value `rootval`
*/
interface ScopedRemOptions {
/**
* CSS variable name used for rem conversion, default '--rem-relative-base'
*
* e.g., 'my-base', then rem value will be converted to 'calc(x * var(--my-base))'
*/
varname?: string;
/**
* Relative root value of rem, e.g., '26.6667vw'
*
* If not provided, the loader will skip variable declaration generation,
* but rem values will still be transformed to calc() with CSS variables.
* This is useful when developers want to declare the CSS variable manually elsewhere (e.g., in a global stylesheet).
*/
rootval?: string;
/**
* Scope selector for the CSS variable, default ':root'
*
* e.g., '.my-component' will generate:
* ```
* .my-component { --rem-relative-base: 26.6667vw; }
* ```
* instead of
* ```
* :root { --rem-relative-base: 26.6667vw; }
* ```
* which limits the variable to the specified scope.
*/
varselector?: string;
/**
* Number of decimal places to round the converted rem values, default is no rounding.
*/
precision?: number;
}
declare const VARNAME_DEFAULT = "rem-relative-base";
declare const VARSELECTOR_DEFAULT = ":root";
declare function parseQueryOptions(query: string): ScopedRemOptions | null;
declare function transformCss(css: string, filename: string, options: ScopedRemOptions): string;
//#endregion
export { ScopedRemOptions, VARNAME_DEFAULT, VARSELECTOR_DEFAULT, parseQueryOptions, transformCss };
//# sourceMappingURL=index.d.ts.map