Fixed cookies auto-clear + Improved build

- updated `core-js` - added npm dev dependencies for CSS build - added `postcss.config.js` - added css entrypoint `./css/style.css` - improved dev and prod build - fixed the default behavior for cookies auto-clear - fixed wildcard cookies auto-clear from cookie tables - updated CHANGELOG
68publishers · Dec 30, 2024 · f0e8de1 · f0e8de1
1 parent 2236885
commit f0e8de1
Show file tree

Hide file tree

Showing 12 changed files with 2,838 additions and 1,282 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- Added custom CSS build that is used as the default stylesheets source instead of the original plugin CSS.
+
+### Changed
+- Update the build - the final package size has been lowered.
+
+### Fixed
+- Fixed default (disabled) behaviour for cookies auto-clear.
+- Fixed clearing cookies with wildcard names (e.g. `_ga*`) when the `cookie_tables` strategy is used.
 
 ## [1.1.0] - 2024-09-19
 ### Added

diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,5 @@
+@import 'vanilla-cookieconsent/src/cookieconsent.css';
+
+#s-bl table thead tr th[scope="col"]:first-child, #s-bl table tbody tr td:first-child {
+    display: none !important;
+}
diff --git a/index.mjs b/index.mjs
@@ -1,3 +1,4 @@
 import { CookieConsentWrapperFactory } from './src/CookieConsentWrapperFactory.mjs';
+import './css/style.css';
 
 export default (new CookieConsentWrapperFactory()).create();
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,9 +31,16 @@
     "@eslint/js": "^9.5.0",
     "babel-loader": "^8.2.3",
     "copy-webpack-plugin": "^12.0.2",
+    "core-js": "^3.39.0",
+    "css-loader": "^7.1.2",
+    "cssnano": "^7.0.6",
     "eslint": "^9.5.0",
     "globals": "^15.6.0",
     "json-minimizer-webpack-plugin": "^5.0.0",
+    "mini-css-extract-plugin": "^2.9.2",
+    "postcss": "^8.4.49",
+    "postcss-custom-properties": "^14.0.4",
+    "postcss-loader": "^8.1.1",
     "terser-webpack-plugin": "^5.2.5",
     "webpack": "^5.65.0",
     "webpack-cli": "^4.9.1",

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+    map: false,
+    plugins: {
+        'cssnano': {},
+        'postcss-custom-properties': {
+            preserve: true
+        }
+    }
+}
diff --git a/src/Config/Config.mjs b/src/Config/Config.mjs
@@ -6,11 +6,11 @@ import { AutoClearOptions } from './AutoClearOptions.mjs';
 import { CmpApiOptions } from './CmpApiOptions.mjs';
 
 export class Config {
-    constructor() {
+    constructor(scriptBasePath) {
         this.pluginOptions = new PluginOptions();
         this.consentModalOptions = new ConsentModalOptions();
         this.settingsModalOptions = new SettingsModalOptions();
-        this.uiOptions = new UiOptions();
+        this.uiOptions = new UiOptions(scriptBasePath);
         this.autoClearOptions = new AutoClearOptions();
         this.cmpApiOptions = new CmpApiOptions();
     }
@@ -23,9 +23,7 @@ export class Config {
             settings_modal: this.settingsModalOptions.exportCookieConsentConfig(),
         };
 
-        if (this.autoClearOptions.enabled && AutoClearOptions.STRATEGY_COOKIE_TABLES === this.autoClearOptions.strategy) {
-            config['autoclear_cookies'] = true;
-        }
+        config['autoclear_cookies'] = this.autoClearOptions.enabled && AutoClearOptions.STRATEGY_COOKIE_TABLES === this.autoClearOptions.strategy;
 
         return config;
     }

diff --git a/src/Config/UiOptions.mjs b/src/Config/UiOptions.mjs
@@ -1,12 +1,11 @@
 import { AbstractOptions } from './AbstractOptions.mjs';
-import ccPkg from 'vanilla-cookieconsent/package.json';
-
-const ccVersion = ccPkg.version;
 
 export class UiOptions extends AbstractOptions {
-    constructor() {
+    constructor(scriptBasePath) {
         super();
 
+        this._scriptBasePath = scriptBasePath;
+
         this.include_default_stylesheets = true;
         this.external_stylesheets = [];
         this.internal_stylesheets = [];
@@ -15,7 +14,7 @@ export class UiOptions extends AbstractOptions {
     get defaultStylesheets() {
         if (true === this.include_default_stylesheets) {
             return [
-                `https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@${ccVersion}/dist/cookieconsent.css`,
+                `${this._scriptBasePath}/cookie-consent.css`,
             ];
         }
 

diff --git a/src/CookieConsentWrapper.mjs b/src/CookieConsentWrapper.mjs
@@ -24,14 +24,6 @@ export class CookieConsentWrapper {
         this._initializationTriggered = false;
         this._initialized = false;
         this._gtag = gtag;
-        this._config = new Config();
-        this._storagePool = new StoragePool();
-        this._dictionary = new Dictionary();
-        this._eventBus = new EventBus();
-        this._cookieTables = new CookieTables();
-        this._eventTriggers = {};
-        this._user = User.createDefault();
-
         this._cookieConsent = null;
         this._scriptBasePath = '';
 
@@ -41,6 +33,14 @@ export class CookieConsentWrapper {
 
             this._scriptBasePath = url.origin + pathname;
         }
+
+        this._config = new Config(this._scriptBasePath);
+        this._storagePool = new StoragePool();
+        this._dictionary = new Dictionary();
+        this._eventBus = new EventBus();
+        this._cookieTables = new CookieTables();
+        this._eventTriggers = {};
+        this._user = User.createDefault();
     }
 
     get version() {

diff --git a/src/Integration/CmpApiIntegration.mjs b/src/Integration/CmpApiIntegration.mjs
@@ -1,3 +1,5 @@
+import 'core-js/modules/esnext.regexp.escape.js'
+
 const integrateConsentApi = function (wrapper, cmpApiOptions) {
     const run = (consent) => {
         const user = wrapper.user;
@@ -103,6 +105,13 @@ const integrateCookiesApi = function (wrapper, cmpApiOptions) {
     const cookieToRow = (cookie, locale) => {
         const row = {};
 
+        if (cookie.name.includes('*')) {
+            row._name = '^' + cookie.name.split('*').map(s => RegExp.escape(s)).join('.+') + '$';
+            row.is_regex = true;
+        } else {
+            row._name = cookie.name;
+        }
+
         for (let i in headers) {
             const header = headers[i];
             const mapper = columnMappers[header] || function () { return ''; };
@@ -146,6 +155,8 @@ const integrateCookiesApi = function (wrapper, cmpApiOptions) {
 
             const cookieTable = wrapper.cookieTables.getCookieTable(locale);
 
+            cookieTable.addHeader('_name', '_name');
+
             for (let i = 0; i < headers.length; i++) {
                 cookieTable.addHeader(headers[i], wrapper.translate(locale, 'cookie_table_col_' + headers[i]));
             }

diff --git a/webpack.config.dev.mjs b/webpack.config.dev.mjs
@@ -1,6 +1,7 @@
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import CopyPlugin from 'copy-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -19,25 +20,44 @@ export default {
     module: {
         rules: [
             {
-                loader:  'babel-loader',
                 test: /\.(mjs|js)$/i,
+                loader:  'babel-loader',
                 include: [
                     path.resolve(__dirname, 'src')
                 ],
                 options: {
                     presets: [
-                        '@babel/preset-env'
+                        ['@babel/preset-env', {
+                            useBuiltIns: 'usage',
+                            corejs: {
+                                version: '3.39',
+                            },
+                            targets: "defaults",
+                        }]
                     ]
                 },
             },
+            {
+                test: /\.css$/i,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            importLoaders: 1
+                        }
+                    },
+                    'postcss-loader',
+                ]
+            },
         ],
     },
     resolve: {
         modules: [
             'node_modules',
             path.resolve(__dirname, 'src')
         ],
-        extensions: ['.mjs', '.js'],
+        extensions: ['.mjs', '.js', '.css'],
     },
     plugins: [
         new CopyPlugin({
@@ -65,12 +85,15 @@ export default {
                 },
             ],
         }),
+        new MiniCssExtractPlugin({
+            filename: 'cookie-consent.css',
+        }),
     ],
     devServer: {
         static: {
             directory: path.join(__dirname, 'demo'),
         },
         compress: true,
         port: 3000
-    }
+    },
 };
diff --git a/webpack.config.prod.mjs b/webpack.config.prod.mjs
@@ -3,6 +3,7 @@ import { fileURLToPath } from 'node:url';
 import TerserWebpackPlugin from 'terser-webpack-plugin';
 import JsonMinimizerPlugin from 'json-minimizer-webpack-plugin';
 import CopyPlugin from 'copy-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -21,25 +22,44 @@ export default {
     module: {
         rules: [
             {
-                loader:  'babel-loader',
                 test: /\.(mjs|js)$/i,
+                loader:  'babel-loader',
                 include: [
                     path.resolve(__dirname, 'src')
                 ],
                 options: {
                     presets: [
-                        '@babel/preset-env'
-                    ]
+                        ['@babel/preset-env', {
+                            useBuiltIns: 'usage',
+                            corejs: {
+                                version: '3.39',
+                            },
+                            targets: "defaults",
+                        }]
+                    ],
                 },
             },
+            {
+                test: /\.css$/i,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            importLoaders: 1
+                        }
+                    },
+                    'postcss-loader',
+                ]
+            },
         ],
     },
     resolve: {
         modules: [
             'node_modules',
             path.resolve(__dirname, 'src')
         ],
-        extensions: ['.mjs', '.js'],
+        extensions: ['.mjs', '.js', '.css'],
     },
     plugins: [
         new CopyPlugin({
@@ -67,6 +87,9 @@ export default {
                 },
             ],
         }),
+        new MiniCssExtractPlugin({
+            filename: 'cookie-consent.css',
+        }),
     ],
     optimization: {
         minimize: true,