@c8y/style 1024.10.8 → 1024.14.0

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.
Files changed (38) hide show
  1. package/README.md +30 -259
  2. package/package.json +2 -2
  3. package/styles/core/overlays/_dropdowns.scss +3 -3
  4. package/variables/dashboard-themes/_branded-dashboard.scss +290 -296
  5. package/helper-scripts/README-variable-imports.md +0 -155
  6. package/helper-scripts/convert-scss-to-less.sh +0 -527
  7. package/helper-scripts/convert-stroke-icons-to-less.js +0 -115
  8. package/helper-scripts/remove-redundant-variable-imports.sh +0 -80
  9. package/helper-scripts/scss-to-less-skip +0 -20
  10. package/helper-scripts/sync-scss-to-less.sh +0 -75
  11. package/markdown-files/MANUAL-SYNC-FILES.md +0 -56
  12. package/styles/_login-app.less +0 -34
  13. package/styles/_mixins.less +0 -47
  14. package/styles/_utilities.less +0 -21
  15. package/styles/animations/_animate.less +0 -653
  16. package/styles/animations/_realtime-animation-list.less +0 -20
  17. package/styles/components/_markdown-content.less +0 -95
  18. package/styles/components/application-and-system/_c8y-cookie-banner.less +0 -36
  19. package/styles/components/data-display-and-visualization/_boxed-label.less +0 -45
  20. package/styles/components/data-display-and-visualization/_c8y-datapoint-pill.less +0 -104
  21. package/styles/components/data-display-and-visualization/_status.less +0 -105
  22. package/styles/components/data-display-and-visualization/lists/_c8y-data-point-list.less +0 -31
  23. package/styles/components/data-display-and-visualization/tables/_responsive-grid-table.less +0 -189
  24. package/styles/components/data-input/_c8y-ai-chat.less +0 -258
  25. package/styles/components/data-input/_static-assets-file-picker.less +0 -22
  26. package/styles/components/navigation-and-layout/_c8y-scrollbar.less +0 -118
  27. package/styles/components/navigation-and-layout/navigation/_breadcrumbs.less +0 -60
  28. package/styles/components/status-feedback-and-notifications/_c8y-message-banner.less +0 -46
  29. package/styles/dashboard/_c8y-dashboard-style.less +0 -565
  30. package/styles/dashboard/_dashboard-widgets.less +0 -46
  31. package/styles/icons/_dlt-c8y-icons-stroke.less +0 -7260
  32. package/styles/icons/_marker-icons.less +0 -32
  33. package/styles/layout/_bottom-drawer.less +0 -70
  34. package/styles/layout/_group-info.less +0 -26
  35. package/styles/mixins/_gradients.less +0 -117
  36. package/styles/mixins/_icon-base.less +0 -29
  37. package/styles/mixins/_vendor-prefixes.less +0 -131
  38. package/variables/_color-defaults.less +0 -110
@@ -1,155 +0,0 @@
1
- # Variable Import Optimization for LESS
2
-
3
- ## Background
4
-
5
- LESS and SCSS handle imports differently:
6
-
7
- - **SCSS `@use`**: Module system with **local scope** - each file must explicitly import what it needs
8
- - **LESS `@import`**: **Global scope** - variables imported at entry points are available to all subsequent imports
9
-
10
- ## The Issue
11
-
12
- When migrating from LESS to SCSS (and back), we kept variable imports in every component file:
13
-
14
- ```less
15
- // Every component file had this:
16
- @import "../../../variables/index.less";
17
- ```
18
-
19
- This was:
20
- - ✅ **Necessary in SCSS** (module system requires explicit imports)
21
- - ❌ **Redundant in LESS** (variables already available from entry points)
22
-
23
- ## Entry Points Import Variables
24
-
25
- All entry points already import variables at the top:
26
-
27
- ```less
28
- // main.less → branding.less
29
- @import 'variables/index.less';
30
-
31
- // login.less → branding-login.less
32
- @import 'variables/_login-vars.less';
33
- ```
34
-
35
- Since LESS has global scope, **all subsequent imports** automatically have access to these variables.
36
-
37
- ## Changes Made
38
-
39
- ### 1. Updated Conversion Script
40
-
41
- Modified `convert-scss-to-less.sh` to automatically remove variable imports from converted LESS files:
42
-
43
- ```bash
44
- # New section 0e - Remove redundant variable imports
45
- content=$(echo "$content" | sed -E '/@import[[:space:]]+.*variables\/index\.less/d')
46
- content=$(echo "$content" | sed -E '/@import[[:space:]]+.*variables\/_login-vars\.less/d')
47
- ```
48
-
49
- **Why**: Prevents the pre-commit hook from re-adding variable imports every time you commit SCSS changes.
50
-
51
- ### 2. Created Cleanup Script
52
-
53
- Created `remove-redundant-variable-imports.sh` to clean up existing LESS files:
54
-
55
- ```bash
56
- ./helper-scripts/remove-redundant-variable-imports.sh
57
- ```
58
-
59
- This script:
60
- - Finds all LESS files with variable imports (except entry points)
61
- - Shows a preview of files to be modified
62
- - Asks for confirmation before making changes
63
- - Removes redundant `@import` statements
64
-
65
- ### 3. Files That SHOULD Keep Variable Imports
66
-
67
- Only entry point files should import variables:
68
-
69
- - ✅ `branding.less`
70
- - ✅ `branding-login.less`
71
- - ✅ `styles/login-app.less`
72
-
73
- All other files (components, mixins, utilities) get variables from the entry point.
74
-
75
- ## Benefits
76
-
77
- 1. **Reduced file size**: ~150 files × 1 line = 150 lines removed
78
- 2. **Clearer architecture**: Shows that LESS uses global scope
79
- 3. **No accidental overrides**: Can't accidentally redefine variables in component files
80
- 4. **Faster compilation**: Fewer imports to process
81
- 5. **Easier maintenance**: One source of truth for variables
82
-
83
- ## Migration Path
84
-
85
- To remove redundant imports from existing LESS files:
86
-
87
- ```bash
88
- cd packages/style
89
- ./helper-scripts/remove-redundant-variable-imports.sh
90
- npm test # Verify compilation still works
91
- git diff # Review changes
92
- git add .
93
- git commit -m "Remove redundant variable imports from LESS files"
94
- ```
95
-
96
- ## Future Commits
97
-
98
- The pre-commit hook now automatically:
99
- 1. Converts SCSS → LESS when you commit SCSS changes
100
- 2. **Removes variable imports** from the LESS output
101
- 3. Stages the updated LESS files
102
- 4. Verifies both SCSS and LESS compile successfully
103
-
104
- You don't need to do anything special - it's all automatic!
105
-
106
- ## Technical Details
107
-
108
- ### LESS Import Chain
109
-
110
- ```
111
- main.less
112
- → branding.less
113
- → variables/index.less ✅ (variables defined here)
114
- → export.less
115
- → styles/index.less
116
- → _mixins.less (has access to variables)
117
- → base/* (has access to variables)
118
- → components/* (has access to variables)
119
- ```
120
-
121
- ### SCSS Module Chain
122
-
123
- ```scss
124
- main.scss
125
- → branding.scss
126
- → styles/index.scss
127
- // Each file with @use has local scope:
128
- → core/buttons/_buttons.scss
129
- @use "../../../variables/index" as *; ✅ (needed)
130
- ```
131
-
132
- ## Why Not Remove from Mixins?
133
-
134
- You might notice files like `_shadows-helper.less` import variables. These imports are technically redundant BUT:
135
-
136
- - **All mixins are imported via `_mixins.less`** which is imported AFTER variables in the entry point
137
- - **Variables are already available** when mixins are loaded
138
- - **Could be removed** but kept for documentation/safety in case import order changes
139
-
140
- ## FAQs
141
-
142
- **Q: Won't my LESS files break without variable imports?**
143
- A: No! LESS has global scope. Once variables are imported at the entry point, they're available everywhere.
144
-
145
- **Q: What about SCSS files?**
146
- A: SCSS files MUST keep their `@use` statements. The module system requires explicit imports.
147
-
148
- **Q: Will the conversion script re-add them?**
149
- A: No! The updated script automatically removes them during conversion.
150
-
151
- **Q: What if I use a component file standalone?**
152
- A: Component files should never be compiled standalone - they must go through an entry point (main.less or login.less).
153
-
154
- **Q: Does this affect compilation?**
155
- A: No impact! Both SCSS and LESS compile successfully. The output is identical (1.00% difference).
@@ -1,527 +0,0 @@
1
- #!/bin/bash
2
-
3
- # Semi-Automated SCSS → LESS Converter
4
- # Converts SCSS syntax to LESS syntax with safety checks and manual review
5
-
6
- set -e
7
-
8
- # Get script directory for relative file paths
9
- SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
10
-
11
- # Colors for output
12
- RED='\033[0;31m'
13
- GREEN='\033[0;32m'
14
- YELLOW='\033[1;33m'
15
- BLUE='\033[0;34m'
16
- NC='\033[0m' # No Color
17
-
18
- # Flags
19
- DRY_RUN=false
20
- VERBOSE=false
21
- AUTO_APPROVE=false
22
- CONVERT_ALL=false
23
-
24
- # Parse arguments
25
- while [[ $# -gt 0 ]]; do
26
- case $1 in
27
- --dry-run)
28
- DRY_RUN=true
29
- shift
30
- ;;
31
- --verbose)
32
- VERBOSE=true
33
- shift
34
- ;;
35
- --yes|-y)
36
- AUTO_APPROVE=true
37
- shift
38
- ;;
39
- --all)
40
- CONVERT_ALL=true
41
- shift
42
- ;;
43
- --help|-h)
44
- cat <<EOF
45
- SCSS to LESS Converter
46
-
47
- Usage: $0 [OPTIONS] [FILE]
48
-
49
- Options:
50
- --dry-run Show what would be converted without writing files
51
- --verbose Show detailed conversion steps
52
- --yes, -y Auto-approve all conversions (use with caution)
53
- --all Convert all modified SCSS files
54
- --help, -h Show this help message
55
-
56
- Examples:
57
- $0 styles/core/buttons/_buttons.scss
58
- $0 --dry-run styles/core/forms/_forms.scss
59
- $0 --all
60
- $0 --yes --all
61
-
62
- Note:
63
- Variable imports are automatically removed from LESS files since LESS uses
64
- global scope (variables imported at entry points are available everywhere).
65
- This differs from SCSS's @use module system which requires explicit imports.
66
-
67
- EOF
68
- exit 0
69
- ;;
70
- *)
71
- SCSS_FILE="$1"
72
- shift
73
- ;;
74
- esac
75
- done
76
-
77
- # Function to print colored messages
78
- print_info() {
79
- echo -e "${BLUE}ℹ${NC} $1"
80
- }
81
-
82
- print_success() {
83
- echo -e "${GREEN}✅${NC} $1"
84
- }
85
-
86
- print_warning() {
87
- echo -e "${YELLOW}⚠️${NC} $1"
88
- }
89
-
90
- print_error() {
91
- echo -e "${RED}❌${NC} $1"
92
- }
93
-
94
- # Function to convert SCSS syntax to LESS
95
- convert_syntax() {
96
- local content="$1"
97
- local warnings=""
98
-
99
- # Track complex patterns that need review
100
- local needs_review=false
101
-
102
- # 0a. Remove SCSS-specific @use imports FIRST (sass:string, sass:math, etc.)
103
- # Also remove @use of variables files — LESS has global scope so these are not needed.
104
- if [[ $VERBOSE == true ]]; then
105
- print_info "Removing SCSS-specific @use imports and redundant variable @use imports"
106
- fi
107
- content=$(echo "$content" | sed '/^@use[[:space:]]*["'"'"']sass:/d')
108
- content=$(echo "$content" | sed '/^@use[[:space:]]*["'"'"'][^"'"'"']*variables\/[^"'"'"']*["'"'"']/d')
109
-
110
- # 0b. Convert string.unquote() to ~'' BEFORE other conversions
111
- if [[ $VERBOSE == true ]]; then
112
- print_info "Converting string.unquote() → ~''"
113
- fi
114
- # Handle single quotes
115
- content=$(echo "$content" | sed -E "s/string\.unquote\('([^']+)'\)/~'\1'/g")
116
- # Handle double quotes
117
- content=$(echo "$content" | sed -E "s/string\.unquote\(\"([^\"]+)\"\)/~\"\1\"/g")
118
-
119
- # 0b2. Convert math.div(a, b) to (a / b) BEFORE other conversions
120
- if [[ $VERBOSE == true ]]; then
121
- print_info "Converting math.div() → (a / b)"
122
- fi
123
- content=$(echo "$content" | sed -E 's/math\.div\(([^,]+),([^)]+)\)/(\1 \/\2)/g')
124
-
125
- # 0c. Convert @use to @import (remove 'as *' and add .less extension)
126
- if [[ $VERBOSE == true ]]; then
127
- print_info "Converting @use → @import"
128
- fi
129
- # With 'as *' suffix - double quotes (space before 'as' is optional)
130
- content=$(echo "$content" | sed -E 's/@use +"([^"]+)"[[:space:]]*as[[:space:]]+\*;/@import "\1";/g')
131
- # With 'as *' suffix - single quotes
132
- content=$(echo "$content" | sed -E "s/@use +'([^']+)'[[:space:]]*as[[:space:]]+\*;/@import '\1';/g")
133
- # With named alias (e.g. 'as vars', 'as math') - double quotes
134
- content=$(echo "$content" | sed -E 's/@use +"([^"]+)"[[:space:]]*as[[:space:]]+[a-zA-Z0-9_-]+;/@import "\1";/g')
135
- # With named alias - single quotes
136
- content=$(echo "$content" | sed -E "s/@use +'([^']+)'[[:space:]]*as[[:space:]]+[a-zA-Z0-9_-]+;/@import '\1';/g")
137
- # Without 'as' clause - double quotes
138
- content=$(echo "$content" | sed -E 's/@use +"([^"]+)";/@import "\1";/g')
139
- # Without 'as' clause - single quotes
140
- content=$(echo "$content" | sed -E "s/@use +'([^']+)';/@import '\1';/g")
141
- # Safety net: remove any @use lines that still weren't converted (e.g. unusual formatting)
142
- content=$(echo "$content" | sed '/^[[:space:]]*@use[[:space:]]/d')
143
-
144
- # 0d. Add underscore prefix and .less extension to @import paths
145
- # SCSS allows omitting _ and extension, LESS requires exact filenames
146
- if [[ $VERBOSE == true ]]; then
147
- print_info "Normalizing @import paths for LESS"
148
- fi
149
- # Process @import statements with path/filename pattern
150
- # Add _ prefix if filename doesn't start with _ (unless it's index)
151
- # Add .less extension if not present
152
- # IMPORTANT: Anchor to start of line to avoid matching quoted strings in CSS properties
153
- content=$(echo "$content" | perl -pe '
154
- s{^\s*\@import\s+(["'\''])([^"'\'']*/)([^_/][^"'\''/]+?)["'\'']}{
155
- my ($quote, $path, $file) = ($1, $2, $3);
156
- $file = "_$file" unless $file =~ /^index$/;
157
- $file .= ".less" unless $file =~ /\.less$/;
158
- "\@import $quote$path$file$quote"
159
- }gme;
160
- s{^\s*\@import\s+(["'\''])([^/]+?)["'\'']}{
161
- my ($quote, $file) = ($1, $2);
162
- $file = "_$file" unless $file =~ /^_/ or $file =~ /^index$/;
163
- $file .= ".less" unless $file =~ /\.less$/;
164
- "\@import $quote$file$quote"
165
- }gme;
166
- ')
167
- # Add .less extension to imports that already have _ but no extension
168
- content=$(echo "$content" | sed -E "s/@import (['\"])(_[^'\"]+)(['\"])/\@import \1\2.less\3/g")
169
- # Fix double .less.less
170
- content=$(echo "$content" | sed -E 's/\.less\.less/.less/g')
171
-
172
- # 0e. Remove redundant variable imports (LESS has global scope)
173
- # Variables are imported at entry points (main.less, branding.less, login.less), so component
174
- # files don't need to re-import them. This is different from SCSS @use which requires
175
- # explicit imports due to its module system.
176
- if [[ $VERBOSE == true ]]; then
177
- print_info "Removing redundant variable imports (LESS has global scope)"
178
- fi
179
- # Remove any import of variable files (LESS has global scope — these are
180
- # imported at entry points and available everywhere)
181
- content=$(echo "$content" | sed -E '/@import[[:space:]]+.*variables\/index\.less/d')
182
- content=$(echo "$content" | sed -E '/@import[[:space:]]+.*variables\/_login-vars\.less/d')
183
- content=$(echo "$content" | sed -E '/@import[[:space:]]+.*_color-defaults\.less/d')
184
- content=$(echo "$content" | sed -E '/@import[[:space:]]+.*_color-vars\.less/d')
185
- content=$(echo "$content" | sed -E '/@import[[:space:]]+.*_brand-vars\.less/d')
186
-
187
- # 0f. Strip leading blank lines left after import removal
188
- content=$(echo "$content" | sed '/./,$!d')
189
-
190
- # 1. Remove @content keyword (LESS doesn't support it)
191
- # Mixins with @content need manual expansion - just remove the keyword itself
192
- if echo "$content" | grep -q "@content"; then
193
- if [[ $VERBOSE == true ]]; then
194
- print_info "Removing @content keywords (not supported in LESS)"
195
- fi
196
- # Simply remove @content; lines - the mixin caller still needs manual work
197
- content=$(echo "$content" | sed '/^[[:space:]]*@content;*$/d')
198
- warnings="${warnings}⚠️ @content removed - mixins need manual handling in LESS\n"
199
- needs_review=true
200
- fi
201
-
202
- # 2. Convert mixin definitions (before converting variables): @mixin name() → .name()
203
- if [[ $VERBOSE == true ]]; then
204
- print_info "Converting mixin definitions: @mixin → .name()"
205
- fi
206
- content=$(echo "$content" | sed -E 's/@mixin[[:space:]]+([a-zA-Z0-9_-]+)/.\1/g')
207
-
208
- # 2. Remove SCSS module namespacing BEFORE converting @include
209
- if [[ $VERBOSE == true ]]; then
210
- print_info "Removing module namespacing"
211
- fi
212
- # Remove module prefix before dollar signs (variables): module.$var → $var
213
- content=$(echo "$content" | sed -E 's/[a-zA-Z0-9_-]+\.\$/\$/g')
214
- # Remove module prefix for mixin calls: @include module.mixin() → @include mixin()
215
- content=$(echo "$content" | sed -E 's/@include +[a-zA-Z0-9_-]+\.([a-zA-Z0-9_-]+)/@include \1/g')
216
-
217
- # 2b. Convert mixin includes: @include mixin() → .mixin()
218
- if [[ $VERBOSE == true ]]; then
219
- print_info "Converting mixin calls: @include → .mixin()"
220
- fi
221
- content=$(echo "$content" | sed -E 's/@include[[:space:]]+([a-zA-Z0-9_-]+)/.\1/g')
222
-
223
- # Note: Mixin calls without parentheses will generate LESS deprecated warnings
224
- # These should be manually fixed in LESS files after conversion
225
- # Automatic conversion is too error-prone (matches decimals, @content, etc.)
226
-
227
- # 3. Convert variables: $var → @var (after mixins so @mixin doesn't become @.ixin)
228
- if [[ $VERBOSE == true ]]; then
229
- print_info "Converting variables: \$var → @var"
230
- fi
231
- content=$(echo "$content" | sed -E 's/\$([a-zA-Z0-9_-]+)/@\1/g')
232
-
233
- # 4. Convert interpolation: #{$var} → @{var}
234
- if [[ $VERBOSE == true ]]; then
235
- print_info "Converting interpolation: #{} → @{}"
236
- fi
237
- content=$(echo "$content" | sed -E 's/#\{@([a-zA-Z0-9_-]+)\}/@{\1}/g')
238
-
239
- # 5. Convert mixin parameter separators: commas → semicolons (LESS prefers semicolons)
240
- # IMPORTANT: Only convert commas that are clearly inside mixin definitions/calls, not selector commas
241
- if [[ $VERBOSE == true ]]; then
242
- print_info "Converting mixin parameter separators: , → ; (in mixin definitions/calls only)"
243
- fi
244
-
245
- # Strategy: Convert commas to semicolons ONLY in mixin definitions/calls
246
- # This specifically targets mixin parameter lists: .mixin(@param1, @param2, @param3)
247
- # But PRESERVES commas in CSS function calls: transform: translate(@x, @y)
248
- #
249
- # Key distinction:
250
- # - Mixin definitions/calls: .name(@params) or lines starting with .
251
- # - CSS property values: lines with property: value pattern
252
- #
253
- # Solution: Only convert commas on lines that start with . (mixin definitions/calls)
254
- # This reliably identifies mixin contexts and avoids CSS property values
255
-
256
- # Process line by line to have better context control
257
- content=$(echo "$content" | perl -pe '
258
- # Only process lines that start with . (after optional whitespace) - these are mixin definitions/calls
259
- if (/^\s*\./) {
260
- # On mixin definition/call lines, convert comma-before-@variable to semicolon-before-@variable
261
- # This simpler pattern works even when default values contain commas (like rgba())
262
- # because we only care about commas that are directly followed by @variable names
263
- s/,(\s*@[a-zA-Z0-9_-]+)/;$1/g;
264
- }
265
- ')
266
-
267
- # Check if we converted @use
268
- if echo "$content" | grep -q "@import.*\.less"; then
269
- warnings="${warnings}⚠️ @use converted to @import - review if needed\n"
270
- fi
271
-
272
- # 6. Convert @forward to @import
273
- if echo "$content" | grep -q "@forward "; then
274
- if [[ $VERBOSE == true ]]; then
275
- print_info "Converting @forward → @import"
276
- fi
277
- content=$(echo "$content" | sed -E "s/@forward[[:space:]]+(['\"])([^'\"]+)\\1/@import \\1\\2\\1/g")
278
- warnings="${warnings}⚠️ @forward converted to @import - review re-exports\n"
279
- needs_review=true
280
- fi
281
-
282
- # 7. Flag complex color functions for review
283
- if echo "$content" | grep -qE "rgba\(@[a-zA-Z0-9_-]+,[[:space:]]*0\.[0-9]+\)"; then
284
- warnings="${warnings}⚠️ rgba() with alpha detected - consider using fade() in LESS\n"
285
- needs_review=true
286
- fi
287
-
288
- # 8. Convert @extend to LESS :extend() syntax
289
- # SCSS: @extend .class !optional;
290
- # LESS: &:extend(.class);
291
- if echo "$content" | grep -q "@extend "; then
292
- if [[ $VERBOSE == true ]]; then
293
- print_info "Converting @extend → &:extend()"
294
- fi
295
- # Convert @extend .class !optional; to &:extend(.class);
296
- content=$(echo "$content" | sed -E 's/^([[:space:]]*)@extend[[:space:]]+\.([a-zA-Z0-9_-]+)[[:space:]]+!optional;/\1\&:extend(.\2);/g')
297
- # Convert @extend .class; to &:extend(.class);
298
- content=$(echo "$content" | sed -E 's/^([[:space:]]*)@extend[[:space:]]+\.([a-zA-Z0-9_-]+);/\1\&:extend(.\2);/g')
299
- # Convert @extend class !optional; to &:extend(.class); (for classes without dot)
300
- content=$(echo "$content" | sed -E 's/^([[:space:]]*)@extend[[:space:]]+([a-zA-Z0-9_-]+)[[:space:]]+!optional;/\1\&:extend(.\2);/g')
301
- warnings="${warnings}⚠️ @extend converted to :extend() - review output\n"
302
- fi
303
-
304
- # 9. Convert @if/@else to LESS guards
305
- # SCSS: @if $var == value { ... } @else if $var == value2 { ... } @else { ... }
306
- # LESS: & when (@var = value) { ... } & when (@var = value2) { ... } & when (default()) { ... }
307
- if echo "$content" | grep -qE "@if |@else"; then
308
- if [[ $VERBOSE == true ]]; then
309
- print_info "Converting @if/@else → LESS guards"
310
- fi
311
-
312
- # Convert @else if to & when (note: after variable conversion $ → @)
313
- content=$(echo "$content" | sed -E 's/^([[:space:]]*)} @else if ([^{]+)\{/\1}\n\1\& when (\2) {/g')
314
-
315
- # Convert @if var != '' to & when not (var = ~'') BEFORE generic @if conversion
316
- content=$(echo "$content" | sed -E "s/^([[:space:]]*)@if ([^ ]+) != '' \{/\1\& when not (\2 = ~'') {/g")
317
- content=$(echo "$content" | sed -E 's/^([[:space:]]*)@if ([^ ]+) != "" \{/\1\& when not (\2 = ~"") {/g')
318
-
319
- # Convert standalone @if to & when
320
- content=$(echo "$content" | sed -E 's/^([[:space:]]*)@if ([^{]+)\{/\1\& when (\2) {/g')
321
-
322
- # Convert @else { to & when (default()) {
323
- content=$(echo "$content" | sed -E 's/^([[:space:]]*)} @else \{/\1}\n\1\& when (default()) {/g')
324
-
325
- # Convert == to = in guards (LESS uses single =)
326
- content=$(echo "$content" | sed -E 's/& when \(([^)]*) == /\& when (\1 = /g')
327
-
328
- # Add comment about guard conversion
329
- warnings="${warnings}⚠️ @if/@else converted to LESS guards - review conditional logic\n"
330
- needs_review=true
331
- fi
332
-
333
- # Return results via file (since we can't return complex data from bash function)
334
- echo "$content" > /tmp/scss-less-convert-content.tmp
335
- echo -e "$warnings" > /tmp/scss-less-convert-warnings.tmp
336
- if [[ $needs_review == true ]]; then
337
- echo "1" > /tmp/scss-less-convert-needsreview.tmp
338
- else
339
- echo "0" > /tmp/scss-less-convert-needsreview.tmp
340
- fi
341
- }
342
-
343
- # Function to convert a single file
344
- convert_file() {
345
- local scss_file="$1"
346
-
347
- # Strip packages/style/ prefix if present
348
- scss_file="${scss_file#packages/style/}"
349
-
350
- # Check skip list for files that need manual conversion
351
- if [[ -f "$SCRIPT_DIR/scss-to-less-skip" ]]; then
352
- if grep -q "^${scss_file}$" "$SCRIPT_DIR/scss-to-less-skip" 2>/dev/null; then
353
- print_warning "Skipping $scss_file (in skip list - requires manual sync)"
354
- return 0
355
- fi
356
- fi
357
-
358
- # Special case: stroke icons file uses a different conversion process
359
- if [[ "$scss_file" == *"_dlt-c8y-icons-stroke.scss" ]]; then
360
- print_info "Converting stroke icons file (uses special converter)"
361
- if [[ $DRY_RUN == false ]]; then
362
- node "$SCRIPT_DIR/convert-stroke-icons-to-less.js"
363
- print_success "Stroke icons converted successfully"
364
- else
365
- print_info "Dry run - would run: node $SCRIPT_DIR/convert-stroke-icons-to-less.js"
366
- fi
367
- return 0
368
- fi
369
-
370
- # Check if file exists (may be a renamed/deleted file from git diff)
371
- if [[ ! -f "$scss_file" ]]; then
372
- print_warning "Skipping $scss_file (file not found - may have been renamed/deleted)"
373
- return 0
374
- fi
375
-
376
- # Determine LESS file path
377
- local less_file="${scss_file%.scss}.less"
378
-
379
- if [[ ! -f "$less_file" ]]; then
380
- print_warning "Skipping $scss_file (no corresponding LESS file: $less_file)"
381
- return 0
382
- fi
383
-
384
- print_info "Converting: $scss_file → $less_file"
385
-
386
- # Read SCSS content
387
- local scss_content=$(cat "$scss_file")
388
-
389
- # Convert syntax
390
- convert_syntax "$scss_content"
391
-
392
- # Read results
393
- local less_content=$(cat /tmp/scss-less-convert-content.tmp)
394
- local warnings=$(cat /tmp/scss-less-convert-warnings.tmp)
395
- local needs_review=$(cat /tmp/scss-less-convert-needsreview.tmp)
396
-
397
- # Clean up temp files
398
- rm -f /tmp/scss-less-convert-content.tmp /tmp/scss-less-convert-warnings.tmp /tmp/scss-less-convert-needsreview.tmp
399
-
400
- # Show warnings if any
401
- if [[ -n "$warnings" && "$warnings" != "" ]]; then
402
- echo ""
403
- echo -e "$warnings"
404
- fi
405
-
406
- # Create temp file with new content
407
- echo "$less_content" > /tmp/scss-less-new-content.tmp
408
-
409
- # Show diff
410
- echo ""
411
- print_info "Changes to be applied:"
412
- echo ""
413
-
414
- # Create a colored diff
415
- if command -v colordiff >/dev/null 2>&1; then
416
- diff -u "$less_file" /tmp/scss-less-new-content.tmp | colordiff || true
417
- else
418
- diff -u "$less_file" /tmp/scss-less-new-content.tmp || true
419
- fi
420
-
421
- echo ""
422
-
423
- # Check if there are actual changes
424
- if diff -q "$less_file" /tmp/scss-less-new-content.tmp >/dev/null 2>&1; then
425
- print_success "No changes needed - files already in sync"
426
- rm /tmp/scss-less-new-content.tmp
427
- return 0
428
- fi
429
-
430
- # Ask for confirmation (unless dry-run or auto-approve)
431
- if [[ $DRY_RUN == true ]]; then
432
- print_info "Dry run - no files modified"
433
- rm /tmp/scss-less-new-content.tmp
434
- return 0
435
- fi
436
-
437
- if [[ $AUTO_APPROVE == false ]]; then
438
- if [[ $needs_review == "1" ]]; then
439
- print_warning "Complex patterns detected - manual review recommended"
440
- fi
441
-
442
- echo -n "Apply these changes to $less_file? [y/N] "
443
- read -r response
444
-
445
- if [[ ! "$response" =~ ^[Yy]$ ]]; then
446
- print_info "Skipped - no changes made"
447
- rm /tmp/scss-less-new-content.tmp
448
- return 0
449
- fi
450
- fi
451
-
452
- # Apply changes
453
- mv /tmp/scss-less-new-content.tmp "$less_file"
454
- print_success "Converted: $less_file"
455
-
456
- return 0
457
- }
458
-
459
- # Main execution
460
- echo "==========================================="
461
- echo "SCSS → LESS Semi-Automated Converter"
462
- echo "==========================================="
463
- echo ""
464
-
465
- if [[ $CONVERT_ALL == true ]]; then
466
- # Convert all modified SCSS files
467
- print_info "Finding all modified SCSS files..."
468
-
469
- SCSS_FILES=$(git diff --name-only HEAD -- . | grep '\.scss$' || true)
470
- SCSS_STAGED=$(git diff --cached --name-only -- . | grep '\.scss$' || true)
471
- ALL_SCSS=$(printf "%s\n%s" "$SCSS_FILES" "$SCSS_STAGED" | sort -u | grep -v '^$' || true)
472
-
473
- if [[ -z "$ALL_SCSS" ]]; then
474
- print_success "No modified SCSS files found"
475
- exit 0
476
- fi
477
-
478
- SCSS_COUNT=$(echo "$ALL_SCSS" | wc -l | tr -d ' ')
479
- print_info "Found $SCSS_COUNT modified SCSS file(s)"
480
- echo ""
481
-
482
- SUCCESS_COUNT=0
483
- SKIP_COUNT=0
484
- ERROR_COUNT=0
485
-
486
- while IFS= read -r file; do
487
- if [[ -z "$file" ]]; then
488
- continue
489
- fi
490
-
491
- if convert_file "$file"; then
492
- SUCCESS_COUNT=$((SUCCESS_COUNT + 1))
493
- else
494
- ERROR_COUNT=$((ERROR_COUNT + 1))
495
- fi
496
-
497
- echo ""
498
- done <<< "$ALL_SCSS"
499
-
500
- echo "==========================================="
501
- print_info "Conversion Summary:"
502
- print_success "$SUCCESS_COUNT file(s) converted"
503
- if [[ $ERROR_COUNT -gt 0 ]]; then
504
- print_error "$ERROR_COUNT file(s) failed"
505
- fi
506
- echo "==========================================="
507
-
508
- exit 0
509
-
510
- elif [[ -n "$SCSS_FILE" ]]; then
511
- # Convert single file
512
- if convert_file "$SCSS_FILE"; then
513
- exit 0
514
- else
515
- exit 1
516
- fi
517
-
518
- else
519
- # No file specified
520
- print_error "No file specified"
521
- echo ""
522
- echo "Usage: $0 [OPTIONS] <scss-file>"
523
- echo " $0 --all"
524
- echo ""
525
- echo "Use --help for more options"
526
- exit 1
527
- fi