Registry / serialization / tiny-sass-compiler

tiny-sass-compiler

library0.12.2jsnpmunverified

A simple SCSS-to-CSS compiler written in TypeScript from scratch, designed for educational purposes to demonstrate compiler construction (lexing, parsing, AST, IR, code generation). Current version 0.12.2 runs in Node.js (>=10.x) and browsers via ESM bundle. It supports variables, nesting, extend/inheritance, operators, mixins, and modules (@import and @use). Not production-ready; focuses on simplicity and zero dependencies. The package ships TypeScript types. Ideal for learning compiler internals.

serialization

npm install tiny-sass-compiler

github ↗package ↗

INSTALL

IMPORT

SIG · TINY-SASS-COMPILER

tiny-sass-compiler

serializationjavascriptv0.12.2

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.

default export

✓ import sass from 'tiny-sass-compiler'

✗ const sass = require('tiny-sass-compiler')

Package ships CommonJS and ESM; default import works in both environments.

compile

✓ import { compile } from 'tiny-sass-compiler/dist/tiny-sass-compiler.esm-browser.prod.js'

✗ import { compile } from 'tiny-sass-compiler'

The pre-built browser ESM bundle is in `dist/`; direct import from package root gives Node.js API.

render

✓ import sass from 'tiny-sass-compiler'; sass.render({filename: './default.scss'}, (err, result) => {})

✗ import { render } from 'tiny-sass-compiler'

render() is a method on the default export object, not a named export.

renderSync

✓ import sass from 'tiny-sass-compiler'; const result = sass.renderSync({filename: './default.scss'})

✗ const { renderSync } = require('tiny-sass-compiler')

Same as render: method on default export.

Demonstrates Node.js renderSync and browser compile API usage.

import sass from 'tiny-sass-compiler'; import { compile } from 'tiny-sass-compiler/dist/tiny-sass-compiler.esm-browser.prod.js'; // Node example: renderSync const result = sass.renderSync({ filename: './default.scss' }); console.log(result.code); // Browser example: compile string const browserResult = compile(` $font-stack: Helvetica, sans-serif; $primary-color: #333; body .test { font: 100% $font-stack; color: $primary-color; }`); console.log(browserResult.code);

Debug

Known issues

breakingVersion 0.10.0 added @media keyword support; may break existing code expecting parse error on @media queries.

fix

Ensure built CSS includes @media rules expected by your styles.

affects: <0.10.0

gotchaThe package explicitly states 'Not Production Ready' – do not use in production environments.

fix

Use mature compilers like Dart Sass or LibSass for production.

affects: >=0.0.0

gotchaCLI tool only supports .scss extension and input/output must be directories, not files.

fix

Use directories: `tiny-sass src/ dist/`.

affects: >=0.0.0

gotchaBrowser import requires a specific ESM bundle path; importing from package root yields Node.js API.

fix

Import from 'tiny-sass-compiler/dist/tiny-sass-compiler.esm-browser.prod.js' in browser environments.

affects: >=0.7.1

Errors

Common errors & fixes

Cannot find module 'tiny-sass-compiler'

Package not installed or not in node_modules.

fix

Run `npm install --save tiny-sass-compiler` in your project root.

TypeError: sass.render is not a function

Using named import { render } instead of default import.

fix

Use `import sass from 'tiny-sass-compiler'` then `sass.render(...)`.

Error: ENOENT: no such file or directory, open './default.scss'

Passed filename to renderSync without proper path resolution.

fix

Ensure the .scss file exists at the given path, or use absolute path.

Upgrade

Version history

0.12.2latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/wizardpisces/tiny-sass-compiler ↗

packagehttps://www.npmjs.com/package/tiny-sass-compiler ↗