# tilde-sass

> A SASS compiler with tilde (~) support for resolving node_modules path and supports new sass' syntax.

Latest version **1.1.0** (published 2022-02-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install tilde-sass
pnpm add tilde-sass
yarn add tilde-sass
bun add tilde-sass
```

Provides the command `tilde-sass`.

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-02-10 |
| First published | 2021-01-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 27.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | HeyMarco |
| Maintainers | heymarco |
| Keywords | sass, compiler, compression, minify, css, tilde, node, webpack, node_modules, dart |

## Links

- npm: https://www.npmjs.com/package/tilde-sass
- Repository: https://github.com/heyymarco/tilde-sass
- Homepage: https://github.com/heyymarco/tilde-sass#readme
- Issues: https://github.com/heyymarco/tilde-sass/issues
- npm.io page: https://npm.io/package/tilde-sass

## Dependencies (10)

- [gulp](https://npm.io/package/gulp.md) ^4.0.2
- [path](https://npm.io/package/path.md) ^0.12.7
- [sass](https://npm.io/package/sass.md) ^1.49.7
- [cssnano](https://npm.io/package/cssnano.md) ^5.0.17
- [gulp-if](https://npm.io/package/gulp-if.md) ^3.0.0
- [gulp-sass](https://npm.io/package/gulp-sass.md) ^5.1.0
- [gulp-util](https://npm.io/package/gulp-util.md) ^3.0.8
- [gulp-postcss](https://npm.io/package/gulp-postcss.md) ^9.0.1
- [command-line-args](https://npm.io/package/command-line-args.md) ^5.2.1
- [postcss-merge-rules-plus](https://npm.io/package/postcss-merge-rules-plus.md) ^2.0.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2022-02-10
- 1.0.2 — 2021-02-05
- 1.0.1 — 2021-01-31
- 1.0.0 — 2021-01-14

## README

# tilde-sass

**tilde-sass** is a SASS compiler with tilde (~) support for resolving **node_modules** path,
supports new sass' syntax, and has built in **crazy** compression & grouping rules/selectors.


## Features

* Supports a tilde (~) prefix for resolving **node_modules** path.
* Supports new sass' syntax like @use, @forward, sass modules, etc. Based on **dart-sass**.
* Supports better compression using **postcss** and **cssnano**. Not just removing whitespace!
* Supports merging fully/partially similar selectors using **postcss-merge-rules-plus**.


## Merging Similar Rules & Better Compression

Do you hate the **@extend**/**placeholder** cannot be used with **different media queries**?
An **@extend** doesn't work if you try to merge some properties with different **media queries**.
*Error: You may not @extend selectors across media queries.*

Sometimes you must using **@include** instead of **@extend**.
That makes our SASS code complicated and not consistent.

The solution is by using the **@include** only (forget the **@extend**),
and then run this compiler with option: **--mergeSelectors** at your command line.
Our compiler will **merge** any rules having the same (or partially) properties for you!
*The result will be the same* as if you using **@extend** in your SASS!
The exception is any rules having different media queries,
the result will be falled back to **@include** normally.


### Example:

```scss
@use "~@nodestrap/breakpoints/src/index" as breakpoint;
$my-color: rgba(255, 0, 0, 1);
$my-font: 'Arial';


// define awesome-props via mixin
@mixin awesome-props {
    color: red;
    font-family: 'Arial';
    opacity: 0.5;
}

// define awesome-props via placeholder
%awesome-props {
    color: red;
    font-family: 'Arial';
    opacity: 0.5;
}

.a {
    @include awesome-props; // use mixin
}
.b {
    color: blue;
}
.c {
    @extend %awesome-props; // use placeholder
    background: white;
}
.d {
    @include breakpoint.media-up(xl) {
        // @extend %awesome-props; // use placeholder => doesn't work! => error: You may not @extend selectors across media queries.
        @include awesome-props; // use mixin => works!
    }
    background: white;
}
.e {
    // hard coded:
    font-family: $my-font;
    color: $my-color;
    opacity: #{(1 / 2)};

    background: white;
}
.f {
    @include breakpoint.media-up(xl) {
        @include awesome-props; // use mixin => works!
    }
    background: white;
}
```

Then run:
```sh
tilde-sass --file test/*.scss --outFile test/  --outputStyle compressed --mergeSelectors
```

The compiled css would be like this:
(after beautify-ed & added comment for explanation)

```css
.a,
.c,
.e {
    /* awesome-props */
    /* all props defined via mixin or placeholder are here */
    color: red;
    font-family: Arial;
    opacity: .5
}

.b {
    /* private props */
    color: #00f
}

.c,
.d,
.e,
.f {
    /* other shared props */
    background: #fff
}

@media (min-width: 1200px) {
    .d,
    .f {
        /* awesome-props */
        /* on different media query */
        color: red;
        font-family: Arial;
        opacity: .5
    }
}
```


## Installation

run this command to install our compiler:
```sh
npm i tilde-sass --save-dev
```

Then add this scripts into your **package.json**:
```json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "compile": "tilde-sass --file src/*.scss --outFile dist/ --mergeSelectors",
    "compile-min": "tilde-sass --file src/*.scss --outFile dist/ --mergeSelectors --outputStyle compressed",
    "compile-watch": "tilde-sass --file src/*.scss --outFile dist/ --mergeSelectors --outputStyle compressed --watch"
}
```


## Usage

To compile your *.sass or *.scss, run this following command:
```sh
npm run compile
```


## Compression Options

add **--outputStyle compressed** for outputing a compressed css.
For further compression options add this following code into your **package.json**

```json
"cssnano": {
    "preset": [
      "default",
      {
        "cssDeclarationSorter": true,
        "rawCache": true,
        "calc": true,
        "colormin": true,
        "convertValues": true,
        "discardComments": true,
        "discardDuplicates": true,
        "discardEmpty": true,
        "discardOverridden": true,
        "mergeLonghand": true,
        "mergeRules": true,
        "minifyFontValues": true,
        "minifyGradients": true,
        "minifyParams": true,
        "minifySelectors": true,
        "normalizeCharset": true,
        "normalizeDisplayValues": true,
        "normalizePositions": true,
        "normalizeRepeatStyle": true,
        "normalizeString": true,
        "normalizeTimingFunctions": true,
        "normalizeUnicode": true,
        "normalizeUrl": true,
        "normalizeWhitespace": true,
        "orderedValues": true,
        "reduceInitial": true,
        "reduceTransforms": true,
        "svgo": true,
        "uniqueSelectors": true
      }
    ]
  }
```

To disable any compression options set one/more value above to false.
For example, disabling the **calc compression** and **discardComments compression**:

```json
"cssnano": {
    "preset": [
      "default",
      {
        "calc": false,
        "discardComments": false
      }
    ]
  }
```


## Please Support Us

A lot of coffee has been spent for making this plugins.
Please buy me a cup of coffee to support me continue to develop & improve this application.
Visit: [ko-fi.com](https://ko-fi.com/heymarco)


## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.


## License

[MIT](https://choosealicense.com/licenses/mit/)

---
_Source: https://npm.io/package/tilde-sass · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._