sass-planifolia

Vanilla Sass helper functions
git clone https://git.ce9e.org/sass-planifolia.git

commit
cce5a87d3b8ece9516c6de1f2514ae5daeeab62a
parent
5c7a5d3f6c98936d470aa06baa9392fdf659d892
Author
Jonas Hvid <mail@johv.dk>
Date
2022-05-01 21:52
switch from `node-sass` to `sass`

Diffstat

M package.json 2 +-
M test/color.js 60 ++++++++++++++++++++++++++++++------------------------------
M test/contrast.js 66 ++++++++++++++++++++++++++++++------------------------------
M test/shared.js 18 ++++++++++--------

4 files changed, 74 insertions, 72 deletions


diff --git a/package.json b/package.json

@@ -5,7 +5,7 @@
    5     5   "main": "index.js",
    6     6   "devDependencies": {
    7     7     "mocha": "^9.2.0",
    8    -1     "node-sass": "^7.0.1",
   -1     8     "sass": "^1.51.0",
    9     9     "sassdoc": "^2.7.3"
   10    10   },
   11    11   "scripts": {

diff --git a/test/color.js b/test/color.js

@@ -7,13 +7,13 @@ describe('color', function() {
    7     7   describe('lab', function() {
    8     8     describe('lch', function() {
    9     9       it('white', function() {
   10    -1         assert.equal(renderer.value('lch(100, 0, 0rad)'), 'white')
   -1    10         assert.equal(renderer.value('lch(100, 0, 0rad)'), '#fff')
   11    11       });
   12    12       it('black', function() {
   13    -1         assert.equal(renderer.value('lch(0, 0, 0rad)'), 'black')
   -1    13         assert.equal(renderer.value('lch(0, 0, 0rad)'), '#000')
   14    14       });
   15    15       it('red (rad)', function() {
   16    -1         assert.equal(renderer.value('lch(53.23288, 104.57421, 0.69818rad)'), 'red')
   -1    16         assert.equal(renderer.value('lch(53.23288, 104.57421, .69818rad)'), 'red')
   17    17       });
   18    18       it('red (deg)', function() {
   19    19         assert.equal(renderer.value('lch(53.23288, 104.57421, 40deg)'), 'red')
@@ -43,7 +43,7 @@ describe('color', function() {
   43    43 
   44    44     describe('pf-chroma', function() {
   45    45       it('white', function() {
   46    -1         shared.similar(renderer.value('pf-chroma(white)'), 0, 0.0001);
   -1    46         shared.similar(renderer.value('pf-chroma(white)'), 0, .0001);
   47    47       });
   48    48       it('black', function() {
   49    49         shared.similar(renderer.value('pf-chroma(black)'), 0);
@@ -79,7 +79,7 @@ describe('color', function() {
   79    79 
   80    80     describe('pf-complement', function() {
   81    81       it('white', function() {
   82    -1         assert.equal(renderer.value('pf-complement(white)'), 'white')
   -1    82         assert.equal(renderer.value('pf-complement(white)'), '#fff')
   83    83       });
   84    84       it('red', function() {
   85    85         assert.equal(renderer.value('pf-complement(red)'), '#008ca1')
@@ -112,22 +112,22 @@ describe('color', function() {
  112   112 
  113   113     describe('pf-mix', function() {
  114   114       it('white, white', function() {
  115    -1         assert.equal(renderer.value('pf-mix(white, white)'), 'white')
   -1   115         assert.equal(renderer.value('pf-mix(white, white)'), '#fff')
  116   116       });
  117   117       it('black, white', function() {
  118    -1         assert.equal(renderer.value('pf-mix(black, white)'), '#777777')
   -1   118         assert.equal(renderer.value('pf-mix(black, white)'), '#777')
  119   119       });
  120   120       it('black, white, 0%', function() {
  121    -1         assert.equal(renderer.value('pf-mix(black, white, 0%)'), 'white')
   -1   121         assert.equal(renderer.value('pf-mix(black, white, 0%)'), '#fff')
  122   122       });
  123   123       it('black, white, 100%', function() {
  124    -1         assert.equal(renderer.value('pf-mix(black, white, 100%)'), 'black')
   -1   124         assert.equal(renderer.value('pf-mix(black, white, 100%)'), '#000')
  125   125       });
  126   126       it('black, white, 20%', function() {
  127   127         assert.equal(renderer.value('pf-mix(black, white, 20%)'), '#c6c6c6')
  128   128       });
  129    -1       it('black, white, 0.2', function() {
  130    -1         assert.equal(renderer.value('pf-mix(black, white, 0.2)'), '#c6c6c6')
   -1   129       it('black, white, .2', function() {
   -1   130         assert.equal(renderer.value('pf-mix(black, white, .2)'), '#c6c6c6')
  131   131       });
  132   132       it('blue, red', function() {
  133   133         assert.equal(renderer.value('pf-mix(blue, red)'), '#c20081')
@@ -153,13 +153,13 @@ describe('color', function() {
  153   153   describe('luv', function() {
  154   154     describe('lch', function() {
  155   155       it('white', function() {
  156    -1         assert.equal(renderer.value('lch(100, 0, 0rad, "luv")'), 'white')
   -1   156         assert.equal(renderer.value('lch(100, 0, 0rad, "luv")'), '#fff')
  157   157       });
  158   158       it('black', function() {
  159    -1         assert.equal(renderer.value('lch(0, 0, 0rad, "luv")'), 'black')
   -1   159         assert.equal(renderer.value('lch(0, 0, 0rad, "luv")'), '#000')
  160   160       });
  161   161       it('red (rad)', function() {
  162    -1         assert.equal(renderer.value('lch(53.23288, 179.07872, 0.21245rad, "luv")'), 'red')
   -1   162         assert.equal(renderer.value('lch(53.23288, 179.07872, .21245rad, "luv")'), 'red')
  163   163       });
  164   164       it('red (deg)', function() {
  165   165         assert.equal(renderer.value('lch(53.23288, 179.07872, 12.1725deg, "luv")'), 'red')
@@ -189,7 +189,7 @@ describe('color', function() {
  189   189 
  190   190     describe('pf-chroma', function() {
  191   191       it('white', function() {
  192    -1         shared.similar(renderer.value('pf-chroma(white, "luv")'), 0, 0.0001);
   -1   192         shared.similar(renderer.value('pf-chroma(white, "luv")'), 0, .0001);
  193   193       });
  194   194       it('black', function() {
  195   195         shared.similar(renderer.value('pf-chroma(black, "luv")'), 0);
@@ -225,7 +225,7 @@ describe('color', function() {
  225   225 
  226   226     describe('pf-complement', function() {
  227   227       it('white', function() {
  228    -1         assert.equal(renderer.value('pf-complement(white, "luv")'), 'white')
   -1   228         assert.equal(renderer.value('pf-complement(white, "luv")'), '#fff')
  229   229       });
  230   230       it('red', function() {
  231   231         assert.equal(renderer.value('pf-complement(red, "luv")'), '#008e8e')
@@ -237,22 +237,22 @@ describe('color', function() {
  237   237 
  238   238     describe('pf-mix', function() {
  239   239       it('white, white', function() {
  240    -1         assert.equal(renderer.value('pf-mix(white, white, 50%, "luv")'), 'white')
   -1   240         assert.equal(renderer.value('pf-mix(white, white, 50%, "luv")'), '#fff')
  241   241       });
  242   242       it('black, white', function() {
  243    -1         assert.equal(renderer.value('pf-mix(black, white, 50%, "luv")'), '#777777')
   -1   243         assert.equal(renderer.value('pf-mix(black, white, 50%, "luv")'), '#777')
  244   244       });
  245   245       it('black, white, 0%', function() {
  246    -1         assert.equal(renderer.value('pf-mix(black, white, 0%, "luv")'), 'white')
   -1   246         assert.equal(renderer.value('pf-mix(black, white, 0%, "luv")'), '#fff')
  247   247       });
  248   248       it('black, white, 100%', function() {
  249    -1         assert.equal(renderer.value('pf-mix(black, white, 100%, "luv")'), 'black')
   -1   249         assert.equal(renderer.value('pf-mix(black, white, 100%, "luv")'), '#000')
  250   250       });
  251   251       it('black, white, 20%', function() {
  252   252         assert.equal(renderer.value('pf-mix(black, white, 20%, "luv")'), '#c6c6c6')
  253   253       });
  254    -1       it('black, white, 0.2', function() {
  255    -1         assert.equal(renderer.value('pf-mix(black, white, 0.2, "luv")'), '#c6c6c6')
   -1   254       it('black, white, .2', function() {
   -1   255         assert.equal(renderer.value('pf-mix(black, white, .2, "luv")'), '#c6c6c6')
  256   256       });
  257   257       it('blue, red', function() {
  258   258         assert.equal(renderer.value('pf-mix(blue, red, 50%, "luv")'), '#bd0095')
@@ -278,10 +278,10 @@ describe('color', function() {
  278   278   describe('hsl', function() {
  279   279     describe('lch', function() {
  280   280       it('white', function() {
  281    -1         assert.equal(renderer.value('lch(100, 0, 0rad, "hsl")'), 'white')
   -1   281         assert.equal(renderer.value('lch(100, 0, 0rad, "hsl")'), '#fff')
  282   282       });
  283   283       it('black', function() {
  284    -1         assert.equal(renderer.value('lch(0, 0, 0rad, "hsl")'), 'black')
   -1   284         assert.equal(renderer.value('lch(0, 0, 0rad, "hsl")'), '#000')
  285   285       });
  286   286       it('red', function() {
  287   287         assert.equal(renderer.value('lch(50, 100, 0rad, "hsl")'), 'red')
@@ -350,10 +350,10 @@ describe('color', function() {
  350   350 
  351   351     describe('pf-complement', function() {
  352   352       it('white', function() {
  353    -1         assert.equal(renderer.value('pf-complement(white, "hsl")'), 'white')
   -1   353         assert.equal(renderer.value('pf-complement(white, "hsl")'), '#fff')
  354   354       });
  355   355       it('red', function() {
  356    -1         assert.equal(renderer.value('pf-complement(red, "hsl")'), 'cyan')
   -1   356         assert.equal(renderer.value('pf-complement(red, "hsl")'), 'aqua')
  357   357       });
  358   358       it('yellow', function() {
  359   359         assert.equal(renderer.value('pf-complement(yellow, "hsl")'), 'blue')
@@ -362,19 +362,19 @@ describe('color', function() {
  362   362 
  363   363     describe('pf-mix', function() {
  364   364       it('white, white', function() {
  365    -1         assert.equal(renderer.value('pf-mix(white, white, 50%, "hsl")'), 'white')
   -1   365         assert.equal(renderer.value('pf-mix(white, white, 50%, "hsl")'), '#fff')
  366   366       });
  367   367       it('black, white', function() {
  368   368         assert.equal(renderer.value('pf-mix(black, white, 50%, "hsl")'), 'gray')
  369   369       });
  370   370       it('black, white, 0%', function() {
  371    -1         assert.equal(renderer.value('pf-mix(black, white, 0%, "hsl")'), 'white')
   -1   371         assert.equal(renderer.value('pf-mix(black, white, 0%, "hsl")'), '#fff')
  372   372       });
  373   373       it('black, white, 100%', function() {
  374    -1         assert.equal(renderer.value('pf-mix(black, white, 100%, "hsl")'), 'black')
   -1   374         assert.equal(renderer.value('pf-mix(black, white, 100%, "hsl")'), '#000')
  375   375       });
  376   376       it('blue, red', function() {
  377    -1         assert.equal(renderer.value('pf-mix(blue, red, 50%, "hsl")'), 'magenta')
   -1   377         assert.equal(renderer.value('pf-mix(blue, red, 50%, "hsl")'), '#f0f')
  378   378       });
  379   379       it('yellow, blue', function() {
  380   380         assert.equal(renderer.value('pf-mix(yellow, blue, 50%, "hsl")'), '#00ff80')

diff --git a/test/contrast.js b/test/contrast.js

@@ -6,33 +6,33 @@ describe('contrast', function() {
    6     6 
    7     7   describe('alpha-blend', function() {
    8     8     it('fully opaque', function() {
    9    -1       assert.equal(renderer.value('alpha-blend(white)'), 'white')
   10    -1       assert.equal(renderer.value('alpha-blend(black)'), 'black')
   -1     9       assert.equal(renderer.value('alpha-blend(white)'), '#fff')
   -1    10       assert.equal(renderer.value('alpha-blend(black)'), '#000')
   11    11       assert.equal(renderer.value('alpha-blend(red)'), 'red')
   12    12     });
   13    13     it('fully transparent', function() {
   14    14       assert.equal(renderer.value('alpha-blend(rgba(white, 0), blue)'), 'blue')
   15    15       assert.equal(renderer.value('alpha-blend(rgba(black, 0), blue)'), 'blue')
   16    16       assert.equal(renderer.value('alpha-blend(rgba(red, 0), blue)'), 'blue')
   17    -1       assert.equal(renderer.value('alpha-blend(rgba(blue, 0))'), 'white')
   -1    17       assert.equal(renderer.value('alpha-blend(rgba(blue, 0))'), '#fff')
   18    18     });
   19    19     it('50%', function() {
   20    -1       assert.equal(renderer.value('alpha-blend(rgba(white, 0.5), blue)'), '#8080ff')
   21    -1       assert.equal(renderer.value('alpha-blend(rgba(black, 0.5), blue)'), 'navy')
   22    -1       assert.equal(renderer.value('alpha-blend(rgba(red, 0.5), blue)'), 'purple')
   23    -1       assert.equal(renderer.value('alpha-blend(rgba(blue, 0.5))'), '#8080ff')
   -1    20       assert.equal(renderer.value('alpha-blend(rgba(white, .5), blue)'), '#8080ff')
   -1    21       assert.equal(renderer.value('alpha-blend(rgba(black, .5), blue)'), 'navy')
   -1    22       assert.equal(renderer.value('alpha-blend(rgba(red, .5), blue)'), 'purple')
   -1    23       assert.equal(renderer.value('alpha-blend(rgba(blue, .5))'), '#8080ff')
   24    24     });
   25    25     it('13%', function() {
   26    -1       assert.equal(renderer.value('alpha-blend(rgba(white, 0.13), blue)'), '#2121ff')
   27    -1       assert.equal(renderer.value('alpha-blend(rgba(black, 0.13), blue)'), '#0000de')
   28    -1       assert.equal(renderer.value('alpha-blend(rgba(red, 0.13), blue)'), '#2100de')
   29    -1       assert.equal(renderer.value('alpha-blend(rgba(blue, 0.13))'), '#dedeff')
   -1    26       assert.equal(renderer.value('alpha-blend(rgba(white, .13), blue)'), '#2121ff')
   -1    27       assert.equal(renderer.value('alpha-blend(rgba(black, .13), blue)'), '#0000de')
   -1    28       assert.equal(renderer.value('alpha-blend(rgba(red, .13), blue)'), '#2100de')
   -1    29       assert.equal(renderer.value('alpha-blend(rgba(blue, .13))'), '#dedeff')
   30    30     });
   31    31     it('transparent background', function() {
   32    -1       assert.equal(renderer.value('alpha-blend(rgba(white, 0.5), rgba(blue, 0.5))'), 'rgba(170, 170, 255, 0.75)')
   -1    32       assert.equal(renderer.value('alpha-blend(rgba(white, .5), rgba(blue, .5))'), 'rgba(170,170,255,.75)')
   33    33     });
   34    34     it('both fully transparent', function() {
   35    -1       assert.equal(renderer.value('alpha-blend(rgba(white, 0), rgba(black, 0))'), 'rgba(255, 255, 255, 0)')
   -1    35       assert.equal(renderer.value('alpha-blend(rgba(white, 0), rgba(black, 0))'), 'rgba(255,255,255,0)')
   36    36     });
   37    37   });
   38    38 
@@ -44,28 +44,28 @@ describe('contrast', function() {
   44    44       assert.equal(renderer.value('luma(black)'), '0')
   45    45     });
   46    46     it('red', function() {
   47    -1       assert.equal(renderer.value('luma(#f00)'), '0.2126')
   -1    47       assert.equal(renderer.value('luma(#f00)'), '.2126')
   48    48     });
   49    49     it('green', function() {
   50    -1       assert.equal(renderer.value('luma(#0f0)'), '0.7152')
   -1    50       assert.equal(renderer.value('luma(#0f0)'), '.7152')
   51    51     });
   52    52     it('blue', function() {
   53    -1       assert.equal(renderer.value('luma(#00f)'), '0.0722')
   -1    53       assert.equal(renderer.value('luma(#00f)'), '.0722')
   54    54     });
   55    55     it('yellow', function() {
   56    -1       assert.equal(renderer.value('luma(yellow)'), '0.9278')
   -1    56       assert.equal(renderer.value('luma(yellow)'), '.9278')
   57    57     });
   58    58     it('cyan', function() {
   59    -1       assert.equal(renderer.value('luma(cyan)'), '0.7874')
   -1    59       assert.equal(renderer.value('luma(cyan)'), '.7874')
   60    60     });
   61    61     it('random', function() {
   62    -1       shared.similar(renderer.value('luma(rgb(12, 180, 92))'), 0.3349, 0.02);
   -1    62       shared.similar(renderer.value('luma(rgb(12, 180, 92))'), .3349, .02);
   63    63     });
   64    64     it('white with alpha', function() {
   65    -1       assert.equal(renderer.value('luma(rgba(255,255,255,0.5))'), '1')
   -1    65       assert.equal(renderer.value('luma(rgba(255,255,255,.5))'), '1')
   66    66     });
   67    67     it('black with alpha', function() {
   68    -1       assert.equal(renderer.value('luma(rgba(0,0,0,0.5))'), '0')
   -1    68       assert.equal(renderer.value('luma(rgba(0,0,0,.5))'), '0')
   69    69     });
   70    70   });
   71    71 
@@ -83,31 +83,31 @@ describe('contrast', function() {
   83    83       assert.equal(renderer.value('contrast(red, red)'), '1')
   84    84     });
   85    85     it('red-lightblue', function() {
   86    -1       shared.similar(renderer.value('contrast(red, #676eff)'), 1, 0.02);
   -1    86       shared.similar(renderer.value('contrast(red, #676eff)'), 1, .02);
   87    87     });
   88    88   });
   89    89 
   90    90   describe('contrast-color', function() {
   91    91     it('white', function() {
   92    -1       assert.equal(renderer.value('contrast-color(white)'), 'black')
   -1    92       assert.equal(renderer.value('contrast-color(white)'), '#000')
   93    93     });
   94    94     it('black', function() {
   95    -1       assert.equal(renderer.value('contrast-color(black)'), 'white')
   -1    95       assert.equal(renderer.value('contrast-color(black)'), '#fff')
   96    96     });
   97    97     it('red', function() {
   98    -1       assert.equal(renderer.value('contrast-color(#f00)'), 'black')
   -1    98       assert.equal(renderer.value('contrast-color(#f00)'), '#000')
   99    99     });
  100   100     it('green', function() {
  101    -1       assert.equal(renderer.value('contrast-color(#0f0)'), 'black')
   -1   101       assert.equal(renderer.value('contrast-color(#0f0)'), '#000')
  102   102     });
  103   103     it('blue', function() {
  104    -1       assert.equal(renderer.value('contrast-color(#00f)'), 'white')
   -1   104       assert.equal(renderer.value('contrast-color(#00f)'), '#fff')
  105   105     });
  106   106     it('yellow', function() {
  107    -1       assert.equal(renderer.value('contrast-color(yellow)'), 'black')
   -1   107       assert.equal(renderer.value('contrast-color(yellow)'), '#000')
  108   108     });
  109   109     it('cyan', function() {
  110    -1       assert.equal(renderer.value('contrast-color(cyan)'), 'black')
   -1   110       assert.equal(renderer.value('contrast-color(cyan)'), '#000')
  111   111     });
  112   112     it('light', function() {
  113   113       assert.equal(renderer.value('contrast-color(white, #111, #eee)'), '#111')
@@ -125,19 +125,19 @@ describe('contrast', function() {
  125   125 
  126   126   describe('contrast-stretch', function() {
  127   127     it('white-black', function() {
  128    -1       assert.equal(renderer.value('contrast-stretch(white, black)'), 'black')
   -1   128       assert.equal(renderer.value('contrast-stretch(white, black)'), '#000')
  129   129     });
  130   130     it('white-#333', function() {
  131   131       assert.equal(renderer.value('contrast-stretch(white, #333)'), '#333')
  132   132     });
  133   133     it('white-#333-21', function() {
  134    -1       assert.equal(renderer.value('contrast-stretch(white, #333, 21)'), 'black')
   -1   134       assert.equal(renderer.value('contrast-stretch(white, #333, 21)'), '#000')
  135   135     });
  136   136     it('#333-blue-7', function() {
  137    -1       assert.equal(renderer.value('contrast-stretch(#333, blue, 7)'), '#bbbbff')
   -1   137       assert.equal(renderer.value('contrast-stretch(#333, blue, 7)'), '#bbf')
  138   138     });
  139   139     it('#333-blue-AAA', function() {
  140    -1       assert.equal(renderer.value('contrast-stretch(#333, blue, "AAA")'), '#bbbbff')
   -1   140       assert.equal(renderer.value('contrast-stretch(#333, blue, "AAA")'), '#bbf')
  141   141     });
  142   142   });
  143   143 });

diff --git a/test/shared.js b/test/shared.js

@@ -1,5 +1,5 @@
    1     1 var path = require('path');
    2    -1 var sass = require('node-sass');
   -1     2 var sass = require('sass');
    3     3 var assert = require('assert');
    4     4 
    5     5 var Renderer = function(head) {
@@ -7,16 +7,18 @@ var Renderer = function(head) {
    7     7 }
    8     8 
    9     9 Renderer.prototype.block = function(input) {
   10    -1   var result = sass.renderSync({
   11    -1     data: this.head + ' .test{' + input + '}',
   12    -1     outputStyle: 'compact',
   13    -1     includePaths: [path.resolve(__dirname, '../sass/')],
   14    -1   });
   15    -1   return result.css.utf8Slice().slice(8, -3);
   -1    10   var result = sass.compileString(
   -1    11     this.head + ' .test{' + input + '}',
   -1    12     {
   -1    13       style: 'compressed',
   -1    14       loadPaths: [path.resolve(__dirname, '../sass/')],
   -1    15     },
   -1    16   );
   -1    17   return result.css.slice(".test".length);
   16    18 };
   17    19 
   18    20 Renderer.prototype.value = function(input) {
   19    -1   return this.block('content:' + input).slice(9, -1);
   -1    21   return this.block('content:' + input).slice("{content:".length, -("}".length));
   20    22 };
   21    23 
   22    24 var similar = function(result, actual, threshold) {