tiny-sass-compiler v0.12.2
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:
- sourceCode (sass scanning)
- tokens (parsing)
- syntaxTree (analysis)
- intermediateRepresentation or IR (code generation + sourceMap)
- highLevelLanguage (css)
Simple demo
Features:
- Variables
- Nesting
- Extend/Inheritance
- Operators
- Mixins
- 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
Reference
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago