From dd5f3c463fab336d694f426dcad11a1783590fc9 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 5 Feb 2022 07:52:13 +0100 Subject: Ported from import syntax to modules --- package.json | 1 - src/_bem.scss | 27 +- src/_contexts.scss | 114 +++--- src/_easing.scss | 172 ++++---- src/_functions.scss | 49 +-- src/_gradients.scss | 127 +++--- src/_harmony.scss | 24 +- src/_props.scss | 127 +++--- src/_responsive.scss | 89 +++-- src/_vars.scss | 2 +- src/bem-shortcodes.scss | 349 ---------------- src/bem/_block.scss | 166 ++++---- src/bem/_debug.scss | 8 +- src/bem/_element.scss | 191 ++++----- src/bem/_functions.scss | 6 +- src/bem/_modifier.scss | 63 +-- src/bem/_multi.scss | 56 ++- src/bem/_state.scss | 50 +-- src/bem/_suffix.scss | 37 +- src/bem/_theme.scss | 27 +- src/bem/_validators.scss | 68 ++-- src/bem/_vars.scss | 20 +- src/harmony-shortcodes.scss | 35 -- src/main.scss | 9 - src/prep.scss | 2 - src/props-shortcodes.scss | 79 ---- src/responsive-shortcodes.scss | 14 - test/_bem.scss | 24 +- test/_contexts.scss | 79 ++-- test/_functions.scss | 83 ++-- test/_gradients.scss | 114 +++--- test/_harmony.scss | 79 ++-- test/_props.scss | 124 +++--- test/_responsive.scss | 16 +- test/bem/_at-theme.scss | 58 +++ test/bem/_block.scss | 88 +++++ test/bem/_composed-of.scss | 152 +++++++ test/bem/_element.scss | 494 +++++++++++++++++++++++ test/bem/_examples.scss | 43 +- test/bem/_iro-bem-at-theme.scss | 55 --- test/bem/_iro-bem-block.scss | 85 ---- test/bem/_iro-bem-composed-of.scss | 149 ------- test/bem/_iro-bem-element.scss | 491 ----------------------- test/bem/_iro-bem-modifier.scss | 654 ------------------------------ test/bem/_iro-bem-multi.scss | 591 ---------------------------- test/bem/_iro-bem-next-twin-element.scss | 153 -------- test/bem/_iro-bem-related-element.scss | 459 ---------------------- test/bem/_iro-bem-state.scss | 177 --------- test/bem/_iro-bem-suffix.scss | 94 ----- test/bem/_modifier.scss | 655 +++++++++++++++++++++++++++++++ test/bem/_multi.scss | 594 ++++++++++++++++++++++++++++ test/bem/_next-twin-element.scss | 156 ++++++++ test/bem/_related-element.scss | 462 ++++++++++++++++++++++ test/bem/_state.scss | 180 +++++++++ test/bem/_suffix.scss | 97 +++++ test/test.scss | 7 +- 56 files changed, 3986 insertions(+), 4339 deletions(-) delete mode 100644 src/bem-shortcodes.scss delete mode 100644 src/harmony-shortcodes.scss delete mode 100644 src/main.scss delete mode 100644 src/prep.scss delete mode 100644 src/props-shortcodes.scss delete mode 100644 src/responsive-shortcodes.scss create mode 100644 test/bem/_at-theme.scss create mode 100644 test/bem/_block.scss create mode 100644 test/bem/_composed-of.scss create mode 100644 test/bem/_element.scss delete mode 100644 test/bem/_iro-bem-at-theme.scss delete mode 100644 test/bem/_iro-bem-block.scss delete mode 100644 test/bem/_iro-bem-composed-of.scss delete mode 100644 test/bem/_iro-bem-element.scss delete mode 100644 test/bem/_iro-bem-modifier.scss delete mode 100644 test/bem/_iro-bem-multi.scss delete mode 100644 test/bem/_iro-bem-next-twin-element.scss delete mode 100644 test/bem/_iro-bem-related-element.scss delete mode 100644 test/bem/_iro-bem-state.scss delete mode 100644 test/bem/_iro-bem-suffix.scss create mode 100644 test/bem/_modifier.scss create mode 100644 test/bem/_multi.scss create mode 100644 test/bem/_next-twin-element.scss create mode 100644 test/bem/_related-element.scss create mode 100644 test/bem/_state.scss create mode 100644 test/bem/_suffix.scss diff --git a/package.json b/package.json index b436642..3bdc8b0 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,6 @@ "author": "Volpeon ", "license": "MIT", "description": "A mixin-based Sass framework that makes it easier to work with BEM, organize variables and more.", - "main": "src/main.scss", "keywords": [ "sass", "scss", diff --git a/src/_bem.scss b/src/_bem.scss index b6032ea..e34b79b 100644 --- a/src/_bem.scss +++ b/src/_bem.scss @@ -47,16 +47,19 @@ /// @access public //// -@import 'bem/vars'; -@import 'bem/functions'; -@import 'bem/validators'; -@import 'bem/block'; -@import 'bem/element'; -@import 'bem/modifier'; -@import 'bem/suffix'; -@import 'bem/state'; -@import 'bem/theme'; -@import 'bem/multi'; -@import 'bem/debug'; +@forward 'bem/vars'; +@forward 'bem/functions'; +@forward 'bem/validators'; +@forward 'bem/block'; +@forward 'bem/element'; +@forward 'bem/modifier'; +@forward 'bem/suffix'; +@forward 'bem/state'; +@forward 'bem/theme'; +@forward 'bem/multi'; +@forward 'bem/debug'; -@include iro-context-stack-create($iro-bem-context-id); +@use 'bem/vars'; +@use './contexts'; + +@include contexts.create(vars.$context-id); diff --git a/src/_contexts.scss b/src/_contexts.scss index 9fe0e8c..8542056 100644 --- a/src/_contexts.scss +++ b/src/_contexts.scss @@ -5,16 +5,18 @@ /// It's an essential part for the BEM-related mixins. /// /// If you want to create a new context, the easiest pattern is to create a new mixin and wrap -/// the @content between a pair of iro-context-push and iro-context-pop. -/// From within the @content, you can access the context's data with iro-context-get. +/// the @content between a pair of push and pop. +/// From within the @content, you can access the context's data with get. /// To make the compilation fail if a certain nesting order is violated, use -/// iro-context-assert-stack-must-contain and iro-context-assert-stack-must-not-contain. +/// assert-stack-must-contain and assert-stack-must-not-contain. /// /// @group Contexts /// /// @access public //// +@use './functions'; + /// /// Map of all context stacks. /// @@ -22,7 +24,7 @@ /// /// @access private /// -$iro-context-stacks: (); +$stacks: (); /// /// Create a new context stack. @@ -31,8 +33,8 @@ $iro-context-stacks: (); /// /// @throw If context stack already exists /// -@mixin iro-context-stack-create($stack-id) { - $noop: iro-context-stack-create($stack-id); +@mixin create($stack-id) { + $noop: create($stack-id); } /// @@ -40,12 +42,12 @@ $iro-context-stacks: (); /// /// @param {string} $stack-id - ID of context stack /// -@function iro-context-stack-create($stack-id) { - @if map-has-key($iro-context-stacks, $stack-id) { +@function create($stack-id) { + @if map-has-key($stacks, $stack-id) { @error 'Context stack "#{inspect($stack-id)}" does not exist.'; } - $iro-context-stacks: map-merge($iro-context-stacks, ($stack-id: ())) !global; + $stacks: map-merge($stacks, ($stack-id: ())) !global; @return null; } @@ -55,8 +57,8 @@ $iro-context-stacks: (); /// /// @param {string} $stack-id - ID of context stack /// -@mixin iro-context-stack-clear($stack-id) { - $noop: iro-context-stack-clear($stack-id); +@mixin clear($stack-id) { + $noop: clear($stack-id); } /// @@ -64,13 +66,13 @@ $iro-context-stacks: (); /// /// @param {string} $stack-id - ID of context stack /// -@function iro-context-stack-clear($stack-id) { - @if not map-has-key($iro-context-stacks, $stack-id) { +@function clear($stack-id) { + @if not map-has-key($stacks, $stack-id) { @error 'Context stack "#{inspect($stack-id)}" does not exist.'; } $context-stack: (); - $iro-context-stacks: map-merge($iro-context-stacks, ($stack-id: $context-stack)) !global; + $stacks: map-merge($stacks, ($stack-id: $context-stack)) !global; @return null; } @@ -80,8 +82,8 @@ $iro-context-stacks: (); /// /// @param {string} $stack-id - ID of context stack /// -@mixin iro-context-stack-delete($stack-id) { - $noop: iro-context-stack-delete($stack-id); +@mixin delete($stack-id) { + $noop: delete($stack-id); } /// @@ -89,12 +91,12 @@ $iro-context-stacks: (); /// /// @param {string} $stack-id - ID of context stack /// -@function iro-context-stack-delete($stack-id) { - @if not map-has-key($iro-context-stacks, $stack-id) { +@function delete($stack-id) { + @if not map-has-key($stacks, $stack-id) { @error 'Context stack "#{inspect($stack-id)}" does not exist.'; } - $iro-context-stacks: map-remove($iro-context-stacks, $stack-id) !global; + $stacks: map-remove($stacks, $stack-id) !global; @return null; } @@ -106,8 +108,8 @@ $iro-context-stacks: (); /// @param {string} $id - ID of new context /// @param {any} $data [()] - Data that belongs to the context /// -@mixin iro-context-push($stack-id, $id, $data: ()) { - $noop: iro-context-push($stack-id, $id, $data); +@mixin push($stack-id, $id, $data: ()) { + $noop: push($stack-id, $id, $data); } /// @@ -119,15 +121,15 @@ $iro-context-stacks: (); /// /// @return {list} A list with two items: 1 = context id, 2 = context data /// -@function iro-context-push($stack-id, $id, $data: ()) { - @if not map-has-key($iro-context-stacks, $stack-id) { +@function push($stack-id, $id, $data: ()) { + @if not map-has-key($stacks, $stack-id) { @error 'Context stack "#{inspect($stack-id)}" does not exist.'; } $context: $id $data; - $context-stack: map-get($iro-context-stacks, $stack-id); + $context-stack: map-get($stacks, $stack-id); $context-stack: append($context-stack, $context); - $iro-context-stacks: map-merge($iro-context-stacks, ($stack-id: $context-stack)) !global; + $stacks: map-merge($stacks, ($stack-id: $context-stack)) !global; @return $context; } @@ -139,8 +141,8 @@ $iro-context-stacks: (); /// /// @throw If context stack doesn't exist /// -@mixin iro-context-pop($stack-id) { - $noop: iro-context-pop($stack-id); +@mixin pop($stack-id) { + $noop: pop($stack-id); } /// @@ -150,12 +152,12 @@ $iro-context-stacks: (); /// /// @return {list} A list with two items: 1 = context id, 2 = context data /// -@function iro-context-pop($stack-id) { - @if not map-has-key($iro-context-stacks, $stack-id) { +@function pop($stack-id) { + @if not map-has-key($stacks, $stack-id) { @error 'Context stack "#{inspect($stack-id)}" does not exist.'; } - $context-stack: map-get($iro-context-stacks, $stack-id); + $context-stack: map-get($stacks, $stack-id); @if length($context-stack) == 0 { @error 'Context stack "#{inspect($stack-id)}" is already empty.'; @@ -166,10 +168,10 @@ $iro-context-stacks: (); @if length($context-stack) == 1 { $context-stack: (); } @else { - $context-stack: iro-list-slice($context-stack, 1, length($context-stack) - 1); + $context-stack: functions.list-slice($context-stack, 1, length($context-stack) - 1); } - $iro-context-stacks: map-merge($iro-context-stacks, ($stack-id: $context-stack)) !global; + $stacks: map-merge($stacks, ($stack-id: $context-stack)) !global; @return $popped-context; } @@ -183,10 +185,16 @@ $iro-context-stacks: (); /// /// @throw If assertion fails /// -@mixin iro-context-assert-stack-must-contain($stack-id, $context-ids, $check-head-only: false) { - @if not iro-context-stack-contains($stack-id, $context-ids, $check-head-only) { +@function assert-stack-must-contain($stack-id, $context-ids, $check-head-only: false) { + @if not contains($stack-id, $context-ids, $check-head-only) { @error 'Must be called inside of contexts "#{inspect($context-ids)}".'; } + + @return null; +} + +@mixin assert-stack-must-contain($stack-id, $context-ids, $check-head-only: false) { + $noop: assert-stack-must-contain($stack-id, $context-ids, $check-head-only) } /// @@ -198,10 +206,16 @@ $iro-context-stacks: (); /// /// @throw If assertion fails /// -@mixin iro-context-assert-stack-must-not-contain($stack-id, $context-ids, $check-head-only: false) { - @if iro-context-stack-contains($stack-id, $context-ids, $check-head-only) { +@function assert-stack-must-not-contain($stack-id, $context-ids, $check-head-only: false) { + @if contains($stack-id, $context-ids, $check-head-only) { @error 'Must not be called inside of contexts "#{inspect($context-ids)}".'; } + + @return null; +} + +@mixin assert-stack-must-not-contain($stack-id, $context-ids, $check-head-only: false) { + $noop: assert-stack-must-not-contain($stack-id, $context-ids, $check-head-only); } /// @@ -213,12 +227,12 @@ $iro-context-stacks: (); /// /// @return {bool} `true` if the context stack contains one of the context IDs, otherwise `false` /// -@function iro-context-stack-contains($stack-id, $context-ids, $check-head-only: false) { - @if not map-has-key($iro-context-stacks, $stack-id) { +@function contains($stack-id, $context-ids, $check-head-only: false) { + @if not map-has-key($stacks, $stack-id) { @error 'Context stack "#{inspect($stack-id)}" does not exist.'; } - $context-stack: map-get($iro-context-stacks, $stack-id); + $context-stack: map-get($stacks, $stack-id); @if length($context-stack) == 0 { @return false; @@ -247,10 +261,16 @@ $iro-context-stacks: (); /// /// @throw If assertion fails /// -@mixin iro-context-assert-stack-count($stack-id, $max-count) { - @if iro-context-stack-count($stack-id) > $max-count { +@function assert-stack-count($stack-id, $max-count) { + @if count($stack-id) > $max-count { @error 'Maximum context count "#{inspect($max-count)}" exceeded.'; } + + @return null; +} + +@mixin assert-stack-count($stack-id, $max-count) { + $noop: assert-stack-count($stack-id, $max-count); } /// @@ -260,12 +280,12 @@ $iro-context-stacks: (); /// /// @return {number} The number of contexts /// -@function iro-context-stack-count($stack-id) { - @if not map-has-key($iro-context-stacks, $stack-id) { +@function count($stack-id) { + @if not map-has-key($stacks, $stack-id) { @error 'Context stack "#{inspect($stack-id)}" does not exist.'; } - $context-stack: map-get($iro-context-stacks, $stack-id); + $context-stack: map-get($stacks, $stack-id); @return length($context-stack); } @@ -278,12 +298,12 @@ $iro-context-stacks: (); /// /// @return {list} Null if no match was found, otherwise a list with two items: 1. context ID, 2. context data. /// -@function iro-context-get($stack-id, $type-or-level: null) { - @if not map-has-key($iro-context-stacks, $stack-id) { +@function get($stack-id, $type-or-level: null) { + @if not map-has-key($stacks, $stack-id) { @error 'Context stack "#{inspect($stack-id)}" does not exist.'; } - $context-stack: map-get($iro-context-stacks, $stack-id); + $context-stack: map-get($stacks, $stack-id); @if length($context-stack) == 0 { @return null; diff --git a/src/_easing.scss b/src/_easing.scss index a39f317..8b06632 100644 --- a/src/_easing.scss +++ b/src/_easing.scss @@ -14,32 +14,32 @@ /// /// @access private /// -$iro-cubic-bezier-sample-pool: (); +$cubic-bezier-sample-pool: (); /// /// Sample pool size for cubic bezier calculations. /// -$iro-cubic-bezier-sample-pool-size: 10 !default; +$cubic-bezier-sample-pool-size: 10 !default; /// /// Minimum slope required to use the Newton-Raphson method for cubic bezier calculations. /// -$iro-cubic-bezier-newton-min-slope: 0.001 !default; +$cubic-bezier-newton-min-slope: 0.001 !default; /// /// Number of iterations of the Newton-Raphson method. /// -$iro-cubic-bezier-newton-iters: 4 !default; +$cubic-bezier-newton-iters: 4 !default; /// /// Precision of the subdivision method for cubic bezier calculations. /// -$iro-cubic-bezier-subdiv-precision: 0.0000001 !default; +$cubic-bezier-subdiv-precision: 0.0000001 !default; /// /// Maximum iterations of the subdivision method for cubic bezier calculations. /// -$iro-cubic-bezier-subdiv-max-iters: 10 !default; +$cubic-bezier-subdiv-max-iters: 10 !default; /// /// A cubic bezier function identical to the CSS cubic-bezier function. @@ -52,7 +52,7 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-cubic-bezier($x1, $y1, $x2, $y2, $x) { +@function cubic-bezier($x1, $y1, $x2, $y2, $x) { // // Cover simple cases // @@ -73,41 +73,41 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; $sample-pool-key: $x1 + '_' + $x2; - @if not map-has-key($iro-cubic-bezier-sample-pool, $sample-pool-key) { + @if not map-has-key($cubic-bezier-sample-pool, $sample-pool-key) { $samples: (); - @for $i from 0 through $iro-cubic-bezier-sample-pool-size { - $samples: append($samples, iro-cubic-bezier-func($x1, $x2, math.div($i, $iro-cubic-bezier-sample-pool-size))); + @for $i from 0 through $cubic-bezier-sample-pool-size { + $samples: append($samples, cubic-bezier-func($x1, $x2, math.div($i, $cubic-bezier-sample-pool-size))); } - $iro-cubic-bezier-sample-pool: map-merge($iro-cubic-bezier-sample-pool, ($sample-pool-key: $samples)) !global; + $cubic-bezier-sample-pool: map-merge($cubic-bezier-sample-pool, ($sample-pool-key: $samples)) !global; } // // Calculate cubic bezier // - @return iro-cubic-bezier-func($y1, $y2, iro-cubic-bezier-t-for-x($x1, $x2, $x)); + @return cubic-bezier-func($y1, $y2, cubic-bezier-t-for-x($x1, $x2, $x)); } /// /// @access private /// -@function iro-cubic-bezier-func-a($p1, $p2) { +@function cubic-bezier-func-a($p1, $p2) { @return 1 - 3 * $p2 + 3 * $p1; } /// /// @access private /// -@function iro-cubic-bezier-func-b($p1, $p2) { +@function cubic-bezier-func-b($p1, $p2) { @return 3 * $p2 - 6 * $p1; } /// /// @access private /// -@function iro-cubic-bezier-func-c($p1) { +@function cubic-bezier-func-c($p1) { @return 3 * $p1; } @@ -116,8 +116,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @access private /// -@function iro-cubic-bezier-func($p1, $p2, $t) { - @return ((iro-cubic-bezier-func-a($p1, $p2) * $t + iro-cubic-bezier-func-b($p1, $p2)) * $t + iro-cubic-bezier-func-c($p1)) * $t; +@function cubic-bezier-func($p1, $p2, $t) { + @return ((cubic-bezier-func-a($p1, $p2) * $t + cubic-bezier-func-b($p1, $p2)) * $t + cubic-bezier-func-c($p1)) * $t; } /// @@ -125,8 +125,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @access private /// -@function iro-cubic-bezier-func-slope($p1, $p2, $t) { - @return 3 * iro-cubic-bezier-func-a($p1, $p2) * $t * $t + 2 * iro-cubic-bezier-func-b($p1, $p2) * $t + iro-cubic-bezier-func-c($p1); +@function cubic-bezier-func-slope($p1, $p2, $t) { + @return 3 * cubic-bezier-func-a($p1, $p2) * $t * $t + 2 * cubic-bezier-func-b($p1, $p2) * $t + cubic-bezier-func-c($p1); } /// @@ -134,15 +134,15 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @access private /// -@function iro-cubic-bezier-newton-raphson($x1, $x2, $x, $t) { - @for $i from 1 through $iro-cubic-bezier-newton-iters { - $cur-slope: iro-cubic-bezier-func-slope($x1, $x2, $t); +@function cubic-bezier-newton-raphson($x1, $x2, $x, $t) { + @for $i from 1 through $cubic-bezier-newton-iters { + $cur-slope: cubic-bezier-func-slope($x1, $x2, $t); @if $cur-slope == 0 { @return $t; } - $cur-x: iro-cubic-bezier-func($x1, $x2, $t) - $x; + $cur-x: cubic-bezier-func($x1, $x2, $t) - $x; $t: $t - math.div($cur-x, $cur-slope); } @@ -154,14 +154,14 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @access private /// -@function iro-cubic-bezier-binary-subdivide($x1, $x2, $x, $a, $b) { +@function cubic-bezier-binary-subdivide($x1, $x2, $x, $a, $b) { $cur-x: 0; $cur-t: 0; $i: 0; - @while $i < $iro-cubic-bezier-subdiv-max-iters { + @while $i < $cubic-bezier-subdiv-max-iters { $cur-t: $a + ($b - $a) / 2; - $cur-x: iro-cubic-bezier-func($x1, $x2, $cur-t) - $x; + $cur-x: cubic-bezier-func($x1, $x2, $cur-t) - $x; @if $cur-x > 0 { $b: $cur-t; @@ -169,7 +169,7 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; $a: $cur-t; } - @if abs($cur-x) < $iro-cubic-bezier-subdiv-precision { + @if abs($cur-x) < $cubic-bezier-subdiv-precision { @return $cur-t; } } @@ -182,30 +182,30 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @access private /// -@function iro-cubic-bezier-t-for-x($x1, $x2, $x) { +@function cubic-bezier-t-for-x($x1, $x2, $x) { $sample-pool-key: $x1 + '_' + $x2; - $samples: map-get($iro-cubic-bezier-sample-pool, $sample-pool-key); + $samples: map-get($cubic-bezier-sample-pool, $sample-pool-key); $intv-start: 0; $cur-sample: 1; - $last-sample: $iro-cubic-bezier-sample-pool-size; + $last-sample: $cubic-bezier-sample-pool-size; @while ($cur-sample != $last-sample) and (nth($samples, $cur-sample) <= $x) { - $intv-start: $intv-start + math.div(1, $iro-cubic-bezier-sample-pool-size); + $intv-start: $intv-start + math.div(1, $cubic-bezier-sample-pool-size); $cur-sample: $cur-sample + 1; } $cur-sample: $cur-sample - 1; $dist: math.div($x - nth($samples, $cur-sample), nth($samples, $cur-sample + 1) - nth($samples, $cur-sample)); - $guess-t: $intv-start + math.div($dist, $iro-cubic-bezier-sample-pool-size); + $guess-t: $intv-start + math.div($dist, $cubic-bezier-sample-pool-size); - $init-slope: iro-cubic-bezier-func-slope($x1, $x2, $guess-t); - @if $init-slope >= $iro-cubic-bezier-newton-min-slope { - @return iro-cubic-bezier-newton-raphson($x1, $x2, $x, $guess-t); + $init-slope: cubic-bezier-func-slope($x1, $x2, $guess-t); + @if $init-slope >= $cubic-bezier-newton-min-slope { + @return cubic-bezier-newton-raphson($x1, $x2, $x, $guess-t); } @else if $init-slope == 0 { @return $guess-t; } @else { - @return iro-cubic-bezier-binary-subdivide($x1, $x2, $x, $intv-start, $intv-start + 1 / $iro-cubic-bezier-sample-pool-size); + @return cubic-bezier-binary-subdivide($x1, $x2, $x, $intv-start, $intv-start + 1 / $cubic-bezier-sample-pool-size); } } @@ -216,8 +216,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease($x) { - @return iro-cubic-bezier(0.25, 0.1, 0.25, 1, $x); +@function ease($x) { + @return cubic-bezier(0.25, 0.1, 0.25, 1, $x); } /// @@ -227,8 +227,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-in($x) { - @return iro-cubic-bezier(0.42, 0, 1, 1, $x); +@function ease-in($x) { + @return cubic-bezier(0.42, 0, 1, 1, $x); } /// @@ -238,8 +238,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-out($x) { - @return iro-cubic-bezier(0, 0, 0.58, 1, $x); +@function ease-out($x) { + @return cubic-bezier(0, 0, 0.58, 1, $x); } /// @@ -249,8 +249,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-in-out($x) { - @return iro-cubic-bezier(0.42, 0, 0.58, 1, $x); +@function ease-in-out($x) { + @return cubic-bezier(0.42, 0, 0.58, 1, $x); } /// @@ -260,8 +260,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-in-sine($x) { - @return iro-cubic-bezier(0.47, 0, 0.745, 0.715, $x); +@function ease-in-sine($x) { + @return cubic-bezier(0.47, 0, 0.745, 0.715, $x); } /// @@ -271,8 +271,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-out-sine($x) { - @return iro-cubic-bezier(0.39, 0.575, 0.565, 1, $x); +@function ease-out-sine($x) { + @return cubic-bezier(0.39, 0.575, 0.565, 1, $x); } /// @@ -282,8 +282,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-in-out-sine($x) { - @return iro-cubic-bezier(0.445, 0.05, 0.55, 0.95, $x); +@function ease-in-out-sine($x) { + @return cubic-bezier(0.445, 0.05, 0.55, 0.95, $x); } /// @@ -293,8 +293,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-in-quad($x) { - @return iro-cubic-bezier(0.55, 0.085, 0.68, 0.53, $x); +@function ease-in-quad($x) { + @return cubic-bezier(0.55, 0.085, 0.68, 0.53, $x); } /// @@ -304,8 +304,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-out-quad($x) { - @return iro-cubic-bezier(0.25, 0.46, 0.45, 0.94, $x); +@function ease-out-quad($x) { + @return cubic-bezier(0.25, 0.46, 0.45, 0.94, $x); } /// @@ -315,8 +315,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-in-out-quad($x) { - @return iro-cubic-bezier(0.455, 0.03, 0.515, 0.955, $x); +@function ease-in-out-quad($x) { + @return cubic-bezier(0.455, 0.03, 0.515, 0.955, $x); } /// @@ -326,8 +326,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-in-cubic($x) { - @return iro-cubic-bezier(0.55, 0.055, 0.675, 0.19, $x); +@function ease-in-cubic($x) { + @return cubic-bezier(0.55, 0.055, 0.675, 0.19, $x); } /// @@ -337,8 +337,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-out-cubic($x) { - @return iro-cubic-bezier(0.215, 0.61, 0.355, 1, $x); +@function ease-out-cubic($x) { + @return cubic-bezier(0.215, 0.61, 0.355, 1, $x); } /// @@ -348,8 +348,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-in-out-cubic($x) { - @return iro-cubic-bezier(0.645, 0.045, 0.355, 1, $x); +@function ease-in-out-cubic($x) { + @return cubic-bezier(0.645, 0.045, 0.355, 1, $x); } /// @@ -359,8 +359,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-in-quart($x) { - @return iro-cubic-bezier(0.895, 0.03, 0.685, 0.22, $x); +@function ease-in-quart($x) { + @return cubic-bezier(0.895, 0.03, 0.685, 0.22, $x); } /// @@ -370,8 +370,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-out-quart($x) { - @return iro-cubic-bezier(0.165, 0.84, 0.44, 1, $x); +@function ease-out-quart($x) { + @return cubic-bezier(0.165, 0.84, 0.44, 1, $x); } /// @@ -381,8 +381,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-in-out-quart($x) { - @return iro-cubic-bezier(0.77, 0, 0.175, 1, $x); +@function ease-in-out-quart($x) { + @return cubic-bezier(0.77, 0, 0.175, 1, $x); } /// @@ -392,8 +392,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-in-quint($x) { - @return iro-cubic-bezier(0.755, 0.05, 0.855, 0.06, $x); +@function ease-in-quint($x) { + @return cubic-bezier(0.755, 0.05, 0.855, 0.06, $x); } /// @@ -403,8 +403,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-out-quint($x) { - @return iro-cubic-bezier(0.23, 1, 0.32, 1, $x); +@function ease-out-quint($x) { + @return cubic-bezier(0.23, 1, 0.32, 1, $x); } /// @@ -414,8 +414,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-in-out-quint($x) { - @return iro-cubic-bezier(0.86, 0, 0.07, 1, $x); +@function ease-in-out-quint($x) { + @return cubic-bezier(0.86, 0, 0.07, 1, $x); } /// @@ -425,8 +425,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-in-expo($x) { - @return iro-cubic-bezier(0.95, 0.05, 0.795, 0.035, $x); +@function ease-in-expo($x) { + @return cubic-bezier(0.95, 0.05, 0.795, 0.035, $x); } /// @@ -436,8 +436,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-out-expo($x) { - @return iro-cubic-bezier(0.19, 1, 0.22, 1, $x); +@function ease-out-expo($x) { + @return cubic-bezier(0.19, 1, 0.22, 1, $x); } /// @@ -447,8 +447,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-in-out-expo($x) { - @return iro-cubic-bezier(1, 0, 0, 1, $x); +@function ease-in-out-expo($x) { + @return cubic-bezier(1, 0, 0, 1, $x); } /// @@ -458,8 +458,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-in-circ($x) { - @return iro-cubic-bezier(0.6, 0.04, 0.98, 0.335, $x); +@function ease-in-circ($x) { + @return cubic-bezier(0.6, 0.04, 0.98, 0.335, $x); } /// @@ -469,8 +469,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-out-circ($x) { - @return iro-cubic-bezier(0.075, 0.82, 0.165, 1, $x); +@function ease-out-circ($x) { + @return cubic-bezier(0.075, 0.82, 0.165, 1, $x); } /// @@ -480,6 +480,6 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default; /// /// @return {number} /// -@function iro-ease-in-out-circ($x) { - @return iro-cubic-bezier(0.785, 0.135, 0.15, 0.86, $x); +@function ease-in-out-circ($x) { + @return cubic-bezier(0.785, 0.135, 0.15, 0.86, $x); } diff --git a/src/_functions.scss b/src/_functions.scss index 92ee262..d091afa 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -10,6 +10,7 @@ //// @use 'sass:math'; +@use './vars'; /// /// Replace a substring with a new string. @@ -20,11 +21,11 @@ /// /// @return {string} A string with all instances of $search replaced with $replace /// -@function iro-str-replace($string, $search, $replace) { +@function str-replace($string, $search, $replace) { $index: str-index($string, $search); @if $index { - @return str-slice($string, 1, $index - 1) + $replace + iro-str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); } @return $string; @@ -38,11 +39,11 @@ /// /// @return {string} /// -@function iro-str-implode($list, $glue: '') { +@function str-implode($list, $glue: '') { $result: ''; @each $item in $list { - $result: $result + if(length($item) > 1, iro-str-implode($item, $glue), $item); + $result: $result + if(length($item) > 1, str-implode($item, $glue), $item); @if $item != nth($list, length($list)) { $result: $result + $glue; @@ -61,7 +62,7 @@ /// /// @return {list} A slice of the list /// -@function iro-list-slice($list, $start: 1, $end: length($list)) { +@function list-slice($list, $start: 1, $end: length($list)) { $result: (); @for $i from $start through $end { @@ -81,7 +82,7 @@ /// /// @return {list} A list with $value at the beginning, followed by the other items /// -@function iro-list-prepend($list, $value) { +@function list-prepend($list, $value) { $result: append((), $value, list-separator($list)); @if length($list) > 0 { @@ -103,13 +104,13 @@ /// /// @return {list} Sorted list /// -@function iro-quicksort($l, $left: 1, $right: length($l)) { +@function quicksort($l, $left: 1, $right: length($l)) { @if $left < $right { - $pvr: iro-quicksort-partition($l, $left, $right); + $pvr: quicksort-partition($l, $left, $right); $pivot: nth($pvr, 1); $l: nth($pvr, 2); - $l: iro-quicksort($l, $left, $pivot); - $l: iro-quicksort($l, $pivot + 1, $right); + $l: quicksort($l, $left, $pivot); + $l: quicksort($l, $pivot + 1, $right); } @return $l; @@ -118,7 +119,7 @@ /// /// @access private /// -@function iro-quicksort-partition($l, $left, $right) { +@function quicksort-partition($l, $left, $right) { $start: true; $i: $left; $j: $right - 1; @@ -161,7 +162,7 @@ /// /// @return {any} Either the value assigned to $key or $default /// -@function iro-map-get-default($map, $key, $default) { +@function map-get-default($map, $key, $default) { @return if(map-has-key($map, $key), map-get($map, $key), $default); } @@ -174,7 +175,7 @@ /// /// @return {any} Either the value assigned to $key or $default /// -@function iro-map-get-deep($map, $key, $default: null) { +@function map-get-deep($map, $key, $default: null) { $value: null; @if type-of($key) == list { @@ -206,7 +207,7 @@ /// /// @return {map} The result of a recursive merge of $map1 and $map2 /// -@function iro-map-merge-recursive($map1, $map2) { +@function map-merge-recursive($map1, $map2) { @if type-of($map1) != map or type-of($map2) != map { @error 'Two maps expected.'; } @@ -215,7 +216,7 @@ @each $key, $value in $map2 { @if type-of(map-get($result, $key)) == map and type-of($value) == map { - $result: map-merge($result, ($key: iro-map-merge-recursive(map-get($result, $key), $value))); + $result: map-merge($result, ($key: map-merge-recursive(map-get($result, $key), $value))); } @else { $result: map-merge($result, ($key: $value)); } @@ -231,16 +232,16 @@ /// /// @return {string} /// -@function iro-map-print($map) { +@function map-print($map) { $output: ''; @each $key, $value in $map { $value-str: ''; @if type-of($value) == map { - $value-str: '[ ' + iro-map-print($value) + ' ]'; + $value-str: '[ ' + map-print($value) + ' ]'; } @else if type-of($value) == list { - $value-str: '[ ' + iro-str-implode($value, ', ') + ' ]'; + $value-str: '[ ' + str-implode($value, ', ') + ' ]'; } @else if type-of($value) == string { $value-str: '\'' + $value + '\''; } @else { @@ -265,7 +266,7 @@ /// /// @return {bool} `true` if the selector matches at least one suffix, otherwise `false`. /// -@function iro-selector-suffix-match($selector, $suffixes) { +@function selector-suffix-match($selector, $suffixes) { $match: true; @each $sel in $selector { @@ -304,19 +305,19 @@ /// /// @return {number} Unit-less variable /// -@function iro-strip-unit($n) { +@function strip-unit($n) { @return math.div($n, $n * 0 + 1); } /// /// Convert a pixel value to a rem value. /// -/// @param {number} $size - Pixel value to convert -/// @param {number} $base [$iro-root-size] - Reference base font size used for conversion +/// @param {number} $size - Pixel value to convert +/// @param {number} $base [vars.$root-size] - Reference base font size used for conversion /// /// @return {number} Pixel value converted to rem /// -@function iro-px-to-rem($size, $base: $iro-root-size) { +@function px-to-rem($size, $base: vars.$root-size) { @return math.div($size, $base) * 1rem; } @@ -325,6 +326,6 @@ /// /// @content /// -@mixin iro-execute { +@mixin execute { @content; } diff --git a/src/_gradients.scss b/src/_gradients.scss index 657efa2..6575482 100644 --- a/src/_gradients.scss +++ b/src/_gradients.scss @@ -17,6 +17,8 @@ @use 'sass:math'; @use 'sass:meta'; +@use './functions'; +@use './easing'; /// /// Number of intermediate color stops generated to achieve easing. @@ -24,7 +26,7 @@ /// /// @type number /// -$iro-easing-gradient-steps: 10 !default; +$easing-gradient-steps: 10 !default; /// /// Generate a new easing background gradient. @@ -44,7 +46,7 @@ $iro-easing-gradient-steps: 10 !default; /// /// @example scss - A smoother linear gradient /// .background { -/// background-image: iro-easing-gradient( +/// background-image: easing-gradient( /// linear, /// to top, /// #000, @@ -74,7 +76,7 @@ $iro-easing-gradient-steps: 10 !default; /// /// @example scss - A smoother radial gradient /// .background { -/// background-image: iro-easing-gradient( +/// background-image: easing-gradient( /// radial, /// 50em 16em at 0 0, /// #000, @@ -104,7 +106,7 @@ $iro-easing-gradient-steps: 10 !default; /// /// @example scss - A smoother linear gradient with complex color positions /// .background { -/// background-image: iro-easing-gradient( +/// background-image: easing-gradient( /// linear, /// to top, /// #000 20%, @@ -132,9 +134,9 @@ $iro-easing-gradient-steps: 10 !default; /// ); /// } /// -@function iro-easing-gradient($type, $dir, $stop, $stops...) { +@function easing-gradient($type, $dir, $stop, $stops...) { $pos-template: null; - $stops: iro-list-prepend($stops, $stop); + $stops: functions.list-prepend($stops, $stop); $last-positioned-stop: 1; $generated-stops: (); @@ -147,7 +149,7 @@ $iro-easing-gradient-steps: 10 !default; $stop: nth($stops, $i); @if $i == 1 { - @if not iro-easing-gradient-is-color-stop($stop) { + @if not easing-gradient-is-color-stop($stop) { @error 'The first color stop argument must be a color stop.'; } @@ -161,9 +163,9 @@ $iro-easing-gradient-steps: 10 !default; $stops: set-nth($stops, $i, $stop); } - $generated-stops: append($generated-stops, iro-str-implode($stop, ' ')); - } @else if iro-easing-gradient-is-positioned-color-stop($stop) or ($i == length($stops)) { - @if not iro-easing-gradient-is-color-stop($stop) { + $generated-stops: append($generated-stops, functions.str-implode($stop, ' ')); + } @else if easing-gradient-is-positioned-color-stop($stop) or ($i == length($stops)) { + @if not easing-gradient-is-color-stop($stop) { @error 'The last color stop argument must be a color stop.'; } @@ -194,19 +196,19 @@ $iro-easing-gradient-steps: 10 !default; // the positions of all stops list items that are color stops. // - $interpolated-stops: iro-easing-gradient-interpolate-stop-positions( + $interpolated-stops: easing-gradient-interpolate-stop-positions( nth($stops, $last-positioned-stop), - iro-list-slice($stops, $last-positioned-stop + 1, $i - 1), + functions.list-slice($stops, $last-positioned-stop + 1, $i - 1), $stop ); $new-stops: join( - iro-list-slice($stops, 1, $last-positioned-stop), + functions.list-slice($stops, 1, $last-positioned-stop), $interpolated-stops ); $new-stops: join( $new-stops, - iro-list-slice($stops, $i) + functions.list-slice($stops, $i) ); $stops: $new-stops; } @@ -225,13 +227,13 @@ $iro-easing-gradient-steps: 10 !default; $prev-stop: nth($stops, $j - 1); $next-stop: nth($stops, $j); - @if not iro-easing-gradient-is-color-stop($next-stop) { + @if not easing-gradient-is-color-stop($next-stop) { $j: $j + 1; $easing: $next-stop; $next-stop: nth($stops, $j); - @if not iro-easing-gradient-is-color-stop($next-stop) { + @if not easing-gradient-is-color-stop($next-stop) { @error 'There can be at most one interpolation hint between to color stops.'; } } @@ -245,16 +247,16 @@ $iro-easing-gradient-steps: 10 !default; $easing-args: (); @if type-of($easing) == list { - $easing-args: iro-list-slice($easing, 2); + $easing-args: functions.list-slice($easing, 2); $easing: nth($easing, 1); } $generated-stops: join( $generated-stops, - iro-easing-gradient-ease-stops($prev-stop, $next-stop, $easing, $easing-args) + easing-gradient-ease-stops($prev-stop, $next-stop, $easing, $easing-args) ); } @else { - $generated-stops: append($generated-stops, iro-str-implode($next-stop, ' ')); + $generated-stops: append($generated-stops, functions.str-implode($next-stop, ' ')); } $j: $j + 1; @@ -265,30 +267,30 @@ $iro-easing-gradient-steps: 10 !default; } @if $type == 'linear' { - @return linear-gradient($dir, unquote(iro-str-implode($generated-stops, ', '))); + @return linear-gradient($dir, unquote(functions.str-implode($generated-stops, ', '))); } @else if $type == 'radial' { - @return radial-gradient($dir, unquote(iro-str-implode($generated-stops, ', '))); + @return radial-gradient($dir, unquote(functions.str-implode($generated-stops, ', '))); } @else { @error 'Invalid gradient type: #{inspect($type)}.'; } } /// -/// Alias for iro-easing-gradient('linear',...) +/// Alias for easing-gradient('linear',...) /// -/// @see {function} iro-easing-gradient +/// @see {function} easing-gradient /// -@function iro-easing-linear-gradient($dir, $stop, $stops...) { - @return iro-easing-gradient('linear', $dir, $stop, $stops...); +@function easing-linear-gradient($dir, $stop, $stops...) { + @return easing-gradient('linear', $dir, $stop, $stops...); } /// -/// Alias for iro-easing-gradient('radial',...) +/// Alias for easing-gradient('radial',...) /// -/// @see {function} iro-easing-gradient +/// @see {function} easing-gradient /// -@function iro-easing-radial-gradient($dir, $stop, $stops...) { - @return iro-easing-gradient('radial', $dir, $stop, $stops...); +@function easing-radial-gradient($dir, $stop, $stops...) { + @return easing-gradient('radial', $dir, $stop, $stops...); } /// @@ -296,7 +298,7 @@ $iro-easing-gradient-steps: 10 !default; /// /// @access private /// -@function iro-easing-gradient-ease-stops($prev-stop, $next-stop, $easing, $easing-args: ()) { +@function easing-gradient-ease-stops($prev-stop, $next-stop, $easing, $easing-args: ()) { @if $easing == 'steps' { $steps: null; $jump: null; @@ -309,16 +311,11 @@ $iro-easing-gradient-steps: 10 !default; $jump: jump-end; } - @return iro-easing-gradient-steps-stops($prev-stop, $next-stop, $steps, $jump); + @return easing-gradient-steps-stops($prev-stop, $next-stop, $steps, $jump); } @else { - $easing-func: null; - @if function-exists('iro-' + $easing) { - $easing-func: get-function('iro-' + $easing); - } @else { - $easing-func: get-function($easing); - } + $easing-func: get-function($easing, $module: easing); - @return iro-easing-gradient-bezier-stops($prev-stop, $next-stop, $easing-func, $easing-args); + @return easing-gradient-bezier-stops($prev-stop, $next-stop, $easing-func, $easing-args); } } @@ -327,7 +324,7 @@ $iro-easing-gradient-steps: 10 !default; /// /// @access private /// -@function iro-easing-gradient-bezier-stops($prev-stop, $next-stop, $easing-func, $easing-args: ()) { +@function easing-gradient-bezier-stops($prev-stop, $next-stop, $easing-func, $easing-args: ()) { $prev-stop-color: nth($prev-stop, 1); $prev-stop-pos: nth($prev-stop, 2); $next-stop-color: nth($next-stop, 1); @@ -342,8 +339,8 @@ $iro-easing-gradient-steps: 10 !default; $distance: $next-stop-pos - $prev-stop-pos; - @for $i from 1 through $iro-easing-gradient-steps { - $perc: math.div($i, $iro-easing-gradient-steps); + @for $i from 1 through $easing-gradient-steps { + $perc: math.div($i, $easing-gradient-steps); $color: null; $pos: $prev-stop-pos + $perc * $distance; @@ -378,8 +375,8 @@ $iro-easing-gradient-steps: 10 !default; $next-stop-pos: meta.calc-args($next-stop-pos); } - @for $i from 1 through $iro-easing-gradient-steps { - $perc: $i / $iro-easing-gradient-steps; + @for $i from 1 through $easing-gradient-steps { + $perc: math.div($i, $easing-gradient-steps); $color: null; $pos: null; @@ -403,7 +400,7 @@ $iro-easing-gradient-steps: 10 !default; /// /// @access private /// -@function iro-easing-gradient-steps-stops($prev-stop, $next-stop, $steps, $jump: jump-end) { +@function easing-gradient-steps-stops($prev-stop, $next-stop, $steps, $jump: jump-end) { $prev-stop-color: nth($prev-stop, 1); $prev-stop-pos: nth($prev-stop, 2); $next-stop-color: nth($next-stop, 1); @@ -419,18 +416,18 @@ $iro-easing-gradient-steps: 10 !default; $distance: $next-stop-pos - $prev-stop-pos; @for $i from 1 through $steps { - $x1: ($i - 1) / $steps; - $x2: $i / $steps; + $x1: math.div($i - 1, $steps); + $x2: math.div($i, $steps); $y: null; @if $jump == jump-start { - $y: $i / $steps; + $y: math.div($i, $steps); } @else if $jump == jump-end { - $y: ($i - 1) / $steps; + $y: math.div($i - 1, $steps); } @else if $jump == jump-both { - $y: $i / ($steps + 1); + $y: math.div($i, $steps + 1); } @else if $jump == jump-none { - $y: ($i - 1) / ($steps - 1); + $y: math.div($i - 1, $steps - 1); } @else { @error 'Invalid $jump: #{inspect($jump)}'; } @@ -474,18 +471,18 @@ $iro-easing-gradient-steps: 10 !default; } @for $i from 1 through $steps { - $x1: ($i - 1) / $steps; - $x2: $i / $steps; + $x1: math.div($i - 1, $steps); + $x2: math.div($i, $steps); $y: null; @if $jump == jump-start { - $y: $i / $steps; + $y: math.div($i, $steps); } @else if $jump == jump-end { - $y: ($i - 1) / $steps; + $y: math.div($i - 1, $steps); } @else if $jump == jump-both { - $y: $i / ($steps + 1); + $y: math.div($i, $steps + 1); } @else if $jump == jump-none { - $y: ($i - 1) / ($steps - 1); + $y: math.div($i - 1, $steps - 1); } @else { @error 'Invalid $jump: #{inspect($jump)}'; } @@ -515,14 +512,14 @@ $iro-easing-gradient-steps: 10 !default; /// /// @access private /// -@function iro-easing-gradient-interpolate-stop-positions($prev-stop, $stops, $next-stop) { +@function easing-gradient-interpolate-stop-positions($prev-stop, $stops, $next-stop) { $prev-stop-pos: nth($prev-stop, 2); $next-stop-pos: nth($next-stop, 2); $stops-num: 0; @for $i from 1 through length($stops) { $stop: nth($stops, $i); - @if iro-easing-gradient-is-color-stop($stop) { + @if easing-gradient-is-color-stop($stop) { $stops-num: $stops-num + 1; } } @@ -539,8 +536,8 @@ $iro-easing-gradient-steps: 10 !default; @for $i from 1 through length($stops) { $stop: nth($stops, $i); - @if iro-easing-gradient-is-color-stop($stop) { - $pos: $prev-stop-pos + $distance / ($stops-num + 1) * $cur-stop-num; + @if easing-gradient-is-color-stop($stop) { + $pos: $prev-stop-pos + math.div($distance, $stops-num + 1) * $cur-stop-num; $stops: set-nth($stops, $i, $stop $pos); $cur-stop-num: $cur-stop-num + 1; @@ -571,8 +568,8 @@ $iro-easing-gradient-steps: 10 !default; @for $i from 1 through length($stops) { $stop: nth($stops, $i); - @if iro-easing-gradient-is-color-stop($stop) { - $perc: $cur-stop-num / ($stops-num + 1); + @if easing-gradient-is-color-stop($stop) { + $perc: math.div($cur-stop-num, $stops-num + 1); $pos: calc(#{$prev-stop-pos} + (#{$next-stop-pos} - #{$prev-stop-pos}) * #{$perc}); $stops: set-nth($stops, $i, $stop $pos); @@ -589,8 +586,8 @@ $iro-easing-gradient-steps: 10 !default; /// /// @access private /// -@function iro-easing-gradient-is-color-stop($input) { - @return (type-of($input) == color) or iro-easing-gradient-is-positioned-color-stop($input); +@function easing-gradient-is-color-stop($input) { + @return (type-of($input) == color) or easing-gradient-is-positioned-color-stop($input); } /// @@ -598,6 +595,6 @@ $iro-easing-gradient-steps: 10 !default; /// /// @access private /// -@function iro-easing-gradient-is-positioned-color-stop($input) { +@function easing-gradient-is-positioned-color-stop($input) { @return (type-of($input) == list) and (type-of(nth($input, 1)) == color); } diff --git a/src/_harmony.scss b/src/_harmony.scss index 076fe55..839036c 100644 --- a/src/_harmony.scss +++ b/src/_harmony.scss @@ -9,6 +9,8 @@ //// @use 'sass:math'; +@use './functions'; +@use './responsive'; /// /// Adjust a value to a modular scale. @@ -23,7 +25,7 @@ /// /// @return {number} /// -@function iro-harmony-modular-scale($times, $base, $ratio) { +@function modular-scale($times, $base, $ratio) { @if type-of($base) == number { @return $base * math.pow($ratio, $times); } @@ -31,7 +33,7 @@ $main-base: nth($base, 1); $norm-bases: (); - @each $b in iro-list-slice($base, 2) { + @each $b in functions.list-slice($base, 2) { @if $b > $main-base { @while $b > $main-base { $b: math.div($b, $ratio); @@ -47,7 +49,7 @@ } $all-bases: append($norm-bases, $main-base); - $all-bases: iro-quicksort($all-bases); + $all-bases: functions.quicksort($all-bases); $base-index: $times % length($all-bases) + 1; $exp: math.floor(math.div($times, length($all-bases))); @@ -59,11 +61,11 @@ /// Combine responsive properties with modular scales to achieve responsive modular scales. /// /// @param {string | list} $props - Property or list of properties to set -/// @param {number} $times - Number of iterations. See iro-harmony-modular-scale for more information. +/// @param {number} $times - Number of iterations. See modular-scale for more information. /// @param {number} $responsive-map - A map with keys = viewports and values = modular scales /// @param {bool} $fluid [true] - If enabled, property values will smoothly transition from one viewport to the next /// -/// @see {function} iro-harmony-modular-scale +/// @see {function} modular-scale /// /// @example scss - Responsive font sizes between 2 viewports based on modular scales /// $ms: ( @@ -72,25 +74,25 @@ /// ); /// /// h1 { -/// @include iro-responsive-modular-scale(font-size, 3, $ms); +/// @include responsive-modular-scale(font-size, 3, $ms); /// } /// /// h2 { -/// @include iro-responsive-modular-scale(font-size, 2, $ms); +/// @include responsive-modular-scale(font-size, 2, $ms); /// } /// /// h3 { -/// @include iro-responsive-modular-scale(font-size, 1, $ms); +/// @include responsive-modular-scale(font-size, 1, $ms); /// } /// -@mixin iro-responsive-modular-scale($props, $times, $responsive-map, $fluid: true) { +@mixin responsive-modular-scale($props, $times, $responsive-map, $fluid: true) { $new-map: (); @each $key, $value in $responsive-map { $new-map: map-merge($new-map, ( - $key: iro-harmony-modular-scale($times, $value...) + $key: modular-scale($times, $value...) )); } - @include iro-responsive-property($props, $new-map, $fluid); + @include responsive.property($props, $new-map, $fluid); } diff --git a/src/_props.scss b/src/_props.scss index efc3eea..cdb96c2 100644 --- a/src/_props.scss +++ b/src/_props.scss @@ -10,12 +10,15 @@ /// @access public //// +@use './functions'; +@use './contexts'; + /// /// The maximum depth of resolved iro-prop-ref() references. /// /// @type number /// -$iro-props-native-assing-max-depth: 2 !default; +$native-assign-max-depth: 2 !default; /// /// Indicate if property names must start with two dashes (--). @@ -23,14 +26,14 @@ $iro-props-native-assing-max-depth: 2 !default; /// /// @type bool /// -$iro-props-enforce-double-dashes: true !default; +$enforce-double-dashes: true !default; /// /// Default tree name to use if no name is specified. /// /// @type string /// -$iro-props-default-tree: 'default' !default; +$default-tree: 'default' !default; /// /// List of all created property trees. @@ -39,24 +42,24 @@ $iro-props-default-tree: 'default' !default; /// /// @access private /// -$iro-props-trees: (); +$trees: (); /// /// Default context name used for the namespace context. /// /// @type string /// -$iro-props-namespace-context-id: 'namespace' !default; +$namespace-context-id: 'namespace' !default; /// /// Declare a namespace, meaning that all variables declared and accessed. /// /// @param {string} $name - Name of the namespace /// -@mixin iro-props-namespace($name) { +@mixin namespace($name) { $key: '--#{$name}'; - $ns-key: iro-props-get-ns-key(); + $ns-key: get-ns-key(); @if $ns-key != null { $key: append($ns-key, $key); @@ -64,23 +67,23 @@ $iro-props-namespace-context-id: 'namespace' !default; $key: ($key); } - @include iro-context-push($iro-props-namespace-context-id, 'namespace', ( + @include contexts.push($namespace-context-id, 'namespace', ( 'name': $name, 'key': $key )); @content; - @include iro-context-pop($iro-props-namespace-context-id); + @include contexts.pop($namespace-context-id); } /// /// Get the current namespace name. /// -@function iro-props-namespace() { - $noop: iro-context-assert-stack-must-contain($iro-props-namespace-context-id, 'namespace'); +@function namespace() { + $noop: contexts.assert-stack-must-contain($namespace-context-id, 'namespace'); - $data: nth(iro-context-get($iro-props-namespace-context-id, 'namespace'), 2); + $data: nth(contexts.get($namespace-context-id, 'namespace'), 2); $name: map-get($data, 'name'); @return $name; @@ -91,46 +94,46 @@ $iro-props-namespace-context-id: 'namespace' !default; /// will be merged. /// /// @param {map} $map - Map containing properties -/// @param {string} $tree [$iro-props-default-tree] - ID the map is saved as +/// @param {string} $tree [$default-tree] - ID the map is saved as /// @param {bool} $merge [true] - If a tree named $tree already exists and this value is set to true, they will be merged. Otherwise an error will be emitted. /// -@mixin iro-props-store($map, $tree: $iro-props-default-tree, $merge: true, $global: false) { - $noop: iro-props-store($map, $tree, $merge, $global); +@mixin store($map, $tree: $default-tree, $merge: true, $global: false) { + $noop: store($map, $tree, $merge, $global); } /// /// Save a property tree. /// /// @param {map} $map - Map containing properties -/// @param {string} $tree [$iro-props-default-tree] - ID the map is saved as +/// @param {string} $tree [$default-tree] - ID the map is saved as /// @param {bool} $merge [true] - If a tree named $tree already exists and this value is set to true, they will be merged. Otherwise an error will be emitted. /// -@function iro-props-store($map, $tree: $iro-props-default-tree, $merge: true, $global: false) { +@function store($map, $tree: $default-tree, $merge: true, $global: false) { $prop-map: null; - @if $iro-props-enforce-double-dashes { - @if not iro-props-validate($map) { - @error 'Property tree keys must start with two dashes (--). If you don\'t use property trees for native CSS custom properties, set $iro-props-enforce-double-dashes to false.'; + @if $enforce-double-dashes { + @if not validate($map) { + @error 'Property tree keys must start with two dashes (--). If you don\'t use property trees for native CSS custom properties, set $enforce-double-dashes to false.'; } } @if not $global { - $ns-key: iro-props-get-ns-key(); + $ns-key: get-ns-key(); @if $ns-key != null { $map: ($ns-key: $map) } } - @if map-has-key($iro-props-trees, $tree) { + @if map-has-key($trees, $tree) { @if $merge { - $map: iro-map-merge-recursive(map-get($iro-props-trees, $tree), $map); + $map: functions.map-merge-recursive(map-get($trees, $tree), $map); } @else { @error 'Property tree #{inspect($tree)} does already exist.'; } } - $iro-props-trees: map-merge($iro-props-trees, ($tree: $map)) !global; + $trees: map-merge($trees, ($tree: $map)) !global; @return null; } @@ -138,25 +141,25 @@ $iro-props-namespace-context-id: 'namespace' !default; /// /// Delete a property tree. /// -/// @param {string} $tree [$iro-props-default-tree] - ID of the tree to be deleted +/// @param {string} $tree [$default-tree] - ID of the tree to be deleted /// -@mixin iro-props-clear($tree: $iro-props-default-tree) { - $noop: iro-props-clear($tree); +@mixin clear($tree: $default-tree) { + $noop: clear($tree); } /// /// Delete a property tree. /// -/// @param {string} $tree [$iro-props-default-tree] - ID of the tree to be deleted +/// @param {string} $tree [$default-tree] - ID of the tree to be deleted /// /// @throw If the property tree does not exist /// -@function iro-props-clear($tree: $iro-props-default-tree) { - @if not map-has-key($iro-props-trees, $tree) { +@function clear($tree: $default-tree) { + @if not map-has-key($trees, $tree) { @error 'Property tree "#{inspect($tree)}" does not exist.'; } - $iro-props-trees: map-remove($iro-props-trees, $tree) !global; + $trees: map-remove($trees, $tree) !global; @return null; } @@ -165,22 +168,22 @@ $iro-props-namespace-context-id: 'namespace' !default; /// Access a whole property or a subsection (i.e. value) of it. /// /// @param {string | list} $key [null] - Key of the property to read. If this is a list of keys, the map will be traversed in that order. -/// @param {string} $tree [$iro-props-default-tree] - ID of the property tree to use +/// @param {string} $tree [$default-tree] - ID of the property tree to use /// @param {any} $default [null] - Default value to return of no match was found. If null, this function will throw an error instead. /// /// @return {any} Value assigned to property or $default /// /// @throw If there was no match for $key and $default is null /// -@function iro-props-get-static($key: (), $tree: $iro-props-default-tree, $default: null, $global: false) { - @if not map-has-key($iro-props-trees, $tree) { +@function get-static($key: (), $tree: $default-tree, $default: null, $global: false) { + @if not map-has-key($trees, $tree) { @error 'Unknown tree "#{$tree}".'; } - $result: map-get($iro-props-trees, $tree); + $result: map-get($trees, $tree); @if not $global { - $ns-key: iro-props-get-ns-key(); + $ns-key: get-ns-key(); @if $ns-key != null { $orig-key: $key; @@ -205,9 +208,9 @@ $iro-props-namespace-context-id: 'namespace' !default; @if type-of($result) == list and nth($result, 1) == 'iro-prop-ref' { @if length($result) == 2 { - $result: iro-props-get-static($tree: nth($result, 2), $global: true); + $result: get-static($tree: nth($result, 2), $global: true); } @else { - $result: iro-props-get-static(nth($result, 3), nth($result, 2), $global: true); + $result: get-static(nth($result, 3), nth($result, 2), $global: true); } } } @else { @@ -223,9 +226,9 @@ $iro-props-namespace-context-id: 'namespace' !default; @if type-of($result) == list and nth($result, 1) == 'iro-prop-ref' { @if length($result) == 2 { - $result: iro-props-get-static($tree: nth($result, 2), $global: true); + $result: get-static($tree: nth($result, 2), $global: true); } @else { - $result: iro-props-get-static(nth($result, 3), nth($result, 2), $global: true); + $result: get-static(nth($result, 3), nth($result, 2), $global: true); } } } @@ -250,13 +253,13 @@ $iro-props-namespace-context-id: 'namespace' !default; /// /// @return {string} var() /// -@function iro-props-get($key, $tree: $iro-props-default-tree, $default: null, $global: false) { +@function get($key, $tree: $default-tree, $default: null, $global: false) { @if $tree != null { - $noop: iro-props-get-static($key, $tree, $default, $global); + $noop: get-static($key, $tree, $default, $global); } @if not $global { - $ns-key: iro-props-get-ns-key(); + $ns-key: get-ns-key(); @if $ns-key != null { $orig-key: $key; @@ -292,41 +295,41 @@ $iro-props-namespace-context-id: 'namespace' !default; /// /// Generate assignments for native CSS custom properties with the values from the specified tree. /// -/// @param {string} $tree [$iro-props-default-tree] - ID of the property tree to use +/// @param {string} $tree [$default-tree] - ID of the property tree to use /// @param {string} $root [()] - Sub-tree to use for assignment /// -@mixin iro-props-assign($tree: $iro-props-default-tree, $root: (), $skip: (), $prefix: '', $global: false) { - $map: iro-props-get-static($root, $tree); +@mixin assign($tree: $default-tree, $root: (), $skip: (), $prefix: '', $global: false) { + $map: get-static($root, $tree); $map: map-remove($map, $skip...); @if type-of($prefix) == list { - $prefix: iro-str-implode($prefix) + $prefix: functions.str-implode($prefix) } @if not $global { - $ns-key: iro-props-get-ns-key(); + $ns-key: get-ns-key(); @if $ns-key != null { - $prefix: $prefix + iro-str-implode($ns-key); + $prefix: $prefix + functions.str-implode($ns-key); } } - @include iro-props-assign-internal($map, $prefix); + @include assign-internal($map, $prefix); } /// /// @access private /// -@mixin iro-props-assign-internal($map, $prefix: '', $ref-depth: $iro-props-native-assing-max-depth) { +@mixin assign-internal($map, $prefix: '', $ref-depth: $native-assign-max-depth) { @each $key, $value in $map { $rd: $ref-depth; @if type-of($value) == list and length($value) > 0 and nth($value, 1) == 'iro-prop-ref' { @if $ref-depth != 0 { $rd: $rd - 1; @if length($value) == 2 { - $value: iro-props-get-static($tree: nth($value, 2)); + $value: get-static($tree: nth($value, 2)); } @else { - $value: iro-props-get-static(nth($value, 3), nth($value, 2)); + $value: get-static(nth($value, 3), nth($value, 2)); } } @else { $value: null; @@ -335,7 +338,7 @@ $iro-props-namespace-context-id: 'namespace' !default; @if type-of($value) != map and $value != () { #{$prefix + $key}: #{$value}; } @else { - @include iro-props-assign-internal($value, $prefix + $key, $rd); + @include assign-internal($value, $prefix + $key, $rd); } } } @@ -345,14 +348,14 @@ $iro-props-namespace-context-id: 'namespace' !default; /// /// @access private /// -@function iro-props-validate($map) { +@function validate($map) { @each $key, $value in $map { @if str-index($key, '--') != 1 { @return false; } @if type-of($value) == map { - @if not iro-props-validate($value) { + @if not validate($value) { @return false; } } @@ -364,16 +367,16 @@ $iro-props-namespace-context-id: 'namespace' !default; /// /// Generate a reference to another tree. Dereferencing is lazy, so you may specify a tree that hasn't been created yet. /// -/// @param {string} $tree [$iro-props-default-tree] - ID of the property tree to use +/// @param {string} $tree [$default-tree] - ID of the property tree to use /// @param {string | list} $key - Key of the property to read. If this is a list of keys, the map will be traversed in that order. /// /// @return {list} A special list that let's Ignis know that this is a lazy value. /// /// @throw If there was no match for $key and $default is null /// -@function iro-props-ref($tree: $iro-props-default-tree, $key: null, $global: false) { +@function ref($tree: $default-tree, $key: null, $global: false) { @if not $global { - $ns-key: iro-props-get-ns-key(); + $ns-key: get-ns-key(); @if $ns-key != null { $orig-key: $key; @@ -403,8 +406,8 @@ $iro-props-namespace-context-id: 'namespace' !default; /// /// @access private /// -@function iro-props-get-ns-key() { - $ctx: iro-context-get($iro-props-namespace-context-id, 'namespace'); +@function get-ns-key() { + $ctx: contexts.get($namespace-context-id, 'namespace'); @if $ctx == null { @return null; @@ -416,4 +419,4 @@ $iro-props-namespace-context-id: 'namespace' !default; @return $key; } -@include iro-context-stack-create($iro-props-namespace-context-id); +@include contexts.create($namespace-context-id); diff --git a/src/_responsive.scss b/src/_responsive.scss index a3d8445..9520dfc 100644 --- a/src/_responsive.scss +++ b/src/_responsive.scss @@ -17,20 +17,23 @@ /// @access public //// +@use './functions'; +@use './contexts'; + /// /// If true, named viewports will be supported if a compatible $breakpoints map exists. /// This is the case for [include-media](https://include-media.com/), for example. /// /// @type bool /// -$iro-responsive-support-named-viewports: true !default; +$support-named-viewports: true !default; /// /// Context ID used for responsive environment-related mixins. /// /// @type string /// -$iro-responsive-context-id: 'responsive' !default; +$context-id: 'responsive' !default; /// /// Scale a property uniformly between a specific set of target viewports / values. @@ -42,7 +45,7 @@ $iro-responsive-context-id: 'responsive' !default; /// /// @example scss - Responsive font-size between 2 viewports /// .something { -/// @include iro-responsive-property(font-size, ( 320px: 20px, 720px: 30px )); +/// @include property(font-size, ( 320px: 20px, 720px: 30px )); /// } /// /// // Generates: @@ -67,7 +70,7 @@ $iro-responsive-context-id: 'responsive' !default; /// /// @example scss - Responsive font-size between 3 viewports /// .something { -/// @include iro-responsive-property(font-size, ( 320px: 20px, 720px: 30px, 1280px: 40px )); +/// @include property(font-size, ( 320px: 20px, 720px: 30px, 1280px: 40px )); /// } /// /// // Generates: @@ -96,21 +99,21 @@ $iro-responsive-context-id: 'responsive' !default; /// } /// } /// -@mixin iro-responsive-property($props, $responsive-map, $fluid: true, $vertical: false) { - @include iro-responsive-env(map-keys($responsive-map), $fluid, $vertical) { +@mixin property($props, $responsive-map, $fluid: true, $vertical: false) { + @include env(map-keys($responsive-map), $fluid, $vertical) { @if type-of($props) == list { @each $prop in $props { - #{$prop}: iro-responsive-set(map-values($responsive-map)); + #{$prop}: set(map-values($responsive-map)); } } @else { - #{$props}: iro-responsive-set(map-values($responsive-map)); + #{$props}: set(map-values($responsive-map)); } } } /// /// Create a new responsive environment by specifying a set of viewports. -/// Inside a responsive environment, use the iro-responsive-set function to make a property scale automatically. +/// Inside a responsive environment, use the set function to make a property scale automatically. /// /// @param {list} $viewports - Viewports sorted in ascending order /// @param {bool} $fluid [true] - If enabled, property values will smoothly transition from one viewport to the next @@ -118,12 +121,12 @@ $iro-responsive-context-id: 'responsive' !default; /// /// @content /// -/// @see {function} iro-responsive-set +/// @see {function} set /// /// @example scss - Responsive font-size between 2 viewports /// .something { -/// @include iro-responsive-env((320px, 720px)) { -/// font-size: iro-responsive-set(20px, 30px); +/// @include env((320px, 720px)) { +/// font-size: set(20px, 30px); /// } /// } /// @@ -147,7 +150,7 @@ $iro-responsive-context-id: 'responsive' !default; /// } /// } /// -@mixin iro-responsive-env($viewports, $fluid: true, $vertical: false) { +@mixin env($viewports, $fluid: true, $vertical: false) { @if length($viewports) <= 1 { @error '$viewports must contain at least two viewports.'; } @@ -155,7 +158,7 @@ $iro-responsive-context-id: 'responsive' !default; $new-viewports: (); @each $viewport in $viewports { - @if $iro-responsive-support-named-viewports and global-variable-exists(breakpoints) { + @if $support-named-viewports and global-variable-exists(breakpoints) { @if map-has-key($breakpoints, $viewport) { $viewport: map-get($breakpoints, $viewport); } @@ -168,7 +171,7 @@ $iro-responsive-context-id: 'responsive' !default; $new-viewports: append($new-viewports, $viewport); } - $viewports: iro-quicksort($new-viewports); + $viewports: functions.quicksort($new-viewports); @if $new-viewports != $viewports { @error '$viewports was not sorted in ascending order.'; @@ -178,7 +181,7 @@ $iro-responsive-context-id: 'responsive' !default; $first-vp: nth($viewports, 1); $last-vp: nth($viewports, length($viewports)); - @include iro-context-push($iro-responsive-context-id, 'env', ( + @include contexts.push($context-id, 'env', ( 'viewports': $viewports, 'mode': set, 'index': 1, @@ -188,7 +191,7 @@ $iro-responsive-context-id: 'responsive' !default; @content; - @include iro-context-pop($iro-responsive-context-id); + @include contexts.pop($context-id); @for $i from 1 to length($viewports) { $prev-vp: nth($viewports, $i); @@ -196,7 +199,7 @@ $iro-responsive-context-id: 'responsive' !default; @if not $vertical { @media (min-width: $prev-vp) and (max-width: $next-vp) { - @include iro-context-push($iro-responsive-context-id, 'env', ( + @include contexts.push($context-id, 'env', ( 'viewports': $viewports, 'mode': transition, 'index': $i, @@ -206,11 +209,11 @@ $iro-responsive-context-id: 'responsive' !default; @content; - @include iro-context-pop($iro-responsive-context-id); + @include contexts.pop($context-id); } } @else { @media (min-height: $prev-vp) and (max-height: $next-vp) { - @include iro-context-push($iro-responsive-context-id, 'env', ( + @include contexts.push($context-id, 'env', ( 'viewports': $viewports, 'mode': transition, 'index': $i, @@ -220,14 +223,14 @@ $iro-responsive-context-id: 'responsive' !default; @content; - @include iro-context-pop($iro-responsive-context-id); + @include contexts.pop($context-id); } } } @if not $vertical { @media (min-width: $last-vp) { - @include iro-context-push($iro-responsive-context-id, 'env', ( + @include contexts.push($context-id, 'env', ( 'viewports': $viewports, 'mode': set, 'index': length($viewports), @@ -237,11 +240,11 @@ $iro-responsive-context-id: 'responsive' !default; @content; - @include iro-context-pop($iro-responsive-context-id); + @include contexts.pop($context-id); } } @else { @media (min-height: $last-vp) { - @include iro-context-push($iro-responsive-context-id, 'env', ( + @include contexts.push($context-id, 'env', ( 'viewports': $viewports, 'mode': set, 'index': length($viewports), @@ -251,11 +254,11 @@ $iro-responsive-context-id: 'responsive' !default; @content; - @include iro-context-pop($iro-responsive-context-id); + @include contexts.pop($context-id); } } } @else { - @include iro-context-push($iro-responsive-context-id, 'env', ( + @include contexts.push($context-id, 'env', ( 'viewports': $viewports, 'mode': set, 'index': 1, @@ -265,14 +268,14 @@ $iro-responsive-context-id: 'responsive' !default; @content; - @include iro-context-pop($iro-responsive-context-id); + @include contexts.pop($context-id); @for $i from 2 through length($viewports) { $vp: nth($viewports, $i); @if not $vertical { @media (min-width: $vp) { - @include iro-context-push($iro-responsive-context-id, 'env', ( + @include contexts.push($context-id, 'env', ( 'viewports': $viewports, 'mode': set, 'index': $i @@ -280,11 +283,11 @@ $iro-responsive-context-id: 'responsive' !default; @content; - @include iro-context-pop($iro-responsive-context-id); + @include contexts.pop($context-id); } } @else { @media (min-height: $vp) { - @include iro-context-push($iro-responsive-context-id, 'env', ( + @include contexts.push($context-id, 'env', ( 'viewports': $viewports, 'mode': set, 'index': $i @@ -292,7 +295,7 @@ $iro-responsive-context-id: 'responsive' !default; @content; - @include iro-context-pop($iro-responsive-context-id); + @include contexts.pop($context-id); } } } @@ -306,10 +309,10 @@ $iro-responsive-context-id: 'responsive' !default; /// /// @return {number|string} /// -@function iro-responsive-set($values, $without-calc: false) { - $noop: iro-context-assert-stack-must-contain($iro-responsive-context-id, 'env'); +@function set($values, $without-calc: false) { + $noop: contexts.assert-stack-must-contain($context-id, 'env'); - $data: nth(iro-context-get($iro-responsive-context-id, 'env'), 2); + $data: nth(contexts.get($context-id, 'env'), 2); $viewports: map-get($data, 'viewports'); $mode: map-get($data, 'mode'); $fluid: map-get($data, 'fluid'); @@ -328,7 +331,7 @@ $iro-responsive-context-id: 'responsive' !default; $prev-value: nth($values, $index); $next-value: nth($values, $index + 1); - @return iro-responsive-fluid-calc($prev-value, $next-value, $prev-vp, $next-vp, $vertical, $without-calc); + @return fluid-calc($prev-value, $next-value, $prev-vp, $next-vp, $vertical, $without-calc); } } @@ -344,7 +347,7 @@ $iro-responsive-context-id: 'responsive' !default; /// /// @access private /// -@function iro-responsive-fluid-calc($min-value, $max-value, $min-viewport, $max-viewport, $vertical: false, $without-calc: false) { +@function fluid-calc($min-value, $max-value, $min-viewport, $max-viewport, $vertical: false, $without-calc: false) { $value-unit: unit($min-value); $max-value-unit: unit($max-value); $viewport-unit: unit($min-viewport); @@ -368,12 +371,12 @@ $iro-responsive-context-id: 'responsive' !default; } @if ($value-unit == rem) and ($viewport-unit == px) { - $min-viewport: iro-px-to-rem($min-viewport); - $max-viewport: iro-px-to-rem($max-viewport); + $min-viewport: functions.px-to-rem($min-viewport); + $max-viewport: functions.px-to-rem($max-viewport); $viewport-unit: rem; } @else if ($value-unit == px) and ($viewport-unit == rem) { - $min-value: iro-px-to-rem($min-value); - $max-value: iro-px-to-rem($max-value); + $min-value: functions.px-to-rem($min-value); + $max-value: functions.px-to-rem($max-value); $value-unit: rem; } @@ -381,8 +384,8 @@ $iro-responsive-context-id: 'responsive' !default; @error 'This combination of units is not supported.'; } - $value-diff: iro-strip-unit($max-value - $min-value); - $viewport-diff: iro-strip-unit($max-viewport - $min-viewport); + $value-diff: functions.strip-unit($max-value - $min-value); + $viewport-diff: functions.strip-unit($max-viewport - $min-viewport); $calc: ''; @@ -403,4 +406,4 @@ $iro-responsive-context-id: 'responsive' !default; } } -@include iro-context-stack-create($iro-responsive-context-id); +@include contexts.create($context-id); diff --git a/src/_vars.scss b/src/_vars.scss index ce6efda..34785b8 100644 --- a/src/_vars.scss +++ b/src/_vars.scss @@ -13,4 +13,4 @@ /// /// @type number /// -$iro-root-size: 16px !default; +$root-size: 16px !default; diff --git a/src/bem-shortcodes.scss b/src/bem-shortcodes.scss deleted file mode 100644 index 11abeed..0000000 --- a/src/bem-shortcodes.scss +++ /dev/null @@ -1,349 +0,0 @@ -//// -/// Shorter version of the bem-related mixins. Useful to reduce clutter. -/// -/// @group BEM shortcodes -/// -/// @access public -//// - -/// -/// @alias iro-bem-block -/// -@mixin block($name, $type: null) { - @include iro-bem-block($name, $type: null) { - @content; - } -} - -/// -/// @alias block -/// -@mixin b($name, $type: null) { - @include block($name, $type: null) { - @content; - } -} - -/// -/// @alias iro-bem-object -/// -@mixin object($name) { - @include iro-bem-object($name) { - @content; - } -} - -/// -/// @alias object -/// -@mixin ob($name) { - @include object($name) { - @content; - } -} - -/// -/// @alias iro-bem-component -/// -@mixin component($name) { - @include iro-bem-component($name) { - @content; - } -} - -/// -/// @alias component -/// -@mixin cb($name) { - @include component($name) { - @content; - } -} - -/// -/// @alias iro-bem-layout -/// -@mixin layout($name) { - @include iro-bem-layout($name) { - @content; - } -} - -/// -/// @alias layout -/// -@mixin lb($name) { - @include layout($name) { - @content; - } -} - -/// -/// @alias iro-bem-utility -/// -@mixin utility($name) { - @include iro-bem-utility($name) { - @content; - } -} - -/// -/// @alias utility -/// -@mixin ub($name) { - @include utility($name) { - @content; - } -} - -/// -/// @alias iro-bem-scope -/// -@mixin scope($name) { - @include iro-bem-scope($name) { - @content; - } -} - -/// -/// @alias scope -/// -@mixin sb($name) { - @include scope($name) { - @content; - } -} - -/// -/// @alias iro-bem-theme -/// -@mixin theme($name) { - @include iro-bem-theme($name) { - @content; - } -} - -/// -/// @alias theme -/// -@mixin tb($name) { - @include theme($name) { - @content; - } -} - -/// -/// @alias iro-bem-js -/// -@mixin js($name) { - @include iro-bem-js($name) { - @content; - } -} - -/// -/// @alias iro-bem-qa -/// -@mixin qa($name) { - @include iro-bem-qa($name) { - @content; - } -} - -/// -/// @alias iro-bem-hack -/// -@mixin hack($name) { - @include iro-bem-hack($name) { - @content; - } -} - -/// -/// @alias iro-bem-composed-of -/// -@mixin composed-of($block, $blocks...) { - @include iro-bem-composed-of($block, $blocks...) { - @content; - } -} - -/// -/// @alias composed-of -/// -@mixin co($block, $blocks...) { - @include composed-of($block, $blocks...) { - @content; - } -} - -/// -/// @alias iro-bem-element -/// -@mixin element($name, $names...) { - @include iro-bem-element($name, $names...) { - @content; - } -} - -/// -/// @alias element -/// -@mixin e($name, $names...) { - @include element($name, $names...) { - @content; - } -} - -/// -/// @alias iro-bem-related-element -/// -@mixin related-element($sign, $name, $names...) { - @include iro-bem-related-element($sign, $name, $names...) { - @content; - } -} - -/// -/// @alias related-element -/// -@mixin re($sign, $name, $names...) { - @include related-element($sign, $name, $names...) { - @content; - } -} - -/// -/// @alias iro-bem-sibling-element -/// -@mixin sibling-element($name, $names...) { - @include iro-bem-sibling-element($name, $names...) { - @content; - } -} - -/// -/// @alias sibling-element -/// -@mixin se($name, $names...) { - @include sibling-element($name, $names...) { - @content; - } -} - -/// -/// @alias iro-bem-next-element -/// -@mixin next-element($name, $names...) { - @include iro-bem-next-element($name, $names...) { - @content; - } -} - -/// -/// @alias next-element -/// -@mixin ne($name, $names...) { - @include next-element($name, $names...) { - @content; - } -} - -/// -/// @alias iro-bem-next-twin-element -/// -@mixin next-twin-element { - @include iro-bem-next-twin-element { - @content; - } -} - -/// -/// @alias next-twin-element -/// -@mixin te { - @include next-twin-element { - @content; - } -} - -/// -/// @alias iro-bem-modifier -/// -@mixin modifier($name, $names...) { - @include iro-bem-modifier($name, $names...) { - @content; - } -} - -/// -/// @alias modifier -/// -@mixin m($name, $names...) { - @include modifier($name, $names...) { - @content; - } -} - -/// -/// @alias iro-bem-suffix -/// -@mixin suffix($name) { - @include iro-bem-suffix($name) { - @content; - } -} - -/// -/// @alias suffix -/// -@mixin s($name) { - @include suffix($name) { - @content; - } -} - -/// -/// @alias iro-bem-is -/// -@mixin is($state, $states...) { - @include iro-bem-is($state, $states...) { - @content; - } -} - -/// -/// @alias iro-bem-has -/// -@mixin has($state, $states...) { - @include iro-bem-has($state, $states...) { - @content; - } -} - -/// -/// @alias iro-bem-at-theme -/// -@mixin at-theme($name, $names...) { - @include iro-bem-at-theme($name, $names...) { - @content; - } -} - -/// -/// @alias theme -/// -@mixin at($name, $names...) { - @include at-theme($name, $names...) { - @content; - } -} - -/// -/// @alias iro-bem-multi -/// -@mixin multi($first, $others...) { - @include iro-bem-multi($first, $others...) { - @content; - } -} diff --git a/src/bem/_block.scss b/src/bem/_block.scss index d065891..49af04b 100644 --- a/src/bem/_block.scss +++ b/src/bem/_block.scss @@ -4,6 +4,12 @@ /// @access public //// +@use './validators'; +@use './vars'; +@use './functions' as bemfunctions; +@use '../functions'; +@use '../contexts'; + /// /// Generate a new block. /// @@ -20,7 +26,7 @@ /// @throw If the block is preceded by another block, element, modifier or suffix /// /// @example scss - Creating a new block -/// @include iro-bem-block('something', 'component') { +/// @include block('something', 'component') { /// /* some definitions */ /// } /// @@ -30,12 +36,12 @@ /// /* some definitions */ /// } /// -@mixin iro-bem-block($name, $type: null) { - $result: iro-bem-block($name, $type); +@mixin block($name, $type: null) { + $result: block($name, $type); $selector: nth($result, 1); $context: nth($result, 2); - @include iro-bem-validate( + @include validators.validate( 'block', (name: $name, type: $type), $selector, @@ -43,16 +49,16 @@ ); @if $type != null { - $iro-bem-blocks: append($iro-bem-blocks, $name + '_' + $type) !global; + vars.$blocks: append(vars.$blocks, $name + '_' + $type); } @else { - $iro-bem-blocks: append($iro-bem-blocks, $name) !global; + vars.$blocks: append(vars.$blocks, $name); } - @include iro-context-push($iro-bem-context-id, $context...); + @include contexts.push(vars.$context-id, $context...); @at-root #{$selector} { @content; } - @include iro-context-pop($iro-bem-context-id); + @include contexts.pop(vars.$context-id); } /// @@ -60,21 +66,21 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-block +/// @see {mixin} block /// -@function iro-bem-block($name, $type: null) { +@function block($name, $type: null) { // // Possible outcomes: // - ({b,e,m,s}) block // - $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); + $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth); $selector: null; $base-selector: null; @if $type != null { - $namespace: map-get($iro-bem-namespaces, $type); + $namespace: map-get(vars.$namespaces, $type); @if not $namespace { @error '"#{$type}" is not a valid type.'; @@ -85,7 +91,7 @@ @if $type != 'theme' or & { $selector: $base-selector; } @else if not & { - $selector: iro-bem-theme-selector($name); + $selector: bemfunctions.theme-selector($name); } } @else { $base-selector: selector-parse('.' + $name); @@ -107,14 +113,14 @@ } /// -/// Generate a new object block. It's a shorthand for iro-bem-block($name, 'object'). +/// Generate a new object block. It's a shorthand for block($name, 'object'). /// /// @param {string} $name - Object block name /// /// @content /// -@mixin iro-bem-object($name) { - @include iro-bem-block($name, 'object') { +@mixin object($name) { + @include block($name, 'object') { @content; } } @@ -124,21 +130,21 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-object +/// @see {mixin} object /// -@function iro-bem-object($name) { - @return iro-bem-block($name, 'object'); +@function object($name) { + @return block($name, 'object'); } /// -/// Generate a new component block. It's a shorthand for iro-bem-block($name, 'component'). +/// Generate a new component block. It's a shorthand for block($name, 'component'). /// /// @param {string} $name - Component block name /// /// @content /// -@mixin iro-bem-component($name) { - @include iro-bem-block($name, 'component') { +@mixin component($name) { + @include block($name, 'component') { @content; } } @@ -148,21 +154,21 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-component +/// @see {mixin} component /// -@function iro-bem-component($name) { - @return iro-bem-block($name, 'component'); +@function component($name) { + @return block($name, 'component'); } /// -/// Generate a new layout block. It's a shorthand for iro-bem-block($name, 'layout'). +/// Generate a new layout block. It's a shorthand for block($name, 'layout'). /// /// @param {string} $name - Layout block name /// /// @content /// -@mixin iro-bem-layout($name) { - @include iro-bem-block($name, 'layout') { +@mixin layout($name) { + @include block($name, 'layout') { @content; } } @@ -172,21 +178,21 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-layout +/// @see {mixin} layout /// -@function iro-bem-layout($name) { - @return iro-bem-block($name, 'layout'); +@function layout($name) { + @return block($name, 'layout'); } /// -/// Generate a new utility block. It's a shorthand for iro-bem-block($name, 'utility'). +/// Generate a new utility block. It's a shorthand for block($name, 'utility'). /// /// @param {string} $name - Utility block name /// /// @content /// -@mixin iro-bem-utility($name) { - @include iro-bem-block($name, 'utility') { +@mixin utility($name) { + @include block($name, 'utility') { @content; } } @@ -196,21 +202,21 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-utility +/// @see {mixin} utility /// -@function iro-bem-utility($name) { - @return iro-bem-block($name, 'utility'); +@function utility($name) { + @return block($name, 'utility'); } /// -/// Generate a new scope block. It's a shorthand for iro-bem-block($name, 'scope'). +/// Generate a new scope block. It's a shorthand for block($name, 'scope'). /// /// @param {string} $name - Scope block name /// /// @content /// -@mixin iro-bem-scope($name) { - @include iro-bem-block($name, 'scope') { +@mixin scope($name) { + @include block($name, 'scope') { @content; } } @@ -220,21 +226,21 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-scope +/// @see {mixin} scope /// -@function iro-bem-scope($name) { - @return iro-bem-block($name, 'scope'); +@function scope($name) { + @return block($name, 'scope'); } /// -/// Generate a new theme block. It's a shorthand for iro-bem-block($name, 'theme'). +/// Generate a new theme block. It's a shorthand for block($name, 'theme'). /// /// @param {string} $name - Theme block name /// /// @content /// -@mixin iro-bem-theme($name) { - @include iro-bem-block($name, 'theme') { +@mixin theme($name) { + @include block($name, 'theme') { @content; } } @@ -244,21 +250,21 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-theme +/// @see {mixin} theme /// -@function iro-bem-theme($name) { - @return iro-bem-block($name, 'theme'); +@function theme($name) { + @return block($name, 'theme'); } /// -/// Generate a new JS block. It's a shorthand for iro-bem-block($name, 'js'). +/// Generate a new JS block. It's a shorthand for block($name, 'js'). /// /// @param {string} $name - JS block name /// /// @content /// -@mixin iro-bem-js($name) { - @include iro-bem-block($name, 'js') { +@mixin js($name) { + @include block($name, 'js') { @content; } } @@ -268,21 +274,21 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-js +/// @see {mixin} js /// -@function iro-bem-js($name) { - @return iro-bem-block($name, 'js'); +@function js($name) { + @return block($name, 'js'); } /// -/// Generate a new QA block. It's a shorthand for iro-bem-block($name, 'qa'). +/// Generate a new QA block. It's a shorthand for block($name, 'qa'). /// /// @param {string} $name - QA block name /// /// @content /// -@mixin iro-bem-qa($name) { - @include iro-bem-block($name, 'qa') { +@mixin qa($name) { + @include block($name, 'qa') { @content; } } @@ -292,21 +298,21 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-qa +/// @see {mixin} qa /// -@function iro-bem-qa($name) { - @return iro-bem-block($name, 'qa'); +@function qa($name) { + @return block($name, 'qa'); } /// -/// Generate a new hack block. It's a shorthand for iro-bem-block($name, 'hack'). +/// Generate a new hack block. It's a shorthand for block($name, 'hack'). /// /// @param {string} $name - Hack block name /// /// @content /// -@mixin iro-bem-hack($name) { - @include iro-bem-block($name, 'hack') { +@mixin hack($name) { + @include block($name, 'hack') { @content; } } @@ -316,10 +322,10 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-hack +/// @see {mixin} hack /// -@function iro-bem-hack($name) { - @return iro-bem-block($name, 'hack'); +@function hack($name) { + @return block($name, 'hack'); } /// @@ -337,15 +343,15 @@ /// @throw If a block doesn't exist /// /// @example scss - Successful assertion -/// @include iro-bem-component('someBlock') { +/// @include component('someBlock') { /// /* some definitions */ /// } /// -/// @include iro-bem-component('anotherBlock') { +/// @include component('anotherBlock') { /// /* some definitions */ /// -/// @include iro-bem-element('elem') { -/// @include iro-bem-composed-of('someBlock' 'component'); +/// @include elem('elem') { +/// @include composed-of('someBlock' 'component'); /// /// /* some definitions */ /// } @@ -354,37 +360,37 @@ /// // Intended use:
...
/// /// @example scss - Failing assertion -/// @include iro-bem-component('anotherBlock') { +/// @include component('anotherBlock') { /// /* some definitions */ /// -/// @include iro-bem-element('elem') { -/// @include iro-bem-composed-of('someBlock' 'component'); +/// @include elem('elem') { +/// @include composed-of('someBlock' 'component'); /// /// /* some definitions */ /// } /// } /// -/// @include iro-bem-component('someBlock') { +/// @include component('someBlock') { /// /* some definitions */ /// } /// /// // Compilation will fail because c-someBlock is defined after c-anotherBlock__elem /// -@mixin iro-bem-composed-of($block, $blocks...) { - @each $block in iro-list-prepend($blocks, $block) { +@mixin composed-of($block, $blocks...) { + @each $block in functions.list-prepend($blocks, $block) { @if type-of($block) == string { - @if not index($iro-bem-blocks, $block) { + @if not index(vars.$blocks, $block) { @error 'Block "#{$block}" does not exist.'; } } @else { $name: nth($block, 1); $type: nth($block, 2); - @if not map-get($iro-bem-namespaces, $type) { + @if not map-get(vars.$namespaces, $type) { @error '"#{$type}" is not a valid type.'; } - @if not index($iro-bem-blocks, $name + '_' + $type) { + @if not index(vars.$blocks, $name + '_' + $type) { @error 'Block "#{$name}" does not exist.'; } } diff --git a/src/bem/_debug.scss b/src/bem/_debug.scss index e69083c..8ea0f05 100644 --- a/src/bem/_debug.scss +++ b/src/bem/_debug.scss @@ -4,9 +4,11 @@ /// @access public //// -@if $iro-bem-debug { - @each $type, $color in $iro-bem-debug-colors { - $namespace: map-get($iro-bem-namespaces, $type); +@use './vars'; + +@if vars.$debug { + @each $type, $color in vars.$debug-colors { + $namespace: map-get(vars.$namespaces, $type); [class^='#{$namespace}-'], [class*=' #{$namespace}-'] { diff --git a/src/bem/_element.scss b/src/bem/_element.scss index b3d2fee..84e85fb 100644 --- a/src/bem/_element.scss +++ b/src/bem/_element.scss @@ -4,6 +4,11 @@ /// @access public //// +@use './validators'; +@use './vars'; +@use '../functions'; +@use '../contexts'; + /// /// Generate a new BEM element. /// @@ -20,10 +25,10 @@ /// @throw If the element is not preceded by a block, element, modifier or suffix. /// /// @example scss - Element for a block -/// @include iro-bem-component('block') { +/// @include component('block') { /// /* some block definitions */ /// -/// @include iro-bem-element('elem') { +/// @include elem('elem') { /// /* some element definitions */ /// } /// } @@ -39,15 +44,15 @@ /// } /// /// @example scss - Element that is affected by the user hovering the block -/// @include iro-bem-component('block') { +/// @include component('block') { /// /* some block definitions */ /// -/// @include iro-bem-element('elem') { +/// @include elem('elem') { /// background-color: #eee; /// } /// /// &:hover { -/// @include iro-bem-element('elem') { +/// @include elem('elem') { /// background-color: #000; /// } /// } @@ -68,10 +73,10 @@ /// } /// /// @example scss - Multiple elements -/// @include iro-bem-component('block') { +/// @include component('block') { /// /* some block definitions */ /// -/// @include iro-bem-element('elem1', 'elem2') { +/// @include elem('elem1', 'elem2') { /// /* some element definitions */ /// } /// } @@ -86,23 +91,23 @@ /// /* some element definitions */ /// } /// -@mixin iro-bem-element($name, $names...) { - $result: iro-bem-element($name, $names...); +@mixin elem($name, $names...) { + $result: elem($name, $names...); $selector: nth($result, 1); $context: nth($result, 2); - @include iro-bem-validate( + @include validators.validate( 'element', (name: $name, names: $names), $selector, $context ); - @include iro-context-push($iro-bem-context-id, $context...); + @include contexts.push(vars.$context-id, $context...); @at-root #{$selector} { @content; } - @include iro-context-pop($iro-bem-context-id); + @include contexts.pop(vars.$context-id); } /// @@ -110,26 +115,26 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-element +/// @see {mixin} element /// -@function iro-bem-element($name, $names...) { - $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); - $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'block'); +@function elem($name, $names...) { + $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth); + $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block'); - $parent-context: iro-context-get($iro-bem-context-id, 'block' 'element'); + $parent-context: contexts.get(vars.$context-id, 'block' 'element'); $selector: (); $parts-data: (); @if nth($parent-context, 1) == 'element' { - @if $iro-bem-element-nesting-policy == 'disallow' { + @if vars.$element-nesting-policy == 'disallow' { @error 'Element nesting is forbidden.'; } - @if $iro-bem-element-nesting-policy == 'append' { + @if vars.$element-nesting-policy == 'append' { $element-selector: map-get(nth($parent-context, 2), 'selector'); - @if not iro-selector-suffix-match(&, $element-selector) { + @if not functions.selector-suffix-match(&, $element-selector) { @error 'A nested element must be an immediate children of the parent element.'; } @@ -140,7 +145,7 @@ // @each $name in join($name, $names) { - $sel: selector-append(&, $iro-bem-element-separator + $name); + $sel: selector-append(&, vars.$element-separator + $name); $selector: join($selector, $sel, comma); $parts-data: append($parts-data, ( 'name': $name, @@ -149,13 +154,13 @@ } } - $parent-context: iro-context-get($iro-bem-context-id, 'block'); + $parent-context: contexts.get(vars.$context-id, 'block'); } @if length($selector) == 0 { $parent-selector: map-get(nth($parent-context, 2), 'selector'); - @if iro-selector-suffix-match(&, $parent-selector) { + @if functions.selector-suffix-match(&, $parent-selector) { // // Possible outcomes: // - {b}__element @@ -163,7 +168,7 @@ // @each $name in join($name, $names) { - $sel: selector-append(&, $iro-bem-element-separator + $name); + $sel: selector-append(&, vars.$element-separator + $name); $selector: join($selector, $sel, comma); $parts-data: append($parts-data, ( 'name': $name, @@ -178,13 +183,13 @@ // @if nth($parent-context, 1) != 'block' { - $parent-context: iro-context-get($iro-bem-context-id, 'block'); + $parent-context: contexts.get(vars.$context-id, 'block'); } $block-base-selector: map-get(nth($parent-context, 2), 'base-selector'); @each $name in join($name, $names) { - $sel: selector-nest(&, selector-append($block-base-selector, $iro-bem-element-separator + $name)); + $sel: selector-nest(&, selector-append($block-base-selector, vars.$element-separator + $name)); $selector: join($selector, $sel, comma); $parts-data: append($parts-data, ( 'name': $name, @@ -217,11 +222,11 @@ /// @throw If the element is not preceded by an element. /// /// @example scss - A sibling element to a single element -/// @include iro-bem-component('block') { -/// @include iro-bem-element('elem') { +/// @include component('block') { +/// @include elem('elem') { /// /* some element definitions */ /// -/// @include iro-bem-related-element('~', 'sibling') { +/// @include related-elem('~', 'sibling') { /// /* some sibling element definitions */ /// } /// } @@ -238,11 +243,11 @@ /// } /// /// @example scss - A successor element to a single element -/// @include iro-bem-component('block') { -/// @include iro-bem-element('elem') { +/// @include component('block') { +/// @include elem('elem') { /// /* some element definitions */ /// -/// @include iro-bem-related-element('+', 'successor') { +/// @include related-elem('+', 'successor') { /// /* some successor element definitions */ /// } /// } @@ -259,11 +264,11 @@ /// } /// /// @example scss - A successor element to multiple elements -/// @include iro-bem-component('block') { -/// @include iro-bem-element('elem1', 'elem2') { +/// @include component('block') { +/// @include elem('elem1', 'elem2') { /// /* some element definitions */ /// -/// @include iro-bem-related-element('+', 'successor') { +/// @include related-elem('+', 'successor') { /// /* some successor element definitions */ /// } /// } @@ -279,23 +284,23 @@ /// /* some successor element definitions */ /// } /// -@mixin iro-bem-related-element($sign, $name, $names...) { - $result: iro-bem-related-element($sign, $name, $names...); +@mixin related-elem($sign, $name, $names...) { + $result: related-elem($sign, $name, $names...); $selector: nth($result, 1); $context: nth($result, 2); - @include iro-bem-validate( + @include validators.validate( 'related-element', (sign: $sign, name: $name, names: $names), $selector, $context ); - @include iro-context-push($iro-bem-context-id, $context...); + @include contexts.push(vars.$context-id, $context...); @at-root #{$selector} { @content; } - @include iro-context-pop($iro-bem-context-id); + @include contexts.pop(vars.$context-id); } /// @@ -304,9 +309,9 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-related-element +/// @see {mixin} related-element /// -@function iro-bem-related-element($sign, $name, $names...) { +@function related-elem($sign, $name, $names...) { // // Generating this selector is simple: Take the latest block context, use it // to generate the element part, and insert it at the end of the current selector. @@ -315,21 +320,21 @@ // - {e} ({m,s}) ([manual selector]) ~ {e} // - $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); - $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'element'); + $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth); + $noop: contexts.assert-stack-must-contain(vars.$context-id, 'element'); @if $sign != '+' and $sign != '~' { @error 'Invalid relationship sign #{inspect($sign)}.'; } - $block-context: iro-context-get($iro-bem-context-id, 'block'); + $block-context: contexts.get(vars.$context-id, 'block'); $block-base-selector: map-get(nth($block-context, 2), 'base-selector'); $selector: (); $parts-data: (); @each $name in join($name, $names) { - $sel: selector-nest(&, $sign, selector-append($block-base-selector, $iro-bem-element-separator + $name)); + $sel: selector-nest(&, $sign, selector-append($block-base-selector, vars.$element-separator + $name)); $selector: join($selector, $sel, comma); $parts-data: append($parts-data, ( 'name': $name, @@ -348,15 +353,15 @@ /// /// Generate a BEM element that is a sibling of the current element. /// -/// It's a shorthand for iro-bem-related-element('~', $name). +/// It's a shorthand for related-elem('~', $name). /// /// @param {string} $name - First element name /// @param {list} $names - List of more element names /// /// @content /// -@mixin iro-bem-sibling-element($name, $names...) { - @include iro-bem-related-element('~', $name, $names...) { +@mixin sibling-elem($name, $names...) { + @include related-elem('~', $name, $names...) { @content; } } @@ -367,24 +372,24 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-sibling-element +/// @see {mixin} sibling-element /// -@function iro-bem-sibling-element($name, $names...) { - @return iro-bem-related-element('~', $name, $names...); +@function sibling-elem($name, $names...) { + @return related-elem('~', $name, $names...); } /// /// Generate a BEM element that is the successor of the current element. /// -/// It's a shorthand for iro-bem-related-element('+', $name). +/// It's a shorthand for related-elem('+', $name). /// /// @param {string} $name - First element name /// @param {string} $names - More element names /// /// @content /// -@mixin iro-bem-next-element($name, $names...) { - @include iro-bem-related-element('+', $name, $names...) { +@mixin next-elem($name, $names...) { + @include related-elem('+', $name, $names...) { @content; } } @@ -395,28 +400,28 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-next-element +/// @see {mixin} next-element /// -@function iro-bem-next-element($name, $names...) { - @return iro-bem-related-element('+', $name, $names...); +@function next-elem($name, $names...) { + @return related-elem('+', $name, $names...); } /// /// Generate the current BEM element as a successor of itself. /// /// If this is applied to a single element, it behaves exactly the same as -/// iro-bem-related-element('+', name); +/// related-elem('+', name); /// However, if it is applied to multiple elements, each twin element only will influence -/// their other twin, which is not replicable with iro-bem-related-element. +/// their other twin, which is not replicable with related-element. /// /// @content /// /// @example scss - Two twin elements -/// @include iro-bem-component('block') { -/// @include iro-bem-element('elem') { +/// @include component('block') { +/// @include elem('elem') { /// /* some element definitions */ /// -/// @include iro-bem-next-twin-element { +/// @include next-twin-element { /// /* some twin element definitions */ /// } /// } @@ -433,11 +438,11 @@ /// } /// /// @example scss - Multiple twin elements -/// @include iro-bem-component('block') { -/// @include iro-bem-element('elem1', 'elem2') { +/// @include component('block') { +/// @include elem('elem1', 'elem2') { /// /* some element definitions */ /// -/// @include iro-bem-next-twin-element { +/// @include next-twin-element { /// /* some twin element definitions */ /// } /// } @@ -453,23 +458,23 @@ /// /* some twin element definitions */ /// } /// -@mixin iro-bem-related-twin-element($sign) { - $result: iro-bem-related-twin-element($sign); +@mixin related-twin-elem($sign) { + $result: related-twin-elem($sign); $selector: nth($result, 1); $context: nth($result, 2); - @include iro-bem-validate( + @include validators.validate( 'next-twin-element', (), $selector, $context ); - @include iro-context-push($iro-bem-context-id, $context...); + @include contexts.push(vars.$context-id, $context...); @at-root #{$selector} { @content; } - @include iro-context-pop($iro-bem-context-id); + @include contexts.pop(vars.$context-id); } /// @@ -478,16 +483,16 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-next-twin-element +/// @see {mixin} next-twin-element /// -@function iro-bem-related-twin-element($sign) { - $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); - $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'element'); +@function related-twin-elem($sign) { + $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth); + $noop: contexts.assert-stack-must-contain(vars.$context-id, 'element'); - $element-context: iro-context-get($iro-bem-context-id, 'element'); + $element-context: contexts.get(vars.$context-id, 'element'); $element-selector: map-get(nth($element-context, 2), 'selector'); - $block-context: iro-context-get($iro-bem-context-id, 'block'); + $block-context: contexts.get(vars.$context-id, 'block'); $block-base-selector: map-get(nth($block-context, 2), 'base-selector'); $selector: (); @@ -505,7 +510,7 @@ $part-name: map-get($part-data, 'name'); $sel: (); - @if iro-selector-suffix-match(&, $element-selector) { + @if functions.selector-suffix-match(&, $element-selector) { // // This mixin is included in the selector the last element mixin created. // Possible outcomes: @@ -516,7 +521,7 @@ @each $s in & { @each $ps in $part-selector { @if nth($s, -1) == nth($ps, -1) { - $sel-ent: selector-nest($s, $sign, selector-append($block-base-selector, $iro-bem-element-separator + $part-name)); + $sel-ent: selector-nest($s, $sign, selector-append($block-base-selector, vars.$element-separator + $part-name)); $sel: join($sel, $sel-ent, comma); } } @@ -537,7 +542,7 @@ $match: index(' ' ':' ',', str-slice(inspect($s), $char-index, $char-index)) != null; @if not $match { - @each $separator in $iro-bem-element-separator $iro-bem-modifier-separator $iro-bem-suffix-separator { + @each $separator in vars.$element-separator vars.$modifier-separator vars.$suffix-separator { @if str-slice(inspect($s), $char-index, $char-index + str-length($separator) - 1) == $separator { $match: true; } @@ -545,7 +550,7 @@ } @if $match { - $sel-ent: selector-nest($s, '+', selector-append($block-base-selector, $iro-bem-element-separator + $part-name)); + $sel-ent: selector-nest($s, '+', selector-append($block-base-selector, vars.$element-separator + $part-name)); $sel: join($sel, $sel-ent, comma); } } @@ -574,12 +579,12 @@ /// /// Generate the current BEM element as a sibling of itself. /// -/// It's a shorthand for iro-bem-related-twin-element('~'). +/// It's a shorthand for related-twin-elem('~'). /// /// @content /// -@mixin iro-bem-sibling-twin-element { - @include iro-bem-related-twin-element('~') { +@mixin sibling-twin-element { + @include related-twin-elem('~') { @content; } } @@ -590,21 +595,21 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-sibling-twin-element +/// @see {mixin} sibling-twin-element /// -@function iro-bem-sibling-twin-element() { - @return iro-bem-related-twin-element('~'); +@function sibling-twin-elem() { + @return related-twin-elem('~'); } /// /// Generate the current BEM element as a next sibling of itself. /// -/// It's a shorthand for iro-bem-related-twin-element('+', $name). +/// It's a shorthand for related-twin-elem('+', $name). /// /// @content /// -@mixin iro-bem-next-twin-element { - @include iro-bem-related-twin-element('+') { +@mixin next-twin-element { + @include related-twin-elem('+') { @content; } } @@ -615,8 +620,8 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-next-twin-element +/// @see {mixin} next-twin-element /// -@function iro-bem-next-twin-element() { - @return iro-bem-related-twin-element('+'); +@function next-twin-elem() { + @return related-twin-elem('+'); } diff --git a/src/bem/_functions.scss b/src/bem/_functions.scss index 4bb95c4..b7bd5ec 100644 --- a/src/bem/_functions.scss +++ b/src/bem/_functions.scss @@ -4,11 +4,13 @@ /// @access public //// +@use './vars'; + /// /// @access private /// -@function iro-bem-theme-selector($name, $names...) { - $namespace: map-get($iro-bem-namespaces, 'theme'); +@function theme-selector($name, $names...) { + $namespace: map-get(vars.$namespaces, 'theme'); $selector: null; @each $name in join($name, $names) { diff --git a/src/bem/_modifier.scss b/src/bem/_modifier.scss index ac4cb2e..be65e47 100644 --- a/src/bem/_modifier.scss +++ b/src/bem/_modifier.scss @@ -4,6 +4,11 @@ /// @access public //// +@use './validators'; +@use './vars'; +@use '../functions'; +@use '../contexts'; + /// /// Generate a new BEM modifier. /// @@ -25,13 +30,13 @@ /// @throw If the element is not preceded by a block, element, modifier or suffix. /// /// @example scss - Modifier that modifies a block or element -/// @include iro-bem-component('block') { -/// @include iro-bem-modifier('mod') { +/// @include component('block') { +/// @include modifier('mod') { /// background-color: #eee; /// } /// -/// @include iro-bem-element('elem') { -/// @include iro-bem-modifier('mod') { +/// @include elem('elem') { +/// @include modifier('mod') { /// background-color: #222; /// } /// } @@ -48,15 +53,15 @@ /// } /// /// @example scss - Modifier nested in another modifier, not extending -/// @include iro-bem-component('block') { -/// @include iro-bem-modifier('mod') { +/// @include component('block') { +/// @include modifier('mod') { /// background-color: #eee; /// } /// -/// @include iro-bem-modifier('dark') { +/// @include modifier('dark') { /// /* some definitions */ /// -/// @include iro-bem-modifier('mod') { +/// @include modifier('mod') { /// background-color: #222; /// } /// } @@ -77,15 +82,15 @@ /// } /// /// @example scss - Modifier nested in another modifier, extending -/// @include iro-bem-component('block') { -/// @include iro-bem-modifier('mod') { +/// @include component('block') { +/// @include modifier('mod') { /// background-color: #eee; /// } /// -/// @include iro-bem-modifier('dark') { +/// @include modifier('dark') { /// /* some definitions */ /// -/// @include iro-bem-modifier('mod' true) { +/// @include modifier('mod' true) { /// background-color: #222; /// } /// } @@ -105,23 +110,23 @@ /// background-color: #222; /// } /// -@mixin iro-bem-modifier($name, $names...) { - $result: iro-bem-modifier($name, $names...); +@mixin modifier($name, $names...) { + $result: modifier($name, $names...); $selector: nth($result, 1); $context: nth($result, 2); - @include iro-bem-validate( + @include validators.validate( 'modifier', (name: $name, names: $names), $selector, $context ); - @include iro-context-push($iro-bem-context-id, $context...); + @include contexts.push(vars.$context-id, $context...); @at-root #{$selector} { @content; } - @include iro-context-pop($iro-bem-context-id); + @include contexts.pop(vars.$context-id); } /// @@ -129,18 +134,18 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-modifier +/// @see {mixin} modifier /// -@function iro-bem-modifier($name, $names...) { - $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); - $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'block'); +@function modifier($name, $names...) { + $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth); + $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block'); - $parent-context: iro-context-get($iro-bem-context-id, 'block' 'element' 'modifier' 'suffix' 'state'); + $parent-context: contexts.get(vars.$context-id, 'block' 'element' 'modifier' 'suffix' 'state'); $parent-selector: map-get(nth($parent-context, 2), 'selector'); $selector: (); $parts-data: (); - @if not iro-selector-suffix-match(&, $parent-selector) { + @if not functions.selector-suffix-match(&, $parent-selector) { // // The current selector doesn't match the parent selector. // The user manually added a selector between parent context and this modifier call. @@ -155,7 +160,7 @@ @error 'A modifier must be an immediate child of the parent context'; } - @each $name in iro-list-prepend($names, $name) { + @each $name in functions.list-prepend($names, $name) { $extend: false; @if type-of($name) == list { $extend: nth($name, 2); @@ -170,7 +175,7 @@ // - {b,e,m,s}--modifier // - $sel: selector-append(&, $iro-bem-modifier-separator + $name); + $sel: selector-append(&, vars.$modifier-separator + $name); $selector: join($selector, $sel, comma); $parts-data: append($parts-data, ( 'name': $name, @@ -181,7 +186,7 @@ // Parent context is modifier, suffix or state and $extend is false. // - $be-context: iro-context-get($iro-bem-context-id, 'block' 'element'); + $be-context: contexts.get(vars.$context-id, 'block' 'element'); @if nth($be-context, 1) == 'element' { // @@ -201,8 +206,8 @@ $sel: (); @each $s in & { @each $ps in $elem-part-selector { - @if str-index(inspect($s), inspect($ps) + $iro-bem-modifier-separator) or str-index(inspect($s), inspect($ps) + $iro-bem-suffix-separator) { - $sel: join($sel, selector-unify($s, selector-append($ps, $iro-bem-modifier-separator + $name)), comma); + @if str-index(inspect($s), inspect($ps) + vars.$modifier-separator) or str-index(inspect($s), inspect($ps) + vars.$suffix-separator) { + $sel: join($sel, selector-unify($s, selector-append($ps, vars.$modifier-separator + $name)), comma); } } } @@ -227,7 +232,7 @@ $block-base-selector: map-get(nth($be-context, 2), 'base-selector'); - $sel: selector-append(&, $block-base-selector, $iro-bem-modifier-separator + $name); + $sel: selector-append(&, $block-base-selector, vars.$modifier-separator + $name); $selector: join($selector, $sel, comma); $parts-data: append($parts-data, ( 'name': $name, diff --git a/src/bem/_multi.scss b/src/bem/_multi.scss index 9e47ce4..1de5cdc 100644 --- a/src/bem/_multi.scss +++ b/src/bem/_multi.scss @@ -4,6 +4,16 @@ /// @access public //// +@use '../functions'; +@use '../contexts'; +@use './block'; +@use './element'; +@use './modifier'; +@use './state'; +@use './suffix'; +@use './theme'; +@use './vars'; + /// /// Generate multiple entities (BEM or not) at once. /// @@ -15,10 +25,10 @@ /// @content /// /// @example scss - Creating multiple elements, a modifier and an anchor -/// @include iro-bem-object('buttonstrip') { +/// @include object('buttonstrip') { /// display: none; /// -/// @include iro-bem-multi('modifier' 'mod', 'element' 'button' 'separator', '> a') { +/// @include multi('modifier' 'mod', 'elem' 'button' 'separator', '> a') { /// display: block; /// } /// } @@ -43,10 +53,10 @@ /// } /// /// @example scss - Creating multiple elements, a modifier and an anchor - optional colons included -/// @include iro-bem-object('buttonstrip') { +/// @include object('buttonstrip') { /// display: none; /// -/// @include iro-bem-multi('modifier:' 'mod', 'element:' 'button' 'separator', '> a') { +/// @include multi('modifier:' 'mod', 'elem:' 'button' 'separator', '> a') { /// display: block; /// } /// } @@ -70,14 +80,16 @@ /// display: block; /// } /// -@mixin iro-bem-multi($first, $others...) { - @include iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); +@mixin multi($first, $others...) { + @include contexts.assert-stack-count(vars.$context-id, vars.$max-depth); - @each $entity in iro-list-prepend($others, $first) { + @each $entity in functions.list-prepend($others, $first) { $is-manual-selector: false; - @if type-of($entity) == string and not function-exists('iro-bem-' + $entity) { - $is-manual-selector: true; + @if type-of($entity) == string { + @if find-bem-function($entity) == null { + $is-manual-selector: true; + } } @if $is-manual-selector { @@ -91,23 +103,17 @@ @if type-of($entity) == list { $entity-func-id: nth($entity, 1); - $entity: iro-list-slice($entity, 2); + $entity: functions.list-slice($entity, 2); } @else { $entity-func-id: $entity; $entity: (); } @if str-slice($entity-func-id, str-length($entity-func-id)) == ':' { - $entity-func-id: str-slice($entity-func-id, 1, str-length($entity-func-id) - 1); + $entity-func-id: unquote(str-slice($entity-func-id, 1, str-length($entity-func-id) - 1)); } - $sel-func: null; - - @if function-exists('iro-bem-' + $entity-func-id) { - $sel-func: get-function('iro-bem-' + $entity-func-id); - } @else if function-exists($entity-func-id) { - $sel-func: get-function($entity-func-id); - } + $sel-func: find-bem-function($entity-func-id); @if $sel-func == null { @error 'Function "#{inspect($entity-func-id)}" was not found.'; @@ -118,14 +124,24 @@ $entity-result-context: nth($entity-result, 2); @if $entity-result-context != null { - @include iro-context-push($iro-bem-context-id, $entity-result-context...); + @include contexts.push(vars.$context-id, $entity-result-context...); } @at-root #{$entity-result-selector} { @content; } @if $entity-result-context != null { - @include iro-context-pop($iro-bem-context-id); + @include contexts.pop(vars.$context-id); } } } } + +@function find-bem-function($name) { + @each $module in (block element modifier state suffix theme) { + @if function-exists($name, $module) { + @return get-function($name, $module: $module); + } + } + + @return null; +} diff --git a/src/bem/_state.scss b/src/bem/_state.scss index 4a85bbb..2d430bf 100644 --- a/src/bem/_state.scss +++ b/src/bem/_state.scss @@ -4,6 +4,10 @@ /// @access public //// +@use './validators'; +@use './vars'; +@use '../contexts'; + /// /// Create a new state rule. /// @@ -13,10 +17,10 @@ /// @content /// /// @example scss - Using single is-state -/// @include iro-bem-object('menu') { +/// @include object('menu') { /// display: none; /// -/// @include iro-bem-state('is', open') { +/// @include state('is', open') { /// display: block; /// } /// } @@ -32,10 +36,10 @@ /// } /// /// @example scss - Using multiple is-states -/// @include iro-bem-object('menu') { +/// @include object('menu') { /// display: none; /// -/// @include iro-bem-state('is', open', 'visible') { +/// @include state('is', open', 'visible') { /// display: block; /// } /// } @@ -51,23 +55,23 @@ /// display: block; /// } /// -@mixin iro-bem-state($prefix, $state, $states...) { - $result: iro-bem-state($prefix, $state, $states...); +@mixin state($prefix, $state, $states...) { + $result: state($prefix, $state, $states...); $selector: nth($result, 1); $context: nth($result, 2); - @include iro-bem-validate( + @include validators.validate( 'state', (prefix: $prefix, state: $state, states: $states), $selector, $context ); - @include iro-context-push($iro-bem-context-id, $context...); + @include contexts.push(vars.$context-id, $context...); @at-root #{$selector} { @content; } - @include iro-context-pop($iro-bem-context-id); + @include contexts.pop(vars.$context-id); } /// @@ -75,9 +79,9 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-has +/// @see {mixin} has /// -@function iro-bem-state($prefix, $state, $states...) { +@function state($prefix, $state, $states...) { $selector: (); $parts-data: (); @@ -104,10 +108,10 @@ /// /// Create a new has-state modifier. /// -/// It's a shorthand for iro-bem-state('is', $state, $states...). +/// It's a shorthand for state('is', $state, $states...). /// -@mixin iro-bem-is($state, $states...) { - @include iro-bem-state('is', $state, $states...) { +@mixin is($state, $states...) { + @include state('is', $state, $states...) { @content; } } @@ -117,19 +121,19 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-is +/// @see {mixin} is /// -@function iro-bem-is($state, $states...) { - @return iro-bem-state('is', $state, $states...); +@function is($state, $states...) { + @return state('is', $state, $states...); } /// /// Create a new has-state modifier. /// -/// It's a shorthand for iro-bem-state('has', $state, $states...). +/// It's a shorthand for state('has', $state, $states...). /// -@mixin iro-bem-has($state, $states...) { - @include iro-bem-state('has', $state, $states...) { +@mixin has($state, $states...) { + @include state('has', $state, $states...) { @content; } } @@ -139,8 +143,8 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-has +/// @see {mixin} has /// -@function iro-bem-has($state, $states...) { - @return iro-bem-state('has', $state, $states...); +@function has($state, $states...) { + @return state('has', $state, $states...); } diff --git a/src/bem/_suffix.scss b/src/bem/_suffix.scss index b103c9f..2ddb54d 100644 --- a/src/bem/_suffix.scss +++ b/src/bem/_suffix.scss @@ -4,6 +4,11 @@ /// @access public //// +@use './validators'; +@use './vars'; +@use '../functions'; +@use '../contexts'; + /// /// Generate a new suffix. /// @@ -14,17 +19,17 @@ /// @throw If the element is not preceded by a block or modifier. /// /// @example scss - Using a suffix -/// @include iro-bem-utility('hidden') { +/// @include utility('hidden') { /// display: none; /// /// @media (max-width: 320px) { -/// @include iro-bem-suffix('phone') { +/// @include suffix('phone') { /// display: none; /// } /// } /// /// @media (max-width: 768px) { -/// @include iro-bem-suffix('tablet') { +/// @include suffix('tablet') { /// display: none; /// } /// } @@ -48,23 +53,23 @@ /// } /// } /// -@mixin iro-bem-suffix($name) { - $result: iro-bem-suffix($name); +@mixin suffix($name) { + $result: suffix($name); $selector: nth($result, 1); $context: nth($result, 2); - @include iro-bem-validate( + @include validators.validate( 'suffix', (name: $name), $selector, $context ); - @include iro-context-push($iro-bem-context-id, $context...); + @include contexts.push(vars.$context-id, $context...); @at-root #{$selector} { @content; } - @include iro-context-pop($iro-bem-context-id); + @include contexts.pop(vars.$context-id); } /// @@ -72,21 +77,21 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-suffix +/// @see {mixin} suffix /// -@function iro-bem-suffix($name) { +@function suffix($name) { // // Suffixes can be used on block, element and modifier. // - $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); - $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'block'); - $noop: iro-context-assert-stack-must-not-contain($iro-bem-context-id, 'suffix'); + $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth); + $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block'); + $noop: contexts.assert-stack-must-not-contain(vars.$context-id, 'suffix'); - $parent-context: iro-context-get($iro-bem-context-id, 'block' 'element' 'modifier'); + $parent-context: contexts.get(vars.$context-id, 'block' 'element' 'modifier'); $parent-selector: map-get(nth($parent-context, 2), 'selector'); - @if not iro-selector-suffix-match(&, $parent-selector) { + @if not functions.selector-suffix-match(&, $parent-selector) { // // The current selector doesn't match the parent selector. // The user manually added a selector between parent context and this suffix call. @@ -107,7 +112,7 @@ // - {b,e,m}@suffix // - $selector: selector-append(&, $iro-bem-suffix-separator + $name); + $selector: selector-append(&, vars.$suffix-separator + $name); $context: 'suffix', ( 'name': $name, diff --git a/src/bem/_theme.scss b/src/bem/_theme.scss index a49981c..ff1ba49 100644 --- a/src/bem/_theme.scss +++ b/src/bem/_theme.scss @@ -4,6 +4,11 @@ /// @access public //// +@use './functions'; +@use './validators'; +@use './vars'; +@use '../contexts'; + /// /// Declare new rules for the current block for when this theme is active. /// @@ -12,23 +17,23 @@ /// /// @content /// -@mixin iro-bem-at-theme($name, $names...) { - $result: iro-bem-at-theme($name, $names...); +@mixin at-theme($name, $names...) { + $result: at-theme($name, $names...); $selector: nth($result, 1); $context: nth($result, 2); - @include iro-bem-validate( + @include validators.validate( 'at-theme', (name: $name, names: $names), $selector, $context ); - @include iro-context-push($iro-bem-context-id, $context...); + @include contexts.push(vars.$context-id, $context...); @at-root #{$selector} { @content; } - @include iro-context-pop($iro-bem-context-id); + @include contexts.pop(vars.$context-id); } /// @@ -37,19 +42,19 @@ /// /// @return {list} A list with two items: 1. selector, 2. context or `null` /// -/// @see {mixin} iro-bem-at-theme +/// @see {mixin} at-theme /// -@function iro-bem-at-theme($name, $names...) { - $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'block'); +@function at-theme($name, $names...) { + $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block'); - $parent-context: iro-context-get($iro-bem-context-id, 'block'); + $parent-context: contexts.get(vars.$context-id, 'block'); $parent-selector: map-get(nth($parent-context, 2), 'selector'); - //@if not iro-selector-suffix-match(&, $parent-selector) { + //@if not functions.selector-suffix-match(&, $parent-selector) { // @error 'An at-theme rule must be an immediate child of a block'; //} - $selector: iro-bem-theme-selector($name, $names...); + $selector: functions.theme-selector($name, $names...); $selector: selector-nest($selector, &); $context: 'at-theme', ( diff --git a/src/bem/_validators.scss b/src/bem/_validators.scss index eb09a60..042e15e 100644 --- a/src/bem/_validators.scss +++ b/src/bem/_validators.scss @@ -16,6 +16,10 @@ /// @access public //// +@use './vars'; +@use '../functions'; +@use '../contexts'; + /// /// A list of validator functions. /// @@ -23,7 +27,7 @@ /// /// @access private /// -$iro-bem-validators: (); +$validators: (); /// /// Register one or multiple validator functions. @@ -41,19 +45,19 @@ $iro-bem-validators: (); /// @param {string} $func-name - First function name. /// @param {string} $func-names - Other function names. /// -@mixin iro-bem-add-validator($func-name, $func-names...) { - $noop: iro-bem-add-validator($func-name, $func-names...); +@mixin add($func-name, $func-names...) { + $noop: add($func-name, $func-names...); } /// /// Register one or multiple validator functions. Check the respective mixin documentation for more information. /// -/// @see {mixin} iro-bem-add-validator +/// @see {mixin} add /// -@function iro-bem-add-validator($func-name, $func-names...) { +@function add($func-name, $func-names...) { @each $fn-name in join($func-name, $func-names) { $fn: get-function($fn-name); - $iro-bem-validators: map-merge($iro-bem-validators, ($fn-name: $fn)) !global; + $validators: map-merge($validators, ($fn-name: $fn)); } @return null; } @@ -64,25 +68,25 @@ $iro-bem-validators: (); /// @param {string} $func-name - First function name. /// @param {string} $func-names - Other function names. /// -@mixin iro-bem-remove-validator($func-name, $func-names...) { - $noop: iro-bem-remove-validator($func-name, $func-names...); +@mixin remove($func-name, $func-names...) { + $noop: remove($func-name, $func-names...); } /// /// Unregister one or multiple validator functions. Check the respective mixin documentation for more information. /// -/// @see {mixin} iro-bem-remove-validator +/// @see {mixin} remove /// -@function iro-bem-remove-validator($func-name, $func-names...) { - $iro-bem-validators: map-remove($iro-bem-validators, $func-name, $func-names...) !global; +@function remove($func-name, $func-names...) { + $validators: map-remove($validators, $func-name, $func-names...); @return null; } /// /// @access private /// -@mixin iro-bem-validate($type, $args, $selector, $context) { - @each $id, $fn in $iro-bem-validators { +@mixin validate($type, $args, $selector, $context) { + @each $id, $fn in $validators { $result: call($fn, $type, $args, $selector, $context); @if not nth($result, 1) { @error 'A BEM validator rejected this mixin usage due to the following reason: #{nth($result, 2)}'; @@ -100,26 +104,26 @@ $iro-bem-validators: (); /// A validator that makes sure blocks are declared in the right order, determined by the /// namespace used. /// -@function iro-bem-validator--enforce-namespace-order($type, $args, $selector, $context) { - @if not global-variable-exists(iro-bem-namespace-order) { - $iro-bem-namespace-order: map-keys($iro-bem-namespaces) !global; +@function enforce-namespace-order($type, $args, $selector, $context) { + @if not global-variable-exists(namespace-order, vars) { + vars.$namespace-order: map-keys(vars.$namespaces); } - @if not global-variable-exists(iro-bem-cur-namespace-index) { - $iro-bem-cur-namespace-index: 1 !global; + @if not global-variable-exists(cur-namespace-index, vars) { + vars.$cur-namespace-index: 1; } @if $type == 'block' { $block-type: map-get($args, 'type'); @if $block-type != null { - $ns-index: index($iro-bem-namespace-order, $block-type); + $ns-index: index(vars.$namespace-order, $block-type); @if $ns-index != null { - @if $ns-index < $iro-bem-cur-namespace-index { - @return false 'Namespace "#{$block-type}" comes before current namespace #{nth($iro-bem-namespace-order, $iro-bem-cur-namespace-index)}'; + @if $ns-index < vars.$cur-namespace-index { + @return false 'Namespace "#{$block-type}" comes before current namespace #{nth(vars.$namespace-order, vars.$cur-namespace-index)}'; } - $iro-bem-cur-namespace-index: $ns-index !global; + vars.$cur-namespace-index: $ns-index; } } } @@ -130,9 +134,9 @@ $iro-bem-validators: (); /// /// A validator that makes all BEM entities immutable. /// -@function iro-bem-validator--immutable-entities($type, $args, $selector, $context) { - @if not global-variable-exists(iro-bem-generated-selectors) { - $iro-bem-generated-selectors: () !global; +@function immutable-entities($type, $args, $selector, $context) { + @if not global-variable-exists(generated-selectors, vars) { + vars.$generated-selectors: (); } $block-name: null; @@ -143,7 +147,7 @@ $iro-bem-validators: (); $block-name: map-get($args, 'name'); $block-type: map-get($args, 'type'); } @else { - $block-context: iro-context-get($iro-bem-context-id, 'block'); + $block-context: contexts.get(vars.$context-id, 'block'); $block-name: map-get(nth($block-context, 2), 'name'); $block-type: map-get(nth($block-context, 2), 'type'); } @@ -155,21 +159,21 @@ $iro-bem-validators: (); } @if $type == 'block' { - @if map-has-key($iro-bem-generated-selectors, $block-id) { - @return false 'Entity "#{$type}" with arguments [ #{iro-map-print($args)} ] was already defined.'; + @if map-has-key(vars.$generated-selectors, $block-id) { + @return false 'Entity "#{$type}" with arguments [ #{functions.map-print($args)} ] was already defined.'; } - $iro-bem-generated-selectors: map-merge($iro-bem-generated-selectors, ($block-id: ())) !global; + vars.$generated-selectors: map-merge(vars.$generated-selectors, ($block-id: ())); } @else { - $selectors: map-get($iro-bem-generated-selectors, $block-id); + $selectors: map-get(vars.$generated-selectors, $block-id); @if index($selectors, $selector) { - @return false 'Entity "#{$type}" with arguments [ #{iro-map-print($args)} ] was already defined.'; + @return false 'Entity "#{$type}" with arguments [ #{functions.map-print($args)} ] was already defined.'; } $selectors: append($selectors, $selector); - $iro-bem-generated-selectors: map-merge($iro-bem-generated-selectors, ($block-id: $selectors)) !global; + vars.$generated-selectors: map-merge(vars.$generated-selectors, ($block-id: $selectors)); } @return true ''; diff --git a/src/bem/_vars.scss b/src/bem/_vars.scss index 5942d4f..3d0f92a 100644 --- a/src/bem/_vars.scss +++ b/src/bem/_vars.scss @@ -9,21 +9,21 @@ /// /// @type string /// -$iro-bem-element-separator: '__' !default; +$element-separator: '__' !default; /// /// Separating character sequence for modifiers. /// /// @type string /// -$iro-bem-modifier-separator: '--' !default; +$modifier-separator: '--' !default; /// /// Separating character sequence for BEMIT suffixes. /// /// @type string /// -$iro-bem-suffix-separator: '\\@' !default; +$suffix-separator: '\\@' !default; /// /// Prefixes for all BEMIT namespaces. @@ -40,7 +40,7 @@ $iro-bem-suffix-separator: '\\@' !default; /// /// @type map /// -$iro-bem-namespaces: ( +$namespaces: ( object: 'o', component: 'c', layout: 'l', @@ -59,14 +59,14 @@ $iro-bem-namespaces: ( /// /// @access private /// -$iro-bem-blocks: (); +$blocks: (); /// /// Maximum nesting depth of BEM mixins. The large default value means there is no effective limit. /// /// @type number /// -$iro-bem-max-depth: 99 !default; +$max-depth: 99 !default; /// /// Indicates how nested elements should be handled. @@ -78,28 +78,28 @@ $iro-bem-max-depth: 99 !default; /// /// @type string /// -$iro-bem-element-nesting-policy: 'allow' !default; +$element-nesting-policy: 'allow' !default; /// /// Context ID used for all BEM-related mixins. /// /// @type string /// -$iro-bem-context-id: 'bem' !default; +$context-id: 'bem' !default; /// /// Debug mode. /// /// @type bool /// -$iro-bem-debug: false !default; +$debug: false !default; /// /// Colors assigned to namespaces. /// /// @type map /// -$iro-bem-debug-colors: ( +$debug-colors: ( object: #ffa500, component: #00f, layout: #ff0, diff --git a/src/harmony-shortcodes.scss b/src/harmony-shortcodes.scss deleted file mode 100644 index 3307a7e..0000000 --- a/src/harmony-shortcodes.scss +++ /dev/null @@ -1,35 +0,0 @@ -//// -/// Shorter version of the harmony-related functions. Useful to reduce clutter. -/// -/// @group Harmony shortcodes -/// -/// @access public -//// - -/// -/// @alias iro-harmony-modular-scale -/// -@function modular-scale($times, $base, $ratio) { - @include iro-harmony-modular-scale($times, $base, $ratio); -} - -/// -/// @alias modular-scale -/// -@function ms($times, $base, $ratio) { - @include modular-scale($times, $base, $ratio); -} - -/// -/// @alias iro-responsive-modular-scale -/// -@mixin responsive-modular-scale($prop, $times, $responsive-map) { - @include iro-responsive-modular-scale($prop, $times, $responsive-map); -} - -/// -/// @alias responsive-modular-scale -/// -@mixin responsive-ms($prop, $times, $responsive-map) { - @include responsive-modular-scale($prop, $times, $responsive-map); -} diff --git a/src/main.scss b/src/main.scss deleted file mode 100644 index 898b0ae..0000000 --- a/src/main.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import 'functions'; -@import 'vars'; -@import 'contexts'; -@import 'bem'; -@import 'props'; -@import 'harmony'; -@import 'responsive'; -@import 'easing'; -@import 'gradients'; diff --git a/src/prep.scss b/src/prep.scss deleted file mode 100644 index 616165d..0000000 --- a/src/prep.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import 'functions'; -@import 'math'; diff --git a/src/props-shortcodes.scss b/src/props-shortcodes.scss deleted file mode 100644 index 2e5fa1e..0000000 --- a/src/props-shortcodes.scss +++ /dev/null @@ -1,79 +0,0 @@ -//// -/// Shorter version of the prop-related functions. Useful to reduce clutter. -/// -/// @group Props shortcodes -/// -/// @access public -//// - -/// -/// @alias iro-props-namespace -/// -@mixin namespace($name) { - @include iro-props-namespace($name) { - @content; - } -} - -/// -/// @alias iro-props-namespace -/// -@function namespace() { - @return iro-props-namespace(); -} - -/// -/// @alias iro-props-store -/// -@function store($map, $tree: $iro-props-default-tree, $merge: true, $global: false) { - @return iro-props-store($map, $tree, $merge, $global); -} - -/// -/// @alias iro-props-store -/// -@mixin store($map, $tree: $iro-props-default-tree, $merge: true, $global: false) { - @include iro-props-store($map, $tree, $merge, $global); -} - -/// -/// @alias iro-props-clear -/// -@mixin clear($tree: $iro-props-default-tree) { - @include iro-props-clear($tree); -} - -/// -/// @alias iro-props-clear -/// -@function clear($tree: $iro-props-default-tree) { - @return iro-props-clear($tree); -} - -/// -/// @alias iro-props-get-static -/// -@function static($key: (), $tree: $iro-props-default-tree, $default: null, $global: false) { - @return iro-props-get-static($key, $tree, $default, $global); -} - -/// -/// @alias iro-props-get -/// -@function prop($key, $tree: $iro-props-default-tree, $default: null, $global: false) { - @return iro-props-get($key, $tree, $default, $global); -} - -/// -/// @alias iro-props-assign -/// -@mixin assign($tree: $iro-props-default-tree, $root: (), $skip: (), $prefix: '', $global: false) { - @include iro-props-assign($tree, $root, $skip, $prefix, $global); -} - -/// -/// @alias iro-props-ref -/// -@function ref($tree: $iro-props-default-tree, $key: null, $global: false) { - @return iro-props-ref($tree, $key, $global); -} diff --git a/src/responsive-shortcodes.scss b/src/responsive-shortcodes.scss deleted file mode 100644 index e43dfc0..0000000 --- a/src/responsive-shortcodes.scss +++ /dev/null @@ -1,14 +0,0 @@ -//// -/// Shorter version of the responsive-related mixins. Useful to reduce clutter. -/// -/// @group Responsive shortcodes -/// -/// @access public -//// - -/// -/// @alias iro-responsive-property -/// -@mixin responsive($props, $responsive-map, $fluid: true, $vertical: false) { - @include iro-responsive-property($props, $responsive-map, $fluid, $vertical); -} diff --git a/test/_bem.scss b/test/_bem.scss index 30ed131..b7bd6b4 100644 --- a/test/_bem.scss +++ b/test/_bem.scss @@ -1,19 +1,21 @@ -@include describe('BEM') { +@use 'true' as *; + +@include describe('bem') { // // The following unit tests only test the BEM mixins. // Since they are wrappers for the BEM functions, the latter are // automatically covered. // - @import 'bem/iro-bem-block'; - @import 'bem/iro-bem-composed-of'; - @import 'bem/iro-bem-at-theme'; - @import 'bem/iro-bem-element'; - @import 'bem/iro-bem-related-element'; - @import 'bem/iro-bem-next-twin-element'; - @import 'bem/iro-bem-modifier'; - @import 'bem/iro-bem-suffix'; - @import 'bem/iro-bem-state'; - @import 'bem/iro-bem-multi'; + @import 'bem/block'; + @import 'bem/composed-of'; + @import 'bem/at-theme'; + @import 'bem/element'; + @import 'bem/related-element'; + @import 'bem/next-twin-element'; + @import 'bem/modifier'; + @import 'bem/suffix'; + @import 'bem/state'; + @import 'bem/multi'; @import 'bem/examples'; } diff --git a/test/_contexts.scss b/test/_contexts.scss index 1b0e602..510f79b 100644 --- a/test/_contexts.scss +++ b/test/_contexts.scss @@ -1,65 +1,68 @@ -@include describe('Contexts') { +@use 'true' as *; +@use '../src/contexts'; + +@include describe('contexts') { @include it('Creating / deleting context stacks') { - @include assert-equal(iro-context-stack-create('test'), null, 'Check if context stack was created'); - @include assert-equal(iro-context-stack-delete('test'), null, 'Check if context stack was deleted'); + @include assert-equal(contexts.create('test'), null, 'Check if context stack was created'); + @include assert-equal(contexts.delete('test'), null, 'Check if context stack was deleted'); } @include it('Adding / removing contexts') { - @include assert-equal(iro-context-stack-create('test'), null, 'Check if context stack was created'); + @include assert-equal(contexts.create('test'), null, 'Check if context stack was created'); - @include assert-equal(iro-context-push('test', 'ctx', 1234), 'ctx' 1234, 'Check if context 1 was pushed'); - @include assert-equal(iro-context-push('test', 'another', 'text'), 'another' 'text', 'Check if context 2 was pushed'); - @include assert-equal(iro-context-push('test', 'ctx', 56), 'ctx' 56, 'Check if context 3 was pushed'); + @include assert-equal(contexts.push('test', 'ctx', 1234), 'ctx' 1234, 'Check if context 1 was pushed'); + @include assert-equal(contexts.push('test', 'another', 'text'), 'another' 'text', 'Check if context 2 was pushed'); + @include assert-equal(contexts.push('test', 'ctx', 56), 'ctx' 56, 'Check if context 3 was pushed'); - @include assert-equal(iro-context-pop('test'), 'ctx' 56, 'Check if context 3 was popped'); - @include assert-equal(iro-context-pop('test'), 'another' 'text', 'Check if context 2 was popped'); - @include assert-equal(iro-context-pop('test'), 'ctx' 1234, 'Check if context 1 was popped'); + @include assert-equal(contexts.pop('test'), 'ctx' 56, 'Check if context 3 was popped'); + @include assert-equal(contexts.pop('test'), 'another' 'text', 'Check if context 2 was popped'); + @include assert-equal(contexts.pop('test'), 'ctx' 1234, 'Check if context 1 was popped'); - @include assert-equal(iro-context-stack-delete('test'), null, 'Check if context stack was deleted'); + @include assert-equal(contexts.delete('test'), null, 'Check if context stack was deleted'); } @include it('Clearing / counting context stacks') { - @include assert-equal(iro-context-stack-create('test'), null, 'Check if context stack was created'); + @include assert-equal(contexts.create('test'), null, 'Check if context stack was created'); - @include assert-equal(iro-context-push('test', 'ctx', 1234), 'ctx' 1234, 'Check if context 1 was pushed'); - @include assert-equal(iro-context-push('test', 'another', 'text'), 'another' 'text', 'Check if context 2 was pushed'); - @include assert-equal(iro-context-push('test', 'ctx', 56), 'ctx' 56, 'Check if context 3 was pushed'); + @include assert-equal(contexts.push('test', 'ctx', 1234), 'ctx' 1234, 'Check if context 1 was pushed'); + @include assert-equal(contexts.push('test', 'another', 'text'), 'another' 'text', 'Check if context 2 was pushed'); + @include assert-equal(contexts.push('test', 'ctx', 56), 'ctx' 56, 'Check if context 3 was pushed'); - @include assert-equal(iro-context-stack-count('test'), 3, 'Check if context stack contains 3 contexts'); - @include assert-equal(iro-context-pop('test'), 'ctx' 56, 'Check if context 3 was popped'); - @include assert-equal(iro-context-stack-count('test'), 2, 'Check if context stack contains 2 contexts'); - @include assert-equal(iro-context-stack-clear('test'), null, 'Check if context stack was cleared'); - @include assert-equal(iro-context-stack-count('test'), 0, 'Check if context stack contains no contexts'); + @include assert-equal(contexts.count('test'), 3, 'Check if context stack contains 3 contexts'); + @include assert-equal(contexts.pop('test'), 'ctx' 56, 'Check if context 3 was popped'); + @include assert-equal(contexts.count('test'), 2, 'Check if context stack contains 2 contexts'); + @include assert-equal(contexts.clear('test'), null, 'Check if context stack was cleared'); + @include assert-equal(contexts.count('test'), 0, 'Check if context stack contains no contexts'); - @include assert-equal(iro-context-stack-delete('test'), null, 'Check if context stack was deleted'); + @include assert-equal(contexts.delete('test'), null, 'Check if context stack was deleted'); } @include it('Retrieving contexts') { - @include assert-equal(iro-context-stack-create('test'), null, 'Check if context stack was created'); + @include assert-equal(contexts.create('test'), null, 'Check if context stack was created'); - @include assert-equal(iro-context-push('test', 'ctx', 1234), 'ctx' 1234, 'Check if context 1 was pushed'); - @include assert-equal(iro-context-push('test', 'another', 'text'), 'another' 'text', 'Check if context 2 was pushed'); - @include assert-equal(iro-context-push('test', 'ctx', 56), 'ctx' 56, 'Check if context 3 was pushed'); + @include assert-equal(contexts.push('test', 'ctx', 1234), 'ctx' 1234, 'Check if context 1 was pushed'); + @include assert-equal(contexts.push('test', 'another', 'text'), 'another' 'text', 'Check if context 2 was pushed'); + @include assert-equal(contexts.push('test', 'ctx', 56), 'ctx' 56, 'Check if context 3 was pushed'); - @include assert-equal(iro-context-get('test', 1), 'ctx' 56, 'Check if context at position 1 is context 3'); - @include assert-equal(iro-context-get('test', 'ctx'), 'ctx' 56, 'Check if latest context with id "ctx" is context 3'); - @include assert-equal(iro-context-get('test', 2), 'another' 'text', 'Check if latest context with id "another" is context 2'); + @include assert-equal(contexts.get('test', 1), 'ctx' 56, 'Check if context at position 1 is context 3'); + @include assert-equal(contexts.get('test', 'ctx'), 'ctx' 56, 'Check if latest context with id "ctx" is context 3'); + @include assert-equal(contexts.get('test', 2), 'another' 'text', 'Check if latest context with id "another" is context 2'); - @include assert-equal(iro-context-pop('test'), 'ctx' 56, 'Check if context 3 was popped'); + @include assert-equal(contexts.pop('test'), 'ctx' 56, 'Check if context 3 was popped'); - @include assert-equal(iro-context-get('test', 1), 'another' 'text', 'Check if context at position 1 is context 2'); - @include assert-equal(iro-context-get('test', -1), 'ctx' 1234, 'Check if latest context with id "ctx" is context 1'); + @include assert-equal(contexts.get('test', 1), 'another' 'text', 'Check if context at position 1 is context 2'); + @include assert-equal(contexts.get('test', -1), 'ctx' 1234, 'Check if latest context with id "ctx" is context 1'); - @include assert-equal(iro-context-push('test', 'more', 'string'), 'more' 'string', 'Check if context 4 was pushed'); + @include assert-equal(contexts.push('test', 'more', 'string'), 'more' 'string', 'Check if context 4 was pushed'); - @include assert-equal(iro-context-get('test', 1), 'more' 'string', 'Check if context at position 1 is context 4'); - @include assert-equal(iro-context-get('test', 'more'), 'more' 'string', 'Check if latest context with id "more" is context 4'); + @include assert-equal(contexts.get('test', 1), 'more' 'string', 'Check if context at position 1 is context 4'); + @include assert-equal(contexts.get('test', 'more'), 'more' 'string', 'Check if latest context with id "more" is context 4'); - @include assert-equal(iro-context-pop('test'), 'more' 'string', 'Check if context 4 was popped'); - @include assert-equal(iro-context-pop('test'), 'another' 'text', 'Check if context 2 was popped'); + @include assert-equal(contexts.pop('test'), 'more' 'string', 'Check if context 4 was popped'); + @include assert-equal(contexts.pop('test'), 'another' 'text', 'Check if context 2 was popped'); - @include assert-equal(iro-context-get('test', 1), iro-context-get('test', -1), 'Check if first and last context are context 1'); + @include assert-equal(contexts.get('test', 1), contexts.get('test', -1), 'Check if first and last context are context 1'); - @include assert-equal(iro-context-stack-delete('test'), null, 'Check if context stack was deleted'); + @include assert-equal(contexts.delete('test'), null, 'Check if context stack was deleted'); } } diff --git a/test/_functions.scss b/test/_functions.scss index 54e37c5..2430f28 100644 --- a/test/_functions.scss +++ b/test/_functions.scss @@ -1,44 +1,47 @@ -@include describe('Functions') { - @include it('iro-str-replace') { +@use 'true' as *; +@use '../src/functions'; + +@include describe('functions') { + @include it('str-replace') { $str: 'Hello world!'; - @include assert-equal(iro-str-replace($str, 'world', 'neighbor'), 'Hello neighbor!', 'Replace "world" with "neighbor"'); - @include assert-equal(iro-str-replace($str, 'neighbor', 'moon'), 'Hello world!', 'Replace "neighbor" with "moon"'); - @include assert-equal(iro-str-replace($str, 'Hello', 'Bye'), 'Bye world!', 'Replace "Hello" with "Bye"'); + @include assert-equal(functions.str-replace($str, 'world', 'neighbor'), 'Hello neighbor!', 'Replace "world" with "neighbor"'); + @include assert-equal(functions.str-replace($str, 'neighbor', 'moon'), 'Hello world!', 'Replace "neighbor" with "moon"'); + @include assert-equal(functions.str-replace($str, 'Hello', 'Bye'), 'Bye world!', 'Replace "Hello" with "Bye"'); } - @include it('iro-list-slice') { + @include it('list-slice') { $list: 'this' 'is' 'a' 'list'; - @include assert-equal(iro-list-slice($list, 2), 'is' 'a' 'list', 'Discard first item'); - @include assert-equal(iro-list-slice($list, 1, 3), 'this' 'is' 'a', 'Keep first 3 items'); - @include assert-equal(iro-list-slice($list, 2, 3), 'is' 'a', 'Extract list from index 2 to 3'); - @include assert-equal(iro-list-slice($list, -1, -1), join((), 'list'), 'Keep last item'); - @include assert-equal(iro-list-slice($list, -1, 1), 'list' 'this', 'Extract first and last item'); + @include assert-equal(functions.list-slice($list, 2), 'is' 'a' 'list', 'Discard first item'); + @include assert-equal(functions.list-slice($list, 1, 3), 'this' 'is' 'a', 'Keep first 3 items'); + @include assert-equal(functions.list-slice($list, 2, 3), 'is' 'a', 'Extract list from index 2 to 3'); + @include assert-equal(functions.list-slice($list, -1, -1), join((), 'list'), 'Keep last item'); + @include assert-equal(functions.list-slice($list, -1, 1), 'list' 'this', 'Extract first and last item'); } - @include it('iro-list-prepend') { + @include it('list-prepend') { $list: 'this' 'is' 'a' 'list'; - @include assert-equal(iro-list-prepend($list, 'and'), 'and' 'this' 'is' 'a' 'list', 'Prepend "and"'); - @include assert-equal(iro-list-prepend($list, 2), 2 'this' 'is' 'a' 'list', 'Prepend 2'); + @include assert-equal(functions.list-prepend($list, 'and'), 'and' 'this' 'is' 'a' 'list', 'Prepend "and"'); + @include assert-equal(functions.list-prepend($list, 2), 2 'this' 'is' 'a' 'list', 'Prepend 2'); } - @include it('iro-quicksort') { - @include assert-equal(iro-quicksort(1 2 3 4 5), 1 2 3 4 5, 'Already sorted list of 5 items'); - @include assert-equal(iro-quicksort(1 3 2), 1 2 3, 'Random list of 3 items'); - @include assert-equal(iro-quicksort(6 3 7 3 8 1 4), 1 3 3 4 6 7 8, 'Random list of 7 items, one duplicate'); - @include assert-equal(iro-quicksort(1 1 1 1), 1 1 1 1, 'List of 4 identical items'); + @include it('quicksort') { + @include assert-equal(functions.quicksort(1 2 3 4 5), 1 2 3 4 5, 'Already sorted list of 5 items'); + @include assert-equal(functions.quicksort(1 3 2), 1 2 3, 'Random list of 3 items'); + @include assert-equal(functions.quicksort(6 3 7 3 8 1 4), 1 3 3 4 6 7 8, 'Random list of 7 items, one duplicate'); + @include assert-equal(functions.quicksort(1 1 1 1), 1 1 1 1, 'List of 4 identical items'); } - @include it('iro-map-get-default') { + @include it('map-get-default') { $map: ('key': 'value', 'another': 'item'); - @include assert-equal(iro-map-get-default($map, 'another', 0), map-get($map, 'another'), 'Get existing value'); - @include assert-equal(iro-map-get-default($map, 'index', 'nothing'), 'nothing', 'Get missing value'); + @include assert-equal(functions.map-get-default($map, 'another', 0), map-get($map, 'another'), 'Get existing value'); + @include assert-equal(functions.map-get-default($map, 'index', 'nothing'), 'nothing', 'Get missing value'); } - @include it('iro-map-get-deep') { + @include it('map-get-deep') { $map: ( 'key': 'value', 'sub': ( @@ -51,14 +54,14 @@ ) ); - @include assert-equal(iro-map-get-deep($map, 'key'), map-get($map, 'key'), 'Get value in root level'); - @include assert-equal(iro-map-get-deep($map, 'sub' 'item1'), map-get(map-get($map, 'sub'), 'item1'), 'Get value in first level'); - @include assert-equal(iro-map-get-deep($map, 'sub' 'item2'), map-get(map-get($map, 'sub'), 'item2'), 'Get value in first level'); - @include assert-equal(iro-map-get-deep($map, 'sub' 'subsub' 'item1'), map-get(map-get(map-get($map, 'sub'), 'subsub'), 'item1'), 'Get value in second level'); - @include assert-equal(iro-map-get-deep($map, 'sub' 'subsub' 'item2'), map-get(map-get(map-get($map, 'sub'), 'subsub'), 'item2'), 'Get value in second level'); + @include assert-equal(functions.map-get-deep($map, 'key'), map-get($map, 'key'), 'Get value in root level'); + @include assert-equal(functions.map-get-deep($map, 'sub' 'item1'), map-get(map-get($map, 'sub'), 'item1'), 'Get value in first level'); + @include assert-equal(functions.map-get-deep($map, 'sub' 'item2'), map-get(map-get($map, 'sub'), 'item2'), 'Get value in first level'); + @include assert-equal(functions.map-get-deep($map, 'sub' 'subsub' 'item1'), map-get(map-get(map-get($map, 'sub'), 'subsub'), 'item1'), 'Get value in second level'); + @include assert-equal(functions.map-get-deep($map, 'sub' 'subsub' 'item2'), map-get(map-get(map-get($map, 'sub'), 'subsub'), 'item2'), 'Get value in second level'); } - @include it('iro-map-merge-recursive') { + @include it('map-merge-recursive') { $map1: ( 'key': 'value', 'sub': ( @@ -84,20 +87,20 @@ ) ); - @include assert-equal(iro-map-merge-recursive($map1, $map2), $expected); + @include assert-equal(functions.map-merge-recursive($map1, $map2), $expected); } - @include it('iro-strip-unit') { - @include assert-true(unitless(iro-strip-unit(1em)), 'Remove unit from 1em'); - @include assert-true(unitless(iro-strip-unit(2rem)), 'Remove unit from 2rem'); - @include assert-true(unitless(iro-strip-unit(3px)), 'Remove unit from 3px'); - @include assert-true(unitless(iro-strip-unit(4)), 'Remove unit from 4'); - @include assert-true(unitless(iro-strip-unit(5pt)), 'Remove unit from 5pt'); + @include it('strip-unit') { + @include assert-true(unitless(functions.strip-unit(1em)), 'Remove unit from 1em'); + @include assert-true(unitless(functions.strip-unit(2rem)), 'Remove unit from 2rem'); + @include assert-true(unitless(functions.strip-unit(3px)), 'Remove unit from 3px'); + @include assert-true(unitless(functions.strip-unit(4)), 'Remove unit from 4'); + @include assert-true(unitless(functions.strip-unit(5pt)), 'Remove unit from 5pt'); } - @include it('iro-px-to-rem') { - @include assert-equal(iro-px-to-rem(16px, 16px), 1rem, 'Convert 16px'); - @include assert-equal(iro-px-to-rem(32px, 16px), 2rem, 'Convert 16px'); - @include assert-equal(iro-px-to-rem(8px, 16px), 0.5rem, 'Convert 16px'); + @include it('px-to-rem') { + @include assert-equal(functions.px-to-rem(16px, 16px), 1rem, 'Convert 16px'); + @include assert-equal(functions.px-to-rem(32px, 16px), 2rem, 'Convert 16px'); + @include assert-equal(functions.px-to-rem(8px, 16px), 0.5rem, 'Convert 16px'); } } diff --git a/test/_gradients.scss b/test/_gradients.scss index c1145aa..c11439c 100644 --- a/test/_gradients.scss +++ b/test/_gradients.scss @@ -1,8 +1,12 @@ // sass-lint:disable no-color-literals zero-unit -@include describe('Gradients') { - @include it('iro-easing-gradient') { - $gradient1: iro-easing-gradient( +@use 'true' as *; +@use '../src/easing'; +@use '../src/gradients'; + +@include describe('gradients') { + @include it('easing-gradient') { + $gradient1: gradients.easing-gradient( linear, to right, #000, @@ -13,9 +17,9 @@ $expected1: linear-gradient( to right, #000 0, - mix(transparent, #000, iro-ease-in-quad(0.25) * 100%) 25%, - mix(transparent, #000, iro-ease-in-quad(0.5) * 100%) 50%, - mix(transparent, #000, iro-ease-in-quad(0.75) * 100%) 75%, + mix(transparent, #000, easing.ease-in-quad(0.25) * 100%) 25%, + mix(transparent, #000, easing.ease-in-quad(0.5) * 100%) 50%, + mix(transparent, #000, easing.ease-in-quad(0.75) * 100%) 75%, transparent 100% ); @@ -23,7 +27,7 @@ // --------------------------------------------------------------------------- - $gradient2: iro-easing-gradient( + $gradient2: gradients.easing-gradient( radial, 1em 2em at 50% 60%, #000, @@ -34,9 +38,9 @@ $expected2: radial-gradient( 1em 2em at 50% 60%, #000 0, - mix(transparent, #000, iro-ease-out-cubic(0.25) * 100%) 25%, - mix(transparent, #000, iro-ease-out-cubic(0.5) * 100%) 50%, - mix(transparent, #000, iro-ease-out-cubic(0.75) * 100%) 75%, + mix(transparent, #000, easing.ease-out-cubic(0.25) * 100%) 25%, + mix(transparent, #000, easing.ease-out-cubic(0.5) * 100%) 50%, + mix(transparent, #000, easing.ease-out-cubic(0.75) * 100%) 75%, transparent 100% ); @@ -44,7 +48,7 @@ // --------------------------------------------------------------------------- - $gradient3: iro-easing-gradient( + $gradient3: gradients.easing-gradient( linear, to right, #000 2em, @@ -55,9 +59,9 @@ $expected3: linear-gradient( to right, #000 2em, - mix(transparent, #000, iro-ease-in-quad(0.25) * 100%) 4em, - mix(transparent, #000, iro-ease-in-quad(0.5) * 100%) 6em, - mix(transparent, #000, iro-ease-in-quad(0.75) * 100%) 8em, + mix(transparent, #000, easing.ease-in-quad(0.25) * 100%) 4em, + mix(transparent, #000, easing.ease-in-quad(0.5) * 100%) 6em, + mix(transparent, #000, easing.ease-in-quad(0.75) * 100%) 8em, transparent 10em ); @@ -65,7 +69,7 @@ // --------------------------------------------------------------------------- - $gradient4: iro-easing-gradient( + $gradient4: gradients.easing-gradient( linear, to right, #000 20%, @@ -76,9 +80,9 @@ $expected4: linear-gradient( to right, #000 20%, - mix(transparent, #000, iro-ease-in-quad(0.25) * 100%) calc(20% + (20% + 10em - 20%) * 0.25), - mix(transparent, #000, iro-ease-in-quad(0.5) * 100%) calc(20% + (20% + 10em - 20%) * 0.5), - mix(transparent, #000, iro-ease-in-quad(0.75) * 100%) calc(20% + (20% + 10em - 20%) * 0.75), + mix(transparent, #000, easing.ease-in-quad(0.25) * 100%) calc(20% + (20% + 10em - 20%) * 0.25), + mix(transparent, #000, easing.ease-in-quad(0.5) * 100%) calc(20% + (20% + 10em - 20%) * 0.5), + mix(transparent, #000, easing.ease-in-quad(0.75) * 100%) calc(20% + (20% + 10em - 20%) * 0.75), transparent calc(20% + 10em) ); @@ -86,7 +90,7 @@ // --------------------------------------------------------------------------- - $gradient5: iro-easing-gradient( + $gradient5: gradients.easing-gradient( linear, to right, #000 2em, @@ -99,9 +103,9 @@ to right, #000 2em, #f00 7em, - mix(transparent, #f00, iro-ease-in-quad(0.25) * 100%) 7em + 3em * 0.25, - mix(transparent, #f00, iro-ease-in-quad(0.5) * 100%) 7em + 3em * 0.5, - mix(transparent, #f00, iro-ease-in-quad(0.75) * 100%) 7em + 3em * 0.75, + mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 7em + 3em * 0.25, + mix(transparent, #f00, easing.ease-in-quad(0.5) * 100%) 7em + 3em * 0.5, + mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 7em + 3em * 0.75, transparent 10em ); @@ -109,7 +113,7 @@ // --------------------------------------------------------------------------- - $gradient6: iro-easing-gradient( + $gradient6: gradients.easing-gradient( linear, to right, #000 2em, @@ -122,13 +126,13 @@ $expected6: linear-gradient( to right, #000 2em, - mix(#f00, #000, iro-ease-in-quad(0.25) * 100%) 2em + 5em * 0.25, - mix(#f00, #000, iro-ease-in-quad(0.5) * 100%) 2em + 5em * 0.5, - mix(#f00, #000, iro-ease-in-quad(0.75) * 100%) 2em + 5em * 0.75, + mix(#f00, #000, easing.ease-in-quad(0.25) * 100%) 2em + 5em * 0.25, + mix(#f00, #000, easing.ease-in-quad(0.5) * 100%) 2em + 5em * 0.5, + mix(#f00, #000, easing.ease-in-quad(0.75) * 100%) 2em + 5em * 0.75, #f00 7em, - mix(transparent, #f00, iro-ease-in-quad(0.25) * 100%) 7em + 3em * 0.25, - mix(transparent, #f00, iro-ease-in-quad(0.5) * 100%) 7em + 3em * 0.5, - mix(transparent, #f00, iro-ease-in-quad(0.75) * 100%) 7em + 3em * 0.75, + mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 7em + 3em * 0.25, + mix(transparent, #f00, easing.ease-in-quad(0.5) * 100%) 7em + 3em * 0.5, + mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 7em + 3em * 0.75, transparent 10em ); @@ -136,7 +140,7 @@ // --------------------------------------------------------------------------- - $gradient7: iro-easing-gradient( + $gradient7: gradients.easing-gradient( linear, to right, #000 2em, @@ -149,13 +153,13 @@ $expected7: linear-gradient( to right, #000 2em, - mix(#f00, #000, iro-ease-in-quad(0.25) * 100%) 2em + 4em * 0.25, - mix(#f00, #000, iro-ease-in-quad(0.5) * 100%) 2em + 4em * 0.5, - mix(#f00, #000, iro-ease-in-quad(0.75) * 100%) 2em + 4em * 0.75, + mix(#f00, #000, easing.ease-in-quad(0.25) * 100%) 2em + 4em * 0.25, + mix(#f00, #000, easing.ease-in-quad(0.5) * 100%) 2em + 4em * 0.5, + mix(#f00, #000, easing.ease-in-quad(0.75) * 100%) 2em + 4em * 0.75, #f00 6em, - mix(transparent, #f00, iro-ease-in-quad(0.25) * 100%) 6em + 4em * 0.25, - mix(transparent, #f00, iro-ease-in-quad(0.5) * 100%) 6em + 4em * 0.5, - mix(transparent, #f00, iro-ease-in-quad(0.75) * 100%) 6em + 4em * 0.75, + mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 6em + 4em * 0.25, + mix(transparent, #f00, easing.ease-in-quad(0.5) * 100%) 6em + 4em * 0.5, + mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 6em + 4em * 0.75, transparent 10em ); @@ -163,7 +167,7 @@ // --------------------------------------------------------------------------- - $gradient8: iro-easing-gradient( + $gradient8: gradients.easing-gradient( linear, to right, #000, @@ -176,13 +180,13 @@ $expected8: linear-gradient( to right, #000 0, - mix(#f00, #000, iro-ease-in-quad(0.25) * 100%) 50% * 0.25, - mix(#f00, #000, iro-ease-in-quad(0.5) * 100%) 50% * 0.5, - mix(#f00, #000, iro-ease-in-quad(0.75) * 100%) 50% * 0.75, + mix(#f00, #000, easing.ease-in-quad(0.25) * 100%) 50% * 0.25, + mix(#f00, #000, easing.ease-in-quad(0.5) * 100%) 50% * 0.5, + mix(#f00, #000, easing.ease-in-quad(0.75) * 100%) 50% * 0.75, #f00 50%, - mix(transparent, #f00, iro-ease-in-quad(0.25) * 100%) 50% + 50% * 0.25, - mix(transparent, #f00, iro-ease-in-quad(0.5) * 100%) 50% + 50% * 0.5, - mix(transparent, #f00, iro-ease-in-quad(0.75) * 100%) 50% + 50% * 0.75, + mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 50% + 50% * 0.25, + mix(transparent, #f00, easing.ease-in-quad(0.5) * 100%) 50% + 50% * 0.5, + mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 50% + 50% * 0.75, transparent 100% ); @@ -190,7 +194,7 @@ // --------------------------------------------------------------------------- - $gradient9: iro-easing-gradient( + $gradient9: gradients.easing-gradient( linear, to right, #000, @@ -203,13 +207,13 @@ $expected9: linear-gradient( to right, #000 0, - mix(#f00, #000, iro-ease-in-quad(0.25) * 100%) 10em * 0.25, - mix(#f00, #000, iro-ease-in-quad(0.5) * 100%) 10em * 0.5, - mix(#f00, #000, iro-ease-in-quad(0.75) * 100%) 10em * 0.75, + mix(#f00, #000, easing.ease-in-quad(0.25) * 100%) 10em * 0.25, + mix(#f00, #000, easing.ease-in-quad(0.5) * 100%) 10em * 0.5, + mix(#f00, #000, easing.ease-in-quad(0.75) * 100%) 10em * 0.75, #f00 10em, - mix(transparent, #f00, iro-ease-in-quad(0.25) * 100%) 10em + 10em * 0.25, - mix(transparent, #f00, iro-ease-in-quad(0.5) * 100%) 10em + 10em * 0.5, - mix(transparent, #f00, iro-ease-in-quad(0.75) * 100%) 10em + 10em * 0.75, + mix(transparent, #f00, easing.ease-in-quad(0.25) * 100%) 10em + 10em * 0.25, + mix(transparent, #f00, easing.ease-in-quad(0.5) * 100%) 10em + 10em * 0.5, + mix(transparent, #f00, easing.ease-in-quad(0.75) * 100%) 10em + 10em * 0.75, transparent 20em ); @@ -217,7 +221,7 @@ // --------------------------------------------------------------------------- - $gradient10: iro-easing-gradient( + $gradient10: gradients.easing-gradient( linear, to right, #000, @@ -228,9 +232,9 @@ $expected10: linear-gradient( to right, #000 0, - mix(transparent, #000, iro-cubic-bezier(0.47, 0, 0.745, 0.715, 0.25) * 100%) 25%, - mix(transparent, #000, iro-cubic-bezier(0.47, 0, 0.745, 0.715, 0.5) * 100%) 50%, - mix(transparent, #000, iro-cubic-bezier(0.47, 0, 0.745, 0.715, 0.75) * 100%) 75%, + mix(transparent, #000, easing.cubic-bezier(0.47, 0, 0.745, 0.715, 0.25) * 100%) 25%, + mix(transparent, #000, easing.cubic-bezier(0.47, 0, 0.745, 0.715, 0.5) * 100%) 50%, + mix(transparent, #000, easing.cubic-bezier(0.47, 0, 0.745, 0.715, 0.75) * 100%) 75%, transparent 100% ); @@ -238,7 +242,7 @@ // --------------------------------------------------------------------------- - $gradient11: iro-easing-gradient( + $gradient11: gradients.easing-gradient( linear, to right, #000, diff --git a/test/_harmony.scss b/test/_harmony.scss index 7945be1..c7d309c 100644 --- a/test/_harmony.scss +++ b/test/_harmony.scss @@ -1,46 +1,49 @@ +@use 'true' as *; @use 'sass:math'; +@use '../src/functions'; +@use '../src/harmony'; @function _limit-decimals($n) { @return math.div(math.floor($n * 1000), 1000); } -@include describe('Harmony') { - @include it('iro-harmony-modular-scale') { - @include assert-equal(_limit-decimals(iro-harmony-modular-scale(0, 1em, 1.1)), 1em, 'Zero iterations, 1em base, 1.1 scale'); - @include assert-equal(_limit-decimals(iro-harmony-modular-scale(1, 1em, 1.1)), 1.1em, '1 iteration, 1em base, 1.1 scale'); - @include assert-equal(_limit-decimals(iro-harmony-modular-scale(2, 2px, 1.2)), 2.88px, '2 iterations, 2px base, 1.2 scale'); - @include assert-equal(_limit-decimals(iro-harmony-modular-scale(-1, 2rem, 2)), 1rem, '-1 iteration, 2rem base, 2 scale'); - @include assert-equal(_limit-decimals(iro-harmony-modular-scale(-2, 2rem, 2)), 0.5rem, '-2 iterations, 2rem base, 2 scale'); - - @include assert-equal(_limit-decimals(iro-harmony-modular-scale(0, 1em 2em, 1.1)), 1em, 'Zero iterations, 1em 2em base, 1.1 scale'); - @include assert-equal(_limit-decimals(iro-harmony-modular-scale(1, 1em 2em, 1.1)), 1.026em, '1 iteration, 1em 2em base, 1.1 scale'); - @include assert-equal(_limit-decimals(iro-harmony-modular-scale(2, 1em 2em, 1.1)), 1.1em, '2 iterations, 1em 2em base, 1.1 scale'); - @include assert-equal(_limit-decimals(iro-harmony-modular-scale(-1, 1em 1.5em, 1.2)), 0.868em, '-1 iteration, 1em 2em base, 1.1 scale'); - @include assert-equal(_limit-decimals(iro-harmony-modular-scale(-2, 1em 1.5em, 1.2)), 0.833em, '-2 iterations, 1em 2em base, 1.1 scale'); +@include describe('harmony') { + @include it('modular-scale') { + @include assert-equal(_limit-decimals(harmony.modular-scale(0, 1em, 1.1)), 1em, 'Zero iterations, 1em base, 1.1 scale'); + @include assert-equal(_limit-decimals(harmony.modular-scale(1, 1em, 1.1)), 1.1em, '1 iteration, 1em base, 1.1 scale'); + @include assert-equal(_limit-decimals(harmony.modular-scale(2, 2px, 1.2)), 2.88px, '2 iterations, 2px base, 1.2 scale'); + @include assert-equal(_limit-decimals(harmony.modular-scale(-1, 2rem, 2)), 1rem, '-1 iteration, 2rem base, 2 scale'); + @include assert-equal(_limit-decimals(harmony.modular-scale(-2, 2rem, 2)), 0.5rem, '-2 iterations, 2rem base, 2 scale'); + + @include assert-equal(_limit-decimals(harmony.modular-scale(0, 1em 2em, 1.1)), 1em, 'Zero iterations, 1em 2em base, 1.1 scale'); + @include assert-equal(_limit-decimals(harmony.modular-scale(1, 1em 2em, 1.1)), 1.026em, '1 iteration, 1em 2em base, 1.1 scale'); + @include assert-equal(_limit-decimals(harmony.modular-scale(2, 1em 2em, 1.1)), 1.1em, '2 iterations, 1em 2em base, 1.1 scale'); + @include assert-equal(_limit-decimals(harmony.modular-scale(-1, 1em 1.5em, 1.2)), 0.868em, '-1 iteration, 1em 2em base, 1.1 scale'); + @include assert-equal(_limit-decimals(harmony.modular-scale(-2, 1em 1.5em, 1.2)), 0.833em, '-2 iterations, 1em 2em base, 1.1 scale'); } - @include it('iro-responsive-modular-scale') { + @include it('responsive-modular-scale') { @include assert('Single-stranded, fluid') { $ms: ( 320px: (1rem, 1.1), 640px: (1rem, 1.2) ); - $rem320px: iro-px-to-rem(320px); - $rem640px: iro-px-to-rem(640px); - $diff320px: iro-strip-unit($rem640px - $rem320px); + $rem320px: functions.px-to-rem(320px); + $rem640px: functions.px-to-rem(640px); + $diff320px: functions.strip-unit($rem640px - $rem320px); @include output { h3 { - @include iro-responsive-modular-scale(font-size, 0, $ms); + @include harmony.responsive-modular-scale(font-size, 0, $ms); } h2 { - @include iro-responsive-modular-scale(font-size, 1, $ms); + @include harmony.responsive-modular-scale(font-size, 1, $ms); } h1 { - @include iro-responsive-modular-scale(font-size, 2, $ms); + @include harmony.responsive-modular-scale(font-size, 2, $ms); } } @@ -89,21 +92,21 @@ 640px: (1rem, 1.2) ); - $rem320px: iro-px-to-rem(320px); - $rem640px: iro-px-to-rem(640px); - $diff320px: iro-strip-unit($rem640px - $rem320px); + $rem320px: functions.px-to-rem(320px); + $rem640px: functions.px-to-rem(640px); + $diff320px: functions.strip-unit($rem640px - $rem320px); @include output { h3 { - @include iro-responsive-modular-scale(font-size, 0, $ms, false); + @include harmony.responsive-modular-scale(font-size, 0, $ms, false); } h2 { - @include iro-responsive-modular-scale(font-size, 1, $ms, false); + @include harmony.responsive-modular-scale(font-size, 1, $ms, false); } h1 { - @include iro-responsive-modular-scale(font-size, 2, $ms, false); + @include harmony.responsive-modular-scale(font-size, 2, $ms, false); } } @@ -140,21 +143,21 @@ 640px: (1rem 2rem, 1.2) ); - $rem320px: iro-px-to-rem(320px); - $rem640px: iro-px-to-rem(640px); - $diff320px: iro-strip-unit($rem640px - $rem320px); + $rem320px: functions.px-to-rem(320px); + $rem640px: functions.px-to-rem(640px); + $diff320px: functions.strip-unit($rem640px - $rem320px); @include output { h3 { - @include iro-responsive-modular-scale(font-size, 0, $ms); + @include harmony.responsive-modular-scale(font-size, 0, $ms); } h2 { - @include iro-responsive-modular-scale(font-size, 1, $ms); + @include harmony.responsive-modular-scale(font-size, 1, $ms); } h1 { - @include iro-responsive-modular-scale(font-size, 2, $ms); + @include harmony.responsive-modular-scale(font-size, 2, $ms); } } @@ -203,21 +206,21 @@ 640px: (1rem 2rem, 1.2) ); - $rem320px: iro-px-to-rem(320px); - $rem640px: iro-px-to-rem(640px); - $diff320px: iro-strip-unit($rem640px - $rem320px); + $rem320px: functions.px-to-rem(320px); + $rem640px: functions.px-to-rem(640px); + $diff320px: functions.strip-unit($rem640px - $rem320px); @include output { h3 { - @include iro-responsive-modular-scale(font-size, 0, $ms, false); + @include harmony.responsive-modular-scale(font-size, 0, $ms, false); } h2 { - @include iro-responsive-modular-scale(font-size, 1, $ms, false); + @include harmony.responsive-modular-scale(font-size, 1, $ms, false); } h1 { - @include iro-responsive-modular-scale(font-size, 2, $ms, false); + @include harmony.responsive-modular-scale(font-size, 2, $ms, false); } } diff --git a/test/_props.scss b/test/_props.scss index 021ed4c..71d88c5 100644 --- a/test/_props.scss +++ b/test/_props.scss @@ -1,5 +1,9 @@ // sass-lint:disable empty-args +@use 'true' as *; +@use '../src/functions'; +@use '../src/props'; + @include describe('Property trees') { @include it('Validate names') { $map-valid: ( @@ -24,8 +28,8 @@ ) ); - @include assert-equal(iro-props-validate($map-valid), true, 'Check valid map'); - @include assert-equal(iro-props-validate($map-invalid), false, 'Check invalid map'); + @include assert-equal(props.validate($map-valid), true, 'Check valid map'); + @include assert-equal(props.validate($map-invalid), false, 'Check invalid map'); } @include it('Save / Delete') { @@ -40,8 +44,8 @@ ) ); - @include assert-equal(iro-props-store($map), null, 'Save default tree'); - @include assert-equal(iro-props-clear(), null, 'Delete default tree'); + @include assert-equal(props.store($map), null, 'Save default tree'); + @include assert-equal(props.clear(), null, 'Delete default tree'); } @include it('Read') { @@ -78,32 +82,32 @@ ) ); - @include assert-equal(iro-props-store($map1), null, 'Save default tree'); - @include assert-equal(iro-props-store($map2, 'test'), null, 'Save "test" tree'); + @include assert-equal(props.store($map1), null, 'Save default tree'); + @include assert-equal(props.store($map2, 'test'), null, 'Save "test" tree'); - @include iro-props-namespace('ns') { - @include assert-equal(iro-props-store($map3, 'namespaced'), null, 'Save "namespaced" tree'); + @include props.namespace('ns') { + @include assert-equal(props.store($map3, 'namespaced'), null, 'Save "namespaced" tree'); } - @include assert-equal(iro-props-get-static(--background), map-get($map1, --background), 'Get --background in default'); - @include assert-equal(iro-props-get-static(--buttons --primary --background), map-get(map-get(map-get($map1, --buttons), --primary), --background), 'Get --buttons --primary --background in default'); - @include assert-equal(iro-props-get-static(--box, $default: false), false, 'Get nonexistent in default'); + @include assert-equal(props.get-static(--background), map-get($map1, --background), 'Get --background in default'); + @include assert-equal(props.get-static(--buttons --primary --background), map-get(map-get(map-get($map1, --buttons), --primary), --background), 'Get --buttons --primary --background in default'); + @include assert-equal(props.get-static(--box, $default: false), false, 'Get nonexistent in default'); - @include assert-equal(iro-props-get-static(--background, 'test'), map-get($map2, --background), 'Get --background in "test"'); - @include assert-equal(iro-props-get-static(--buttons --primary --background, 'test'), map-get(map-get(map-get($map2, --buttons), --primary), --background), 'Get --buttons --primary --background in "test"'); - @include assert-equal(iro-props-get-static(--box, 'test', $default: false), false, 'Get nonexistent in "test"'); + @include assert-equal(props.get-static(--background, 'test'), map-get($map2, --background), 'Get --background in "test"'); + @include assert-equal(props.get-static(--buttons --primary --background, 'test'), map-get(map-get(map-get($map2, --buttons), --primary), --background), 'Get --buttons --primary --background in "test"'); + @include assert-equal(props.get-static(--box, 'test', $default: false), false, 'Get nonexistent in "test"'); - @include assert-equal(iro-props-get-static(--background, 'namespaced', $default: false), false, 'Get --background in "namespaced"'); - @include assert-equal(iro-props-get-static(--ns --background, 'namespaced'), map-get($map3, --background), 'Get --ns --background in "namespaced"'); - @include iro-props-namespace('ns') { - @include assert-equal(iro-props-get-static(--background, 'namespaced'), map-get($map3, --background), 'Get namespaced --background in "namespaced"'); - @include assert-equal(iro-props-get-static(--buttons --primary --background, 'namespaced'), map-get(map-get(map-get($map3, --buttons), --primary), --background), 'Get namespaced --buttons --primary --background in "namespaced"'); - @include assert-equal(iro-props-get-static(--box, 'namespaced', $default: false), false, 'Get namespaced nonexistent in "namespaced"'); + @include assert-equal(props.get-static(--background, 'namespaced', $default: false), false, 'Get --background in "namespaced"'); + @include assert-equal(props.get-static(--ns --background, 'namespaced'), map-get($map3, --background), 'Get --ns --background in "namespaced"'); + @include props.namespace('ns') { + @include assert-equal(props.get-static(--background, 'namespaced'), map-get($map3, --background), 'Get namespaced --background in "namespaced"'); + @include assert-equal(props.get-static(--buttons --primary --background, 'namespaced'), map-get(map-get(map-get($map3, --buttons), --primary), --background), 'Get namespaced --buttons --primary --background in "namespaced"'); + @include assert-equal(props.get-static(--box, 'namespaced', $default: false), false, 'Get namespaced nonexistent in "namespaced"'); } - @include assert-equal(iro-props-clear(), null, 'Delete default tree'); - @include assert-equal(iro-props-clear('test'), null, 'Delete "test" tree'); - @include assert-equal(iro-props-clear('namespaced'), null, 'Delete "namespaced" tree'); + @include assert-equal(props.clear(), null, 'Delete default tree'); + @include assert-equal(props.clear('test'), null, 'Delete "test" tree'); + @include assert-equal(props.clear('namespaced'), null, 'Delete "namespaced" tree'); } @include it('Overwrite') { @@ -127,15 +131,15 @@ ) ); - @include assert-equal(iro-props-store($map1), null, 'Save default tree'); - @include assert-equal(iro-props-store($map2, $merge: true), null, 'Overwrite default tree'); + @include assert-equal(props.store($map1), null, 'Save default tree'); + @include assert-equal(props.store($map2, $merge: true), null, 'Overwrite default tree'); - @include assert-equal(iro-props-get-static(), iro-map-merge-recursive($map1, $map2), 'After update, get whole map'); - @include assert-equal(iro-props-get-static(--background), map-get($map2, --background), 'After update, get --background'); - @include assert-equal(iro-props-get-static(--text), map-get($map2, --text), 'After update, get --text'); - @include assert-equal(iro-props-get-static(--buttons --primary --text), map-get(map-get(map-get($map1, --buttons), --primary), --text), 'After update, get --buttons --primary --text'); + @include assert-equal(props.get-static(), functions.map-merge-recursive($map1, $map2), 'After update, get whole map'); + @include assert-equal(props.get-static(--background), map-get($map2, --background), 'After update, get --background'); + @include assert-equal(props.get-static(--text), map-get($map2, --text), 'After update, get --text'); + @include assert-equal(props.get-static(--buttons --primary --text), map-get(map-get(map-get($map1, --buttons), --primary), --text), 'After update, get --buttons --primary --text'); - @include assert-equal(iro-props-clear(), null, 'Delete default tree'); + @include assert-equal(props.clear(), null, 'Delete default tree'); } @include it('Native assignment') { @@ -155,10 +159,10 @@ ); @include assert('Simple') { - @include iro-props-store($map); + @include props.store($map); @include output { - @include iro-props-assign; + @include props.assign; } @include expect { @@ -170,14 +174,14 @@ --buttons--default--text: #{map-get(map-get(map-get($map, --buttons), --default), --text)}; } - @include iro-props-clear; + @include props.clear; } @include assert('Filtered') { - @include iro-props-store($map); + @include props.store($map); @include output { - @include iro-props-assign($skip: --buttons); + @include props.assign($skip: --buttons); } @include expect { @@ -185,16 +189,16 @@ --text: #{map-get($map, --text)}; } - @include iro-props-clear; + @include props.clear; } @include assert('Namespaced') { - @include iro-props-namespace('ns') { - @include iro-props-store($map); + @include props.namespace('ns') { + @include props.store($map); } @include output { - @include iro-props-assign; + @include props.assign; } @include expect { @@ -206,7 +210,7 @@ --ns--buttons--default--text: #{map-get(map-get(map-get($map, --buttons), --default), --text)}; } - @include iro-props-clear; + @include props.clear; } } @@ -226,17 +230,17 @@ ) ); - @include assert-equal(iro-props-store($map), null, 'Save default tree'); + @include assert-equal(props.store($map), null, 'Save default tree'); - @include assert-equal(iro-props-get(--background), var(--background), 'Get --background'); - @include assert-equal(iro-props-get(--buttons --primary --text), var(--buttons--primary--text), 'Get --buttons --primary --text'); - @include assert-equal(iro-props-get(--buttons --secondary --text, $default: false), var(--buttons--secondary--text, false), 'Get --buttons --secondary --text with default'); - @include iro-props-namespace('buttons') { - @include assert-equal(iro-props-get(--primary --text), var(--buttons--primary--text), 'Get via namespace "buttons" --primary --text'); - @include assert-equal(iro-props-get(--secondary --text, $default: false), var(--buttons--secondary--text, false), 'Get via namespace "buttons" --secondary --text with default'); + @include assert-equal(props.get(--background), var(--background), 'Get --background'); + @include assert-equal(props.get(--buttons --primary --text), var(--buttons--primary--text), 'Get --buttons --primary --text'); + @include assert-equal(props.get(--buttons --secondary --text, $default: false), var(--buttons--secondary--text, false), 'Get --buttons --secondary --text with default'); + @include props.namespace('buttons') { + @include assert-equal(props.get(--primary --text), var(--buttons--primary--text), 'Get via namespace "buttons" --primary --text'); + @include assert-equal(props.get(--secondary --text, $default: false), var(--buttons--secondary--text, false), 'Get via namespace "buttons" --secondary --text with default'); } - @include assert-equal(iro-props-clear(), null, 'Delete default tree'); + @include assert-equal(props.clear(), null, 'Delete default tree'); } @include it('References') { @@ -255,25 +259,25 @@ --background: #eee, --buttons: ( --primary: ( - --background: iro-props-ref($key: --background) + --background: props.ref($key: --background) ), - --default: iro-props-ref($key: --buttons --primary) + --default: props.ref($key: --buttons --primary) ) ); - @include assert-equal(iro-props-store($map1), null, 'Save default tree'); - @include assert-equal(iro-props-store($map2, 'second'), null, 'Save "second" tree'); + @include assert-equal(props.store($map1), null, 'Save default tree'); + @include assert-equal(props.store($map2, 'second'), null, 'Save "second" tree'); - @include assert-equal(iro-props-get-static(--buttons --primary --background, 'second'), map-get($map1, --background), 'Get referenced value'); - @include assert-equal(iro-props-get(--buttons --primary --background, 'second'), var(--buttons--primary--background), 'Get referenced value, native'); + @include assert-equal(props.get-static(--buttons --primary --background, 'second'), map-get($map1, --background), 'Get referenced value'); + @include assert-equal(props.get(--buttons --primary --background, 'second'), var(--buttons--primary--background), 'Get referenced value, native'); - @include assert-equal(iro-props-get-static(--buttons --default, 'second'), map-get(map-get($map1, --buttons), --primary), 'Get referenced subtree, whole'); - @include assert-equal(iro-props-get-static(--buttons --default --background, 'second'), map-get(map-get(map-get($map1, --buttons), --primary), --background), 'Get referenced subtree, inner value'); - @include assert-equal(iro-props-get(--buttons --default --background, 'second'), var(--buttons--default--background), 'Get referenced subtree, native'); + @include assert-equal(props.get-static(--buttons --default, 'second'), map-get(map-get($map1, --buttons), --primary), 'Get referenced subtree, whole'); + @include assert-equal(props.get-static(--buttons --default --background, 'second'), map-get(map-get(map-get($map1, --buttons), --primary), --background), 'Get referenced subtree, inner value'); + @include assert-equal(props.get(--buttons --default --background, 'second'), var(--buttons--default--background), 'Get referenced subtree, native'); @include assert('Native assignment') { @include output { - @include iro-props-assign('second'); + @include props.assign('second'); } @include expect { @@ -284,7 +288,7 @@ } } - @include assert-equal(iro-props-clear(), null, 'Delete default tree'); - @include assert-equal(iro-props-clear('second'), null, 'Delete "second" tree'); + @include assert-equal(props.clear(), null, 'Delete default tree'); + @include assert-equal(props.clear('second'), null, 'Delete "second" tree'); } } diff --git a/test/_responsive.scss b/test/_responsive.scss index 6dfe868..6780ae6 100644 --- a/test/_responsive.scss +++ b/test/_responsive.scss @@ -1,9 +1,13 @@ -@include describe('Responsive') { - @include it('iro-responsive-fluid-calc') { - $rem600px: iro-px-to-rem(600px); - $rem800px: iro-px-to-rem(800px); +@use 'true' as *; +@use '../src/functions'; +@use '../src/responsive'; - @include assert-equal('#{iro-responsive-fluid-calc(2rem, 4rem, 600px, 800px)}', 'calc(2rem + 2 * (100vw - #{$rem600px}) / #{iro-strip-unit($rem800px - $rem600px)})', 'Responsive value from 2rem to 4rem over 600px to 800px'); - @include assert-equal('#{iro-responsive-fluid-calc(4px, 12px, 600px, 800px)}', 'calc(4px + 8 * (100vw - 600px) / 200)', 'Responsive value from 4px to 12px over 600px to 800px'); +@include describe('responsive') { + @include it('fluid-calc') { + $rem600px: functions.px-to-rem(600px); + $rem800px: functions.px-to-rem(800px); + + @include assert-equal('#{responsive.fluid-calc(2rem, 4rem, 600px, 800px)}', 'calc(2rem + 2 * (100vw - #{$rem600px}) / #{functions.strip-unit($rem800px - $rem600px)})', 'Responsive value from 2rem to 4rem over 600px to 800px'); + @include assert-equal('#{responsive.fluid-calc(4px, 12px, 600px, 800px)}', 'calc(4px + 8 * (100vw - 600px) / 200)', 'Responsive value from 4px to 12px over 600px to 800px'); } } diff --git a/test/bem/_at-theme.scss b/test/bem/_at-theme.scss new file mode 100644 index 0000000..29a4eba --- /dev/null +++ b/test/bem/_at-theme.scss @@ -0,0 +1,58 @@ +// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations + +@use 'true' as *; +@use '../../src/bem'; + +// +// Included test cases: +// - /// 1 /// - single theme +// - /// 2 /// - with sub-theme +// + +@include it('at-theme') { + @include assert('single theme') { /// 1 /// + @include output(false) { + @include bem.block('something') { + @include bem.at-theme('theme') { + font-size: 2em; + } + } + } + + @include expect(false) { + .t-theme .something, + [class*=' t-'] .t-theme .something, + [class^='t-'] .t-theme .something { + font-size: 2em; + } + } + } + + @include assert('with sub-theme') { /// 2 /// + @include output(false) { + @include bem.block('something') { + @include bem.at-theme('theme') { + font-size: 2em; + } + + @include bem.at-theme('theme', 'subtheme') { + font-size: 3em; + } + } + } + + @include expect(false) { + .t-theme .something, + [class*=' t-'] .t-theme .something, + [class^='t-'] .t-theme .something { + font-size: 2em; + } + + .t-theme .t-subtheme .something, + [class*=' t-'] .t-theme .t-subtheme .something, + [class^='t-'] .t-theme .t-subtheme .something { + font-size: 3em; + } + } + } +} diff --git a/test/bem/_block.scss b/test/bem/_block.scss new file mode 100644 index 0000000..fb3a545 --- /dev/null +++ b/test/bem/_block.scss @@ -0,0 +1,88 @@ +// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations + +@use 'true' as *; +@use '../../src/bem'; + +// +// Included test cases: +// - /// 1 /// - without namespace +// - /// 2 /// - with namespace +// - /// 3 /// - nested +// - /// 4 /// - within selector +// + +@include it('block') { + @include assert('without namespace') { /// 1 /// + @include output(false) { + @include bem.block('something') { + font-size: 1em; + } + } + + @include expect(false) { + .something { + font-size: 1em; + } + } + } + + @each $ns in map-keys(bem.$namespaces) { + @include assert('with namespace "#{$ns}"') { /// 2 /// + @include output(false) { + @include bem.block('something', $ns) { + font-size: 1em; + } + } + + @include expect(false) { + @if $ns != 'theme' { + .#{map-get(bem.$namespaces, $ns)}-something { + font-size: 1em; + } + } @else { + .t-something, + [class*=' t-'] .t-something, + [class^='t-'] .t-something { + font-size: 1em; + } + } + } + } + } + + @include assert('nested') { /// 3 /// + @include output(false) { + @include bem.theme('theme') { + @include bem.theme('subtheme') { + @include bem.block('something') { + font-size: 2em; + } + } + } + } + + @include expect(false) { + .t-theme .t-subtheme .something, + [class*=' t-'] .t-theme .t-subtheme .something, + [class^='t-'] .t-theme .t-subtheme .something { + font-size: 2em; + } + } + } + + @include assert('within selector') { /// 4 /// + @include output(false) { + .sel { + @include bem.block('something') { + font-size: 2em; + } + } + } + + @include expect(false) { + .sel .something { + font-size: 2em; + } + } + } +} diff --git a/test/bem/_composed-of.scss b/test/bem/_composed-of.scss new file mode 100644 index 0000000..fcbf2c4 --- /dev/null +++ b/test/bem/_composed-of.scss @@ -0,0 +1,152 @@ +// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations + +@use 'true' as *; +@use '../../src/bem'; + +// +// Included test cases: +// - /// 1 /// - without namespace, single +// - /// 2 /// - with namespace, single +// - /// 3 /// - without namespace, multiple +// - /// 4 /// - with namespace, multiple +// + +@include it('composed-of') { + @include assert('without namespace, single') { /// 1 /// + @include output(false) { + @include bem.block('something') { + font-size: 1em; + } + + @include bem.block('another') { + @include bem.composed-of('something'); + + font-size: 2em; + } + } + + @include expect(false) { + .something { + font-size: 1em; + } + + .another { + font-size: 2em; + } + } + } + + @each $ns in map-keys(bem.$namespaces) { + @include assert('with namespace "#{$ns}", single') { /// 2 /// + @include output(false) { + @include bem.block('something', $ns) { + font-size: 1em; + } + + @include bem.block('another') { + @include bem.composed-of('something' $ns); + + font-size: 2em; + } + } + + @include expect(false) { + @if $ns != 'theme' { + .#{map-get(bem.$namespaces, $ns)}-something { + font-size: 1em; + } + } @else { + .t-something, + [class*=' t-'] .t-something, + [class^='t-'] .t-something { + font-size: 1em; + } + } + + .another { + font-size: 2em; + } + } + } + } + + @include assert('without namespace, multiple') { /// 3 /// + @include output(false) { + @include bem.block('something') { + font-size: 1em; + } + + @include bem.block('somethingElse') { + font-size: 1em; + } + + @include bem.block('another') { + @include bem.composed-of('something', 'somethingElse'); + + font-size: 2em; + } + } + + @include expect(false) { + .something { + font-size: 1em; + } + + .somethingElse { + font-size: 1em; + } + + .another { + font-size: 2em; + } + } + } + + @each $ns in map-keys(bem.$namespaces) { + @include assert('with namespace "#{$ns}", multiple') { /// 4 /// + @include output(false) { + @include bem.block('something', $ns) { + font-size: 1em; + } + + @include bem.block('somethingElse', $ns) { + font-size: 1em; + } + + @include bem.block('another') { + @include bem.composed-of('something' $ns, 'somethingElse' $ns); + + font-size: 2em; + } + } + + @include expect(false) { + @if $ns != 'theme' { + .#{map-get(bem.$namespaces, $ns)}-something { + font-size: 1em; + } + + .#{map-get(bem.$namespaces, $ns)}-somethingElse { + font-size: 1em; + } + } @else { + .t-something, + [class*=' t-'] .t-something, + [class^='t-'] .t-something { + font-size: 1em; + } + + .t-somethingElse, + [class*=' t-'] .t-somethingElse, + [class^='t-'] .t-somethingElse { + font-size: 1em; + } + } + + .another { + font-size: 2em; + } + } + } + } +} diff --git a/test/bem/_element.scss b/test/bem/_element.scss new file mode 100644 index 0000000..c8839de --- /dev/null +++ b/test/bem/_element.scss @@ -0,0 +1,494 @@ +// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations + +@use 'true' as *; +@use '../../src/bem'; + +// +// Included test cases: +// - /// 1 /// - single element +// - /// 2 /// - single element, manual selector in-between +// - /// 3 /// - single element, modifier in-between +// - /// 4 /// - single element, nested +// - /// 5 /// - single element, nested, manual selector in-between +// - /// 6 /// - single element, nested, modifier in-between +// - /// 7 /// - single element, in at-theme +// - /// 8 /// - multiple elements +// - /// 9 /// - multiple elements, manual selector in-between +// - /// 10 /// - multiple elements, modifier in-between +// - /// 11 /// - multiple elements, nested +// - /// 12 /// - multiple elements, nested, manual selector in-between +// - /// 13 /// - multiple elements, nested, modifier in-between +// - /// 14 /// - single element, in at-theme +// + +@include it('element') { + @include assert('single element') { /// 1 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + font-size: 2em; + } + } + } + + @include expect { + .something__child { + font-size: 2em; + } + } + } + + @include assert('single element, manual selector in-between') { /// 2 /// + @include output(false) { + @include bem.block('something') { + &:hover { + @include bem.elem('child1') { + font-size: 2em; + } + } + + .test & { + @include bem.elem('child2') { + font-size: 2em; + } + } + } + } + + @include expect(false) { + .something:hover .something__child1 { + font-size: 2em; + } + + .test .something__child2 { + font-size: 2em; + } + } + } + + @include assert('single element, modifier in-between') { /// 3 /// + @include output { + @include bem.block('something') { + @include bem.modifier('mod') { + @include bem.elem('child') { + font-size: 2em; + } + } + } + } + + @include expect { + .something--mod .something__child { + font-size: 2em; + } + } + } + + @include assert('single element, nested') { /// 4 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + font-size: 2em; + + @include bem.elem('subchild') { + font-size: 3em; + } + } + } + } + + @include expect { + .something__child { + font-size: 2em; + } + + .something__child .something__subchild { + font-size: 3em; + } + } + } + + @include assert('single element, nested, manual selector in-between') { /// 5 /// + @include output(false) { + @include bem.block('something') { + &:hover { + @include bem.elem('child1') { + font-size: 2em; + + @include bem.elem('subchild1') { + font-size: 3em; + } + } + } + + .test & { + @include bem.elem('child2') { + font-size: 2em; + + @include bem.elem('subchild2') { + font-size: 3em; + } + } + } + + @include bem.elem('child3') { + font-size: 2em; + + &:hover { + @include bem.elem('subchild3') { + font-size: 3em; + } + } + + .test & { + @include bem.elem('subchild4') { + font-size: 3em; + } + } + } + } + } + + @include expect(false) { + .something:hover .something__child1 { + font-size: 2em; + } + + .something:hover .something__child1 .something__subchild1 { + font-size: 3em; + } + + .test .something__child2 { + font-size: 2em; + } + + .test .something__child2 .something__subchild2 { + font-size: 3em; + } + + .something__child3 { + font-size: 2em; + } + + .something__child3:hover .something__subchild3 { + font-size: 3em; + } + + .test .something__child3 .something__subchild4 { + font-size: 3em; + } + } + } + + @include assert('single element, nested, modifier in-between') { /// 6 /// + @include output { + @include bem.block('something') { + @include bem.modifier('mod') { + @include bem.elem('child') { + font-size: 2em; + + @include bem.elem('subchild') { + font-size: 3em; + } + } + } + + @include bem.elem('child') { + font-size: 2em; + + @include bem.modifier('mod') { + @include bem.elem('subchild') { + font-size: 3em; + } + } + } + } + } + + @include expect { + .something--mod .something__child { + font-size: 2em; + } + + .something--mod .something__child .something__subchild { + font-size: 3em; + } + + .something__child { + font-size: 2em; + } + + .something__child--mod .something__subchild { + font-size: 3em; + } + } + } + + @include assert('single element, in at-theme') { /// 7 /// + @include output(false) { + @include bem.block('something') { + @include bem.at-theme('dark') { + @include bem.elem('child') { + font-size: 2em; + } + } + } + } + + @include expect(false) { + .t-dark .something__child, + [class*=' t-'] .t-dark .something__child, + [class^='t-'] .t-dark .something__child { + font-size: 2em; + } + } + } + + @include assert('multiple elements') { /// 8 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + font-size: 2em; + } + } + } + + @include expect { + .something__child1, + .something__child2 { + font-size: 2em; + } + } + } + + @include assert('multiple elements, manual selector in-between') { /// 9 /// + @include output(false) { + @include bem.block('something') { + &:hover { + @include bem.elem('child1', 'child2') { + font-size: 2em; + } + } + + .test & { + @include bem.elem('child3', 'child4') { + font-size: 2em; + } + } + } + } + + @include expect(false) { + .something:hover .something__child1, + .something:hover .something__child2 { + font-size: 2em; + } + + .test .something__child3, + .test .something__child4 { + font-size: 2em; + } + } + } + + @include assert('multiple elements, modifier in-between') { /// 10 /// + @include output { + @include bem.block('something') { + @include bem.modifier('mod') { + @include bem.elem('child1', 'child2') { + font-size: 2em; + } + } + } + } + + @include expect { + .something--mod .something__child1, + .something--mod .something__child2 { + font-size: 2em; + } + } + } + + @include assert('multiple elements, nested') { /// 11 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + font-size: 2em; + + @include bem.elem('subchild1') { + font-size: 3em; + } + } + + @include bem.elem('child3') { + font-size: 2em; + + @include bem.elem('subchild2', 'subchild3') { + font-size: 3em; + } + } + } + } + + @include expect { + .something__child1, + .something__child2 { + font-size: 2em; + } + + .something__child1 .something__subchild1, + .something__child2 .something__subchild1 { + font-size: 3em; + } + + .something__child3 { + font-size: 2em; + } + + .something__child3 .something__subchild2, + .something__child3 .something__subchild3 { + font-size: 3em; + } + } + } + + @include assert('multiple elements, nested, manual selector in-between') { /// 12 /// + @include output(false) { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + font-size: 2em; + + &:hover { + @include bem.elem('subchild1') { + font-size: 3em; + } + } + + .test & { + @include bem.elem('subchild2') { + font-size: 3em; + } + } + } + + @include bem.elem('child3') { + font-size: 2em; + + &:hover { + @include bem.elem('subchild3', 'subchild4') { + font-size: 3em; + } + } + + .test & { + @include bem.elem('subchild5', 'subchild6') { + font-size: 3em; + } + } + } + } + } + + @include expect(false) { + .something__child1, + .something__child2 { + font-size: 2em; + } + + .something__child1:hover .something__subchild1, + .something__child2:hover .something__subchild1 { + font-size: 3em; + } + + .test .something__child1 .something__subchild2, + .test .something__child2 .something__subchild2 { + font-size: 3em; + } + + .something__child3 { + font-size: 2em; + } + + .something__child3:hover .something__subchild3, + .something__child3:hover .something__subchild4 { + font-size: 3em; + } + + .test .something__child3 .something__subchild5, + .test .something__child3 .something__subchild6 { + font-size: 3em; + } + } + } + + @include assert('multiple elements, nested, modifier in-between') { /// 13 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + font-size: 2em; + + @include bem.modifier('mod') { + @include bem.elem('subchild1') { + font-size: 3em; + } + } + } + + @include bem.elem('child3') { + font-size: 2em; + + @include bem.modifier('mod') { + @include bem.elem('subchild2', 'subchild3') { + font-size: 3em; + } + } + } + } + } + + @include expect { + .something__child1, + .something__child2 { + font-size: 2em; + } + + .something__child1--mod .something__subchild1, + .something__child2--mod .something__subchild1 { + font-size: 3em; + } + + .something__child3 { + font-size: 2em; + } + + .something__child3--mod .something__subchild2, + .something__child3--mod .something__subchild3 { + font-size: 3em; + } + } + } + + @include assert('multiple elements, in at-theme') { /// 14 /// + @include output(false) { + @include bem.block('something') { + @include bem.at-theme('dark') { + @include bem.elem('child1', 'child2') { + font-size: 2em; + } + } + } + } + + @include expect(false) { + .t-dark .something__child1, + [class*=' t-'] .t-dark .something__child1, + [class^='t-'] .t-dark .something__child1, + .t-dark .something__child2, + [class*=' t-'] .t-dark .something__child2, + [class^='t-'] .t-dark .something__child2 { + font-size: 2em; + } + } + } +} diff --git a/test/bem/_examples.scss b/test/bem/_examples.scss index 243ee35..33deca0 100644 --- a/test/bem/_examples.scss +++ b/test/bem/_examples.scss @@ -1,5 +1,8 @@ // sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations no-empty-rulesets +@use 'true' as *; +@use '../../src/bem'; + // // Included test cases: // - /// 1 /// - Media object @@ -10,30 +13,30 @@ @include it('Examples') { @include assert('Media object') { /// 1 /// @include output { - @include iro-bem-object('media') { + @include bem.object('media') { display: flex; align-items: flex-start; justify-content: flex-start; - @include iro-bem-element('image') { + @include bem.elem('image') { display: block; flex: 0 0 auto; order: 1; overflow: hidden; } - @include iro-bem-element('body') { + @include bem.elem('body') { order: 2; } - @include iro-bem-modifier('rtl') { + @include bem.modifier('rtl') { justify-content: flex-end; - @include iro-bem-element('image') { + @include bem.elem('image') { order: 2; } - @include iro-bem-element('body') { + @include bem.elem('body') { order: 1; } } @@ -74,30 +77,30 @@ @include assert('Tabs') { /// 2 /// @include output { - @include iro-bem-component('tabs') { + @include bem.component('tabs') { position: relative; - @include iro-bem-element('tab') { + @include bem.elem('tab') { float: left; } - @include iro-bem-element('tabRadio') { + @include bem.elem('tabRadio') { position: absolute; top: -9999px; left: -9999px; &:checked { - @include iro-bem-sibling-element('tabLabel') { + @include bem.sibling-elem('tabLabel') { font-weight: bold; } - @include iro-bem-sibling-element('tabContent') { + @include bem.sibling-elem('tabContent') { display: block; } } } - @include iro-bem-element('tabLabel') { + @include bem.elem('tabLabel') { cursor: pointer; &:hover, @@ -106,7 +109,7 @@ } } - @include iro-bem-element('tabContent') { + @include bem.elem('tabContent') { position: absolute; left: 0; display: none; @@ -156,28 +159,28 @@ @include assert('Accordion') { /// 3 /// @include output { - @include iro-bem-component('accordion') { - @include iro-bem-element('section') { + @include bem.component('accordion') { + @include bem.elem('section') { // nothing to do } - @include iro-bem-element('sectionCheckbox') { + @include bem.elem('sectionCheckbox') { position: absolute; top: -9999px; left: -9999px; &:checked { - @include iro-bem-sibling-element('sectionLabel') { + @include bem.sibling-elem('sectionLabel') { font-weight: bold; } - @include iro-bem-sibling-element('sectionContent') { + @include bem.sibling-elem('sectionContent') { display: block; } } } - @include iro-bem-element('sectionLabel') { + @include bem.elem('sectionLabel') { cursor: pointer; &:hover, @@ -186,7 +189,7 @@ } } - @include iro-bem-element('sectionContent') { + @include bem.elem('sectionContent') { display: none; } } diff --git a/test/bem/_iro-bem-at-theme.scss b/test/bem/_iro-bem-at-theme.scss deleted file mode 100644 index d2d0696..0000000 --- a/test/bem/_iro-bem-at-theme.scss +++ /dev/null @@ -1,55 +0,0 @@ -// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations - -// -// Included test cases: -// - /// 1 /// - single theme -// - /// 2 /// - with sub-theme -// - -@include it('iro-bem-at-theme') { - @include assert('single theme') { /// 1 /// - @include output(false) { - @include iro-bem-block('something') { - @include iro-bem-at-theme('theme') { - font-size: 2em; - } - } - } - - @include expect(false) { - .t-theme .something, - [class*=' t-'] .t-theme .something, - [class^='t-'] .t-theme .something { - font-size: 2em; - } - } - } - - @include assert('with sub-theme') { /// 2 /// - @include output(false) { - @include iro-bem-block('something') { - @include iro-bem-at-theme('theme') { - font-size: 2em; - } - - @include iro-bem-at-theme('theme', 'subtheme') { - font-size: 3em; - } - } - } - - @include expect(false) { - .t-theme .something, - [class*=' t-'] .t-theme .something, - [class^='t-'] .t-theme .something { - font-size: 2em; - } - - .t-theme .t-subtheme .something, - [class*=' t-'] .t-theme .t-subtheme .something, - [class^='t-'] .t-theme .t-subtheme .something { - font-size: 3em; - } - } - } -} diff --git a/test/bem/_iro-bem-block.scss b/test/bem/_iro-bem-block.scss deleted file mode 100644 index a93d803..0000000 --- a/test/bem/_iro-bem-block.scss +++ /dev/null @@ -1,85 +0,0 @@ -// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations - -// -// Included test cases: -// - /// 1 /// - without namespace -// - /// 2 /// - with namespace -// - /// 3 /// - nested -// - /// 4 /// - within selector -// - -@include it('iro-bem-block') { - @include assert('without namespace') { /// 1 /// - @include output(false) { - @include iro-bem-block('something') { - font-size: 1em; - } - } - - @include expect(false) { - .something { - font-size: 1em; - } - } - } - - @each $ns in map-keys($iro-bem-namespaces) { - @include assert('with namespace "#{$ns}"') { /// 2 /// - @include output(false) { - @include iro-bem-block('something', $ns) { - font-size: 1em; - } - } - - @include expect(false) { - @if $ns != 'theme' { - .#{map-get($iro-bem-namespaces, $ns)}-something { - font-size: 1em; - } - } @else { - .t-something, - [class*=' t-'] .t-something, - [class^='t-'] .t-something { - font-size: 1em; - } - } - } - } - } - - @include assert('nested') { /// 3 /// - @include output(false) { - @include iro-bem-theme('theme') { - @include iro-bem-theme('subtheme') { - @include iro-bem-block('something') { - font-size: 2em; - } - } - } - } - - @include expect(false) { - .t-theme .t-subtheme .something, - [class*=' t-'] .t-theme .t-subtheme .something, - [class^='t-'] .t-theme .t-subtheme .something { - font-size: 2em; - } - } - } - - @include assert('within selector') { /// 4 /// - @include output(false) { - .sel { - @include iro-bem-block('something') { - font-size: 2em; - } - } - } - - @include expect(false) { - .sel .something { - font-size: 2em; - } - } - } -} diff --git a/test/bem/_iro-bem-composed-of.scss b/test/bem/_iro-bem-composed-of.scss deleted file mode 100644 index e724eb8..0000000 --- a/test/bem/_iro-bem-composed-of.scss +++ /dev/null @@ -1,149 +0,0 @@ -// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations - -// -// Included test cases: -// - /// 1 /// - without namespace, single -// - /// 2 /// - with namespace, single -// - /// 3 /// - without namespace, multiple -// - /// 4 /// - with namespace, multiple -// - -@include it('iro-bem-composed-of') { - @include assert('without namespace, single') { /// 1 /// - @include output(false) { - @include iro-bem-block('something') { - font-size: 1em; - } - - @include iro-bem-block('another') { - @include iro-bem-composed-of('something'); - - font-size: 2em; - } - } - - @include expect(false) { - .something { - font-size: 1em; - } - - .another { - font-size: 2em; - } - } - } - - @each $ns in map-keys($iro-bem-namespaces) { - @include assert('with namespace "#{$ns}", single') { /// 2 /// - @include output(false) { - @include iro-bem-block('something', $ns) { - font-size: 1em; - } - - @include iro-bem-block('another') { - @include iro-bem-composed-of('something' $ns); - - font-size: 2em; - } - } - - @include expect(false) { - @if $ns != 'theme' { - .#{map-get($iro-bem-namespaces, $ns)}-something { - font-size: 1em; - } - } @else { - .t-something, - [class*=' t-'] .t-something, - [class^='t-'] .t-something { - font-size: 1em; - } - } - - .another { - font-size: 2em; - } - } - } - } - - @include assert('without namespace, multiple') { /// 3 /// - @include output(false) { - @include iro-bem-block('something') { - font-size: 1em; - } - - @include iro-bem-block('somethingElse') { - font-size: 1em; - } - - @include iro-bem-block('another') { - @include iro-bem-composed-of('something', 'somethingElse'); - - font-size: 2em; - } - } - - @include expect(false) { - .something { - font-size: 1em; - } - - .somethingElse { - font-size: 1em; - } - - .another { - font-size: 2em; - } - } - } - - @each $ns in map-keys($iro-bem-namespaces) { - @include assert('with namespace "#{$ns}", multiple') { /// 4 /// - @include output(false) { - @include iro-bem-block('something', $ns) { - font-size: 1em; - } - - @include iro-bem-block('somethingElse', $ns) { - font-size: 1em; - } - - @include iro-bem-block('another') { - @include iro-bem-composed-of('something' $ns, 'somethingElse' $ns); - - font-size: 2em; - } - } - - @include expect(false) { - @if $ns != 'theme' { - .#{map-get($iro-bem-namespaces, $ns)}-something { - font-size: 1em; - } - - .#{map-get($iro-bem-namespaces, $ns)}-somethingElse { - font-size: 1em; - } - } @else { - .t-something, - [class*=' t-'] .t-something, - [class^='t-'] .t-something { - font-size: 1em; - } - - .t-somethingElse, - [class*=' t-'] .t-somethingElse, - [class^='t-'] .t-somethingElse { - font-size: 1em; - } - } - - .another { - font-size: 2em; - } - } - } - } -} diff --git a/test/bem/_iro-bem-element.scss b/test/bem/_iro-bem-element.scss deleted file mode 100644 index f69f133..0000000 --- a/test/bem/_iro-bem-element.scss +++ /dev/null @@ -1,491 +0,0 @@ -// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations - -// -// Included test cases: -// - /// 1 /// - single element -// - /// 2 /// - single element, manual selector in-between -// - /// 3 /// - single element, modifier in-between -// - /// 4 /// - single element, nested -// - /// 5 /// - single element, nested, manual selector in-between -// - /// 6 /// - single element, nested, modifier in-between -// - /// 7 /// - single element, in at-theme -// - /// 8 /// - multiple elements -// - /// 9 /// - multiple elements, manual selector in-between -// - /// 10 /// - multiple elements, modifier in-between -// - /// 11 /// - multiple elements, nested -// - /// 12 /// - multiple elements, nested, manual selector in-between -// - /// 13 /// - multiple elements, nested, modifier in-between -// - /// 14 /// - single element, in at-theme -// - -@include it('iro-bem-element') { - @include assert('single element') { /// 1 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child') { - font-size: 2em; - } - } - } - - @include expect { - .something__child { - font-size: 2em; - } - } - } - - @include assert('single element, manual selector in-between') { /// 2 /// - @include output(false) { - @include iro-bem-block('something') { - &:hover { - @include iro-bem-element('child1') { - font-size: 2em; - } - } - - .test & { - @include iro-bem-element('child2') { - font-size: 2em; - } - } - } - } - - @include expect(false) { - .something:hover .something__child1 { - font-size: 2em; - } - - .test .something__child2 { - font-size: 2em; - } - } - } - - @include assert('single element, modifier in-between') { /// 3 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-modifier('mod') { - @include iro-bem-element('child') { - font-size: 2em; - } - } - } - } - - @include expect { - .something--mod .something__child { - font-size: 2em; - } - } - } - - @include assert('single element, nested') { /// 4 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child') { - font-size: 2em; - - @include iro-bem-element('subchild') { - font-size: 3em; - } - } - } - } - - @include expect { - .something__child { - font-size: 2em; - } - - .something__child .something__subchild { - font-size: 3em; - } - } - } - - @include assert('single element, nested, manual selector in-between') { /// 5 /// - @include output(false) { - @include iro-bem-block('something') { - &:hover { - @include iro-bem-element('child1') { - font-size: 2em; - - @include iro-bem-element('subchild1') { - font-size: 3em; - } - } - } - - .test & { - @include iro-bem-element('child2') { - font-size: 2em; - - @include iro-bem-element('subchild2') { - font-size: 3em; - } - } - } - - @include iro-bem-element('child3') { - font-size: 2em; - - &:hover { - @include iro-bem-element('subchild3') { - font-size: 3em; - } - } - - .test & { - @include iro-bem-element('subchild4') { - font-size: 3em; - } - } - } - } - } - - @include expect(false) { - .something:hover .something__child1 { - font-size: 2em; - } - - .something:hover .something__child1 .something__subchild1 { - font-size: 3em; - } - - .test .something__child2 { - font-size: 2em; - } - - .test .something__child2 .something__subchild2 { - font-size: 3em; - } - - .something__child3 { - font-size: 2em; - } - - .something__child3:hover .something__subchild3 { - font-size: 3em; - } - - .test .something__child3 .something__subchild4 { - font-size: 3em; - } - } - } - - @include assert('single element, nested, modifier in-between') { /// 6 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-modifier('mod') { - @include iro-bem-element('child') { - font-size: 2em; - - @include iro-bem-element('subchild') { - font-size: 3em; - } - } - } - - @include iro-bem-element('child') { - font-size: 2em; - - @include iro-bem-modifier('mod') { - @include iro-bem-element('subchild') { - font-size: 3em; - } - } - } - } - } - - @include expect { - .something--mod .something__child { - font-size: 2em; - } - - .something--mod .something__child .something__subchild { - font-size: 3em; - } - - .something__child { - font-size: 2em; - } - - .something__child--mod .something__subchild { - font-size: 3em; - } - } - } - - @include assert('single element, in at-theme') { /// 7 /// - @include output(false) { - @include iro-bem-block('something') { - @include iro-bem-at-theme('dark') { - @include iro-bem-element('child') { - font-size: 2em; - } - } - } - } - - @include expect(false) { - .t-dark .something__child, - [class*=' t-'] .t-dark .something__child, - [class^='t-'] .t-dark .something__child { - font-size: 2em; - } - } - } - - @include assert('multiple elements') { /// 8 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child1', 'child2') { - font-size: 2em; - } - } - } - - @include expect { - .something__child1, - .something__child2 { - font-size: 2em; - } - } - } - - @include assert('multiple elements, manual selector in-between') { /// 9 /// - @include output(false) { - @include iro-bem-block('something') { - &:hover { - @include iro-bem-element('child1', 'child2') { - font-size: 2em; - } - } - - .test & { - @include iro-bem-element('child3', 'child4') { - font-size: 2em; - } - } - } - } - - @include expect(false) { - .something:hover .something__child1, - .something:hover .something__child2 { - font-size: 2em; - } - - .test .something__child3, - .test .something__child4 { - font-size: 2em; - } - } - } - - @include assert('multiple elements, modifier in-between') { /// 10 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-modifier('mod') { - @include iro-bem-element('child1', 'child2') { - font-size: 2em; - } - } - } - } - - @include expect { - .something--mod .something__child1, - .something--mod .something__child2 { - font-size: 2em; - } - } - } - - @include assert('multiple elements, nested') { /// 11 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child1', 'child2') { - font-size: 2em; - - @include iro-bem-element('subchild1') { - font-size: 3em; - } - } - - @include iro-bem-element('child3') { - font-size: 2em; - - @include iro-bem-element('subchild2', 'subchild3') { - font-size: 3em; - } - } - } - } - - @include expect { - .something__child1, - .something__child2 { - font-size: 2em; - } - - .something__child1 .something__subchild1, - .something__child2 .something__subchild1 { - font-size: 3em; - } - - .something__child3 { - font-size: 2em; - } - - .something__child3 .something__subchild2, - .something__child3 .something__subchild3 { - font-size: 3em; - } - } - } - - @include assert('multiple elements, nested, manual selector in-between') { /// 12 /// - @include output(false) { - @include iro-bem-block('something') { - @include iro-bem-element('child1', 'child2') { - font-size: 2em; - - &:hover { - @include iro-bem-element('subchild1') { - font-size: 3em; - } - } - - .test & { - @include iro-bem-element('subchild2') { - font-size: 3em; - } - } - } - - @include iro-bem-element('child3') { - font-size: 2em; - - &:hover { - @include iro-bem-element('subchild3', 'subchild4') { - font-size: 3em; - } - } - - .test & { - @include iro-bem-element('subchild5', 'subchild6') { - font-size: 3em; - } - } - } - } - } - - @include expect(false) { - .something__child1, - .something__child2 { - font-size: 2em; - } - - .something__child1:hover .something__subchild1, - .something__child2:hover .something__subchild1 { - font-size: 3em; - } - - .test .something__child1 .something__subchild2, - .test .something__child2 .something__subchild2 { - font-size: 3em; - } - - .something__child3 { - font-size: 2em; - } - - .something__child3:hover .something__subchild3, - .something__child3:hover .something__subchild4 { - font-size: 3em; - } - - .test .something__child3 .something__subchild5, - .test .something__child3 .something__subchild6 { - font-size: 3em; - } - } - } - - @include assert('multiple elements, nested, modifier in-between') { /// 13 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child1', 'child2') { - font-size: 2em; - - @include iro-bem-modifier('mod') { - @include iro-bem-element('subchild1') { - font-size: 3em; - } - } - } - - @include iro-bem-element('child3') { - font-size: 2em; - - @include iro-bem-modifier('mod') { - @include iro-bem-element('subchild2', 'subchild3') { - font-size: 3em; - } - } - } - } - } - - @include expect { - .something__child1, - .something__child2 { - font-size: 2em; - } - - .something__child1--mod .something__subchild1, - .something__child2--mod .something__subchild1 { - font-size: 3em; - } - - .something__child3 { - font-size: 2em; - } - - .something__child3--mod .something__subchild2, - .something__child3--mod .something__subchild3 { - font-size: 3em; - } - } - } - - @include assert('multiple elements, in at-theme') { /// 14 /// - @include output(false) { - @include iro-bem-block('something') { - @include iro-bem-at-theme('dark') { - @include iro-bem-element('child1', 'child2') { - font-size: 2em; - } - } - } - } - - @include expect(false) { - .t-dark .something__child1, - [class*=' t-'] .t-dark .something__child1, - [class^='t-'] .t-dark .something__child1, - .t-dark .something__child2, - [class*=' t-'] .t-dark .something__child2, - [class^='t-'] .t-dark .something__child2 { - font-size: 2em; - } - } - } -} diff --git a/test/bem/_iro-bem-modifier.scss b/test/bem/_iro-bem-modifier.scss deleted file mode 100644 index 60e2fe4..0000000 --- a/test/bem/_iro-bem-modifier.scss +++ /dev/null @@ -1,654 +0,0 @@ -// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations - -// -// Included test cases: -// - /// 1 /// - block modifier -// - /// 2 /// - block modifier, in at-theme -// - /// 3 /// - element modifier, single element -// - /// 4 /// - element modifier, multiple elements -// - /// 5 /// - element modifier, single related element -// - /// 6 /// - element modifier, multiple related elements -// - /// 7 /// - element modifier, single element, manual selector before -// - /// 8 /// - element modifier, multiple elements, manual selector before -// - /// 9 /// - element modifier, single related element, manual selector before -// - /// 10 /// - element modifier, multiple related elements, manual selector before -// - /// 11 /// - element modifier, in at-theme -// - /// 12 /// - nested block modifiers, extending -// - /// 13 /// - nested element modifiers, extending -// - /// 14 /// - block and element modifiers, single element -// - /// 15 /// - block and element modifiers, multiple elements -// - -@include it('iro-bem-modifier') { - @include assert('block modifier') { /// 1 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-modifier('mod') { - font-size: 1.5em; - - @include iro-bem-modifier('submod') { - font-size: 1.75em; - } - } - } - } - - @include expect { - .something--mod { - font-size: 1.5em; - } - - .something--mod.something--submod { - font-size: 1.75em; - } - } - } - - @include assert('block modifier, in at-theme') { /// 2 /// - @include output(false) { - @include iro-bem-block('something') { - @include iro-bem-at-theme('dark') { - @include iro-bem-modifier('mod') { - font-size: 1.5em; - - @include iro-bem-modifier('submod') { - font-size: 1.75em; - } - } - } - } - } - - @include expect(false) { - .t-dark .something--mod, - [class*=' t-'] .t-dark .something--mod, - [class^='t-'] .t-dark .something--mod { - font-size: 1.5em; - } - - .t-dark .something--mod.something--submod, - [class*=' t-'] .t-dark .something--mod.something--submod, - [class^='t-'] .t-dark .something--mod.something--submod { - font-size: 1.75em; - } - } - } - - @include assert('element modifier, single element') { /// 3 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child') { - @include iro-bem-modifier('mod') { - font-size: 2.5em; - - @include iro-bem-modifier('submod') { - font-size: 2.75em; - } - } - } - } - } - - @include expect { - .something__child--mod { - font-size: 2.5em; - } - - .something__child--mod.something__child--submod { - font-size: 2.75em; - } - } - } - - @include assert('element modifier, multiple elements') { /// 4 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child1', 'child2') { - @include iro-bem-modifier('mod') { - font-size: 2.5em; - - @include iro-bem-modifier('submod') { - font-size: 2.75em; - } - } - } - } - } - - @include expect { - .something__child1--mod, - .something__child2--mod { - font-size: 2.5em; - } - - .something__child1--mod.something__child1--submod, - .something__child2--mod.something__child2--submod { - font-size: 2.75em; - } - } - } - - @include assert('element modifier, single related element') { /// 5 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child1') { - @include iro-bem-next-element('child2') { - @include iro-bem-modifier('mod') { - font-size: 2.5em; - - @include iro-bem-modifier('submod') { - font-size: 2.75em; - } - } - } - } - } - } - - @include expect { - .something__child1 + .something__child2--mod { - font-size: 2.5em; - } - - .something__child1 + .something__child2--mod.something__child2--submod { - font-size: 2.75em; - } - } - } - - @include assert('element modifier, multiple related elements') { /// 6 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child1') { - @include iro-bem-next-element('child2', 'child3') { - @include iro-bem-modifier('mod') { - font-size: 2.5em; - - @include iro-bem-modifier('submod') { - font-size: 2.75em; - } - } - } - } - } - } - - @include expect { - .something__child1 + .something__child2--mod, - .something__child1 + .something__child3--mod { - font-size: 2.5em; - } - - .something__child1 + .something__child2--mod.something__child2--submod, - .something__child1 + .something__child3--mod.something__child3--submod { - font-size: 2.75em; - } - } - } - - @include assert('element modifier, single element, manual selector before') { /// 7 /// - @include output(false) { - @include iro-bem-block('something') { - &:hover { - @include iro-bem-element('child1') { - @include iro-bem-modifier('mod') { - font-size: 2.5em; - - @include iro-bem-modifier('submod') { - font-size: 2.75em; - } - } - } - } - - .test & { - @include iro-bem-element('child2') { - @include iro-bem-modifier('mod') { - font-size: 2.5em; - - @include iro-bem-modifier('submod') { - font-size: 2.75em; - } - } - } - } - } - } - - @include expect(false) { - .something:hover .something__child1--mod { - font-size: 2.5em; - } - - .something:hover .something__child1--mod.something__child1--submod { - font-size: 2.75em; - } - - .test .something__child2--mod { - font-size: 2.5em; - } - - .test .something__child2--mod.something__child2--submod { - font-size: 2.75em; - } - } - } - - @include assert('element modifier, multiple elements, manual selector before') { /// 8 /// - @include output(false) { - @include iro-bem-block('something') { - &:hover { - @include iro-bem-element('child1', 'child2') { - @include iro-bem-modifier('mod') { - font-size: 2.5em; - - @include iro-bem-modifier('submod') { - font-size: 2.75em; - } - } - } - } - - .test & { - @include iro-bem-element('child3', 'child4') { - @include iro-bem-modifier('mod') { - font-size: 2.5em; - - @include iro-bem-modifier('submod') { - font-size: 2.75em; - } - } - } - } - } - } - - @include expect(false) { - .something:hover .something__child1--mod, - .something:hover .something__child2--mod { - font-size: 2.5em; - } - - .something:hover .something__child1--mod.something__child1--submod, - .something:hover .something__child2--mod.something__child2--submod { - font-size: 2.75em; - } - - .test .something__child3--mod, - .test .something__child4--mod { - font-size: 2.5em; - } - - .test .something__child3--mod.something__child3--submod, - .test .something__child4--mod.something__child4--submod { - font-size: 2.75em; - } - } - } - - @include assert('element modifier, single related element, manual selector before') { /// 9 /// - @include output(false) { - @include iro-bem-block('something') { - &:hover { - @include iro-bem-element('child1') { - @include iro-bem-next-element('child2') { - @include iro-bem-modifier('mod1') { - font-size: 2.5em; - - @include iro-bem-modifier('submod1') { - font-size: 2.75em; - } - } - } - } - } - - .test & { - @include iro-bem-element('child3') { - @include iro-bem-next-element('child4') { - @include iro-bem-modifier('mod1') { - font-size: 2.5em; - - @include iro-bem-modifier('submod1') { - font-size: 2.75em; - } - } - } - } - } - - @include iro-bem-element('child5') { - &:hover { - @include iro-bem-next-element('child6') { - @include iro-bem-modifier('mod2') { - font-size: 2.5em; - - @include iro-bem-modifier('submod2') { - font-size: 2.75em; - } - } - } - } - - .test & { - @include iro-bem-next-element('child7') { - @include iro-bem-modifier('mod2') { - font-size: 2.5em; - - @include iro-bem-modifier('submod2') { - font-size: 2.75em; - } - } - } - } - } - } - } - - @include expect(false) { - .something:hover .something__child1 + .something__child2--mod1 { - font-size: 2.5em; - } - - .something:hover .something__child1 + .something__child2--mod1.something__child2--submod1 { - font-size: 2.75em; - } - - .test .something__child3 + .something__child4--mod1 { - font-size: 2.5em; - } - - .test .something__child3 + .something__child4--mod1.something__child4--submod1 { - font-size: 2.75em; - } - - .something__child5:hover + .something__child6--mod2 { - font-size: 2.5em; - } - - .something__child5:hover + .something__child6--mod2.something__child6--submod2 { - font-size: 2.75em; - } - - .test .something__child5 + .something__child7--mod2 { - font-size: 2.5em; - } - - .test .something__child5 + .something__child7--mod2.something__child7--submod2 { - font-size: 2.75em; - } - } - } - - @include assert('element modifier, multiple related elements, manual selector before') { /// 10 /// - @include output(false) { - @include iro-bem-block('something') { - &:hover { - @include iro-bem-element('child1') { - @include iro-bem-next-element('child2', 'child3') { - @include iro-bem-modifier('mod1') { - font-size: 2.5em; - - @include iro-bem-modifier('submod1') { - font-size: 2.75em; - } - } - } - } - } - - .test & { - @include iro-bem-element('child4') { - @include iro-bem-next-element('child5', 'child6') { - @include iro-bem-modifier('mod1') { - font-size: 2.5em; - - @include iro-bem-modifier('submod1') { - font-size: 2.75em; - } - } - } - } - } - - @include iro-bem-element('child7') { - &:hover { - @include iro-bem-next-element('child8', 'child9') { - @include iro-bem-modifier('mod2') { - font-size: 2.5em; - - @include iro-bem-modifier('submod2') { - font-size: 2.75em; - } - } - } - } - - .test & { - @include iro-bem-next-element('child10', 'child11') { - @include iro-bem-modifier('mod2') { - font-size: 2.5em; - - @include iro-bem-modifier('submod2') { - font-size: 2.75em; - } - } - } - } - } - } - } - - @include expect(false) { - .something:hover .something__child1 + .something__child2--mod1, - .something:hover .something__child1 + .something__child3--mod1 { - font-size: 2.5em; - } - - .something:hover .something__child1 + .something__child2--mod1.something__child2--submod1, - .something:hover .something__child1 + .something__child3--mod1.something__child3--submod1 { - font-size: 2.75em; - } - - .test .something__child4 + .something__child5--mod1, - .test .something__child4 + .something__child6--mod1 { - font-size: 2.5em; - } - - .test .something__child4 + .something__child5--mod1.something__child5--submod1, - .test .something__child4 + .something__child6--mod1.something__child6--submod1 { - font-size: 2.75em; - } - - .something__child7:hover + .something__child8--mod2, - .something__child7:hover + .something__child9--mod2 { - font-size: 2.5em; - } - - .something__child7:hover + .something__child8--mod2.something__child8--submod2, - .something__child7:hover + .something__child9--mod2.something__child9--submod2 { - font-size: 2.75em; - } - - .test .something__child7 + .something__child10--mod2, - .test .something__child7 + .something__child11--mod2 { - font-size: 2.5em; - } - - .test .something__child7 + .something__child10--mod2.something__child10--submod2, - .test .something__child7 + .something__child11--mod2.something__child11--submod2 { - font-size: 2.75em; - } - } - } - - /* - @include assert('element modifier, in at-theme') { /// 11 /// - @include output(false) { - @include iro-bem-block('something') { - @include iro-bem-at-theme('dark') { - @include iro-bem-element('child') { - @include iro-bem-modifier('mod') { - font-size: 2.5em; - - @include iro-bem-modifier('submod') { - font-size: 2.75em; - } - } - } - } - } - } - - @include expect(false) { - .t-dark .something__child--mod, - [class*=' t-'] .t-dark .something__child--mod, - [class^='t-'] .t-dark .something__child--mod { - font-size: 2.5em; - } - - .t-dark .something__child--mod.something__child--submod, - [class*=' t-'] .t-dark .something__child--mod.something__child--submod, - [class^='t-'] .t-dark .something__child--mod.something__child--submod { - font-size: 2.75em; - } - } - } - */ - - @include assert('nested block modifiers, extending') { /// 12 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-modifier('mod') { - font-size: 1.5em; - - @include iro-bem-modifier('submod' true) { - font-size: 1.75em; - } - } - } - } - - @include expect { - .something--mod { - font-size: 1.5em; - } - - .something--mod--submod { - font-size: 1.75em; - } - } - } - - @include assert('nested element modifiers, extending') { /// 13 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child') { - @include iro-bem-modifier('mod') { - font-size: 2.5em; - - @include iro-bem-modifier('submod' true) { - font-size: 2.75em; - } - } - } - } - } - - @include expect { - .something__child--mod { - font-size: 2.5em; - } - - .something__child--mod--submod { - font-size: 2.75em; - } - } - } - - @include assert('block and element modifiers, single element') { /// 14 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-modifier('mod1') { - font-size: 1.5em; - - @include iro-bem-modifier('submod1') { - font-size: 1.75em; - } - - @include iro-bem-element('child') { - @include iro-bem-modifier('mod2') { - font-size: 2.5em; - - @include iro-bem-modifier('submod2') { - font-size: 2.75em; - } - } - } - } - } - } - - @include expect { - .something--mod1 { - font-size: 1.5em; - } - - .something--mod1.something--submod1 { - font-size: 1.75em; - } - - .something--mod1 .something__child--mod2 { - font-size: 2.5em; - } - - .something--mod1 .something__child--mod2.something__child--submod2 { - font-size: 2.75em; - } - } - } - - @include assert('block and element modifiers, multiple elements') { /// 15 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-modifier('mod1') { - font-size: 1.5em; - - @include iro-bem-modifier('submod') { - font-size: 1.75em; - } - - @include iro-bem-element('child1', 'child2') { - @include iro-bem-modifier('mod2') { - font-size: 2.5em; - - @include iro-bem-modifier('submod2') { - font-size: 2.75em; - } - } - } - } - } - } - - @include expect { - .something--mod1 { - font-size: 1.5em; - } - - .something--mod1.something--submod1 { - font-size: 1.75em; - } - - .something--mod1 .something__child1--mod2, - .something--mod1 .something__child2--mod2 { - font-size: 2.5em; - } - - .something--mod1 .something__child1--mod2.something__child1--submod2, - .something--mod1 .something__child2--mod2.something__child2--submod2 { - font-size: 2.75em; - } - } - } -} diff --git a/test/bem/_iro-bem-multi.scss b/test/bem/_iro-bem-multi.scss deleted file mode 100644 index 84bbca2..0000000 --- a/test/bem/_iro-bem-multi.scss +++ /dev/null @@ -1,591 +0,0 @@ -// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations - -// -// Included test cases: -// - /// 1 /// - in root, 2 blocks -// - /// 2 /// - in root, 1 block, 1 manual selector -// - /// 3 /// - in block, 2 elements -// - /// 4 /// - in block, 1 element, 1 modifier -// - /// 5 /// - in block, 1 element, 1 extending modifier -// - /// 6 /// - in block, 1 element, 1 & selector -// - /// 7 /// - in block, 1 element, 1 manual selector -// - /// 8 /// - in element, 2 elements, 1 modifier -// - /// 9 /// - in element, 1 element, 1 & selector -// - /// 10 /// - in element in manual selector, 2 elements -// - /// 11 /// - in element in manual selector, 1 element, 1 & selector -// - /// 12 /// - in multiple elements, 2 elements, 1 modifier -// - /// 13 /// - in multiple elements, 1 element, 1 & selector -// - /// 14 /// - in related elements, 2 elements, 1 modifier -// - /// 15 /// - in related elements, 1 element, 1 & selector -// - /// 16 /// - in element, 2 related elements, 1 modifier -// - /// 17 /// - in element, 1 twin element, 1 modifier -// - /// 18 /// - in multiple elements, 1 twin element, 1 modifier -// - -@include it('iro-bem-state') { - @include assert('in root, 2 blocks') { /// 1 /// - @include output { - @include iro-bem-multi('component:' 'block1', 'object:' 'block2') { - font-size: 1em; - - @include iro-bem-element('child2') { - font-size: 2em; - } - } - } - - @include expect { - .c-block1 { - font-size: 1em; - } - - .c-block1__child2 { - font-size: 2em; - } - - .o-block2 { - font-size: 1em; - } - - .o-block2__child2 { - font-size: 2em; - } - } - } - - @include assert('in root, 1 block, 1 manual selector') { /// 2 /// - @include output { - @include iro-bem-multi('component:' 'block1', 'a:hover') { - font-size: 1em; - } - } - - @include expect { - .c-block1 { - font-size: 1em; - } - - a:hover { - font-size: 1em; - } - } - } - - @include assert('in block, 2 elements') { /// 3 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-multi('element:' 'child1' 'child2') { - font-size: 2em; - - @include iro-bem-modifier('mod') { - font-size: 2.5em; - } - } - } - } - - @include expect { - .something__child1, - .something__child2 { - font-size: 2em; - } - - .something__child1--mod, - .something__child2--mod { - font-size: 2.5em; - } - } - } - - @include assert('in block, 1 element, 1 modifier') { /// 4 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-multi('element:' 'child', 'modifier:' 'mod1') { - font-size: 2em; - - @include iro-bem-modifier('mod2') { - font-size: 2.5em; - } - } - } - } - - @include expect { - .something__child { - font-size: 2em; - } - - .something__child--mod2 { - font-size: 2.5em; - } - - .something--mod1 { - font-size: 2em; - } - - .something--mod1.something--mod2 { - font-size: 2.5em; - } - } - } - - @include assert('in block, 1 element, 1 extending modifier') { /// 5 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-multi('element:' 'child', 'modifier:' 'mod1') { - font-size: 2em; - - @include iro-bem-modifier('mod2' true) { - font-size: 2.5em; - } - } - } - } - - @include expect { - .something__child { - font-size: 2em; - } - - .something__child--mod2 { - font-size: 2.5em; - } - - .something--mod1 { - font-size: 2em; - } - - .something--mod1--mod2 { - font-size: 2.5em; - } - } - } - - @include assert('in block, 1 element, 1 & selector') { /// 6 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-multi('&', 'element:' 'child') { - font-size: 2em; - - @include iro-bem-modifier('mod') { - font-size: 2.5em; - } - } - } - } - - @include expect { - .something { - font-size: 2em; - } - - .something--mod { - font-size: 2.5em; - } - - .something__child { - font-size: 2em; - } - - .something__child--mod { - font-size: 2.5em; - } - } - } - - @include assert('in block, 1 element, 1 manual selector') { /// 7 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-multi('> a:hover', 'element:' 'child1') { - font-size: 2em; - - @include iro-bem-element('child2') { - font-size: 3em; - } - } - } - } - - @include expect { - .something > a:hover { - font-size: 2em; - } - - .something > a:hover .something__child2 { - font-size: 3em; - } - - .something__child1 { - font-size: 2em; - } - - .something__child1 .something__child2 { - font-size: 3em; - } - } - } - - @include assert('in element, 2 elements, 1 modifier') { /// 8 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child') { - @include iro-bem-multi('element:' 'subchild1' 'subchild2', 'modifier:' 'mod1') { - font-size: 3em; - - @include iro-bem-modifier('mod2') { - font-size: 3.5em; - } - } - } - } - } - - @include expect { - .something__child .something__subchild1, - .something__child .something__subchild2 { - font-size: 3em; - } - - .something__child .something__subchild1--mod2, - .something__child .something__subchild2--mod2 { - font-size: 3.5em; - } - - .something__child--mod1 { - font-size: 3em; - } - - .something__child--mod1.something__child--mod2 { - font-size: 3.5em; - } - } - } - - @include assert('in element, 1 element, 1 & selector') { /// 9 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child') { - @include iro-bem-multi('element:' 'subchild', '&') { - font-size: 3em; - - @include iro-bem-modifier('mod') { - font-size: 3.5em; - } - } - } - } - } - - @include expect { - .something__child .something__subchild { - font-size: 3em; - } - - .something__child .something__subchild--mod { - font-size: 3.5em; - } - - .something__child { - font-size: 3em; - } - - .something__child--mod { - font-size: 3.5em; - } - } - } - - @include assert('in element in manual selector, 2 elements') { /// 10 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child') { - &:hover { - @include iro-bem-multi('element:' 'subchild1' 'subchild2') { - font-size: 3em; - - @include iro-bem-modifier('mod2') { - font-size: 3.5em; - } - } - } - } - } - } - - @include expect { - .something__child:hover .something__subchild1, - .something__child:hover .something__subchild2 { - font-size: 3em; - } - - .something__child:hover .something__subchild1--mod2, - .something__child:hover .something__subchild2--mod2 { - font-size: 3.5em; - } - } - } - - @include assert('in element in manual selector, 1 element, 1 & selector') { /// 11 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child') { - &:hover { - @include iro-bem-multi('element:' 'subchild', '&') { - font-size: 3em; - } - } - } - } - } - - @include expect { - .something__child:hover .something__subchild { - font-size: 3em; - } - - .something__child:hover { - font-size: 3em; - } - } - } - - @include assert('in multiple elements, 2 elements, 1 modifier') { /// 12 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child1', 'child2') { - @include iro-bem-multi('element:' 'subchild1' 'subchild2', 'modifier:' 'mod') { - font-size: 3em; - } - } - } - } - - @include expect { - .something__child1 .something__subchild1, - .something__child2 .something__subchild1, - .something__child1 .something__subchild2, - .something__child2 .something__subchild2 { - font-size: 3em; - } - - .something__child1--mod, - .something__child2--mod { - font-size: 3em; - } - } - } - - @include assert('in multiple elements, 1 element, 1 & selector') { /// 13 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child1', 'child2') { - @include iro-bem-multi('element:' 'subchild', '&') { - font-size: 3em; - - @include iro-bem-modifier('mod') { - font-size: 3.5em; - } - } - } - } - } - - @include expect { - .something__child1 .something__subchild, - .something__child2 .something__subchild { - font-size: 3em; - } - - .something__child1 .something__subchild--mod, - .something__child2 .something__subchild--mod { - font-size: 3.5em; - } - - .something__child1, - .something__child2 { - font-size: 3em; - } - - .something__child1--mod, - .something__child2--mod { - font-size: 3.5em; - } - } - } - - @include assert('in related elements, 2 elements, 1 modifier') { /// 14 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child1') { - @include iro-bem-next-element('child2', 'child3') { - @include iro-bem-multi('element:' 'subchild1' 'subchild2', 'modifier:' 'mod') { - font-size: 3em; - } - } - } - } - } - - @include expect { - .something__child1 + .something__child2 .something__subchild1, - .something__child1 + .something__child3 .something__subchild1, - .something__child1 + .something__child2 .something__subchild2, - .something__child1 + .something__child3 .something__subchild2 { - font-size: 3em; - } - - .something__child1 + .something__child2--mod, - .something__child1 + .something__child3--mod { - font-size: 3em; - } - } - } - - @include assert('in related elements, 1 element, 1 & selector') { /// 15 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child1') { - @include iro-bem-next-element('child2', 'child3') { - @include iro-bem-multi('element:' 'subchild', '&') { - font-size: 4em; - - @include iro-bem-modifier('mod') { - font-size: 4.5em; - } - } - } - } - } - } - - @include expect { - .something__child1 + .something__child2 .something__subchild, - .something__child1 + .something__child3 .something__subchild { - font-size: 4em; - } - - .something__child1 + .something__child2 .something__subchild--mod, - .something__child1 + .something__child3 .something__subchild--mod { - font-size: 4.5em; - } - - .something__child1 + .something__child2, - .something__child1 + .something__child3 { - font-size: 4em; - } - - .something__child1 + .something__child2--mod, - .something__child1 + .something__child3--mod { - font-size: 4.5em; - } - } - } - - @include assert('in element, 2 related elements, 1 modifier') { /// 16 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child1') { - @include iro-bem-multi('next-element:' 'child2' 'child3', 'modifier:' 'mod1') { - font-size: 3em; - - @include iro-bem-modifier('mod2') { - font-size: 3.5em; - } - } - } - } - } - - @include expect { - .something__child1 + .something__child2, - .something__child1 + .something__child3 { - font-size: 3em; - } - - .something__child1 + .something__child2--mod2, - .something__child1 + .something__child3--mod2 { - font-size: 3.5em; - } - - .something__child1--mod1 { - font-size: 3em; - } - - .something__child1--mod1.something__child1--mod2 { - font-size: 3.5em; - } - } - } - - @include assert('in element, 1 twin element, 1 modifier') { /// 17 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child') { - @include iro-bem-multi('next-twin-element', 'modifier:' 'mod1') { - font-size: 3em; - - @include iro-bem-modifier('mod2') { - font-size: 3.5em; - } - } - } - } - } - - @include expect { - .something__child + .something__child { - font-size: 3em; - } - - .something__child + .something__child--mod2 { - font-size: 3.5em; - } - - .something__child--mod1 { - font-size: 3em; - } - - .something__child--mod1.something__child--mod2 { - font-size: 3.5em; - } - } - } - - @include assert('in multiple elements, 1 twin element, 1 modifier') { /// 18 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child1', 'child2') { - @include iro-bem-multi('next-twin-element', 'modifier:' 'mod1') { - font-size: 3em; - - @include iro-bem-modifier('mod2') { - font-size: 3.5em; - } - } - } - } - } - - @include expect { - .something__child1 + .something__child1, - .something__child2 + .something__child2 { - font-size: 3em; - } - - .something__child1 + .something__child1--mod2, - .something__child2 + .something__child2--mod2 { - font-size: 3.5em; - } - - .something__child1--mod1, - .something__child2--mod1 { - font-size: 3em; - } - - .something__child1--mod1.something__child1--mod2, - .something__child2--mod1.something__child2--mod2 { - font-size: 3.5em; - } - } - } -} diff --git a/test/bem/_iro-bem-next-twin-element.scss b/test/bem/_iro-bem-next-twin-element.scss deleted file mode 100644 index 96fc3a9..0000000 --- a/test/bem/_iro-bem-next-twin-element.scss +++ /dev/null @@ -1,153 +0,0 @@ -// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations - -// -// Included test cases: -// - /// 1 /// - single element -// - /// 2 /// - single element, manual selector in-between -// - /// 3 /// - single element, modifier in-between -// - /// 4 /// - multiple elements -// - /// 5 /// - multiple elements, manual selector in-between -// - /// 6 /// - multiple elements, modifier in-between -// - -@include it('iro-bem-next-twin-element') { - @include assert('single element') { /// 1 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child') { - @include iro-bem-next-twin-element { - font-size: 2em; - } - } - } - } - - @include expect { - .something__child + .something__child { - font-size: 2em; - } - } - } - - @include assert('single element, manual selector in-between') { /// 2 /// - @include output(false) { - @include iro-bem-block('something') { - @include iro-bem-element('child') { - &:hover { - @include iro-bem-next-twin-element { - font-size: 2em; - } - } - - .test & { - @include iro-bem-next-twin-element { - font-size: 2em; - } - } - } - } - } - - @include expect(false) { - .something__child:hover + .something__child { - font-size: 2em; - } - - .test .something__child + .something__child { - font-size: 2em; - } - } - } - - @include assert('single element, modifier in-between') { /// 3 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child') { - @include iro-bem-modifier('mod') { - @include iro-bem-next-twin-element { - font-size: 2.5em; - } - } - } - } - } - - @include expect { - .something__child--mod + .something__child { - font-size: 2.5em; - } - } - } - - @include assert('multiple elements') { /// 4 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child1', 'child2') { - @include iro-bem-next-twin-element { - font-size: 2em; - } - } - } - } - - @include expect { - .something__child1 + .something__child1, - .something__child2 + .something__child2 { - font-size: 2em; - } - } - } - - @include assert('multiple elements, manual selector in-between') { /// 5 /// - @include output(false) { - @include iro-bem-block('something') { - @include iro-bem-element('child1', 'child2') { - &:hover { - @include iro-bem-next-twin-element { - font-size: 2em; - } - } - - .test & { - @include iro-bem-next-twin-element { - font-size: 2em; - } - } - } - } - } - - @include expect(false) { - .something__child1:hover + .something__child1, - .something__child2:hover + .something__child2 { - font-size: 2em; - } - - .test .something__child1 + .something__child1, - .test .something__child2 + .something__child2 { - font-size: 2em; - } - } - } - - @include assert('multiple elements, modifier in-between') { /// 6 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child1', 'child2') { - @include iro-bem-modifier('mod') { - @include iro-bem-next-twin-element { - font-size: 2.5em; - } - } - } - } - } - - @include expect { - .something__child1--mod + .something__child1, - .something__child2--mod + .something__child2 { - font-size: 2.5em; - } - } - } -} diff --git a/test/bem/_iro-bem-related-element.scss b/test/bem/_iro-bem-related-element.scss deleted file mode 100644 index b0c6b94..0000000 --- a/test/bem/_iro-bem-related-element.scss +++ /dev/null @@ -1,459 +0,0 @@ -// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations - -// -// Included test cases: -// - /// 1 /// - single element, single related element -// - /// 2 /// - single element, single related element, manual selector in-between -// - /// 3 /// - single element, single related element, modifier in-between -// - /// 4 /// - single element, multiple related elements -// - /// 5 /// - single element, multiple related elements, manual selector in-between -// - /// 6 /// - single element, multiple related elements, modifier in-between -// - /// 7 /// - multiple elements, single related element -// - /// 8 /// - multiple elements, single related element, manual selector in-between -// - /// 9 /// - multiple elements, single related element, modifier in-between -// - /// 10 /// - multiple elements, multiple related elements -// - /// 11 /// - multiple elements, multiple related elements, manual selector in-between -// - /// 12 /// - multiple elements, multiple related elements, modifier in-between -// - -@include it('iro-bem-related-element') { - @include assert('single element, single related element') { /// 1 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child') { - @include iro-bem-related-element('+', 'subchild1') { - font-size: 2em; - } - - @include iro-bem-related-element('~', 'subchild2') { - font-size: 2em; - } - } - } - } - - @include expect { - .something__child + .something__subchild1 { - font-size: 2em; - } - - .something__child ~ .something__subchild2 { - font-size: 2em; - } - } - } - - @include assert('single element, single related element, manual selector in-between') { /// 2 /// - @include output(false) { - @include iro-bem-block('something') { - @include iro-bem-element('child') { - &:hover { - @include iro-bem-related-element('+', 'subchild1') { - font-size: 2em; - } - - @include iro-bem-related-element('~', 'subchild2') { - font-size: 2em; - } - } - - .test & { - @include iro-bem-related-element('+', 'subchild3') { - font-size: 2em; - } - - @include iro-bem-related-element('~', 'subchild4') { - font-size: 2em; - } - } - } - } - } - - @include expect(false) { - .something__child:hover + .something__subchild1 { - font-size: 2em; - } - - .something__child:hover ~ .something__subchild2 { - font-size: 2em; - } - - .test .something__child + .something__subchild3 { - font-size: 2em; - } - - .test .something__child ~ .something__subchild4 { - font-size: 2em; - } - } - } - - @include assert('single element, single related element, modifier in-between') { /// 3 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child') { - @include iro-bem-modifier('mod') { - @include iro-bem-related-element('+', 'subchild1') { - font-size: 2.5em; - } - - @include iro-bem-related-element('~', 'subchild2') { - font-size: 2.5em; - } - } - } - } - } - - @include expect { - .something__child--mod + .something__subchild1 { - font-size: 2.5em; - } - - .something__child--mod ~ .something__subchild2 { - font-size: 2.5em; - } - } - } - - @include assert('single element, multiple related elements') { /// 4 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child') { - @include iro-bem-related-element('+', 'subchild1', 'subchild2') { - font-size: 2.5em; - } - - @include iro-bem-related-element('~', 'subchild3', 'subchild4') { - font-size: 2.5em; - } - } - } - } - - @include expect { - .something__child + .something__subchild1, - .something__child + .something__subchild2 { - font-size: 2.5em; - } - - .something__child ~ .something__subchild3, - .something__child ~ .something__subchild4 { - font-size: 2.5em; - } - } - } - - @include assert('single element, multiple related elements, manual selector in-between') { /// 5 /// - @include output(false) { - @include iro-bem-block('something') { - @include iro-bem-element('child') { - &:hover { - @include iro-bem-related-element('+', 'subchild1', 'subchild2') { - font-size: 2.5em; - } - - @include iro-bem-related-element('~', 'subchild3', 'subchild4') { - font-size: 2.5em; - } - } - - .test & { - @include iro-bem-related-element('+', 'subchild5', 'subchild6') { - font-size: 2.5em; - } - - @include iro-bem-related-element('~', 'subchild7', 'subchild8') { - font-size: 2.5em; - } - } - } - } - } - - @include expect(false) { - .something__child:hover + .something__subchild1, - .something__child:hover + .something__subchild2 { - font-size: 2.5em; - } - - .something__child:hover ~ .something__subchild3, - .something__child:hover ~ .something__subchild4 { - font-size: 2.5em; - } - - .test .something__child + .something__subchild5, - .test .something__child + .something__subchild6 { - font-size: 2.5em; - } - - .test .something__child ~ .something__subchild7, - .test .something__child ~ .something__subchild8 { - font-size: 2.5em; - } - } - } - - @include assert('single element, multiple related elements, modifier in-between') { /// 6 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child') { - @include iro-bem-modifier('mod') { - @include iro-bem-related-element('+', 'subchild1', 'subchild2') { - font-size: 2.5em; - } - - @include iro-bem-related-element('~', 'subchild3', 'subchild4') { - font-size: 2.5em; - } - } - } - } - } - - @include expect { - .something__child--mod + .something__subchild1, - .something__child--mod + .something__subchild2 { - font-size: 2.5em; - } - - .something__child--mod ~ .something__subchild3, - .something__child--mod ~ .something__subchild4 { - font-size: 2.5em; - } - } - } - - @include assert('multiple elements, single related element') { /// 7 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child1', 'child2') { - @include iro-bem-related-element('+', 'subchild1') { - font-size: 2em; - } - - @include iro-bem-related-element('~', 'subchild2') { - font-size: 2em; - } - } - } - } - - @include expect { - .something__child1 + .something__subchild1, - .something__child2 + .something__subchild1 { - font-size: 2em; - } - - .something__child1 ~ .something__subchild2, - .something__child2 ~ .something__subchild2 { - font-size: 2em; - } - } - } - - @include assert('multiple elements, single related element, manual selector in-between') { /// 8 /// - @include output(false) { - @include iro-bem-block('something') { - @include iro-bem-element('child1', 'child2') { - &:hover { - @include iro-bem-related-element('+', 'subchild1') { - font-size: 2em; - } - - @include iro-bem-related-element('~', 'subchild2') { - font-size: 2em; - } - } - - .test & { - @include iro-bem-related-element('+', 'subchild3') { - font-size: 2em; - } - - @include iro-bem-related-element('~', 'subchild4') { - font-size: 2em; - } - } - } - } - } - - @include expect(false) { - .something__child1:hover + .something__subchild1, - .something__child2:hover + .something__subchild1 { - font-size: 2em; - } - - .something__child1:hover ~ .something__subchild2, - .something__child2:hover ~ .something__subchild2 { - font-size: 2em; - } - - .test .something__child1 + .something__subchild3, - .test .something__child2 + .something__subchild3 { - font-size: 2em; - } - - .test .something__child1 ~ .something__subchild4, - .test .something__child2 ~ .something__subchild4 { - font-size: 2em; - } - } - } - - @include assert('multiple elements, single related element, modifier in-between') { /// 9 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child1', 'child2') { - @include iro-bem-modifier('mod') { - @include iro-bem-related-element('+', 'subchild1') { - font-size: 2.5em; - } - - @include iro-bem-related-element('~', 'subchild2') { - font-size: 2.5em; - } - } - } - } - } - - @include expect { - .something__child1--mod + .something__subchild1, - .something__child2--mod + .something__subchild1 { - font-size: 2.5em; - } - - .something__child1--mod ~ .something__subchild2, - .something__child2--mod ~ .something__subchild2 { - font-size: 2.5em; - } - } - } - - @include assert('multiple elements, multiple related elements') { /// 10 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child1', 'child2') { - @include iro-bem-related-element('+', 'subchild1', 'subchild2') { - font-size: 2em; - } - - @include iro-bem-related-element('~', 'subchild3', 'subchild4') { - font-size: 2em; - } - } - } - } - - @include expect { - .something__child1 + .something__subchild1, - .something__child2 + .something__subchild1, - .something__child1 + .something__subchild2, - .something__child2 + .something__subchild2 { - font-size: 2em; - } - - .something__child1 ~ .something__subchild3, - .something__child2 ~ .something__subchild3, - .something__child1 ~ .something__subchild4, - .something__child2 ~ .something__subchild4 { - font-size: 2em; - } - } - } - - @include assert('multiple elements, multiple related elements, manual selector in-between') { /// 11 /// - @include output(false) { - @include iro-bem-block('something') { - @include iro-bem-element('child1', 'child2') { - &:hover { - @include iro-bem-related-element('+', 'subchild1', 'subchild2') { - font-size: 2em; - } - - @include iro-bem-related-element('~', 'subchild3', 'subchild4') { - font-size: 2em; - } - } - - .test & { - @include iro-bem-related-element('+', 'subchild5', 'subchild6') { - font-size: 2em; - } - - @include iro-bem-related-element('~', 'subchild7', 'subchild8') { - font-size: 2em; - } - } - } - } - } - - @include expect(false) { - .something__child1:hover + .something__subchild1, - .something__child2:hover + .something__subchild1, - .something__child1:hover + .something__subchild2, - .something__child2:hover + .something__subchild2 { - font-size: 2em; - } - - .something__child1:hover ~ .something__subchild3, - .something__child2:hover ~ .something__subchild3, - .something__child1:hover ~ .something__subchild4, - .something__child2:hover ~ .something__subchild4 { - font-size: 2em; - } - - .test .something__child1 + .something__subchild5, - .test .something__child2 + .something__subchild5, - .test .something__child1 + .something__subchild6, - .test .something__child2 + .something__subchild6 { - font-size: 2em; - } - - .test .something__child1 ~ .something__subchild7, - .test .something__child2 ~ .something__subchild7, - .test .something__child1 ~ .something__subchild8, - .test .something__child2 ~ .something__subchild8 { - font-size: 2em; - } - } - } - - @include assert('multiple elements, multiple related elements, modifier in-between') { /// 12 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child1', 'child2') { - @include iro-bem-modifier('mod') { - @include iro-bem-related-element('+', 'subchild1', 'subchild2') { - font-size: 2em; - } - - @include iro-bem-related-element('~', 'subchild3', 'subchild4') { - font-size: 2em; - } - } - } - } - } - - @include expect { - .something__child1--mod + .something__subchild1, - .something__child2--mod + .something__subchild1, - .something__child1--mod + .something__subchild2, - .something__child2--mod + .something__subchild2 { - font-size: 2em; - } - - .something__child1--mod ~ .something__subchild3, - .something__child2--mod ~ .something__subchild3, - .something__child1--mod ~ .something__subchild4, - .something__child2--mod ~ .something__subchild4 { - font-size: 2em; - } - } - } -} diff --git a/test/bem/_iro-bem-state.scss b/test/bem/_iro-bem-state.scss deleted file mode 100644 index 57eb233..0000000 --- a/test/bem/_iro-bem-state.scss +++ /dev/null @@ -1,177 +0,0 @@ -// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations - -// -// Included test cases: -// - /// 1 /// - single block, single state -// - /// 2 /// - single element, single state -// - /// 3 /// - single block, multiple states -// - /// 4 /// - single element, multiple states -// - /// 5 /// - multiple elements, single state -// - /// 6 /// - multiple elements, multiple states -// - -@include it('iro-bem-state') { - @include assert('single block, single state') { /// 1 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-is('active') { - font-size: 1.25em; - } - - @include iro-bem-has('state') { - font-size: 1.75em; - } - } - } - - @include expect { - .something.is-active { - font-size: 1.25em; - } - - .something.has-state { - font-size: 1.75em; - } - } - } - - @include assert('single element, single state') { /// 2 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child') { - @include iro-bem-is('active') { - font-size: 2.25em; - } - - @include iro-bem-has('state') { - font-size: 2.75em; - } - } - } - } - - @include expect { - .something__child.is-active { - font-size: 2.25em; - } - - .something__child.has-state { - font-size: 2.75em; - } - } - } - - @include assert('single block, multiple states') { /// 3 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-is('active', 'primary') { - font-size: 1.25em; - } - - @include iro-bem-has('state', 'indicator') { - font-size: 1.75em; - } - } - } - - @include expect { - .something.is-active, - .something.is-primary { - font-size: 1.25em; - } - - .something.has-state, - .something.has-indicator { - font-size: 1.75em; - } - } - } - - @include assert('single element, multiple states') { /// 4 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child') { - @include iro-bem-is('active', 'primary') { - font-size: 2.25em; - } - - @include iro-bem-has('state', 'indicator') { - font-size: 2.75em; - } - } - } - } - - @include expect { - .something__child.is-active, - .something__child.is-primary { - font-size: 2.25em; - } - - .something__child.has-state, - .something__child.has-indicator { - font-size: 2.75em; - } - } - } - - @include assert('multiple elements, single state') { /// 5 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child1', 'child2') { - @include iro-bem-is('active') { - font-size: 2.25em; - } - - @include iro-bem-has('state') { - font-size: 2.75em; - } - } - } - } - - @include expect { - .something__child1.is-active, - .something__child2.is-active { - font-size: 2.25em; - } - - .something__child1.has-state, - .something__child2.has-state { - font-size: 2.75em; - } - } - } - - @include assert('multiple elements, multiple states') { /// 6 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child1', 'child2') { - @include iro-bem-is('active', 'primary') { - font-size: 2.25em; - } - - @include iro-bem-has('state', 'indicator') { - font-size: 2.75em; - } - } - } - } - - @include expect { - .something__child1.is-active, - .something__child2.is-active, - .something__child1.is-primary, - .something__child2.is-primary { - font-size: 2.25em; - } - - .something__child1.has-state, - .something__child2.has-state, - .something__child1.has-indicator, - .something__child2.has-indicator { - font-size: 2.75em; - } - } - } -} diff --git a/test/bem/_iro-bem-suffix.scss b/test/bem/_iro-bem-suffix.scss deleted file mode 100644 index c6ca787..0000000 --- a/test/bem/_iro-bem-suffix.scss +++ /dev/null @@ -1,94 +0,0 @@ -// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations - -// -// Included test cases: -// - /// 1 /// - block suffix -// - /// 2 /// - element suffix -// - /// 3 /// - modifier suffix -// - /// 4 /// - multiple element suffix -// - -@include it('iro-bem-suffix') { - @include assert('block suffix') { /// 1 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-suffix('sm') { - font-size: 1.5em; - } - } - } - - @include expect { - .something\@sm { - font-size: 1.5em; - } - } - } - - @include assert('element suffix') { /// 2 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child') { - @include iro-bem-suffix('sm') { - font-size: 2.5em; - } - } - } - } - - @include expect { - .something__child\@sm { - font-size: 2.5em; - } - } - } - - @include assert('modifier suffix') { /// 3 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-modifier('mod1') { - @include iro-bem-suffix('sm') { - font-size: 1.75em; - } - } - - @include iro-bem-element('child') { - @include iro-bem-modifier('mod2') { - @include iro-bem-suffix('sm') { - font-size: 2.75em; - } - } - } - } - } - - @include expect { - .something--mod1\@sm { - font-size: 1.75em; - } - - .something__child--mod2\@sm { - font-size: 2.75em; - } - } - } - - @include assert('multiple element suffix') { /// 4 /// - @include output { - @include iro-bem-block('something') { - @include iro-bem-element('child1', 'child2') { - @include iro-bem-suffix('sm') { - font-size: 2.5em; - } - } - } - } - - @include expect { - .something__child1\@sm, - .something__child2\@sm { - font-size: 2.5em; - } - } - } -} diff --git a/test/bem/_modifier.scss b/test/bem/_modifier.scss new file mode 100644 index 0000000..934efa3 --- /dev/null +++ b/test/bem/_modifier.scss @@ -0,0 +1,655 @@ +// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations + +@use 'true' as *; +@use '../../src/bem'; + +// +// Included test cases: +// - /// 1 /// - block modifier +// - /// 2 /// - block modifier, in at-theme +// - /// 3 /// - element modifier, single element +// - /// 4 /// - element modifier, multiple elements +// - /// 5 /// - element modifier, single related element +// - /// 6 /// - element modifier, multiple related elements +// - /// 7 /// - element modifier, single element, manual selector before +// - /// 8 /// - element modifier, multiple elements, manual selector before +// - /// 9 /// - element modifier, single related element, manual selector before +// - /// 10 /// - element modifier, multiple related elements, manual selector before +// - /// 11 /// - element modifier, in at-theme +// - /// 12 /// - nested block modifiers, extending +// - /// 13 /// - nested element modifiers, extending +// - /// 14 /// - block and element modifiers, single element +// - /// 15 /// - block and element modifiers, multiple elements +// + +@include it('modifier') { + @include assert('block modifier') { /// 1 /// + @include output { + @include bem.block('something') { + @include bem.modifier('mod') { + font-size: 1.5em; + + @include bem.modifier('submod') { + font-size: 1.75em; + } + } + } + } + + @include expect { + .something--mod { + font-size: 1.5em; + } + + .something--mod.something--submod { + font-size: 1.75em; + } + } + } + + @include assert('block modifier, in at-theme') { /// 2 /// + @include output(false) { + @include bem.block('something') { + @include bem.at-theme('dark') { + @include bem.modifier('mod') { + font-size: 1.5em; + + @include bem.modifier('submod') { + font-size: 1.75em; + } + } + } + } + } + + @include expect(false) { + .t-dark .something--mod, + [class*=' t-'] .t-dark .something--mod, + [class^='t-'] .t-dark .something--mod { + font-size: 1.5em; + } + + .t-dark .something--mod.something--submod, + [class*=' t-'] .t-dark .something--mod.something--submod, + [class^='t-'] .t-dark .something--mod.something--submod { + font-size: 1.75em; + } + } + } + + @include assert('element modifier, single element') { /// 3 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.modifier('mod') { + font-size: 2.5em; + + @include bem.modifier('submod') { + font-size: 2.75em; + } + } + } + } + } + + @include expect { + .something__child--mod { + font-size: 2.5em; + } + + .something__child--mod.something__child--submod { + font-size: 2.75em; + } + } + } + + @include assert('element modifier, multiple elements') { /// 4 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.modifier('mod') { + font-size: 2.5em; + + @include bem.modifier('submod') { + font-size: 2.75em; + } + } + } + } + } + + @include expect { + .something__child1--mod, + .something__child2--mod { + font-size: 2.5em; + } + + .something__child1--mod.something__child1--submod, + .something__child2--mod.something__child2--submod { + font-size: 2.75em; + } + } + } + + @include assert('element modifier, single related element') { /// 5 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1') { + @include bem.next-elem('child2') { + @include bem.modifier('mod') { + font-size: 2.5em; + + @include bem.modifier('submod') { + font-size: 2.75em; + } + } + } + } + } + } + + @include expect { + .something__child1 + .something__child2--mod { + font-size: 2.5em; + } + + .something__child1 + .something__child2--mod.something__child2--submod { + font-size: 2.75em; + } + } + } + + @include assert('element modifier, multiple related elements') { /// 6 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1') { + @include bem.next-elem('child2', 'child3') { + @include bem.modifier('mod') { + font-size: 2.5em; + + @include bem.modifier('submod') { + font-size: 2.75em; + } + } + } + } + } + } + + @include expect { + .something__child1 + .something__child2--mod, + .something__child1 + .something__child3--mod { + font-size: 2.5em; + } + + .something__child1 + .something__child2--mod.something__child2--submod, + .something__child1 + .something__child3--mod.something__child3--submod { + font-size: 2.75em; + } + } + } + + @include assert('element modifier, single element, manual selector before') { /// 7 /// + @include output(false) { + @include bem.block('something') { + &:hover { + @include bem.elem('child1') { + @include bem.modifier('mod') { + font-size: 2.5em; + + @include bem.modifier('submod') { + font-size: 2.75em; + } + } + } + } + + .test & { + @include bem.elem('child2') { + @include bem.modifier('mod') { + font-size: 2.5em; + + @include bem.modifier('submod') { + font-size: 2.75em; + } + } + } + } + } + } + + @include expect(false) { + .something:hover .something__child1--mod { + font-size: 2.5em; + } + + .something:hover .something__child1--mod.something__child1--submod { + font-size: 2.75em; + } + + .test .something__child2--mod { + font-size: 2.5em; + } + + .test .something__child2--mod.something__child2--submod { + font-size: 2.75em; + } + } + } + + @include assert('element modifier, multiple elements, manual selector before') { /// 8 /// + @include output(false) { + @include bem.block('something') { + &:hover { + @include bem.elem('child1', 'child2') { + @include bem.modifier('mod') { + font-size: 2.5em; + + @include bem.modifier('submod') { + font-size: 2.75em; + } + } + } + } + + .test & { + @include bem.elem('child3', 'child4') { + @include bem.modifier('mod') { + font-size: 2.5em; + + @include bem.modifier('submod') { + font-size: 2.75em; + } + } + } + } + } + } + + @include expect(false) { + .something:hover .something__child1--mod, + .something:hover .something__child2--mod { + font-size: 2.5em; + } + + .something:hover .something__child1--mod.something__child1--submod, + .something:hover .something__child2--mod.something__child2--submod { + font-size: 2.75em; + } + + .test .something__child3--mod, + .test .something__child4--mod { + font-size: 2.5em; + } + + .test .something__child3--mod.something__child3--submod, + .test .something__child4--mod.something__child4--submod { + font-size: 2.75em; + } + } + } + + @include assert('element modifier, single related element, manual selector before') { /// 9 /// + @include output(false) { + @include bem.block('something') { + &:hover { + @include bem.elem('child1') { + @include bem.next-elem('child2') { + @include bem.modifier('mod1') { + font-size: 2.5em; + + @include bem.modifier('submod1') { + font-size: 2.75em; + } + } + } + } + } + + .test & { + @include bem.elem('child3') { + @include bem.next-elem('child4') { + @include bem.modifier('mod1') { + font-size: 2.5em; + + @include bem.modifier('submod1') { + font-size: 2.75em; + } + } + } + } + } + + @include bem.elem('child5') { + &:hover { + @include bem.next-elem('child6') { + @include bem.modifier('mod2') { + font-size: 2.5em; + + @include bem.modifier('submod2') { + font-size: 2.75em; + } + } + } + } + + .test & { + @include bem.next-elem('child7') { + @include bem.modifier('mod2') { + font-size: 2.5em; + + @include bem.modifier('submod2') { + font-size: 2.75em; + } + } + } + } + } + } + } + + @include expect(false) { + .something:hover .something__child1 + .something__child2--mod1 { + font-size: 2.5em; + } + + .something:hover .something__child1 + .something__child2--mod1.something__child2--submod1 { + font-size: 2.75em; + } + + .test .something__child3 + .something__child4--mod1 { + font-size: 2.5em; + } + + .test .something__child3 + .something__child4--mod1.something__child4--submod1 { + font-size: 2.75em; + } + + .something__child5:hover + .something__child6--mod2 { + font-size: 2.5em; + } + + .something__child5:hover + .something__child6--mod2.something__child6--submod2 { + font-size: 2.75em; + } + + .test .something__child5 + .something__child7--mod2 { + font-size: 2.5em; + } + + .test .something__child5 + .something__child7--mod2.something__child7--submod2 { + font-size: 2.75em; + } + } + } + + @include assert('element modifier, multiple related elements, manual selector before') { /// 10 /// + @include output(false) { + @include bem.block('something') { + &:hover { + @include bem.elem('child1') { + @include bem.next-elem('child2', 'child3') { + @include bem.modifier('mod1') { + font-size: 2.5em; + + @include bem.modifier('submod1') { + font-size: 2.75em; + } + } + } + } + } + + .test & { + @include bem.elem('child4') { + @include bem.next-elem('child5', 'child6') { + @include bem.modifier('mod1') { + font-size: 2.5em; + + @include bem.modifier('submod1') { + font-size: 2.75em; + } + } + } + } + } + + @include bem.elem('child7') { + &:hover { + @include bem.next-elem('child8', 'child9') { + @include bem.modifier('mod2') { + font-size: 2.5em; + + @include bem.modifier('submod2') { + font-size: 2.75em; + } + } + } + } + + .test & { + @include bem.next-elem('child10', 'child11') { + @include bem.modifier('mod2') { + font-size: 2.5em; + + @include bem.modifier('submod2') { + font-size: 2.75em; + } + } + } + } + } + } + } + + @include expect(false) { + .something:hover .something__child1 + .something__child2--mod1, + .something:hover .something__child1 + .something__child3--mod1 { + font-size: 2.5em; + } + + .something:hover .something__child1 + .something__child2--mod1.something__child2--submod1, + .something:hover .something__child1 + .something__child3--mod1.something__child3--submod1 { + font-size: 2.75em; + } + + .test .something__child4 + .something__child5--mod1, + .test .something__child4 + .something__child6--mod1 { + font-size: 2.5em; + } + + .test .something__child4 + .something__child5--mod1.something__child5--submod1, + .test .something__child4 + .something__child6--mod1.something__child6--submod1 { + font-size: 2.75em; + } + + .something__child7:hover + .something__child8--mod2, + .something__child7:hover + .something__child9--mod2 { + font-size: 2.5em; + } + + .something__child7:hover + .something__child8--mod2.something__child8--submod2, + .something__child7:hover + .something__child9--mod2.something__child9--submod2 { + font-size: 2.75em; + } + + .test .something__child7 + .something__child10--mod2, + .test .something__child7 + .something__child11--mod2 { + font-size: 2.5em; + } + + .test .something__child7 + .something__child10--mod2.something__child10--submod2, + .test .something__child7 + .something__child11--mod2.something__child11--submod2 { + font-size: 2.75em; + } + } + } + + // @include assert('element modifier, in at-theme') { /// 11 /// + // @include output(false) { + // @include bem.block('something') { + // @include bem.at-theme('dark') { + // @include bem.elem('child') { + // @include bem.modifier('mod') { + // font-size: 2.5em; + // + // @include bem.modifier('submod') { + // font-size: 2.75em; + // } + // } + // } + // } + // } + // } + // + // @include expect(false) { + // .t-dark .something__child--mod, + // [class*=' t-'] .t-dark .something__child--mod, + // [class^='t-'] .t-dark .something__child--mod { + // font-size: 2.5em; + // } + // + // .t-dark .something__child--mod.something__child--submod, + // [class*=' t-'] .t-dark .something__child--mod.something__child--submod, + // [class^='t-'] .t-dark .something__child--mod.something__child--submod { + // font-size: 2.75em; + // } + // } + // } + + @include assert('nested block modifiers, extending') { /// 12 /// + @include output { + @include bem.block('something') { + @include bem.modifier('mod') { + font-size: 1.5em; + + @include bem.modifier('submod' true) { + font-size: 1.75em; + } + } + } + } + + @include expect { + .something--mod { + font-size: 1.5em; + } + + .something--mod--submod { + font-size: 1.75em; + } + } + } + + @include assert('nested element modifiers, extending') { /// 13 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.modifier('mod') { + font-size: 2.5em; + + @include bem.modifier('submod' true) { + font-size: 2.75em; + } + } + } + } + } + + @include expect { + .something__child--mod { + font-size: 2.5em; + } + + .something__child--mod--submod { + font-size: 2.75em; + } + } + } + + @include assert('block and element modifiers, single element') { /// 14 /// + @include output { + @include bem.block('something') { + @include bem.modifier('mod1') { + font-size: 1.5em; + + @include bem.modifier('submod1') { + font-size: 1.75em; + } + + @include bem.elem('child') { + @include bem.modifier('mod2') { + font-size: 2.5em; + + @include bem.modifier('submod2') { + font-size: 2.75em; + } + } + } + } + } + } + + @include expect { + .something--mod1 { + font-size: 1.5em; + } + + .something--mod1.something--submod1 { + font-size: 1.75em; + } + + .something--mod1 .something__child--mod2 { + font-size: 2.5em; + } + + .something--mod1 .something__child--mod2.something__child--submod2 { + font-size: 2.75em; + } + } + } + + @include assert('block and element modifiers, multiple elements') { /// 15 /// + @include output { + @include bem.block('something') { + @include bem.modifier('mod1') { + font-size: 1.5em; + + @include bem.modifier('submod1') { + font-size: 1.75em; + } + + @include bem.elem('child1', 'child2') { + @include bem.modifier('mod2') { + font-size: 2.5em; + + @include bem.modifier('submod2') { + font-size: 2.75em; + } + } + } + } + } + } + + @include expect { + .something--mod1 { + font-size: 1.5em; + } + + .something--mod1.something--submod1 { + font-size: 1.75em; + } + + .something--mod1 .something__child1--mod2, + .something--mod1 .something__child2--mod2 { + font-size: 2.5em; + } + + .something--mod1 .something__child1--mod2.something__child1--submod2, + .something--mod1 .something__child2--mod2.something__child2--submod2 { + font-size: 2.75em; + } + } + } +} diff --git a/test/bem/_multi.scss b/test/bem/_multi.scss new file mode 100644 index 0000000..255fb45 --- /dev/null +++ b/test/bem/_multi.scss @@ -0,0 +1,594 @@ +// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations + +@use 'true' as *; +@use '../../src/bem'; + +// +// Included test cases: +// - /// 1 /// - in root, 2 blocks +// - /// 2 /// - in root, 1 block, 1 manual selector +// - /// 3 /// - in block, 2 elements +// - /// 4 /// - in block, 1 element, 1 modifier +// - /// 5 /// - in block, 1 element, 1 extending modifier +// - /// 6 /// - in block, 1 element, 1 & selector +// - /// 7 /// - in block, 1 element, 1 manual selector +// - /// 8 /// - in element, 2 elements, 1 modifier +// - /// 9 /// - in element, 1 element, 1 & selector +// - /// 10 /// - in element in manual selector, 2 elements +// - /// 11 /// - in element in manual selector, 1 element, 1 & selector +// - /// 12 /// - in multiple elements, 2 elements, 1 modifier +// - /// 13 /// - in multiple elements, 1 element, 1 & selector +// - /// 14 /// - in related elements, 2 elements, 1 modifier +// - /// 15 /// - in related elements, 1 element, 1 & selector +// - /// 16 /// - in element, 2 related elements, 1 modifier +// - /// 17 /// - in element, 1 twin element, 1 modifier +// - /// 18 /// - in multiple elements, 1 twin element, 1 modifier +// + +@include it('multi') { + @include assert('in root, 2 blocks') { /// 1 /// + @include output { + @include bem.multi('component:' 'block1', 'object:' 'block2') { + font-size: 1em; + + @include bem.elem('child2') { + font-size: 2em; + } + } + } + + @include expect { + .c-block1 { + font-size: 1em; + } + + .c-block1__child2 { + font-size: 2em; + } + + .o-block2 { + font-size: 1em; + } + + .o-block2__child2 { + font-size: 2em; + } + } + } + + @include assert('in root, 1 block, 1 manual selector') { /// 2 /// + @include output { + @include bem.multi('component:' 'block1', 'a:hover') { + font-size: 1em; + } + } + + @include expect { + .c-block1 { + font-size: 1em; + } + + a:hover { + font-size: 1em; + } + } + } + + @include assert('in block, 2 elements') { /// 3 /// + @include output { + @include bem.block('something') { + @include bem.multi('elem:' 'child1' 'child2') { + font-size: 2em; + + @include bem.modifier('mod') { + font-size: 2.5em; + } + } + } + } + + @include expect { + .something__child1, + .something__child2 { + font-size: 2em; + } + + .something__child1--mod, + .something__child2--mod { + font-size: 2.5em; + } + } + } + + @include assert('in block, 1 element, 1 modifier') { /// 4 /// + @include output { + @include bem.block('something') { + @include bem.multi('elem:' 'child', 'modifier:' 'mod1') { + font-size: 2em; + + @include bem.modifier('mod2') { + font-size: 2.5em; + } + } + } + } + + @include expect { + .something__child { + font-size: 2em; + } + + .something__child--mod2 { + font-size: 2.5em; + } + + .something--mod1 { + font-size: 2em; + } + + .something--mod1.something--mod2 { + font-size: 2.5em; + } + } + } + + @include assert('in block, 1 element, 1 extending modifier') { /// 5 /// + @include output { + @include bem.block('something') { + @include bem.multi('elem:' 'child', 'modifier:' 'mod1') { + font-size: 2em; + + @include bem.modifier('mod2' true) { + font-size: 2.5em; + } + } + } + } + + @include expect { + .something__child { + font-size: 2em; + } + + .something__child--mod2 { + font-size: 2.5em; + } + + .something--mod1 { + font-size: 2em; + } + + .something--mod1--mod2 { + font-size: 2.5em; + } + } + } + + @include assert('in block, 1 element, 1 & selector') { /// 6 /// + @include output { + @include bem.block('something') { + @include bem.multi('&', 'elem:' 'child') { + font-size: 2em; + + @include bem.modifier('mod') { + font-size: 2.5em; + } + } + } + } + + @include expect { + .something { + font-size: 2em; + } + + .something--mod { + font-size: 2.5em; + } + + .something__child { + font-size: 2em; + } + + .something__child--mod { + font-size: 2.5em; + } + } + } + + @include assert('in block, 1 element, 1 manual selector') { /// 7 /// + @include output { + @include bem.block('something') { + @include bem.multi('> a:hover', 'elem:' 'child1') { + font-size: 2em; + + @include bem.elem('child2') { + font-size: 3em; + } + } + } + } + + @include expect { + .something > a:hover { + font-size: 2em; + } + + .something > a:hover .something__child2 { + font-size: 3em; + } + + .something__child1 { + font-size: 2em; + } + + .something__child1 .something__child2 { + font-size: 3em; + } + } + } + + @include assert('in element, 2 elements, 1 modifier') { /// 8 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.multi('elem:' 'subchild1' 'subchild2', 'modifier:' 'mod1') { + font-size: 3em; + + @include bem.modifier('mod2') { + font-size: 3.5em; + } + } + } + } + } + + @include expect { + .something__child .something__subchild1, + .something__child .something__subchild2 { + font-size: 3em; + } + + .something__child .something__subchild1--mod2, + .something__child .something__subchild2--mod2 { + font-size: 3.5em; + } + + .something__child--mod1 { + font-size: 3em; + } + + .something__child--mod1.something__child--mod2 { + font-size: 3.5em; + } + } + } + + @include assert('in element, 1 element, 1 & selector') { /// 9 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.multi('elem:' 'subchild', '&') { + font-size: 3em; + + @include bem.modifier('mod') { + font-size: 3.5em; + } + } + } + } + } + + @include expect { + .something__child .something__subchild { + font-size: 3em; + } + + .something__child .something__subchild--mod { + font-size: 3.5em; + } + + .something__child { + font-size: 3em; + } + + .something__child--mod { + font-size: 3.5em; + } + } + } + + @include assert('in element in manual selector, 2 elements') { /// 10 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + &:hover { + @include bem.multi('elem:' 'subchild1' 'subchild2') { + font-size: 3em; + + @include bem.modifier('mod2') { + font-size: 3.5em; + } + } + } + } + } + } + + @include expect { + .something__child:hover .something__subchild1, + .something__child:hover .something__subchild2 { + font-size: 3em; + } + + .something__child:hover .something__subchild1--mod2, + .something__child:hover .something__subchild2--mod2 { + font-size: 3.5em; + } + } + } + + @include assert('in element in manual selector, 1 element, 1 & selector') { /// 11 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + &:hover { + @include bem.multi('elem:' 'subchild', '&') { + font-size: 3em; + } + } + } + } + } + + @include expect { + .something__child:hover .something__subchild { + font-size: 3em; + } + + .something__child:hover { + font-size: 3em; + } + } + } + + @include assert('in multiple elements, 2 elements, 1 modifier') { /// 12 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.multi('elem:' 'subchild1' 'subchild2', 'modifier:' 'mod') { + font-size: 3em; + } + } + } + } + + @include expect { + .something__child1 .something__subchild1, + .something__child2 .something__subchild1, + .something__child1 .something__subchild2, + .something__child2 .something__subchild2 { + font-size: 3em; + } + + .something__child1--mod, + .something__child2--mod { + font-size: 3em; + } + } + } + + @include assert('in multiple elements, 1 element, 1 & selector') { /// 13 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.multi('elem:' 'subchild', '&') { + font-size: 3em; + + @include bem.modifier('mod') { + font-size: 3.5em; + } + } + } + } + } + + @include expect { + .something__child1 .something__subchild, + .something__child2 .something__subchild { + font-size: 3em; + } + + .something__child1 .something__subchild--mod, + .something__child2 .something__subchild--mod { + font-size: 3.5em; + } + + .something__child1, + .something__child2 { + font-size: 3em; + } + + .something__child1--mod, + .something__child2--mod { + font-size: 3.5em; + } + } + } + + @include assert('in related elements, 2 elements, 1 modifier') { /// 14 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1') { + @include bem.next-elem('child2', 'child3') { + @include bem.multi('elem:' 'subchild1' 'subchild2', 'modifier:' 'mod') { + font-size: 3em; + } + } + } + } + } + + @include expect { + .something__child1 + .something__child2 .something__subchild1, + .something__child1 + .something__child3 .something__subchild1, + .something__child1 + .something__child2 .something__subchild2, + .something__child1 + .something__child3 .something__subchild2 { + font-size: 3em; + } + + .something__child1 + .something__child2--mod, + .something__child1 + .something__child3--mod { + font-size: 3em; + } + } + } + + @include assert('in related elements, 1 element, 1 & selector') { /// 15 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1') { + @include bem.next-elem('child2', 'child3') { + @include bem.multi('elem:' 'subchild', '&') { + font-size: 4em; + + @include bem.modifier('mod') { + font-size: 4.5em; + } + } + } + } + } + } + + @include expect { + .something__child1 + .something__child2 .something__subchild, + .something__child1 + .something__child3 .something__subchild { + font-size: 4em; + } + + .something__child1 + .something__child2 .something__subchild--mod, + .something__child1 + .something__child3 .something__subchild--mod { + font-size: 4.5em; + } + + .something__child1 + .something__child2, + .something__child1 + .something__child3 { + font-size: 4em; + } + + .something__child1 + .something__child2--mod, + .something__child1 + .something__child3--mod { + font-size: 4.5em; + } + } + } + + @include assert('in element, 2 related elements, 1 modifier') { /// 16 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1') { + @include bem.multi('next-elem:' 'child2' 'child3', 'modifier:' 'mod1') { + font-size: 3em; + + @include bem.modifier('mod2') { + font-size: 3.5em; + } + } + } + } + } + + @include expect { + .something__child1 + .something__child2, + .something__child1 + .something__child3 { + font-size: 3em; + } + + .something__child1 + .something__child2--mod2, + .something__child1 + .something__child3--mod2 { + font-size: 3.5em; + } + + .something__child1--mod1 { + font-size: 3em; + } + + .something__child1--mod1.something__child1--mod2 { + font-size: 3.5em; + } + } + } + + @include assert('in element, 1 twin element, 1 modifier') { /// 17 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.multi('next-twin-elem', 'modifier:' 'mod1') { + font-size: 3em; + + @include bem.modifier('mod2') { + font-size: 3.5em; + } + } + } + } + } + + @include expect { + .something__child + .something__child { + font-size: 3em; + } + + .something__child + .something__child--mod2 { + font-size: 3.5em; + } + + .something__child--mod1 { + font-size: 3em; + } + + .something__child--mod1.something__child--mod2 { + font-size: 3.5em; + } + } + } + + @include assert('in multiple elements, 1 twin element, 1 modifier') { /// 18 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.multi('next-twin-elem', 'modifier:' 'mod1') { + font-size: 3em; + + @include bem.modifier('mod2') { + font-size: 3.5em; + } + } + } + } + } + + @include expect { + .something__child1 + .something__child1, + .something__child2 + .something__child2 { + font-size: 3em; + } + + .something__child1 + .something__child1--mod2, + .something__child2 + .something__child2--mod2 { + font-size: 3.5em; + } + + .something__child1--mod1, + .something__child2--mod1 { + font-size: 3em; + } + + .something__child1--mod1.something__child1--mod2, + .something__child2--mod1.something__child2--mod2 { + font-size: 3.5em; + } + } + } +} diff --git a/test/bem/_next-twin-element.scss b/test/bem/_next-twin-element.scss new file mode 100644 index 0000000..85fe473 --- /dev/null +++ b/test/bem/_next-twin-element.scss @@ -0,0 +1,156 @@ +// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations + +@use 'true' as *; +@use '../../src/bem'; + +// +// Included test cases: +// - /// 1 /// - single element +// - /// 2 /// - single element, manual selector in-between +// - /// 3 /// - single element, modifier in-between +// - /// 4 /// - multiple elements +// - /// 5 /// - multiple elements, manual selector in-between +// - /// 6 /// - multiple elements, modifier in-between +// + +@include it('next-twin-element') { + @include assert('single element') { /// 1 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.next-twin-element { + font-size: 2em; + } + } + } + } + + @include expect { + .something__child + .something__child { + font-size: 2em; + } + } + } + + @include assert('single element, manual selector in-between') { /// 2 /// + @include output(false) { + @include bem.block('something') { + @include bem.elem('child') { + &:hover { + @include bem.next-twin-element { + font-size: 2em; + } + } + + .test & { + @include bem.next-twin-element { + font-size: 2em; + } + } + } + } + } + + @include expect(false) { + .something__child:hover + .something__child { + font-size: 2em; + } + + .test .something__child + .something__child { + font-size: 2em; + } + } + } + + @include assert('single element, modifier in-between') { /// 3 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.modifier('mod') { + @include bem.next-twin-element { + font-size: 2.5em; + } + } + } + } + } + + @include expect { + .something__child--mod + .something__child { + font-size: 2.5em; + } + } + } + + @include assert('multiple elements') { /// 4 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.next-twin-element { + font-size: 2em; + } + } + } + } + + @include expect { + .something__child1 + .something__child1, + .something__child2 + .something__child2 { + font-size: 2em; + } + } + } + + @include assert('multiple elements, manual selector in-between') { /// 5 /// + @include output(false) { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + &:hover { + @include bem.next-twin-element { + font-size: 2em; + } + } + + .test & { + @include bem.next-twin-element { + font-size: 2em; + } + } + } + } + } + + @include expect(false) { + .something__child1:hover + .something__child1, + .something__child2:hover + .something__child2 { + font-size: 2em; + } + + .test .something__child1 + .something__child1, + .test .something__child2 + .something__child2 { + font-size: 2em; + } + } + } + + @include assert('multiple elements, modifier in-between') { /// 6 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.modifier('mod') { + @include bem.next-twin-element { + font-size: 2.5em; + } + } + } + } + } + + @include expect { + .something__child1--mod + .something__child1, + .something__child2--mod + .something__child2 { + font-size: 2.5em; + } + } + } +} diff --git a/test/bem/_related-element.scss b/test/bem/_related-element.scss new file mode 100644 index 0000000..5a829e8 --- /dev/null +++ b/test/bem/_related-element.scss @@ -0,0 +1,462 @@ +// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations + +@use 'true' as *; +@use '../../src/bem'; + +// +// Included test cases: +// - /// 1 /// - single element, single related element +// - /// 2 /// - single element, single related element, manual selector in-between +// - /// 3 /// - single element, single related element, modifier in-between +// - /// 4 /// - single element, multiple related elements +// - /// 5 /// - single element, multiple related elements, manual selector in-between +// - /// 6 /// - single element, multiple related elements, modifier in-between +// - /// 7 /// - multiple elements, single related element +// - /// 8 /// - multiple elements, single related element, manual selector in-between +// - /// 9 /// - multiple elements, single related element, modifier in-between +// - /// 10 /// - multiple elements, multiple related elements +// - /// 11 /// - multiple elements, multiple related elements, manual selector in-between +// - /// 12 /// - multiple elements, multiple related elements, modifier in-between +// + +@include it('related-element') { + @include assert('single element, single related element') { /// 1 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.related-elem('+', 'subchild1') { + font-size: 2em; + } + + @include bem.related-elem('~', 'subchild2') { + font-size: 2em; + } + } + } + } + + @include expect { + .something__child + .something__subchild1 { + font-size: 2em; + } + + .something__child ~ .something__subchild2 { + font-size: 2em; + } + } + } + + @include assert('single element, single related element, manual selector in-between') { /// 2 /// + @include output(false) { + @include bem.block('something') { + @include bem.elem('child') { + &:hover { + @include bem.related-elem('+', 'subchild1') { + font-size: 2em; + } + + @include bem.related-elem('~', 'subchild2') { + font-size: 2em; + } + } + + .test & { + @include bem.related-elem('+', 'subchild3') { + font-size: 2em; + } + + @include bem.related-elem('~', 'subchild4') { + font-size: 2em; + } + } + } + } + } + + @include expect(false) { + .something__child:hover + .something__subchild1 { + font-size: 2em; + } + + .something__child:hover ~ .something__subchild2 { + font-size: 2em; + } + + .test .something__child + .something__subchild3 { + font-size: 2em; + } + + .test .something__child ~ .something__subchild4 { + font-size: 2em; + } + } + } + + @include assert('single element, single related element, modifier in-between') { /// 3 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.modifier('mod') { + @include bem.related-elem('+', 'subchild1') { + font-size: 2.5em; + } + + @include bem.related-elem('~', 'subchild2') { + font-size: 2.5em; + } + } + } + } + } + + @include expect { + .something__child--mod + .something__subchild1 { + font-size: 2.5em; + } + + .something__child--mod ~ .something__subchild2 { + font-size: 2.5em; + } + } + } + + @include assert('single element, multiple related elements') { /// 4 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.related-elem('+', 'subchild1', 'subchild2') { + font-size: 2.5em; + } + + @include bem.related-elem('~', 'subchild3', 'subchild4') { + font-size: 2.5em; + } + } + } + } + + @include expect { + .something__child + .something__subchild1, + .something__child + .something__subchild2 { + font-size: 2.5em; + } + + .something__child ~ .something__subchild3, + .something__child ~ .something__subchild4 { + font-size: 2.5em; + } + } + } + + @include assert('single element, multiple related elements, manual selector in-between') { /// 5 /// + @include output(false) { + @include bem.block('something') { + @include bem.elem('child') { + &:hover { + @include bem.related-elem('+', 'subchild1', 'subchild2') { + font-size: 2.5em; + } + + @include bem.related-elem('~', 'subchild3', 'subchild4') { + font-size: 2.5em; + } + } + + .test & { + @include bem.related-elem('+', 'subchild5', 'subchild6') { + font-size: 2.5em; + } + + @include bem.related-elem('~', 'subchild7', 'subchild8') { + font-size: 2.5em; + } + } + } + } + } + + @include expect(false) { + .something__child:hover + .something__subchild1, + .something__child:hover + .something__subchild2 { + font-size: 2.5em; + } + + .something__child:hover ~ .something__subchild3, + .something__child:hover ~ .something__subchild4 { + font-size: 2.5em; + } + + .test .something__child + .something__subchild5, + .test .something__child + .something__subchild6 { + font-size: 2.5em; + } + + .test .something__child ~ .something__subchild7, + .test .something__child ~ .something__subchild8 { + font-size: 2.5em; + } + } + } + + @include assert('single element, multiple related elements, modifier in-between') { /// 6 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.modifier('mod') { + @include bem.related-elem('+', 'subchild1', 'subchild2') { + font-size: 2.5em; + } + + @include bem.related-elem('~', 'subchild3', 'subchild4') { + font-size: 2.5em; + } + } + } + } + } + + @include expect { + .something__child--mod + .something__subchild1, + .something__child--mod + .something__subchild2 { + font-size: 2.5em; + } + + .something__child--mod ~ .something__subchild3, + .something__child--mod ~ .something__subchild4 { + font-size: 2.5em; + } + } + } + + @include assert('multiple elements, single related element') { /// 7 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.related-elem('+', 'subchild1') { + font-size: 2em; + } + + @include bem.related-elem('~', 'subchild2') { + font-size: 2em; + } + } + } + } + + @include expect { + .something__child1 + .something__subchild1, + .something__child2 + .something__subchild1 { + font-size: 2em; + } + + .something__child1 ~ .something__subchild2, + .something__child2 ~ .something__subchild2 { + font-size: 2em; + } + } + } + + @include assert('multiple elements, single related element, manual selector in-between') { /// 8 /// + @include output(false) { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + &:hover { + @include bem.related-elem('+', 'subchild1') { + font-size: 2em; + } + + @include bem.related-elem('~', 'subchild2') { + font-size: 2em; + } + } + + .test & { + @include bem.related-elem('+', 'subchild3') { + font-size: 2em; + } + + @include bem.related-elem('~', 'subchild4') { + font-size: 2em; + } + } + } + } + } + + @include expect(false) { + .something__child1:hover + .something__subchild1, + .something__child2:hover + .something__subchild1 { + font-size: 2em; + } + + .something__child1:hover ~ .something__subchild2, + .something__child2:hover ~ .something__subchild2 { + font-size: 2em; + } + + .test .something__child1 + .something__subchild3, + .test .something__child2 + .something__subchild3 { + font-size: 2em; + } + + .test .something__child1 ~ .something__subchild4, + .test .something__child2 ~ .something__subchild4 { + font-size: 2em; + } + } + } + + @include assert('multiple elements, single related element, modifier in-between') { /// 9 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.modifier('mod') { + @include bem.related-elem('+', 'subchild1') { + font-size: 2.5em; + } + + @include bem.related-elem('~', 'subchild2') { + font-size: 2.5em; + } + } + } + } + } + + @include expect { + .something__child1--mod + .something__subchild1, + .something__child2--mod + .something__subchild1 { + font-size: 2.5em; + } + + .something__child1--mod ~ .something__subchild2, + .something__child2--mod ~ .something__subchild2 { + font-size: 2.5em; + } + } + } + + @include assert('multiple elements, multiple related elements') { /// 10 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.related-elem('+', 'subchild1', 'subchild2') { + font-size: 2em; + } + + @include bem.related-elem('~', 'subchild3', 'subchild4') { + font-size: 2em; + } + } + } + } + + @include expect { + .something__child1 + .something__subchild1, + .something__child2 + .something__subchild1, + .something__child1 + .something__subchild2, + .something__child2 + .something__subchild2 { + font-size: 2em; + } + + .something__child1 ~ .something__subchild3, + .something__child2 ~ .something__subchild3, + .something__child1 ~ .something__subchild4, + .something__child2 ~ .something__subchild4 { + font-size: 2em; + } + } + } + + @include assert('multiple elements, multiple related elements, manual selector in-between') { /// 11 /// + @include output(false) { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + &:hover { + @include bem.related-elem('+', 'subchild1', 'subchild2') { + font-size: 2em; + } + + @include bem.related-elem('~', 'subchild3', 'subchild4') { + font-size: 2em; + } + } + + .test & { + @include bem.related-elem('+', 'subchild5', 'subchild6') { + font-size: 2em; + } + + @include bem.related-elem('~', 'subchild7', 'subchild8') { + font-size: 2em; + } + } + } + } + } + + @include expect(false) { + .something__child1:hover + .something__subchild1, + .something__child2:hover + .something__subchild1, + .something__child1:hover + .something__subchild2, + .something__child2:hover + .something__subchild2 { + font-size: 2em; + } + + .something__child1:hover ~ .something__subchild3, + .something__child2:hover ~ .something__subchild3, + .something__child1:hover ~ .something__subchild4, + .something__child2:hover ~ .something__subchild4 { + font-size: 2em; + } + + .test .something__child1 + .something__subchild5, + .test .something__child2 + .something__subchild5, + .test .something__child1 + .something__subchild6, + .test .something__child2 + .something__subchild6 { + font-size: 2em; + } + + .test .something__child1 ~ .something__subchild7, + .test .something__child2 ~ .something__subchild7, + .test .something__child1 ~ .something__subchild8, + .test .something__child2 ~ .something__subchild8 { + font-size: 2em; + } + } + } + + @include assert('multiple elements, multiple related elements, modifier in-between') { /// 12 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.modifier('mod') { + @include bem.related-elem('+', 'subchild1', 'subchild2') { + font-size: 2em; + } + + @include bem.related-elem('~', 'subchild3', 'subchild4') { + font-size: 2em; + } + } + } + } + } + + @include expect { + .something__child1--mod + .something__subchild1, + .something__child2--mod + .something__subchild1, + .something__child1--mod + .something__subchild2, + .something__child2--mod + .something__subchild2 { + font-size: 2em; + } + + .something__child1--mod ~ .something__subchild3, + .something__child2--mod ~ .something__subchild3, + .something__child1--mod ~ .something__subchild4, + .something__child2--mod ~ .something__subchild4 { + font-size: 2em; + } + } + } +} diff --git a/test/bem/_state.scss b/test/bem/_state.scss new file mode 100644 index 0000000..674da5f --- /dev/null +++ b/test/bem/_state.scss @@ -0,0 +1,180 @@ +// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations + +@use 'true' as *; +@use '../../src/bem'; + +// +// Included test cases: +// - /// 1 /// - single block, single state +// - /// 2 /// - single element, single state +// - /// 3 /// - single block, multiple states +// - /// 4 /// - single element, multiple states +// - /// 5 /// - multiple elements, single state +// - /// 6 /// - multiple elements, multiple states +// + +@include it('state') { + @include assert('single block, single state') { /// 1 /// + @include output { + @include bem.block('something') { + @include bem.is('active') { + font-size: 1.25em; + } + + @include bem.has('state') { + font-size: 1.75em; + } + } + } + + @include expect { + .something.is-active { + font-size: 1.25em; + } + + .something.has-state { + font-size: 1.75em; + } + } + } + + @include assert('single element, single state') { /// 2 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.is('active') { + font-size: 2.25em; + } + + @include bem.has('state') { + font-size: 2.75em; + } + } + } + } + + @include expect { + .something__child.is-active { + font-size: 2.25em; + } + + .something__child.has-state { + font-size: 2.75em; + } + } + } + + @include assert('single block, multiple states') { /// 3 /// + @include output { + @include bem.block('something') { + @include bem.is('active', 'primary') { + font-size: 1.25em; + } + + @include bem.has('state', 'indicator') { + font-size: 1.75em; + } + } + } + + @include expect { + .something.is-active, + .something.is-primary { + font-size: 1.25em; + } + + .something.has-state, + .something.has-indicator { + font-size: 1.75em; + } + } + } + + @include assert('single element, multiple states') { /// 4 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.is('active', 'primary') { + font-size: 2.25em; + } + + @include bem.has('state', 'indicator') { + font-size: 2.75em; + } + } + } + } + + @include expect { + .something__child.is-active, + .something__child.is-primary { + font-size: 2.25em; + } + + .something__child.has-state, + .something__child.has-indicator { + font-size: 2.75em; + } + } + } + + @include assert('multiple elements, single state') { /// 5 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.is('active') { + font-size: 2.25em; + } + + @include bem.has('state') { + font-size: 2.75em; + } + } + } + } + + @include expect { + .something__child1.is-active, + .something__child2.is-active { + font-size: 2.25em; + } + + .something__child1.has-state, + .something__child2.has-state { + font-size: 2.75em; + } + } + } + + @include assert('multiple elements, multiple states') { /// 6 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.is('active', 'primary') { + font-size: 2.25em; + } + + @include bem.has('state', 'indicator') { + font-size: 2.75em; + } + } + } + } + + @include expect { + .something__child1.is-active, + .something__child2.is-active, + .something__child1.is-primary, + .something__child2.is-primary { + font-size: 2.25em; + } + + .something__child1.has-state, + .something__child2.has-state, + .something__child1.has-indicator, + .something__child2.has-indicator { + font-size: 2.75em; + } + } + } +} diff --git a/test/bem/_suffix.scss b/test/bem/_suffix.scss new file mode 100644 index 0000000..34f55b6 --- /dev/null +++ b/test/bem/_suffix.scss @@ -0,0 +1,97 @@ +// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations + +@use 'true' as *; +@use '../../src/bem'; + +// +// Included test cases: +// - /// 1 /// - block suffix +// - /// 2 /// - element suffix +// - /// 3 /// - modifier suffix +// - /// 4 /// - multiple element suffix +// + +@include it('suffix') { + @include assert('block suffix') { /// 1 /// + @include output { + @include bem.block('something') { + @include bem.suffix('sm') { + font-size: 1.5em; + } + } + } + + @include expect { + .something\@sm { + font-size: 1.5em; + } + } + } + + @include assert('element suffix') { /// 2 /// + @include output { + @include bem.block('something') { + @include bem.elem('child') { + @include bem.suffix('sm') { + font-size: 2.5em; + } + } + } + } + + @include expect { + .something__child\@sm { + font-size: 2.5em; + } + } + } + + @include assert('modifier suffix') { /// 3 /// + @include output { + @include bem.block('something') { + @include bem.modifier('mod1') { + @include bem.suffix('sm') { + font-size: 1.75em; + } + } + + @include bem.elem('child') { + @include bem.modifier('mod2') { + @include bem.suffix('sm') { + font-size: 2.75em; + } + } + } + } + } + + @include expect { + .something--mod1\@sm { + font-size: 1.75em; + } + + .something__child--mod2\@sm { + font-size: 2.75em; + } + } + } + + @include assert('multiple element suffix') { /// 4 /// + @include output { + @include bem.block('something') { + @include bem.elem('child1', 'child2') { + @include bem.suffix('sm') { + font-size: 2.5em; + } + } + } + } + + @include expect { + .something__child1\@sm, + .something__child2\@sm { + font-size: 2.5em; + } + } + } +} diff --git a/test/test.scss b/test/test.scss index 86c86e9..bddd801 100644 --- a/test/test.scss +++ b/test/test.scss @@ -1,8 +1,7 @@ -@import '../src/main'; +@use 'true' as *; +@use '../src/gradients'; -@import 'true'; - -$iro-easing-gradient-steps: 4; +gradients.$easing-gradient-steps: 4; @import 'functions'; @import 'contexts'; -- cgit v1.2.3-70-g09d2