@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.
- package/README.md +30 -259
- package/package.json +2 -2
- package/styles/core/overlays/_dropdowns.scss +3 -3
- package/variables/dashboard-themes/_branded-dashboard.scss +290 -296
- package/helper-scripts/README-variable-imports.md +0 -155
- package/helper-scripts/convert-scss-to-less.sh +0 -527
- package/helper-scripts/convert-stroke-icons-to-less.js +0 -115
- package/helper-scripts/remove-redundant-variable-imports.sh +0 -80
- package/helper-scripts/scss-to-less-skip +0 -20
- package/helper-scripts/sync-scss-to-less.sh +0 -75
- package/markdown-files/MANUAL-SYNC-FILES.md +0 -56
- package/styles/_login-app.less +0 -34
- package/styles/_mixins.less +0 -47
- package/styles/_utilities.less +0 -21
- package/styles/animations/_animate.less +0 -653
- package/styles/animations/_realtime-animation-list.less +0 -20
- package/styles/components/_markdown-content.less +0 -95
- package/styles/components/application-and-system/_c8y-cookie-banner.less +0 -36
- package/styles/components/data-display-and-visualization/_boxed-label.less +0 -45
- package/styles/components/data-display-and-visualization/_c8y-datapoint-pill.less +0 -104
- package/styles/components/data-display-and-visualization/_status.less +0 -105
- package/styles/components/data-display-and-visualization/lists/_c8y-data-point-list.less +0 -31
- package/styles/components/data-display-and-visualization/tables/_responsive-grid-table.less +0 -189
- package/styles/components/data-input/_c8y-ai-chat.less +0 -258
- package/styles/components/data-input/_static-assets-file-picker.less +0 -22
- package/styles/components/navigation-and-layout/_c8y-scrollbar.less +0 -118
- package/styles/components/navigation-and-layout/navigation/_breadcrumbs.less +0 -60
- package/styles/components/status-feedback-and-notifications/_c8y-message-banner.less +0 -46
- package/styles/dashboard/_c8y-dashboard-style.less +0 -565
- package/styles/dashboard/_dashboard-widgets.less +0 -46
- package/styles/icons/_dlt-c8y-icons-stroke.less +0 -7260
- package/styles/icons/_marker-icons.less +0 -32
- package/styles/layout/_bottom-drawer.less +0 -70
- package/styles/layout/_group-info.less +0 -26
- package/styles/mixins/_gradients.less +0 -117
- package/styles/mixins/_icon-base.less +0 -29
- package/styles/mixins/_vendor-prefixes.less +0 -131
- 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
|