Registry / web-framework / glass-easel-stylesheet-compiler

glass-easel-stylesheet-compiler

library0.19.0jsnpmunverified

A Rust-based stylesheet compiler for the glass-easel project, version 0.19.0. It converts rpx units to vw, applies class-prefix-based style isolation, and minifies CSS. Maintained by WeChat Mini Program team, it prioritizes performance via WebAssembly. Alternatives like PostCSS plugins exist but lack integrated class-prefixing.

web-framework

npm install glass-easel-stylesheet-compiler

github ↗package ↗

INSTALL

IMPORT

SIG · GLASS-EASEL-STYLES

glass-easel-stylesheet-compiler

web-frameworkjavascriptv0.19.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

StyleSheetTransformer

✓ import { StyleSheetTransformer } from 'glass-easel-stylesheet-compiler'

✗ const StyleSheetTransformer = require('glass-easel-stylesheet-compiler')

Default export is an object with named StyleSheetTransformer; named import is preferred for ESM.

StyleSheetTransformer

✓ const { StyleSheetTransformer } = require('glass-easel-stylesheet-compiler')

✗ const StyleSheetTransformer = require('glass-easel-stylesheet-compiler').default

CommonJS users must destructure the named export; there is no default export.

StyleSheetTransformer type

✓ import type { StyleSheetTransformer } from 'glass-easel-stylesheet-compiler'

✗ import { StyleSheetTransformer } from 'glass-easel-stylesheet-compiler' when only type needed

For TypeScript projects only using the type (e.g., as a parameter), use import type to avoid runtime import.

Reads a CSS file, creates a StyleSheetTransformer with a class prefix and rpx ratio, then gets the transformed CSS and source map.

import { readFileSync } from 'fs'; import { StyleSheetTransformer } from 'glass-easel-stylesheet-compiler'; const cssContent = readFileSync('styles.css', 'utf8'); const classPrefix = 'my-app'; const rpxRatio = 750; const transformer = new StyleSheetTransformer('/path/to/styles.css', cssContent, classPrefix, rpxRatio); const output = transformer.getContent(); const sourceMap = transformer.toSourceMap(); transformer.free(); console.log(output); console.log(sourceMap);

Debug

Known issues

gotchaThe StyleSheetTransformer must be freed after use to release memory, especially in long-running processes.

fix

Call transformer.free() when done, or use a try/finally block.

affects: >=0.1.0

gotchaThe first argument to the constructor is a file path (string). If you pass a URL or empty string, behavior may be undefined.

fix

Always provide an absolute or relative file path (e.g., '/path/to/file.css') that matches the source map expectations.

affects: >=0.1.0

gotcharpxRatio should be based on a 750px design width; using an incorrect ratio leads to incorrect vw conversions.

fix

Ensure rpxRatio matches your design width (typically 750).

affects: >=0.1.0

gotchaThe source map returned by toSourceMap() is a raw Uint8Array, not a JSON string. Users must convert it manually if needed.

fix

Use Buffer.from(sourceMap).toString() or new TextDecoder().decode(sourceMap) to get a JSON string.

affects: >=0.1.0

Errors

Common errors & fixes

TypeError: Class extends value #<Object> is not a constructor or null

Using an incorrect import pattern that returns a module object instead of the class.

fix

Use correct import: `import { StyleSheetTransformer } from 'glass-easel-stylesheet-compiler'`

Error: Cannot find module 'glass-easel-stylesheet-compiler'

Package not installed or missing from node_modules.

fix

Run `npm install glass-easel-stylesheet-compiler`

TypeError: transformer.free is not a function

The transformer object is not an instance of StyleSheetTransformer (e.g., wrong import).

fix

Ensure you correctly imported `StyleSheetTransformer` and called `new StyleSheetTransformer(...)`.

Upgrade

Version history

0.19.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/wechat-miniprogram/glass-easel ↗

packagehttps://www.npmjs.com/package/glass-easel-stylesheet-compiler ↗