glass-easel-stylesheet-compiler

0.19.0 verified Fri May 01 auth: no javascript

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.

Common errors

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

cause 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 Error: Cannot find module 'glass-easel-stylesheet-compiler' ↓

cause Package not installed or missing from node_modules.

fix

Run npm install glass-easel-stylesheet-compiler

error TypeError: transformer.free is not a function ↓

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

fix

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

Warnings

gotcha The 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.

gotcha The 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.

gotcha rpxRatio 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).

gotcha The 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.

Install

npm install glass-easel-stylesheet-compiler

yarn add glass-easel-stylesheet-compiler

pnpm add glass-easel-stylesheet-compiler

Imports

StyleSheetTransformer

wrong

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

correct

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

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

StyleSheetTransformer

wrong

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

correct

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

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

StyleSheetTransformer type

wrong

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

correct

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

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

Quickstart

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);