Description

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

Target

This project(Not Production Ready) is for people who want to understand how to write a compiler (almost zero dependencies) , compile steps:

1. sourceCode (sass scanning)
2. tokens (parsing)
3. syntaxTree (analysis)
4. intermediateRepresentation or IR (code generation + sourceMap)
5. highLevelLanguage (css)

Simple demo

Online Demo

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

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? Please view files in ./test-dist/ which contains ast after parse | transform and code after code generation

Other Readme

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

Reference

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

0.11.0 (2021-01-19)

bugfix

• ll(n) check different : scenario(c815dee)

chore

• add @use circular check(fe8a3d1)
• change package.json version(50c313b)
• merge breaked @media(15d903f)
• not stable, add ts to lexical and input_stream , also create a bug(a42fb6c)
• optimize @use and IdentifierNode(edd67bd)
• optimize ast traverse plugin(8c29d53)
• optimize source map filename(0f74753)
• remove unnecessary dependencies(0cfe9e4)

feat

• add @use keyword; Todos: parse and interpret namespace(6f31965)
• add basic @keyframes(30ceff2)
• add comment parse(9c972d9)
• add keyword @content(c06d469)
• add more interface for plugin manager(5cf1dbf)
• add render,renderSync API(a975d9a)
• add transform runtime plugin(973b329)
• finish basic @use(8481285)
• start add use module ing(7072409)

refactor

• code optimize(0e2845e)
• replace genCSS with genCodeVisitor which reuse traverse visitor mode(9d887f3)
• simplify transform(6eb3c68)
• use traverse plugin to generate css(78462f5)

Refactor

• refactor enviroment mainly to differentiate variable kind(a5c117a)

0.10.0 (2020-11-13)

chore

• add AtRule prototype and media ast and other refactor(afd5863)
• change file name(e88f1ff)

feat

• add @media and url internal call support(d8b6857)
• add travesal plugin API(5fe01c7)

feature

• add @media buble(0b039dd)
• add partial @media bubble(dba1e3a)

refactor

• bugfix and extract types(f491999)
• extract codegen to tree(fb4ded6)

0.8.9 (2020-09-23)

0.8.8 (2020-09-23)

0.8.7 (2020-09-23)

0.8.5 (2020-09-17)

0.8.4 (2020-09-15)

0.8.3 (2020-09-09)

0.8.1 (2020-09-09)

0.8.0 (2020-09-09)

0.7.3 (2020-09-08)

0.7.1 (2020-09-07)

feat

• add production builder(7a8520d)

0.7.0 (2020-08-18)

feat

• add partial sourceMap(181db13)
• add sourceMap and jest (unfinished)(94c4239)
• refactor parse transform_module index to ts, add feature @import sourcemap(0762ec1)

refactor

• ,adjust assign and binary position(afb47f9)
• self beautify css(d335e35)

test

• add property, @extend , selector sourceMap test(35acf45)

0.6.3 (2020-07-02)

docs

• change readme(4fde6f0)

refactor

• code structure(7091001)
• make transform plugins(74b238f)
• split expression and statement transform(31b23e6)
• tranform plugins(243320d)

0.5.1 (2020-06-23)

0.5.0 (2020-06-22)

0.4.3 (2020-06-18)

0.4.1 (2020-06-18)

0.4.0 (2020-06-18)

0.3.1 (2020-06-08)

0.3.0 (2020-06-08)

0.2.5 (2020-06-04)

0.2.4 (2020-06-03)

0.1.4 (2020-05-27)

0.1.3 (2020-05-27)

0.1.1 (2020-05-27)

bugfix

• fix extend class logic(2bb1405)

feat

• add keyword @each , fix: transform_nest(bfad4d6)

feature

• add basic IfStatement(e3d5f3e)
• add IfStatement, keywords:@if @else @error(dbcaf8d)
• add keyword @import , oonly support basic @import for now(f7a0263)
• add mixins optional params and parent selector(66de562)
• add npm(2c6a6d8)
• add support for @mixin optional params(dba57cb)
• optimize parser for keywords @mixin @include(e27ce29)
• optimize transformer and compiler to support @mixin and @include(a0c8f5a)
• partially add start and end property to ast(1e553bb)

fix

• @mixin @include without tailor ((a925fef)

refactor

• add css test result beautify(7105926)
• optimize code(742129b)
• optimize Token(0ba01a8)
• rewrite test input and output(6199dd2)
• str lexical parse upgrade(52f9fdf)
• whitespace optimization based on position(start, end)(761b73a)