From dd5f3c463fab336d694f426dcad11a1783590fc9 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
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 <me@volpeon.ink>",
"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: <div class="c-anotherBlock__elem c-someBlock">...</div>
///
/// @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