Skip to content

Commit c3f308f

Browse files
Michael-SchaerMichael-Schaer
authored
[RELEASE] Dependencies, SASS Migration & UI Improvements
## Overview Updating dependencies, migrating to modern SASS module system and fixing deprecation warnings. Improvements for the UI and site sharing menu ## Key Changes - Build System: gulp-sass `5.0.0` → `6.0.0`, handlebars `4.7.7` dependency - SASS: Migrated from deprecated `@import` to modern `@use`/`@forward` syntax. Added migration guide in `docs/sass-modules-migration.md` - Replaced Twitter/X Icon with Bluesky for site sharing - Small changes to improve UI when using "Protect-My-Infos" plugin - Bug Fix: `_load_textdomain_just_in_time` warning (ACF initialization timing) - Bug Fix: Navigation Menu top bar was covering the first element in mobile view in some cases - Security Updates ### Development - Added improved Xdebug configuration (`.vscode/launch.json`) - Added project-specific editor settings - 🛠️ Changed requirements for dev tool versions in CONTRIBUTING
1 parent 5616395 commit c3f308f

86 files changed

Lines changed: 4056 additions & 3090 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/CONTRIBUTING.md‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@
66

77
### Requirements
88

9-
* [node](https://nodejs.org/) >= 10.16.0
10-
* [yarn](https://yarnpkg.com) >= 1.7.0
11-
* [docker](https://www.docker.com/) >= 23.0.0
12-
* [docker compose](https://docs.docker.com/compose/) >= 2.16.0
9+
* [node](https://nodejs.org/) >= 16
10+
* [yarn](https://yarnpkg.com) >= 1.22.0
11+
* [docker](https://www.docker.com/) >= 25.0.0
12+
* [docker compose](https://docs.docker.com/compose/) >= 2.40.0
1313

1414
### Setup
1515

@@ -169,4 +169,3 @@ Localization is a mess:
169169
[crowdin](https://crowdin.com/project/2018gruenech) and create a new PR with the translated files. If no
170170
translations changed, no PR is created.
171171
- Merge the PR.
172-

‎.vscode/launch.json‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"name": "Listen for Xdebug",
6+
"type": "php",
7+
"request": "launch",
8+
"port": 9003,
9+
"pathMappings": {
10+
"/var/www/html": "${workspaceFolder}/wordpress"
11+
},
12+
"log": true,
13+
"ignore": [
14+
"**/vendor/**/*.php"
15+
],
16+
"xdebugSettings": {
17+
"max_children": 128,
18+
"max_data": 1024,
19+
"max_depth": 3
20+
}
21+
},
22+
{
23+
"name": "Launch WordPress Admin",
24+
"type": "php",
25+
"request": "launch",
26+
"port": 9003,
27+
"pathMappings": {
28+
"/var/www/html": "${workspaceFolder}/wordpress"
29+
},
30+
"log": true,
31+
"url": "http://localhost/wp-admin/",
32+
"ignore": [
33+
"**/vendor/**/*.php"
34+
],
35+
"xdebugSettings": {
36+
"max_children": 128,
37+
"max_data": 1024,
38+
"max_depth": 3
39+
}
40+
}
41+
]
42+
}

‎.vscode/settings.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"files.trimTrailingWhitespace": true,
3+
"files.insertFinalNewline": true,
4+
"files.trimFinalNewlines": true,
5+
"[php]": {
6+
"editor.tabSize": 4,
7+
"editor.insertSpaces": true
8+
},
9+
"[javascript]": {
10+
"editor.tabSize": 2,
11+
"editor.insertSpaces": true
12+
},
13+
"[twig]": {
14+
"editor.tabSize": 2,
15+
"editor.insertSpaces": true
16+
}
17+
}

‎cli/generate-sass.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const SOURCE_FILE = './styleguide/src/components/_loader.scss';
1111
* @return {String}
1212
*/
1313
function getRelativePath(view_path) {
14-
return '@import "./' + view_path.replace('.hbs', '') + '";\n';
14+
return '@forward "./' + view_path.replace('.hbs', '') + '";\n';
1515
}
1616

1717
/**

‎docs/sass-modules-migration.md‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# SCSS to Sass Modules Migration Documentation
2+
3+
## Overview
4+
This document outlines the process and fixes implemented to migrate the SCSS codebase from the deprecated `@import` syntax to the modern Sass module system using `@use` and `@forward`.
5+
6+
## Migration Steps
7+
8+
### 1. Utility Files Conversion
9+
- Converted `_variables.scss` to use module system
10+
- Converted `_mixins.scss` to use module system with variables namespace
11+
- Converted remaining utility files (`_reset.scss`, `_fonts.scss`, etc.)
12+
- Created `_index.scss` in scss directory to forward all utilities
13+
14+
### 2. Variable and Mixin Access
15+
- Made private variables public in `_variables.scss` by removing underscore prefixes
16+
- Updated mixins to use public variable names
17+
- Established consistent namespace prefixes: `v.` for variables, `m.` for mixins
18+
19+
### 3. Component Files Updates
20+
- Updated component files to use new module system
21+
- Fixed namespace conflicts in component files
22+
- Fixed mixin namespace issues in component files using automated scripts
23+
- Fixed path issues in nested component files
24+
25+
### 4. Key Fixes Implemented
26+
27+
#### Fix for Mixin Namespaces
28+
Created and iteratively improved `fix-mixin-namespaces.sh` to automatically add the correct namespace prefix (`m.`) to all mixin calls, including:
29+
- Basic layout mixins
30+
- Font-related mixins (`heading-font`, `title-font`, etc.)
31+
- Responsive design mixins (`media`, `only_ie10_above`, etc.)
32+
- Utility mixins (`aspect-ratio-box`, `clean-ul`, etc.)
33+
34+
#### Fix for Nested Import Paths
35+
Created `fix-nested-paths.sh` to automatically correct relative import paths in nested component SCSS files by:
36+
- Calculating the correct relative path from each file to the `scss` directory
37+
- Updating `@use` import paths for `variables` and `mixins`
38+
39+
#### Fix for Page Grid Variables
40+
- Identified conflicts between local and global page grid variables
41+
- Fixed variable definitions in `page.scss` to use proper local variables
42+
- Fixed variable references in media queries
43+
44+
## Scripts Created
45+
46+
### fix-mixin-namespaces.sh
47+
Automatically prefixes mixin calls with the correct namespace (`m.`).
48+
49+
### fix-nested-paths.sh
50+
Fixes relative import paths in nested component SCSS files.
51+
52+
### fix-duplicate-prefixes.sh
53+
Fixes duplicate namespace prefixes (e.g., `v.v.`) that occurred during migration.
54+
55+
### fix-page-vars.sh and fix-page-media-queries.sh
56+
Fix variable references and media queries in the page component.
57+
58+
## Remaining Considerations
59+
- The build shows deprecation warnings for `@import` rules in component files that could be addressed in a future phase
60+
- Consider migrating component files from `@import` to `@use`/`@forward` in a separate task
61+
62+
## Benefits of the Migration
63+
- Modern, more maintainable Sass code
64+
- Explicit namespaces prevent naming collisions
65+
- Better encapsulation of variables and mixins
66+
- Improved build performance through better dependency management

‎gulp/svg-sprite.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ module.exports = function( options, done ) {
1717
},
1818
shape: {
1919
id: {
20-
separator: '_', // Folder separation
20+
separator: '-', // Folder separation
2121
whitespace: '-', // Whitespace
2222
},
2323
transform: [

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,10 @@
6767
"gulp-modernizr": "^4.0.0",
6868
"gulp-plumber": "^1.2.1",
6969
"gulp-rename": "^2.0.0",
70-
"gulp-sass": "^5.0.0",
70+
"gulp-sass": "^6.0.0",
7171
"gulp-svg-sprite": "^1.5.0",
7272
"gulp-uglify": "^3.0.1",
73+
"handlebars": "^4.7.7",
7374
"handlebars-helper-svg": "^2.0.1",
7475
"lodash.isobject": "^3.0.2",
7576
"sass": "^1.35.2",

‎wordpress/wp-content/themes/les-verts/composer.lock‎

Lines changed: 21 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎wordpress/wp-content/themes/les-verts/lib/form/settings-page.php‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,14 @@
22

33
require_once __DIR__ . '/acf/settings.php';
44

5-
if ( function_exists( 'acf_add_options_page' ) ) {
6-
7-
acf_add_options_sub_page( array(
8-
'page_title' => 'Global form settings',
9-
'menu_title' => 'Settings',
10-
'menu_slug' => 'form-general-settings',
11-
'parent_slug' => 'edit.php?post_type=' . \SUPT\FormType::MODEL_NAME,
12-
'capability' => 'manage_options',
13-
) );
14-
15-
}
16-
17-
5+
add_action( 'init', function() {
6+
if ( function_exists( 'acf_add_options_sub_page' ) ) {
7+
acf_add_options_sub_page( array(
8+
'page_title' => 'Global form settings',
9+
'menu_title' => 'Settings',
10+
'menu_slug' => 'form-general-settings',
11+
'parent_slug' => 'edit.php?post_type=' . \SUPT\FormType::MODEL_NAME,
12+
'capability' => 'manage_options',
13+
) );
14+
}
15+
} );

‎wordpress/wp-content/themes/les-verts/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* Theme Name: Les Verts
33
* Description: Custom theme for the GREENS of Switzerland. Designed by superhuit.ch, built by gruene.ch on top of superhuit's stack.
44
* Author: superhuit.ch & gruene.ch
5-
* Version: 0.41.1
5+
* Version: 0.42.0
66
* Requires PHP: 7.4
77
* Requires at least: 5.0
88
* Theme URI: https://github.com/grueneschweiz/2018.gruene.ch/

0 commit comments

Comments
 (0)
⚡