tiny-sass-compiler

0.12.2 verified Fri May 01 auth: no javascript

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.

Common errors

error Cannot find module 'tiny-sass-compiler' ↓

cause Package not installed or not in node_modules.

fix

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

error TypeError: sass.render is not a function ↓

cause Using named import { render } instead of default import.

fix

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

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

cause Passed filename to renderSync without proper path resolution.

fix

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

Warnings

breaking Version 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.

gotcha The package explicitly states 'Not Production Ready' – do not use in production environments. ↓

fix Use mature compilers like Dart Sass or LibSass for production.

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

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

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

Install

npm install tiny-sass-compiler

yarn add tiny-sass-compiler

pnpm add tiny-sass-compiler

Imports

default export
wrong
```
const sass = require('tiny-sass-compiler')
```
correct
```
import sass from 'tiny-sass-compiler'
```
Package ships CommonJS and ESM; default import works in both environments.

compile

wrong

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

correct

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

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

render

wrong

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

correct

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

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

renderSync

wrong

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

correct

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

Same as render: method on default export.

Quickstart

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