Do not load ol.css via React, but as a regular stylesheet (WordPress style)

Htbaa · Htbaa · commit 0c1b1d4e5b11 · 2026-03-12T15:08:39.000+01:00
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -27,4 +27,6 @@ jobs:
           NODE_OPTIONS: --openssl-legacy-provider
         run: npm run webpack-prod
       - name: Build CSS
-        run: npm run css-prod
+        run: |
+          npm run css-prod
+          npm run css-ol
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -23,6 +23,7 @@ jobs:
           # Fix for ERR_OSSL_EVP_UNSUPPORTED error caused by Webpack
           NODE_OPTIONS: --openssl-legacy-provider
         run: |
+          npm run css-ol
           npm run css-prod
           npm run webpack-prod
       - name: Cache Composer packages
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,5 @@
+- Bugfix: Compatibel met WordPress 6.9. Sinds WordPress 6.9 worden stylesheets die tijdens contentgeneratie worden ingeladen alsnog in `<head>` geplaatst. Hierdoor worden stylesheets die door WordPress worden geladen altijd vóór het algemene OpenLayers stylesheet ingeladen, waardoor er een specificity probleem ontstaat. Dit is opgelost door niet langer meer `ol.css` via React in te laden, maar door deze als aparte stylesheet beschikbaar te stellen (`gh-dim-ol-style`). Zie ook `wp_should_output_buffer_template_for_enhancement` om het oude gedrag van WordPress weer in te schakelen (maar is voor deze versie dus niet meer nodig).
+
 **1.12.1 (2025-07-30)**
 
 - Bugfix: Sinds OpenLayers 10 kon het navigeren naar een adres, gevonden met de zoekfunctie, de kaart doen vastlopen en liep het geheugenverbruik van de browser vol waardoor de pagina niet reageerde en uiteindelijk crashte. Dit probleem is opgelost.
diff --git a/README.md b/README.md
@@ -15,6 +15,7 @@ A (Dutch) changelog is being kept at `CHANGELOG.MD`
 
 ````
 $ npm install
+$ npm run css-ol
 $ npm run css-prod
 $ npm run webpack-prod
 $ npm run composer
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "css-ol": "npx sass --style=compressed node_modules/ol/ol.css plugins/gh-datainmap/dist/ol.css",
     "css-prod": "npx sass --style=compressed src/scss/style.scss plugins/gh-datainmap/dist/style.css",
     "css-dev": "npx sass --watch src/scss/style.scss plugins/gh-datainmap/dist/style.css",
     "webpack-prod": "npx webpack --mode=production",
diff --git a/plugins/gh-datainmap/gh-datainmap.php b/plugins/gh-datainmap/gh-datainmap.php
@@ -64,6 +64,7 @@ function gh_dim_register_scripts() {
     wp_register_script( 'gh-dim-locationpicker', plugin_dir_url(GH_DIM_FILE) . 'dist/admin-locationpicker.js' , array('gh-dim-vendors'), GH_DIM_VERSION, true );
     wp_register_script( 'gh-dim-location', plugin_dir_url(GH_DIM_FILE) . 'dist/admin-location.js' , array('gh-dim-vendors', 'gh-dim-colorpicker-vendor'), GH_DIM_VERSION, true );
     wp_register_style( 'gh-dim-style', plugin_dir_url(GH_DIM_FILE) . 'dist/style.css', array(), GH_DIM_VERSION);
+    wp_register_style( 'gh-dim-ol-style', plugin_dir_url(GH_DIM_FILE) . 'dist/ol.css', array(), GH_DIM_VERSION);
     // Vendor
     wp_register_script( 'gh-dim-colorpicker-vendor', plugin_dir_url(GH_DIM_FILE) . 'vendor/wp-color-picker-alpha/dist/wp-color-picker-alpha.min.js', array( 'wp-color-picker' ), GH_DIM_VERSION, true );
 }
diff --git a/plugins/gh-datainmap/includes/shortcode.php b/plugins/gh-datainmap/includes/shortcode.php
@@ -161,6 +161,9 @@ function($a) {
     if($settings['include_default_style']) {
         wp_enqueue_style( 'gh-dim-style' );
     }
+    else {
+        wp_enqueue_style( 'gh-dim-ol-style' );
+    }
 
     wp_enqueue_script( 'gh-dim-datainmap' );
     $security = wp_create_nonce('gh-dim-datainmap');
diff --git a/src/components/map.js b/src/components/map.js
@@ -11,7 +11,6 @@
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the Licence for the specific language governing permissions and limitations under the Licence.
 */
-import 'ol/ol.css';
 import Map from 'ol/Map';
 import View from 'ol/View';
 import { defaults as defaultInteractions } from 'ol/interaction';
diff --git a/src/scss/style.scss b/src/scss/style.scss
@@ -1,4 +1,5 @@
 $font-size-base: 14px;
+@import '../../node_modules/ol/ol';
 @import './mixins/mixins';
 @import './modules/modules';
 @import './transitions';

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	+- Bugfix: Compatibel met WordPress 6.9. Sinds WordPress 6.9 worden stylesheets die tijdens contentgeneratie worden ingeladen alsnog in `<head>` geplaatst. Hierdoor worden stylesheets die door WordPress worden geladen altijd vóór het algemene OpenLayers stylesheet ingeladen, waardoor er een specificity probleem ontstaat. Dit is opgelost door niet langer meer `ol.css` via React in te laden, maar door deze als aparte stylesheet beschikbaar te stellen (`gh-dim-ol-style`). Zie ook `wp_should_output_buffer_template_for_enhancement` om het oude gedrag van WordPress weer in te schakelen (maar is voor deze versie dus niet meer nodig).
	`2`	`+`
`1`	`3`	`1.12.1 (2025-07-30)`
`2`	`4`
`3`	`5`	`- Bugfix: Sinds OpenLayers 10 kon het navigeren naar een adres, gevonden met de zoekfunctie, de kaart doen vastlopen en liep het geheugenverbruik van de browser vol waardoor de pagina niet reageerde en uiteindelijk crashte. Dit probleem is opgelost.`
Original file line number	Diff line number	Diff line change
`@@ -64,6 +64,7 @@ function gh_dim_register_scripts() {`
`64`	`64`	`wp_register_script( 'gh-dim-locationpicker', plugin_dir_url(GH_DIM_FILE) . 'dist/admin-locationpicker.js' , array('gh-dim-vendors'), GH_DIM_VERSION, true );`
`65`	`65`	`wp_register_script( 'gh-dim-location', plugin_dir_url(GH_DIM_FILE) . 'dist/admin-location.js' , array('gh-dim-vendors', 'gh-dim-colorpicker-vendor'), GH_DIM_VERSION, true );`
`66`	`66`	`wp_register_style( 'gh-dim-style', plugin_dir_url(GH_DIM_FILE) . 'dist/style.css', array(), GH_DIM_VERSION);`
	`67`	`+ wp_register_style( 'gh-dim-ol-style', plugin_dir_url(GH_DIM_FILE) . 'dist/ol.css', array(), GH_DIM_VERSION);`
`67`	`68`	`// Vendor`
`68`	`69`	`wp_register_script( 'gh-dim-colorpicker-vendor', plugin_dir_url(GH_DIM_FILE) . 'vendor/wp-color-picker-alpha/dist/wp-color-picker-alpha.min.js', array( 'wp-color-picker' ), GH_DIM_VERSION, true );`
`69`	`70`	`}`
Original file line number	Diff line number	Diff line change
`@@ -161,6 +161,9 @@ function($a) {`
`161`	`161`	`if($settings['include_default_style']) {`
`162`	`162`	`wp_enqueue_style( 'gh-dim-style' );`
`163`	`163`	`}`
	`164`	`+ else {`
	`165`	`+ wp_enqueue_style( 'gh-dim-ol-style' );`
	`166`	`+ }`
`164`	`167`
`165`	`168`	`wp_enqueue_script( 'gh-dim-datainmap' );`
`166`	`169`	`$security = wp_create_nonce('gh-dim-datainmap');`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`$font-size-base: 14px;`
	`2`	`+@import '../../node_modules/ol/ol';`
`2`	`3`	`@import './mixins/mixins';`
`3`	`4`	`@import './modules/modules';`
`4`	`5`	`@import './transitions';`