From dd5f3c463fab336d694f426dcad11a1783590fc9 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 5 Feb 2022 07:52:13 +0100 Subject: Ported from import syntax to modules --- 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 +- 29 files changed, 3233 insertions(+), 3180 deletions(-) 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 (limited to 'test') 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-54-g00ecf