@omnisass/library 0.2.0 → 2026.1.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.editorconfig +13 -0
- package/.omnisass/scripts/bump-version.sh +288 -0
- package/.sassdoc.yaml +21 -0
- package/.vscode/settings.json +17 -0
- package/_configs.scss +10 -45
- package/index.scss +5 -91
- package/modules/utilities/converters/_convert-em2px.scss +3 -49
- package/modules/utilities/converters/_convert-hex2rgb.scss +2 -44
- package/modules/utilities/converters/_convert-hex2rgba.scss +2 -57
- package/modules/utilities/converters/_convert-px2em.scss +3 -62
- package/modules/utilities/converters/_convert-px2rem.scss +3 -62
- package/modules/utilities/converters/_convert-rem2px.scss +3 -62
- package/modules/utilities/converters/_index.scss +10 -0
- package/modules/utilities/getters/_index.scss +23 -0
- package/modules/utilities/getters/color/_get-color-brightness.scss +2 -48
- package/modules/utilities/getters/color/_get-color-darkest.scss +13 -68
- package/modules/utilities/getters/list/_get-list-item-end.scss +2 -29
- package/modules/utilities/getters/list/_get-list-item-start.scss +2 -29
- package/modules/utilities/getters/list/_get-list-item.scss +6 -82
- package/modules/utilities/getters/number/_get-number-from-percent.scss +2 -40
- package/modules/utilities/getters/number/_get-number-height-by-ratio.scss +3 -35
- package/modules/utilities/getters/number/_get-number-max-safe.scss +112 -0
- package/modules/utilities/getters/number/_get-number-max.scss +10 -88
- package/modules/utilities/getters/number/_get-number-min-safe.scss +114 -0
- package/modules/utilities/getters/number/_get-number-min.scss +9 -84
- package/modules/utilities/getters/number/_get-number-percentage-of.scss +2 -58
- package/modules/utilities/getters/number/_get-number-unit.scss +5 -46
- package/modules/utilities/getters/number/_get-number-width-by-ratio.scss +3 -56
- package/modules/utilities/helpers/_index.scss +44 -0
- package/modules/utilities/helpers/color/_color-blend-steps.scss +5 -89
- package/modules/utilities/helpers/color/_color-blend.scss +11 -85
- package/modules/utilities/helpers/color/_color-hue-shift.scss +7 -61
- package/modules/utilities/helpers/color/_color-scale.scss +7 -74
- package/modules/utilities/helpers/color/_color-shade.scss +2 -60
- package/modules/utilities/helpers/color/_color-tint.scss +2 -60
- package/modules/utilities/helpers/color/_color-triad.scss +9 -53
- package/modules/utilities/helpers/list/_list-dedupe.scss +9 -50
- package/modules/utilities/helpers/list/_list-insert-at.scss +16 -86
- package/modules/utilities/helpers/list/_list-merge.scss +1 -1
- package/modules/utilities/helpers/list/_list-remove-at.scss +9 -71
- package/modules/utilities/helpers/list/_list-sum-numbers-safe.scss +17 -81
- package/modules/utilities/helpers/list/_list-sum-numbers.scss +9 -57
- package/modules/utilities/helpers/number/_number-ceil-to.scss +1 -1
- package/modules/utilities/helpers/number/_number-clamp-max.scss +1 -1
- package/modules/utilities/helpers/number/_number-clamp-min.scss +1 -1
- package/modules/utilities/helpers/number/_number-clamp.scss +1 -1
- package/modules/utilities/helpers/number/_number-denormalize.scss +1 -1
- package/modules/utilities/helpers/number/_number-fibonacci.scss +2 -2
- package/modules/utilities/helpers/number/_number-floor-to.scss +1 -1
- package/modules/utilities/helpers/number/_number-format-with-separator.scss +4 -4
- package/modules/utilities/helpers/number/_number-normalize.scss +1 -1
- package/modules/utilities/helpers/number/_number-random-between-int.scss +1 -1
- package/modules/utilities/helpers/number/_number-random-between.scss +1 -1
- package/modules/utilities/helpers/number/_number-range.scss +7 -7
- package/modules/utilities/helpers/number/_number-round-to-nearest.scss +1 -1
- package/modules/utilities/helpers/number/_number-round-to.scss +1 -1
- package/modules/utilities/helpers/number/_number-strip-unit.scss +2 -14
- package/modules/utilities/helpers/string/_string-capitalize.scss +1 -1
- package/modules/utilities/helpers/string/_string-replace.scss +1 -1
- package/modules/utilities/helpers/string/_string-trim-end.scss +2 -2
- package/modules/utilities/helpers/string/_string-trim-start.scss +2 -2
- package/modules/utilities/helpers/string/_string-trim.scss +1 -1
- package/modules/utilities/loggers/_index.scss +6 -0
- package/modules/utilities/validators/_index.scss +38 -0
- package/modules/utilities/validators/{misc/_is-time.scss → _is-time.scss} +2 -2
- package/modules/utilities/validators/color/_is-color-light.scss +1 -1
- package/modules/utilities/validators/color/_is-color-list.scss +1 -1
- package/modules/utilities/validators/list/_is-list-contained.scss +1 -1
- package/modules/utilities/validators/number/_is-int-even.scss +1 -1
- package/modules/utilities/validators/number/_is-int-odd.scss +1 -1
- package/modules/utilities/validators/number/_is-int.scss +1 -1
- package/modules/utilities/validators/number/_is-number-has-unit.scss +1 -1
- package/modules/utilities/validators/number/_is-number-negative.scss +1 -1
- package/modules/utilities/validators/number/_is-number-positive.scss +1 -1
- package/modules/utilities/validators/number/_is-number-unitless.scss +1 -1
- package/modules/utilities/validators/number/_is-number-zero.scss +1 -1
- package/modules/utilities/validators/string/_is-string-contained.scss +25 -25
- package/modules/utilities/validators/string/_is-string-empty.scss +1 -1
- package/modules/utilities/validators/string/_is-string-ending-with.scss +1 -1
- package/modules/utilities/validators/string/_is-string-starting-with.scss +1 -1
- package/modules/utilities/validators/type-of/_is-boolean.scss +1 -1
- package/modules/utilities/validators/type-of/_is-color.scss +1 -1
- package/modules/utilities/validators/type-of/_is-list.scss +1 -1
- package/modules/utilities/validators/type-of/_is-map.scss +1 -1
- package/modules/utilities/validators/type-of/_is-number.scss +1 -1
- package/modules/utilities/validators/type-of/_is-string.scss +1 -1
- package/modules/utilities/validators/type-of/_is-type.scss +1 -1
- package/package.json +5 -6
- package/package.scss +3 -3
- package/playground/index.scss +8 -0
- package/modules/utilities/converters/_convert-camel2kebab.scss +0 -186
- package/modules/utilities/converters/_convert-kebab2camel.scss +0 -232
- package/modules/utilities/converters/_convert-kebab2snake.scss +0 -118
- package/modules/utilities/converters/_convert-snake2kebab.scss +0 -173
- package/modules/utilities/helpers/misc/_url-encode.configs.scss +0 -64
- package/modules/utilities/helpers/misc/_url-encode.scss +0 -148
- package/modules/utilities/loggers/_log-invalid-type.scss +0 -151
- package/modules/utilities/loggers/_log-invalid-value.scss +0 -151
- package/test.md +0 -168
- package/test.scss +0 -405
- package/test.sh +0 -149
|
@@ -1,232 +0,0 @@
|
|
|
1
|
-
@use 'sass:string';
|
|
2
|
-
@use '../loggers/log-invalid-type' as *;
|
|
3
|
-
@use '../validators/type-of/is-string' as *;
|
|
4
|
-
|
|
5
|
-
/// Конвертирует строку из `kebab-case` (кебаб-нотация) в
|
|
6
|
-
/// `camelCase` (верблюжья нотация).
|
|
7
|
-
///
|
|
8
|
-
/// Функция проходит по каждому символу входной строки,
|
|
9
|
-
/// игнорируя дефисы и преобразуя символы, следующие за
|
|
10
|
-
/// дефисами, в верхний регистр. Это позволяет преобразовывать
|
|
11
|
-
/// CSS-классы и HTML-атрибуты в формате kebab-case в имена
|
|
12
|
-
/// переменных JavaScript/TypeScript в camelCase.
|
|
13
|
-
///
|
|
14
|
-
/// Важные особенности функции:
|
|
15
|
-
/// - Сохраняет исходный регистр символов (кроме следующих за
|
|
16
|
-
/// дефисами)
|
|
17
|
-
/// - Игнорирует дефисы в исходной строке
|
|
18
|
-
/// - Преобразует символы после дефисов в верхний регистр
|
|
19
|
-
/// - Итеративно обрабатывает каждый символ строки
|
|
20
|
-
/// - Возвращает строку в camelCase нотации
|
|
21
|
-
/// - Полезно для преобразования CSS-селекторов в JS-свойства
|
|
22
|
-
/// - Используется для консистентного именования в коде
|
|
23
|
-
/// - Обрабатывает строки любой длины
|
|
24
|
-
/// - Не изменяет цифры и специальные символы (кроме дефисов)
|
|
25
|
-
/// - Учитывает граничные случаи (пустая строка, несколько
|
|
26
|
-
/// дефисов подряд)
|
|
27
|
-
/// - Обеспечивает обратное преобразование к `convert-camel2kebab`
|
|
28
|
-
/// ---
|
|
29
|
-
/// @name convert-kebab2camel
|
|
30
|
-
/// @group utilities-converters
|
|
31
|
-
/// @since 2026.01.13
|
|
32
|
-
/// @access public
|
|
33
|
-
/// @author Murad Rustamov (therteenten)
|
|
34
|
-
/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
|
|
35
|
-
/// @link https://sourcecraft.dev/omnisass/library SourceCraft - OmniSass
|
|
36
|
-
/// @link https://sass-lang.com/documentation/modules/string См. также: Официальная документация Sass - Модуль String
|
|
37
|
-
/// @link https://sass-lang.com/documentation/values/strings См. также: Официальная документация Sass - Тип данных "Строки"
|
|
38
|
-
/// @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer См. также: MDN Web Docs - Object initializer
|
|
39
|
-
/// @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#variable_names См. также: MDN Web Docs - Имена переменных в JavaScript
|
|
40
|
-
/// @link https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes См. также: MDN Web Docs - Использование data-атрибутов
|
|
41
|
-
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors См. также: MDN Web Docs - CSS селекторы
|
|
42
|
-
/// @link https://css-tricks.com/snippets/sass/string-case-conversion-functions/ См. также: CSS-Tricks - Функции преобразования регистра строк в Sass
|
|
43
|
-
/// @link https://css-tricks.com/whats-the-difference-between-kebab-case-camel-case-and-snake-case/ См. также: CSS-Tricks - Разница между kebab-case, camelCase и snake_case
|
|
44
|
-
/// @link https://sass-guidelin.es/ru/#section-42 См. также: Sass Guidelines - Раздел про строки
|
|
45
|
-
/// @link https://www.w3schools.com/js/js_conventions.asp См. также: W3Schools - Соглашения по коду JavaScript
|
|
46
|
-
/// @example scss - Базовые преобразования
|
|
47
|
-
/// @debug convert-kebab2camel('camel-case'); // 'camelCase'
|
|
48
|
-
/// @debug convert-kebab2camel('background-color'); // 'backgroundColor'
|
|
49
|
-
/// @debug convert-kebab2camel('font-size'); // 'fontSize'
|
|
50
|
-
/// @debug convert-kebab2camel('border-radius'); // 'borderRadius'
|
|
51
|
-
/// @debug convert-kebab2camel('padding-left'); // 'paddingLeft'
|
|
52
|
-
/// @debug convert-kebab2camel('margin-bottom'); // 'marginBottom'
|
|
53
|
-
/// @example scss - Множественные дефисы
|
|
54
|
-
/// @debug convert-kebab2camel('border-top-left-radius'); // 'borderTopLeftRadius'
|
|
55
|
-
/// @debug convert-kebab2camel('font-weight-bold'); // 'fontWeightBold'
|
|
56
|
-
/// @debug convert-kebab2camel('text-decoration-line'); // 'textDecorationLine'
|
|
57
|
-
/// @debug convert-kebab2camel('background-image-url'); // 'backgroundImageUrl'
|
|
58
|
-
/// @debug convert-kebab2camel('grid-template-columns'); // 'gridTemplateColumns'
|
|
59
|
-
/// @debug convert-kebab2camel('transition-property-all'); // 'transitionPropertyAll'
|
|
60
|
-
/// @example scss - Преобразование CSS-классов в JS-свойства
|
|
61
|
-
/// // Конвертация CSS-классов для использования в JavaScript
|
|
62
|
-
/// $css-classes: 'modal-header', 'btn-primary', 'input-disabled';
|
|
63
|
-
///
|
|
64
|
-
/// @each $class in $css-classes {
|
|
65
|
-
/// $js-property: convert-kebab2camel($class);
|
|
66
|
-
/// @debug $js-property;
|
|
67
|
-
/// // modal-header → modalHeader
|
|
68
|
-
/// // btn-primary → btnPrimary
|
|
69
|
-
/// // input-disabled → inputDisabled
|
|
70
|
-
/// }
|
|
71
|
-
/// @example scss - Интеграция с конфигурационными объектами
|
|
72
|
-
/// // Конвертация CSS-свойств в имена JS-переменных
|
|
73
|
-
/// $css-properties: (
|
|
74
|
-
/// 'primary-color': #3498db,
|
|
75
|
-
/// 'secondary-color': #2ecc71,
|
|
76
|
-
/// 'font-size-base': 16px,
|
|
77
|
-
/// 'border-radius-sm': 4px
|
|
78
|
-
/// );
|
|
79
|
-
///
|
|
80
|
-
/// // Создание JS-объекта конфигурации
|
|
81
|
-
/// $js-config: ();
|
|
82
|
-
///
|
|
83
|
-
/// @each $key, $value in $css-properties {
|
|
84
|
-
/// $js-key: convert-kebab2camel($key);
|
|
85
|
-
/// $js-config: map.merge($js-config, ($js-key: $value));
|
|
86
|
-
/// }
|
|
87
|
-
///
|
|
88
|
-
/// @debug $js-config;
|
|
89
|
-
/// // (primaryColor: #3498db, secondaryColor: #2ecc71,
|
|
90
|
-
/// // fontSizeBase: 16px, borderRadiusSm: 4px)
|
|
91
|
-
/// @example css - Практическое применение в Sass/SCSS
|
|
92
|
-
/// // Использование функции для генерации CSS-переменных
|
|
93
|
-
/// $theme-colors: (
|
|
94
|
-
/// primary-color: #3498db,
|
|
95
|
-
/// secondary-color: #2ecc71,
|
|
96
|
-
/// accent-color: #e74c3c
|
|
97
|
-
/// );
|
|
98
|
-
///
|
|
99
|
-
/// :root {
|
|
100
|
-
/// @each $name, $color in $theme-colors {
|
|
101
|
-
/// --#{convert-kebab2camel($name)}: #{$color};
|
|
102
|
-
/// }
|
|
103
|
-
/// }
|
|
104
|
-
/// @example css - Результат
|
|
105
|
-
/// :root {
|
|
106
|
-
/// --primaryColor: #3498db;
|
|
107
|
-
/// --secondaryColor: #2ecc71;
|
|
108
|
-
/// --accentColor: #e74c3c;
|
|
109
|
-
/// }
|
|
110
|
-
/// @example scss - Обратное преобразование данных из CSS
|
|
111
|
-
/// // Получение данных из data-атрибутов и преобразование в camelCase
|
|
112
|
-
/// $data-attributes: (
|
|
113
|
-
/// 'data-user-id': '12345',
|
|
114
|
-
/// 'data-is-active': 'true',
|
|
115
|
-
/// 'data-role-name': 'admin'
|
|
116
|
-
/// );
|
|
117
|
-
///
|
|
118
|
-
/// @each $attr, $value in $data-attributes {
|
|
119
|
-
/// // Убираем префикс 'data-' и преобразуем в camelCase
|
|
120
|
-
/// $attr-name: string.slice($attr, 6); // 'user-id', 'is-active', 'role-name'
|
|
121
|
-
/// $js-property: convert-kebab2camel($attr-name);
|
|
122
|
-
/// @debug $js-property + ': ' + $value;
|
|
123
|
-
/// // userId: 12345
|
|
124
|
-
/// // isActive: true
|
|
125
|
-
/// // roleName: admin
|
|
126
|
-
/// }
|
|
127
|
-
/// @example css - Применение для data-атрибутов
|
|
128
|
-
/// // Генерация CSS для элементов с data-атрибутами
|
|
129
|
-
/// .user-profile[data-user-id="12345"] {
|
|
130
|
-
/// color: blue;
|
|
131
|
-
/// }
|
|
132
|
-
///
|
|
133
|
-
/// .button[data-is-active="true"] {
|
|
134
|
-
/// background-color: green;
|
|
135
|
-
/// }
|
|
136
|
-
///
|
|
137
|
-
/// .admin-panel[data-role-name="admin"] {
|
|
138
|
-
/// border: 2px solid red;
|
|
139
|
-
/// }
|
|
140
|
-
/// @param {String} $value - Строка в kebab-case нотации для
|
|
141
|
-
/// конвертации. Может содержать буквы, цифры, дефисы и
|
|
142
|
-
/// другие символы. Функция игнорирует дефисы и
|
|
143
|
-
/// преобразует символы, следующие за дефисами, в верхний
|
|
144
|
-
/// регистр.
|
|
145
|
-
/// @return {String} - Строка в camelCase нотации, где все
|
|
146
|
-
/// дефисы удалены, а символы, которые следовали за
|
|
147
|
-
/// дефисами, преобразованы в верхний регистр. Первый
|
|
148
|
-
/// символ остается в исходном регистре.
|
|
149
|
-
/// @throws {Error} - Может выбросить ошибку при передаче
|
|
150
|
-
/// нестроковых значений. Аргумент должен быть строкой
|
|
151
|
-
/// для корректной работы строковых функций Sass.
|
|
152
|
-
@function convert-kebab2camel($value) {
|
|
153
|
-
|
|
154
|
-
// Переменная для накопления результата преобразования.
|
|
155
|
-
$-result: "";
|
|
156
|
-
|
|
157
|
-
// Проверка типа входного параметра: ожидается строковое значение.
|
|
158
|
-
// Функция is-string() проверяет, является ли $value строкой
|
|
159
|
-
// (тип данных string).
|
|
160
|
-
@if not is-string($value) {
|
|
161
|
-
|
|
162
|
-
// Если $value не является строкой, возвращаем ошибку через
|
|
163
|
-
// стандартную функцию логирования. Это предотвращает
|
|
164
|
-
// выполнение операции замены с некорректными данными.
|
|
165
|
-
@return log-invalid-type(
|
|
166
|
-
'convert-kebab2camel',
|
|
167
|
-
$value,
|
|
168
|
-
'$value',
|
|
169
|
-
'string'
|
|
170
|
-
);
|
|
171
|
-
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
// Основная логика выполняется только если $value является
|
|
175
|
-
// корректной строкой.
|
|
176
|
-
@else {
|
|
177
|
-
|
|
178
|
-
// Флаг, указывающий, что следующий символ должен быть
|
|
179
|
-
// преобразован в верхний регистр. Устанавливается в true,
|
|
180
|
-
// когда встречается дефис "-" в исходной строке.
|
|
181
|
-
$-capitalize-next: false;
|
|
182
|
-
|
|
183
|
-
// Определение длины входной строки для организации цикла.
|
|
184
|
-
// Функция string.length() возвращает количество символов
|
|
185
|
-
// в строке.
|
|
186
|
-
$-length: string.length($value);
|
|
187
|
-
|
|
188
|
-
// Цикл по всем символам строки от первого до последнего.
|
|
189
|
-
// Индекс $i последовательно принимает значения от 1 до $-length.
|
|
190
|
-
@for $i from 1 through $-length {
|
|
191
|
-
|
|
192
|
-
// Извлечение текущего символа строки по индексу $i.
|
|
193
|
-
// Функция string.slice() возвращает подстроку,
|
|
194
|
-
// в данном случае - один символ.
|
|
195
|
-
$-char: string.slice($value, $i, $i);
|
|
196
|
-
|
|
197
|
-
// Проверка: является ли текущий символ дефисом "-".
|
|
198
|
-
@if $-char == "-" {
|
|
199
|
-
|
|
200
|
-
// Если символ - дефис, устанавливаем флаг, что
|
|
201
|
-
// следующий символ должен быть заглавным.
|
|
202
|
-
// Сам дефис не добавляется к результату.
|
|
203
|
-
$-capitalize-next: true;
|
|
204
|
-
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
// Проверка: установлен ли флаг заглавного регистра
|
|
208
|
-
// для текущего символа.
|
|
209
|
-
@else if $-capitalize-next {
|
|
210
|
-
|
|
211
|
-
// Если флаг установлен, добавляем символ в верхнем
|
|
212
|
-
// регистре к результату и сбрасываем флаг.
|
|
213
|
-
$-result: $-result + string.to-upper-case($-char);
|
|
214
|
-
$-capitalize-next: false;
|
|
215
|
-
|
|
216
|
-
} @else {
|
|
217
|
-
|
|
218
|
-
// Если символ не дефис и флаг не установлен,
|
|
219
|
-
// добавляем символ как есть (в исходном регистре).
|
|
220
|
-
$-result: $-result + $-char;
|
|
221
|
-
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
// Возвращаем итоговую строку после преобразования всех
|
|
227
|
-
// символов.
|
|
228
|
-
@return $-result;
|
|
229
|
-
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
}
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
@use '../helpers/string/string-replace' as *;
|
|
2
|
-
@use '../loggers/log-invalid-type' as *;
|
|
3
|
-
@use '../validators/type-of/is-string' as *;
|
|
4
|
-
|
|
5
|
-
/// Преобразует строку из `kebab-case` (кебаб-нотация) в
|
|
6
|
-
/// `snake_case` (змеиная нотация).
|
|
7
|
-
///
|
|
8
|
-
/// Функция заменяет все дефисы (`-`) на символы нижнего
|
|
9
|
-
/// подчеркивания (`_`) в переданной строке. Это преобразование
|
|
10
|
-
/// позволяет конвертировать CSS-классы и имена переменных из
|
|
11
|
-
/// frontend-разработки в формат, используемый в backend-языках
|
|
12
|
-
/// программирования, таких как Python, Ruby и PHP.
|
|
13
|
-
///
|
|
14
|
-
/// Важные особенности функции:
|
|
15
|
-
/// - Заменяет все вхождения дефисов на нижние подчеркивания
|
|
16
|
-
/// - Сохраняет все остальные символы без изменений
|
|
17
|
-
/// - Не изменяет регистр символов
|
|
18
|
-
/// - Работает с любыми строками, содержащими дефисы
|
|
19
|
-
/// - Простая и эффективная реализация через замену символов
|
|
20
|
-
/// - Полезно для конвертации имен из frontend в backend
|
|
21
|
-
/// - Используется для унификации именования в full-stack проектах
|
|
22
|
-
/// - Поддерживает строки любой длины и сложности
|
|
23
|
-
/// - Обрабатывает множественные дефисы подряд
|
|
24
|
-
/// - Учитывает граничные случаи (пустая строка, отсутствие
|
|
25
|
-
/// дефисов)
|
|
26
|
-
/// ---
|
|
27
|
-
/// @name convert-kebab2snake
|
|
28
|
-
/// @group utilities-converters
|
|
29
|
-
/// @since 2026.01.13
|
|
30
|
-
/// @access public
|
|
31
|
-
/// @author Murad Rustamov (therteenten)
|
|
32
|
-
/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
|
|
33
|
-
/// @link https://sourcecraft.dev/omnisass/library SourceCraft - OmniSass
|
|
34
|
-
/// @link https://sass-lang.com/documentation/modules/string См. также: Официальная документация Sass - Модуль String
|
|
35
|
-
/// @link https://sass-lang.com/documentation/values/strings См. также: Официальная документация Sass - Тип данных "Строки"
|
|
36
|
-
/// @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace См. также: MDN Web Docs - Метод String.replace()
|
|
37
|
-
/// @link https://developer.mozilla.org/en-US/docs/Glossary/Snake_case См. также: MDN Web Docs - Глоссарий: Snake_case
|
|
38
|
-
/// @link https://developer.mozilla.org/en-US/docs/Glossary/Kebab-case См. также: MDN Web Docs - Глоссарий: Kebab-case
|
|
39
|
-
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors См. также: MDN Web Docs - CSS селекторы
|
|
40
|
-
/// @link https://css-tricks.com/snippets/sass/string-replace-function/ См. также: CSS-Tricks - Функция замены строк в Sass
|
|
41
|
-
/// @link https://css-tricks.com/whats-the-difference-between-kebab-case-camel-case-and-snake-case/ См. также: CSS-Tricks - Разница между kebab-case, camelCase и snake_case
|
|
42
|
-
/// @link https://sass-guidelin.es/ru/#section-42 См. также: Sass Guidelines - Раздел про строки
|
|
43
|
-
/// @link https://www.python.org/dev/peps/pep-0008/ См. также: PEP 8 - Style Guide for Python Code
|
|
44
|
-
/// @link https://rubystyle.guide/#naming См. также: Ruby Style Guide - Именование
|
|
45
|
-
/// @example scss - Базовые преобразования
|
|
46
|
-
/// @debug convert-kebab2snake('kebab-case'); // 'kebab_case'
|
|
47
|
-
/// @debug convert-kebab2snake('background-color'); // 'background_color'
|
|
48
|
-
/// @debug convert-kebab2snake('font-size'); // 'font_size'
|
|
49
|
-
/// @debug convert-kebab2snake('border-radius'); // 'border_radius'
|
|
50
|
-
/// @debug convert-kebab2snake('padding-left'); // 'padding_left'
|
|
51
|
-
/// @debug convert-kebab2snake('margin-bottom'); // 'margin_bottom'
|
|
52
|
-
/// @example scss - Множественные дефисы
|
|
53
|
-
/// @debug convert-kebab2snake('border-top-left-radius'); // 'border_top_left_radius'
|
|
54
|
-
/// @debug convert-kebab2snake('font-weight-bold'); // 'font_weight_bold'
|
|
55
|
-
/// @debug convert-kebab2snake('text-decoration-line'); // 'text_decoration_line'
|
|
56
|
-
/// @debug convert-kebab2snake('background-image-url'); // 'background_image_url'
|
|
57
|
-
/// @debug convert-kebab2snake('grid-template-columns'); // 'grid_template_columns'
|
|
58
|
-
/// @debug convert-kebab2snake('transition-property-all'); // 'transition_property_all'
|
|
59
|
-
/// @example scss - Сложные случаи с цифрами и аббревиатурами
|
|
60
|
-
/// @debug convert-kebab2snake('xml-http-request'); // 'xml_http_request'
|
|
61
|
-
/// @debug convert-kebab2snake('css-animation'); // 'css_animation'
|
|
62
|
-
/// @debug convert-kebab2snake('html5-canvas'); // 'html5_canvas'
|
|
63
|
-
/// @debug convert-kebab2snake('ui-component'); // 'ui_component'
|
|
64
|
-
/// @debug convert-kebab2snake('api-endpoint'); // 'api_endpoint'
|
|
65
|
-
/// @debug convert-kebab2snake('user-id'); // 'user_id'
|
|
66
|
-
/// @example scss - Граничные случаи
|
|
67
|
-
/// @debug convert-kebab2snake('single'); // 'single'
|
|
68
|
-
/// @debug convert-kebab2snake(''); // '' (пустая строка)
|
|
69
|
-
/// @debug convert-kebab2snake('already_snake'); // 'already_snake' (без изменений)
|
|
70
|
-
/// @debug convert-kebab2snake('multiple---hyphens'); // 'multiple___hyphens'
|
|
71
|
-
/// @debug convert-kebab2snake('-leading-hyphen'); // '_leading_hyphen'
|
|
72
|
-
/// @debug convert-kebab2snake('trailing-hyphen-'); // 'trailing_hyphen_'
|
|
73
|
-
/// @param {String} $value - Строка в kebab-case нотации для
|
|
74
|
-
/// конвертации. Может содержать буквы, цифры, дефисы и
|
|
75
|
-
/// другие символы. Функция заменяет все вхождения `-` на
|
|
76
|
-
/// `_`, сохраняя остальные символы без изменений.
|
|
77
|
-
/// @return {String} - Строка в snake_case нотации, где все
|
|
78
|
-
/// дефисы заменены на символы нижнего подчеркивания.
|
|
79
|
-
/// Результат подходит для использования в backend-языках
|
|
80
|
-
/// программирования, конфигурационных файлах и API-запросах.
|
|
81
|
-
/// @throws {Error} - Может выбросить ошибку при передаче
|
|
82
|
-
/// нестроковых значений или если функция `string-replace`
|
|
83
|
-
/// не определена. Требуется наличие функции `string-replace`
|
|
84
|
-
/// в модуле `helpers` для корректной работы.
|
|
85
|
-
/// @requires {function} string-replace - Вспомогательная
|
|
86
|
-
/// функция замены подстрок в строке.
|
|
87
|
-
/// Должна быть определена и доступна для корректной работы
|
|
88
|
-
/// данной функции.
|
|
89
|
-
@function convert-kebab2snake($value) {
|
|
90
|
-
|
|
91
|
-
// Проверка типа входного параметра: ожидается строковое значение.
|
|
92
|
-
// Функция is-string() проверяет, является ли $value строкой
|
|
93
|
-
// (тип данных string).
|
|
94
|
-
@if not is-string($value) {
|
|
95
|
-
|
|
96
|
-
// Если $value не является строкой, возвращаем ошибку через
|
|
97
|
-
// стандартную функцию логирования. Это предотвращает
|
|
98
|
-
// выполнение операции замены с некорректными данными.
|
|
99
|
-
@return log-invalid-type(
|
|
100
|
-
'convert-kebab2snake',
|
|
101
|
-
$value,
|
|
102
|
-
'$value',
|
|
103
|
-
'string'
|
|
104
|
-
);
|
|
105
|
-
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
// Основная логика выполняется только если $value является
|
|
109
|
-
// корректной строкой.
|
|
110
|
-
@else {
|
|
111
|
-
|
|
112
|
-
// Формула преобразования: заменяем все дефисы "-" на
|
|
113
|
-
// нижние подчеркивания "_".
|
|
114
|
-
@return string-replace($value, "-", "_");
|
|
115
|
-
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
}
|
|
@@ -1,173 +0,0 @@
|
|
|
1
|
-
@use '../helpers/string/string-replace' as *;
|
|
2
|
-
@use '../loggers/log-invalid-type' as *;
|
|
3
|
-
@use '../validators/type-of/is-string' as *;
|
|
4
|
-
|
|
5
|
-
/// Преобразует строку из `snake_case` (змеиная нотация) в
|
|
6
|
-
/// `kebab-case` (кебаб-нотация).
|
|
7
|
-
///
|
|
8
|
-
/// Функция заменяет все символы нижнего подчеркивания (`_`)
|
|
9
|
-
/// на дефисы (`-`) в переданной строке. Это простое
|
|
10
|
-
/// преобразование позволяет конвертировать имена переменных
|
|
11
|
-
/// из языков программирования, использующих snake_case
|
|
12
|
-
/// (Python, Ruby, PHP) в CSS-совместимый kebab-case формат.
|
|
13
|
-
///
|
|
14
|
-
/// Важные особенности функции:
|
|
15
|
-
/// - Заменяет все вхождения нижнего подчеркивания на дефисы
|
|
16
|
-
/// - Сохраняет все остальные символы без изменений
|
|
17
|
-
/// - Не изменяет регистр символов
|
|
18
|
-
/// - Работает с любыми строками, содержащими подчеркивания
|
|
19
|
-
/// - Простая и эффективная реализация через замену символов
|
|
20
|
-
/// - Полезно для конвертации имен из backend в frontend
|
|
21
|
-
/// - Используется для унификации именования в full-stack проектах
|
|
22
|
-
/// - Поддерживает строки любой длины и сложности
|
|
23
|
-
/// - Обрабатывает множественные подчеркивания подряд
|
|
24
|
-
/// - Учитывает граничные случаи (пустая строка, отсутствие
|
|
25
|
-
/// подчеркиваний)
|
|
26
|
-
/// ---
|
|
27
|
-
/// @name convert-snake2kebab
|
|
28
|
-
/// @group utilities-converters
|
|
29
|
-
/// @since 2026.01.13
|
|
30
|
-
/// @access public
|
|
31
|
-
/// @author Murad Rustamov (therteenten)
|
|
32
|
-
/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
|
|
33
|
-
/// @link https://sourcecraft.dev/omnisass/library SourceCraft - OmniSass
|
|
34
|
-
/// @link https://sass-lang.com/documentation/modules/string См. также: Официальная документация Sass - Модуль String
|
|
35
|
-
/// @link https://sass-lang.com/documentation/values/strings См. также: Официальная документация Sass - Тип данных "Строки"
|
|
36
|
-
/// @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace См. также: MDN Web Docs - Метод String.replace()
|
|
37
|
-
/// @link https://developer.mozilla.org/en-US/docs/Glossary/Snake_case См. также: MDN Web Docs - Глоссарий: Snake_case
|
|
38
|
-
/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors См. также: MDN Web Docs - CSS селекторы
|
|
39
|
-
/// @link https://css-tricks.com/snippets/sass/string-replace-function/ См. также: CSS-Tricks - Функция замены строк в Sass
|
|
40
|
-
/// @link https://css-tricks.com/whats-the-difference-between-kebab-case-camel-case-and-snake-case/ См. также: CSS-Tricks - Разница между kebab-case, camelCase и snake_case
|
|
41
|
-
/// @link https://sass-guidelin.es/ru/#section-42 См. также: Sass Guidelines - Раздел про строки
|
|
42
|
-
/// @link https://www.python.org/dev/peps/pep-0008/ См. также: PEP 8 - Style Guide for Python Code
|
|
43
|
-
/// @link https://rubystyle.guide/#naming См. также: Ruby Style Guide - Именование
|
|
44
|
-
/// @example scss - Базовые преобразования
|
|
45
|
-
/// @debug convert-snake2kebab('snake_case'); // 'snake-case'
|
|
46
|
-
/// @debug convert-snake2kebab('background_color'); // 'background-color'
|
|
47
|
-
/// @debug convert-snake2kebab('font_size'); // 'font-size'
|
|
48
|
-
/// @debug convert-snake2kebab('border_radius'); // 'border-radius'
|
|
49
|
-
/// @debug convert-snake2kebab('padding_left'); // 'padding-left'
|
|
50
|
-
/// @debug convert-snake2kebab('margin_bottom'); // 'margin-bottom'
|
|
51
|
-
/// @example scss - Множественные подчеркивания
|
|
52
|
-
/// @debug convert-snake2kebab('border_top_left_radius'); // 'border-top-left-radius'
|
|
53
|
-
/// @debug convert-snake2kebab('font_weight_bold'); // 'font-weight-bold'
|
|
54
|
-
/// @debug convert-snake2kebab('text_decoration_line'); // 'text-decoration-line'
|
|
55
|
-
/// @debug convert-snake2kebab('background_image_url'); // 'background-image-url'
|
|
56
|
-
/// @debug convert-snake2kebab('grid_template_columns'); // 'grid-template-columns'
|
|
57
|
-
/// @debug convert-snake2kebab('transition_property_all'); // 'transition-property-all'
|
|
58
|
-
/// @example scss - Сложные случаи с цифрами и аббревиатурами
|
|
59
|
-
/// @debug convert-snake2kebab('xml_http_request'); // 'xml-http-request'
|
|
60
|
-
/// @debug convert-snake2kebab('css_animation'); // 'css-animation'
|
|
61
|
-
/// @debug convert-snake2kebab('html5_canvas'); // 'html5-canvas'
|
|
62
|
-
/// @debug convert-snake2kebab('ui_component'); // 'ui-component'
|
|
63
|
-
/// @debug convert-snake2kebab('api_endpoint'); // 'api-endpoint'
|
|
64
|
-
/// @debug convert-snake2kebab('user_id'); // 'user-id'
|
|
65
|
-
/// @example scss - Граничные случаи
|
|
66
|
-
/// @debug convert-snake2kebab('single'); // 'single'
|
|
67
|
-
/// @debug convert-snake2kebab(''); // '' (пустая строка)
|
|
68
|
-
/// @debug convert-snake2kebab('already-kebab'); // 'already-kebab' (без изменений)
|
|
69
|
-
/// @debug convert-snake2kebab('multiple___underscores'); // 'multiple---hyphens'
|
|
70
|
-
/// @debug convert-snake2kebab('_leading_underscore'); // '-leading-underscore'
|
|
71
|
-
/// @debug convert-snake2kebab('trailing_underscore_'); // 'trailing-underscore-'
|
|
72
|
-
/// @example scss - Интеграция с Python/Ruby конфигурациями
|
|
73
|
-
/// // Конвертация переменных из backend (Python/Ruby) в CSS
|
|
74
|
-
/// $backend-variables: (
|
|
75
|
-
/// 'primary_color': #3498db,
|
|
76
|
-
/// 'secondary_color': #2ecc71,
|
|
77
|
-
/// 'font_size_base': 16px,
|
|
78
|
-
/// 'border_radius_small': 4px,
|
|
79
|
-
/// 'max_width_container': 1200px
|
|
80
|
-
/// );
|
|
81
|
-
///
|
|
82
|
-
/// :root {
|
|
83
|
-
/// @each $name, $value in $backend-variables {
|
|
84
|
-
/// --#{convert-snake2kebab($name)}: #{$value};
|
|
85
|
-
/// }
|
|
86
|
-
/// }
|
|
87
|
-
/// @example css - Результат интеграции с backend
|
|
88
|
-
/// :root {
|
|
89
|
-
/// --primary-color: #3498db;
|
|
90
|
-
/// --secondary-color: #2ecc71;
|
|
91
|
-
/// --font-size-base: 16px;
|
|
92
|
-
/// --border-radius-small: 4px;
|
|
93
|
-
/// --max-width-container: 1200px;
|
|
94
|
-
/// }
|
|
95
|
-
/// @example scss - Работа с API-ответами
|
|
96
|
-
/// // Преобразование ключей JSON из snake_case в kebab-case
|
|
97
|
-
/// $api-response: (
|
|
98
|
-
/// 'user_name': 'John Doe',
|
|
99
|
-
/// 'email_address': 'john@example.com',
|
|
100
|
-
/// 'is_active': true,
|
|
101
|
-
/// 'created_at': '2023-01-15',
|
|
102
|
-
/// 'updated_at': '2023-12-28'
|
|
103
|
-
/// );
|
|
104
|
-
///
|
|
105
|
-
/// .user-data {
|
|
106
|
-
/// @each $key, $value in $api-response {
|
|
107
|
-
/// data-#{convert-snake2kebab($key)}: "#{$value}";
|
|
108
|
-
/// }
|
|
109
|
-
/// }
|
|
110
|
-
/// @example css - Результат для data-атрибутов
|
|
111
|
-
/// .user-data {
|
|
112
|
-
/// data-user-name: "John Doe";
|
|
113
|
-
/// data-email-address: "john@example.com";
|
|
114
|
-
/// data-is-active: true;
|
|
115
|
-
/// data-created-at: "2023-01-15";
|
|
116
|
-
/// data-updated-at: "2023-12-28";
|
|
117
|
-
/// }
|
|
118
|
-
/// @param {String} $value - Строка в snake_case нотации для
|
|
119
|
-
/// конвертации. Может содержать буквы, цифры, символы
|
|
120
|
-
/// нижнего подчеркивания и другие символы. Функция заменяет
|
|
121
|
-
/// все вхождения `_` на `-`, сохраняя остальные символы
|
|
122
|
-
/// без изменений.
|
|
123
|
-
/// @return {String} - Строка в kebab-case нотации, где все
|
|
124
|
-
/// символы нижнего подчеркивания заменены на дефисы.
|
|
125
|
-
/// Результат готов к использованию как CSS-класс, часть
|
|
126
|
-
/// селектора или имя CSS-переменной.
|
|
127
|
-
/// @throws {Error} - Может выбросить ошибку при передаче
|
|
128
|
-
/// нестроковых значений или если функция `string-replace`
|
|
129
|
-
/// не определена. Требуется наличие функции `string-replace`
|
|
130
|
-
/// в доступном scope.
|
|
131
|
-
/// @require {function} string-replace - Вспомогательная
|
|
132
|
-
/// функция замены подстрок в строке из модуля `helpers`.
|
|
133
|
-
/// Должна быть определена и доступна для корректной работы
|
|
134
|
-
/// данной функции.
|
|
135
|
-
@function convert-snake2kebab($value) {
|
|
136
|
-
|
|
137
|
-
// Проверка типа входного параметра: ожидается
|
|
138
|
-
// строковое значение.
|
|
139
|
-
// Функция is-string() проверяет, является ли $value
|
|
140
|
-
// строкой (тип данных string).
|
|
141
|
-
@if not is-string($value) {
|
|
142
|
-
|
|
143
|
-
// Если $value не является строкой, возвращаем ошибку
|
|
144
|
-
// через стандартную функцию логирования.
|
|
145
|
-
// Это предотвращает выполнение операции замены с
|
|
146
|
-
// некорректными данными.
|
|
147
|
-
@return log-invalid-type(
|
|
148
|
-
'convert-snake2kebab',
|
|
149
|
-
$value,
|
|
150
|
-
'$value',
|
|
151
|
-
'string'
|
|
152
|
-
);
|
|
153
|
-
|
|
154
|
-
} @else {
|
|
155
|
-
|
|
156
|
-
// Основная логика выполняется только если $value
|
|
157
|
-
// является корректной строкой.
|
|
158
|
-
//
|
|
159
|
-
// Используем вспомогательную функцию string-replace()
|
|
160
|
-
// для замены символов:
|
|
161
|
-
// - Первый параметр: $value - исходная строка для
|
|
162
|
-
// преобразования
|
|
163
|
-
// - Второй параметр: "_" - искомый символ (нижнее
|
|
164
|
-
// подчеркивание, snake_case разделитель)
|
|
165
|
-
// - Третий параметр: "-" - заменяющий символ (дефис,
|
|
166
|
-
// kebab-case разделитель)
|
|
167
|
-
//
|
|
168
|
-
// Результат: строка, в которой все символы "_" заменены на "-".
|
|
169
|
-
@return string-replace($value, "_", "-");
|
|
170
|
-
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
}
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
/// Это карта соответствий между специальными символами URL и
|
|
2
|
-
/// их кодированием (например, '#' → '%23'). Используется для
|
|
3
|
-
/// автоматического корректного кодирования URL в SCSS.
|
|
4
|
-
///
|
|
5
|
-
/// Использование этой карты помогает избежать ручного
|
|
6
|
-
/// кодирования, предотвращает ошибки и обеспечивает единообразие
|
|
7
|
-
/// при генерации URL-адресов в проекте. Флаг `!default` означает,
|
|
8
|
-
/// что переменная будет использована только если ранее не была
|
|
9
|
-
/// определена, что позволяет её переопределить при необходимости.
|
|
10
|
-
/// ---
|
|
11
|
-
/// @name set-url-reserved-chars
|
|
12
|
-
/// @group utilities-helpers
|
|
13
|
-
/// @since 2026.01.13
|
|
14
|
-
/// @access public
|
|
15
|
-
/// @author Sindre Sorhus
|
|
16
|
-
/// @author Murad Rustamov (therteenten) [адаптация]
|
|
17
|
-
/// @link https://github.com/sindresorhus GitHub - Sindre Sorhus
|
|
18
|
-
/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
|
|
19
|
-
/// @link https://sourcecraft.dev/omnisass/library SourceCraft - OmniSass
|
|
20
|
-
/// @prop {String} ' ' ['%20'] - Пробел
|
|
21
|
-
/// @prop {String} '!' ['%21'] - Восклицательный знак
|
|
22
|
-
/// @prop {String} '#' ['%23'] - Символ решетки
|
|
23
|
-
/// @prop {String} '$' ['%24'] - Знак доллара
|
|
24
|
-
/// @prop {String} '&' ['%26'] - Амперсанд
|
|
25
|
-
/// @prop {String} '\'' ['%27'] - Одинарная кавычка
|
|
26
|
-
/// @prop {String} '(' ['%28'] - Открывающая скобка
|
|
27
|
-
/// @prop {String} ')' ['%29'] - Закрывающая скобка
|
|
28
|
-
/// @prop {String} '*' ['%2A'] - Звездочка
|
|
29
|
-
/// @prop {String} '+' ['%2B'] - Знак плюса
|
|
30
|
-
/// @prop {String} ',' ['%2C'] - Запятая
|
|
31
|
-
/// @prop {String} '/' ['%2F'] - Слеш
|
|
32
|
-
/// @prop {String} ':' ['%3A'] - Двоеточие
|
|
33
|
-
/// @prop {String} ';' ['%3B'] - Точка с запятой
|
|
34
|
-
/// @prop {String} '=' ['%3D'] - Знак равенства
|
|
35
|
-
/// @prop {String} '?' ['%3F'] - Вопросительный знак
|
|
36
|
-
/// @prop {String} '@' ['%40'] - Символ "собака"
|
|
37
|
-
/// @prop {String} '[' ['%5B'] - Открывающая квадратная скобка
|
|
38
|
-
/// @prop {String} ']' ['%5D'] - Закрывающая квадратная скобка
|
|
39
|
-
/// @prop {String} '"' ['%22'] - Двойная кавычка
|
|
40
|
-
/// @see url-encode
|
|
41
|
-
/// @type Map
|
|
42
|
-
$set-url-reserved-chars: (
|
|
43
|
-
' ': '%20',
|
|
44
|
-
'!': '%21',
|
|
45
|
-
'#': '%23',
|
|
46
|
-
'$': '%24',
|
|
47
|
-
'&': '%26',
|
|
48
|
-
'\'': '%27',
|
|
49
|
-
'(': '%28',
|
|
50
|
-
')': '%29',
|
|
51
|
-
'*': '%2A',
|
|
52
|
-
'+': '%2B',
|
|
53
|
-
',': '%2C',
|
|
54
|
-
'/': '%2F',
|
|
55
|
-
':': '%3A',
|
|
56
|
-
';': '%3B',
|
|
57
|
-
'=': '%3D',
|
|
58
|
-
'?': '%3F',
|
|
59
|
-
'@': '%40',
|
|
60
|
-
'[': '%5B',
|
|
61
|
-
']': '%5D',
|
|
62
|
-
// Если результат заключен в двойные кавычки
|
|
63
|
-
'"': '%22'
|
|
64
|
-
) !default;
|