tiny-sass-compiler

tiny-sass-compiler copied to clipboard

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