{"id":26480,"library":"tiny-sass-compiler","title":"tiny-sass-compiler","description":"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.","status":"active","version":"0.12.2","language":"javascript","source_language":"en","source_url":"https://github.com/wizardpisces/tiny-sass-compiler","tags":["javascript","scss","css","compiler","ast","typescript"],"install":[{"cmd":"npm install tiny-sass-compiler","lang":"bash","label":"npm"},{"cmd":"yarn add tiny-sass-compiler","lang":"bash","label":"yarn"},{"cmd":"pnpm add tiny-sass-compiler","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Package ships CommonJS and ESM; default import works in both environments.","wrong":"const sass = require('tiny-sass-compiler')","symbol":"default export","correct":"import sass from 'tiny-sass-compiler'"},{"note":"The pre-built browser ESM bundle is in `dist/`; direct import from package root gives Node.js API.","wrong":"import { compile } from 'tiny-sass-compiler'","symbol":"compile","correct":"import { compile } from 'tiny-sass-compiler/dist/tiny-sass-compiler.esm-browser.prod.js'"},{"note":"render() is a method on the default export object, not a named export.","wrong":"import { render } from 'tiny-sass-compiler'","symbol":"render","correct":"import sass from 'tiny-sass-compiler'; sass.render({filename: './default.scss'}, (err, result) => {})"},{"note":"Same as render: method on default export.","wrong":"const { renderSync } = require('tiny-sass-compiler')","symbol":"renderSync","correct":"import sass from 'tiny-sass-compiler'; const result = sass.renderSync({filename: './default.scss'})"}],"quickstart":{"code":"import sass from 'tiny-sass-compiler';\nimport { compile } from 'tiny-sass-compiler/dist/tiny-sass-compiler.esm-browser.prod.js';\n// Node example: renderSync\nconst result = sass.renderSync({\n  filename: './default.scss'\n});\nconsole.log(result.code);\n// Browser example: compile string\nconst browserResult = compile(`\n$font-stack: Helvetica, sans-serif;\n$primary-color: #333;\nbody .test {\n  font: 100% $font-stack;\n  color: $primary-color;\n}`);\nconsole.log(browserResult.code);","lang":"typescript","description":"Demonstrates Node.js renderSync and browser compile API usage."},"warnings":[{"fix":"Ensure built CSS includes @media rules expected by your styles.","message":"Version 0.10.0 added @media keyword support; may break existing code expecting parse error on @media queries.","severity":"breaking","affected_versions":"<0.10.0"},{"fix":"Use mature compilers like Dart Sass or LibSass for production.","message":"The package explicitly states 'Not Production Ready' – do not use in production environments.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use directories: `tiny-sass src/ dist/`.","message":"CLI tool only supports .scss extension and input/output must be directories, not files.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Import from 'tiny-sass-compiler/dist/tiny-sass-compiler.esm-browser.prod.js' in browser environments.","message":"Browser import requires a specific ESM bundle path; importing from package root yields Node.js API.","severity":"gotcha","affected_versions":">=0.7.1"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run `npm install --save tiny-sass-compiler` in your project root.","cause":"Package not installed or not in node_modules.","error":"Cannot find module 'tiny-sass-compiler'"},{"fix":"Use `import sass from 'tiny-sass-compiler'` then `sass.render(...)`.","cause":"Using named import { render } instead of default import.","error":"TypeError: sass.render is not a function"},{"fix":"Ensure the .scss file exists at the given path, or use absolute path.","cause":"Passed filename to renderSync without proper path resolution.","error":"Error: ENOENT: no such file or directory, open './default.scss'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}