Description

Another SASS compiler written from scratch, runnable both in node and browser environment

Demo

Target

This project(Not Production Ready) is for people who want to understand how to write a compiler; Basic Steps:

1. SourceCode (SASS Scanning)
2. TokenStream (Parsing)
3. AST or Abstract Syntax Tree (Analysis)
4. IR or Intermediate_representation
5. HighLevelLanguage (CSS Code and SourceMap Generation)

Features:

1. Variables
2. Nesting
3. Extend/Inheritance
4. Operators
5. Mixins
6. Modules (@import and @use(which is more efficient than @import))

Installation

npm install --save tiny-sass-compiler

Usage in node

import sass from "tiny-sass-compiler";

//render API
sass.render({filename:'./default.scss'},(err,result)=>{
  console.log(result.code)
})
// or renderSync
const result = sass.renderSync({filename:'./default.scss'})
console.log(result.code)

Usage in browser

import {compile} from  'tiny-sass-compiler/dist/tiny-sass-compiler.esm-browser.prod.js'
const result = compile(`
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body .test{
  font: 100% $font-stack;
  color: $primary-color;
}`)

console.log(result.code)

Terminal Setup

npm install -g tiny-sass-compiler

Command Line Interface

Support .scss extension for now

Usage

tiny-sass <input> [output]

The input and output must be a directory

Example

tiny-sass src/ dist/

will generate intermediate AST file in dist/ast and css file in dist/css

Test

Snapshot Test

Development

npm run test-source

Production

npm run test

will generate intermediate AST file in test-dist/ast and css file in test-dist/css

Example:

input:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body .test{
  font: 100% $font-stack;
  color: $primary-color;
}

output:

CSS

body .test {
    font: 100% Helvetica, sans-serif;
    color: #333;
}

Jest test

npm run jest

Interested in more intermediate status? View files in ./test-dist/ which contains ast after parse+transform and dist code after codegen

Other Readme

• AST Descriptor Syntax
• AST travesal Plugin
• AST Interpret Transform Plugin

Reference

• csstree
• astexplorer
• vue-next/compiler-core
• lisperator
• less
• hast
• unist