typescript-sass
v0.0.0Typescript Sass
What is this?
This is an experiment that came about from learning a bit of Angular2 and wanting to use sass in component styles. The idea behind this module is that it watches your project for changes in sass files, but instead of making on big sass file it compiles those files into typescript files that can be imported into other typescript files.
If your loader supports it you can technically import raw text files and use those in say, an Angular2 component, but the typescript compiler is going to yell at you since a raw css text file isn't a typescript module. Still not sure what I mean?
Take the following example Angular2 component:
import {Component} from 'angular2/core';
import {DevicesService} from './devices.service';
import mainStyles from "./main.styles";
@Component({
selector: 'device-list',
template: `
<h1>List of devices</h1>
<ul>
<li *ngFor="#device of devices">{{device.name}}</li>
</ul>
`,
styles: [mainStyles]
})
export class DeviceListComponent {
public devices
constructor(
private _service: DevicesService
){}
ngOnInit() {
this._service.getDevices().then((devices)=>{
this.devices = devices
})
}
}
mainStyles
is a sass file in the devices
component directory.
This module makes the attempt to take that sass file and generate a module that will work in this situation and satisfy the typescript compiler.
Original main.styles.sass file:
ul
list-style: none
li
display: inline
a
color: blue
and the generated main.styles.ts file:
export default `
ul {
list-style: none; }
li {
display: inline; }
li a {
color: blue; }
`
Sass imports are also supported currently. Import paths are derived from the parent directory
of the compiled file and the sassDir
from the config file.
Usage
I've been using this with the concurrently module in my project
package.js
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"tsSass": "ts-sass",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" \"npm run tsSass\""
},
For Basic configuration you can include a tsSassConfig.json
file in your project root:
{
"sassDir": "app",
"sassSubDir": "sass"
}
sassDir
- Indicates that main directory to watch for sass files. I point this towards
my angular app
directory where my components live. This should not include node_modules
it's just using fs.watch
so there isn't a great way to exclude node_modules.
sassSubDir
- Indicates if you want your sass files in a separate directory within
you component directories. I've been experimenting with a /sass
directory to reduce clutter.
If this option isn't set then the compiled .ts
files will be placed in the same directory
as the original .sass
files.
Wat, no tests?!
Yea, its just an experiment at this point and it's small enough where I'm not too worried yet. If there is interest I might make this a bit better, like supporting other stuff then just sass (less/haml/jade/etc)