5

GitHub - wizardpisces/tiny-sass-compiler: Another sass compiler write from scatc...

 2 years ago
source link: https://github.com/wizardpisces/tiny-sass-compiler
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

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:

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

Reference


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK