@mlut/core 1.0.0

package/dist/sass/tools/mixins/base/_mk-state.scss

@@ -0,0 +1,175 @@
+@use 'sass:meta';
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:selector';
+@use 'sass:string';
+
+@use 'forward-tools' as ml;
+
+// mk-state
+//
+// Generates values for utilities in various [states](section-concepts.html#kssref-concepts-utility-states). Names and values of states are set in the [settings](#kssref-sass-tools-settings-utils-states). Usually this mixin is not used separately because it is called inside [mk-util](#kssref-sass-tools-mixins-mk_util).
+//
+// ```scss
+//@include mk-state('.Bgc-mn0', ('h')) {
+//		background-color: #60f;
+//}
+// ```
+// CSS
+// ```css
+//.Bgc-mn0 {
+//		background-color: #60f;
+//}
+//
+//.h_Bgc-mn0:hover {
+//		background-color: #60f;
+//}
+// ```
+//
+// $post
+// $pre = null
+// $no-state = 1 - number flag. If equal to 1, then a value without state will be generated as in the example above.
+// $selector = & - selector of CSS rule. Can be `string` or `&`.
+// $this-util = null
+// $custom-sel = null
+//
+/// Styleguide: sass-tools.mixins.utils.mk_state
+
+@mixin mk-state(
+	$post,
+	$pre: null,
+	$no-state: true,
+	$selector: &,
+	$this-util: null,
+	$custom-sel: null,
+) {
+	@if not $selector {
+		@error '$selector argument must not be null.';
+	}
+
+	$selector: ml.css-class($selector);
+	$final-selector-list: ();
+	$pre-comb-list: $selector;
+
+	@at-root {
+		@if $no-state {
+			#{ml.util-apply-selector($custom-sel, $selector)} {
+				@content;
+			}
+		}
+
+		@if $pre {
+			$pre-comb-list: ();
+			$pre-states: ml.str-split($pre, ml.$kStCb);
+			$separate-states: list.nth($pre-states, 1);
+
+			@if $separate-states != '' {
+				$final-selector-list: -convert-states($separate-states, $selector, $this-util);
+			}
+
+			@if list.length($pre-states) > 1 {
+				$pre-comb-list: -convert-states(list.nth($pre-states, 2), $selector, $this-util);
+			}
+		}
+
+		@if $post {
+			$post-states: ml.str-split($post, ml.$kStCb);
+			$separate-states: list.nth($post-states, 1);
+
+			@if $separate-states != '' {
+				$final-selector-list: list.join(
+					$final-selector-list,
+					-convert-states($separate-states, $selector, $this-util, 'post')
+				);
+			}
+
+			@if list.length($post-states) > 1 {
+				@each $pre-item in $pre-comb-list {
+					$final-selector-list: list.join(
+						$final-selector-list,
+						-convert-states(list.nth($post-states, 2), $pre-item, $this-util, 'post')
+					);
+				}
+			}
+		}
+
+		@each $item in $final-selector-list {
+			#{ml.util-apply-selector($custom-sel, $item)} {
+				@content;
+			}
+		}
+	}
+}
+
+@function -pre-state-selector($list, $selector, $this: null) {
+	$result: ();
+	$selector: ml.css-class($selector, 1);
+	$escaped-token: ml.str-escape(ml.$tUCm);
+
+	@each $item in $list {
+		$selector-list: '';
+
+		@each $part in ml.str-split(
+			ml.convert-util-states($item, $this, true), ','
+		) {
+			$state-prefix: ml.str-escape($item) + $escaped-token;
+			$ar-separator: string.index($selector, $escaped-token + $this);
+
+			$cur-selector: if(
+				$ar-separator,
+				string.insert(
+					$selector, $state-prefix, $ar-separator + string.length($escaped-token)
+				),
+				$state-prefix + $selector
+			);
+
+			$selector-list: $selector-list + '#{$part}.#{$cur-selector},';
+		}
+
+		$result: list.append($result, string.slice($selector-list, 1, -2));
+	}
+
+	@return $result;
+}
+
+@function -post-state-selector($list, $selector, $this: null) {
+	$result: ();
+	$escaped-token: ml.str-escape(ml.$tSTu);
+
+	@each $item in $list {
+		$util-selector: selector.append($selector, ml.str-escape(ml.$tUCm + $item));
+		$state-selector: ml.str-replace-all(
+			ml.convert-util-states($item, $this), $escaped-token, $util-selector
+		);
+
+		$result: list.append(
+			$result,
+			selector.nest(
+				$util-selector,
+				$state-selector
+			)
+		);
+	}
+
+	@return $result;
+}
+
+@function -convert-states($item, $selector, $this: null, $type: 'pre') {
+	// TODO: move this repeating code from here and from `mk-ar` to a separate function
+	$result: ml.str-split(ml.str-trim($item), ' ');
+
+	@each $key, $value in map.get(ml.$utils-cfg, 'states', 'keywords') {
+		@if meta.type-of($value) == 'string' {
+			$value: map.keys(map.get(ml.$utils-cfg, 'states', $value));
+		}
+
+		$result: ml.replace-keyword($result, $key, $value);
+	}
+
+	@return meta.call(
+		meta.get-function('-#{$type}-state-selector'),
+		$result,
+		$selector,
+		$this
+	);
+}

package/dist/sass/tools/mixins/high/_forward-tools.scss

@@ -0,0 +1,3 @@
+@forward '../../settings';
+@forward '../../functions';
+@forward '../base';

package/dist/sass/tools/mixins/high/_index.scss

@@ -0,0 +1 @@
+@forward 'utils';

package/dist/sass/tools/mixins/high/utils/_index.scss

@@ -0,0 +1,188 @@
+@use 'sass:meta';
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:string';
+
+@forward 'mk-util';
+
+@use '../forward-tools' as ml;
+@use 'mk-util' as mu;
+
+// Utilities
+//
+// Mixins for creating utilities and working with them.
+//
+// Styleguide: sass-tools.mixins.utils
+
+// mk-utils-group
+//
+// Creates utilities group based on a map or a list with values. Works similarly that [mk-util](section-sass-tools.html#kssref-sass-tools-mixins-utils-mk_util) mixin. You can find existing groups [here](section-general_reference.html#kssref-general_reference-groups).
+//
+// ```scss
+//	@include ml.mk-utils-group(
+//		'Margins', (
+//			'xs0': 100px,
+//			150: null
+//	));
+//
+//	// CSS
+//	.M-xs0 {
+//		margin: 100px;
+//	}
+//
+//	.M150 {
+//		margin: 150px;
+//	}
+//
+//	.Mt-xs0 {
+//		margin-top: 100px;
+//	}
+//
+//	// etc
+// ```
+//
+// $raw-name - `string` <div> name of the group. You can use [generation syntax](section-concepts.html#kssref-concepts-util-components-syntax) here </div>
+// $values - <div class="Mt3u"> `list | map` </div> You can specify a map with utility values and CSS properties values. Or you can pass a list with only utility values. It will be converted to CSS values depends on conversion type of utility
+// $components = () - <div class="Mt3u"> `map` </div> Contains utility [components](section-concepts.html#kssref-concepts-util-components) in longhand format
+//
+// Styleguide: sass-tools.mixins.utils.mk_utils_group
+
+@mixin mk-utils-group(
+	$raw-name, $values, $components: (), $bound-components: true
+) {
+	$group-data: ml.parse-util($raw-name);
+	$name: map.get($group-data, 'value');
+
+	@if not map.has-key(ml.$utils-groups-db, $name) {
+		@error 'Group `#{$name}` not defined in registry';
+	}
+
+	$bound-comp-map: (
+		$bound-components and
+		map.has-key(ml.$utils-groups-db, $name, 'components') and
+		ml.parse-util(
+			map.get(ml.$utils-groups-db, $name, 'components')
+		)
+	);
+	$is-bound-comp: list.length($bound-comp-map) > 1;
+
+	@if $is-bound-comp {
+		$group-data: $bound-comp-map;
+	} @else if list.length($components) > 0 {
+		$group-data: $components;
+	}
+
+	$i: 1;
+	$members: (
+		map.get(ml.$utils-groups-db, $name, 'members') or
+		map.get(ml.$utils-groups-db, $name)
+	);
+
+	@each $util in $members {
+		@include mu.mk-util(
+			$util,
+			$values,
+			if(
+				not $is-bound-comp and string.index($util, ml.$tUCm), (), $group-data
+			),
+			('groupItemIndex': $i, 'groupBoundComp': $is-bound-comp)
+		);
+
+		$i: $i + 1;
+	}
+}
+
+// apply
+//
+// Applies a list of utilities in the form of styles to CSS rule:
+// ```scss
+//	.card {
+//		display: block;
+//
+//		@include ml.apply('P2u Fns1r xl_P5u');
+//	}
+//
+//	// CSS
+//	.card {
+//		display: block;
+//		padding: 0.5rem;
+//		font-size: 1rem;
+//	}
+//
+//	@media (min-width: 1200px) {
+//		.card {
+//			padding: 1.25rem;
+//		}
+//	}
+// ```
+//
+// If a mixin is called outside CSS rule, then creates utilities from the list. See examples [here](section-how_to.html#kssref-how_to-config).
+//
+// Apply has some restrictions. If you try to use a utility with `pre-state` in it without a clear indication that this is a state, you will get an error. This happens because the Parser cannot distinguish `pre-state` from the utility itself. To create such utilities, pass a list of utilities as a list of strings, separating the components of the utility by spaces, as well as in Generation Syntax. Next, pass `true` in the third argument:
+// ```scss
+//	@include ml.apply(('.js:h:>* _D', 'Lnh2r!_af'), (), true);
+//
+//	// CSS
+//	.js:hover > * .\.js\:h\:\>\*_D {
+//		display: block;
+//	}
+//
+//	.Lnh2r\!_af::after {
+//		line-height: 2rem !important;
+//	}
+// ```
+//
+// $utils - `string | list` <div> string with space-separated utilities or a list of utils as strings </div>
+// $components = () - <div class="Mt3u"> `map` </div> Contains utility [components](section-concepts.html#kssref-concepts-util-components) in longhand format
+// $ready-list = false - <div class="Mt3u"> `boolean` </div> if `true` than you can pass any utilities as a list
+//
+// Styleguide: sass-tools.mixins.utils.apply
+
+@mixin apply($utils, $components: (), $ready-list: false) {
+	$utils-list: if(
+		$ready-list, $utils, ml.str-split($utils, ' ')
+	);
+	$util-options: ('components': null);
+
+	@if & != null {
+		$util-options: map.set($util-options, 'selector', &);
+	}
+
+	// TODO: optimize the applying several values of one utility
+	@each $item in $utils-list {
+		$util-data: ml.parse-util($item);
+		$abbr-data: ml.parse-abbr(map.get($util-data, 'value'));
+		$util-data: map.merge($util-data, $components);
+		$keyword: ml.$kStOl;
+		$pre-states: map.get($util-data, 'pre-states');
+		$post-states: map.get($util-data, 'post-states');
+
+		@if map.get($util-data, 'at-rules') {
+			$keyword: ml.$kArSO;
+			// It's a bit dangerous to use non-standard fields in map, but it is unlikely that a way to check keywords in the `mk-util` will change
+			$util-data: map.set($util-data, 'applyArKw', ml.$kArOl);
+		}
+
+		@if $pre-states or $post-states {
+			@if $pre-states and $post-states {
+				$util-data: map.merge(
+					$util-data,
+					(
+						'pre-states': '#{ml.$kStCb} ' + $pre-states,
+						'post-states':'#{ml.$kStCb} ' + $post-states,
+					)
+				);
+			}
+
+			$util-data: map.set($util-data, 'applyStKw', $keyword);
+		}
+
+		@include mu.mk-util(
+			map.get($abbr-data, 'name'),
+			map.get($abbr-data, 'value'),
+			map.remove($util-data, 'value'),
+			$util-options
+		);
+	}
+}