diff --git a/eslint.config.js b/eslint.config.js
index d9937872732..8ea2b27e9e0 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -173,7 +173,7 @@ export default [
},
},
{
- files: ['scripts/**/*.js', '*.config.js', 'wtr-utils.js', 'custom-rules/**/*.js'],
+ files: ['scripts/**/*.js', '*.config.js', 'wtr-utils.js', 'custom-rules/**/*.js', 'packages/**/gulpfile.js'],
languageOptions: {
globals: {
...globals.node,
@@ -183,17 +183,6 @@ export default [
'no-console': 'off',
},
},
- {
- files: ['packages/**/gulpfile.cjs'],
- languageOptions: {
- globals: {
- ...globals.node,
- },
- },
- rules: {
- '@typescript-eslint/no-require-imports': 'off',
- },
- },
{
files: ['packages/**/test/**', 'test/integration/**'],
languageOptions: {
diff --git a/package.json b/package.json
index 6a2a2db71cb..616fb091942 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
"typescript": "^5.8.3"
},
"resolutions": {
+ "svg2ttf": "6.0.3",
"playwright": "^1.52.0"
},
"lint-staged": {
diff --git a/packages/icons/gulpfile.cjs b/packages/icons/gulpfile.cjs
deleted file mode 100644
index f16eed68dca..00000000000
--- a/packages/icons/gulpfile.cjs
+++ /dev/null
@@ -1,54 +0,0 @@
-'use strict';
-
-const gulp = require('gulp');
-const modify = require('gulp-modify');
-const cheerio = require('cheerio');
-const concat = require('gulp-concat');
-
-function createCopyright() {
- return `/**
- * @license
- * Copyright (c) 2015 - ${new Date().getFullYear()} Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */`;
-}
-
-function iconFileModifier(prefix) {
- return function (file, contents) {
- const id = file.path.replace(/.*\/(.*).svg/u, '$1');
- const svg = cheerio.load(contents, { xmlMode: true })('svg');
- // Remove fill attributes.
- svg.children('[fill]').removeAttr('fill');
- // Add closing tags instead of self-closing.
- const content = svg.children().toString().replace(/"\/>/gu, '">');
- // Output the "meat" of the SVG as group element.
- return `${content}`;
- };
-}
-
-gulp.task('icons', () => {
- return gulp
- .src(['assets/svg/*.svg'], { base: '.' })
- .pipe(
- modify({
- fileModifier: iconFileModifier('vaadin:'),
- }),
- )
- .pipe(concat('vaadin-iconset.js'))
- .pipe(
- modify({
- fileModifier(_file, contents) {
- // Enclose all icons in a vaadin-iconset
- return `${createCopyright()}
-import { Iconset } from '@vaadin/icon/vaadin-iconset.js';
-
-const template = document.createElement('template');
-
-template.innerHTML = \`\`;
-
-Iconset.register('vaadin', 16, template);\n`;
- },
- }),
- )
- .pipe(gulp.dest('.'));
-});
diff --git a/packages/icons/gulpfile.js b/packages/icons/gulpfile.js
new file mode 100644
index 00000000000..4b1d3173a14
--- /dev/null
+++ b/packages/icons/gulpfile.js
@@ -0,0 +1,52 @@
+import * as cheerio from 'cheerio';
+import { dest, src, task } from 'gulp';
+import concat from 'gulp-concat';
+import { gulpPlugin } from 'gulp-plugin-extras';
+import { basename } from 'path';
+
+function createCopyright() {
+ return `/**
+ * @license
+ * Copyright (c) 2015 - ${new Date().getFullYear()} Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */`;
+}
+
+function transformIcon() {
+ return gulpPlugin('gulp-transform-icon', (file) => {
+ const id = basename(file.path, '.svg');
+ const svg = cheerio.load(file.contents, { xmlMode: true })('svg');
+ // Remove fill attributes.
+ svg.children('[fill]').removeAttr('fill');
+ // Add closing tags instead of self-closing.
+ const content = svg.children().toString().replace(/"\/>/gu, '">');
+ console.warn(id, content);
+ // Output the "meat" of the SVG as group element.
+ file.contents = Buffer.from(`${content}`);
+ return file;
+ });
+}
+
+function createIconset() {
+ return gulpPlugin('gulp-create-iconset', (file) => {
+ // Enclose all icons in a vaadin-iconset
+ const contents = `${createCopyright()}
+import { Iconset } from '@vaadin/icon/vaadin-iconset.js';
+
+const template = document.createElement('template');
+
+template.innerHTML = \`\`;
+
+Iconset.register('vaadin', 16, template);\n`;
+ file.contents = Buffer.from(contents);
+ return file;
+ });
+}
+
+task('icons', () => {
+ return src(['assets/svg/*.svg'], { base: '.' })
+ .pipe(transformIcon())
+ .pipe(concat('vaadin-iconset.js'))
+ .pipe(createIconset())
+ .pipe(dest('.'));
+});
diff --git a/packages/icons/package.json b/packages/icons/package.json
index b7565be9021..c5a1f091800 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -20,7 +20,7 @@
"module": "vaadin-iconset.js",
"type": "module",
"scripts": {
- "icons": "gulp icons --gulpfile gulpfile.cjs"
+ "icons": "gulp icons"
},
"files": [
"assets/**/*",
@@ -37,10 +37,10 @@
"@vaadin/icon": "25.0.0-alpha3"
},
"devDependencies": {
- "cheerio": "^1.0.0-rc.10",
- "gulp": "^5.0.0",
- "gulp-cli": "^3.0.0",
+ "cheerio": "^1.0.0",
+ "gulp": "^5.0.1",
+ "gulp-cli": "^3.1.0",
"gulp-concat": "^2.6.1",
- "gulp-modify": "^0.1.1"
+ "gulp-plugin-extras": "^1.0.0"
}
}
diff --git a/packages/rich-text-editor/gulpfile.cjs b/packages/rich-text-editor/gulpfile.js
similarity index 82%
rename from packages/rich-text-editor/gulpfile.cjs
rename to packages/rich-text-editor/gulpfile.js
index 80b9c6afd95..7aa39142dbc 100644
--- a/packages/rich-text-editor/gulpfile.cjs
+++ b/packages/rich-text-editor/gulpfile.js
@@ -1,33 +1,27 @@
-'use strict';
+import fs from 'fs';
+import { dest, task } from 'gulp';
+import iconfont from 'gulp-iconfont';
-const gulp = require('gulp');
-const iconfont = require('gulp-iconfont');
-const fs = require('fs');
-
-gulp.task('icons', (done) => {
+task('icons', (done) => {
let glyphs;
const fontName = 'vaadin-rte-icons';
const fileName = 'vaadin-rich-text-editor-icons';
- gulp
- .src('icons/*.svg')
- .pipe(
- iconfont({
- fontName: fileName,
- formats: ['woff'],
- fontHeight: 1000,
- ascent: 850,
- descent: 150,
- fixedWidth: true,
- normalize: true,
- timestamp: 1, // Truthy!
- }),
- )
+ iconfont('icons/*.svg', {
+ fontName: fileName,
+ formats: ['woff'],
+ fontHeight: 1000,
+ ascent: 850,
+ descent: 150,
+ fixedWidth: true,
+ normalize: true,
+ timestamp: 1, // Truthy!
+ })
.on('glyphs', (glyphData) => {
// Store for later use
glyphs = glyphData;
})
- .pipe(gulp.dest('.', { encoding: false }))
+ .pipe(dest('.', { encoding: false }))
.on('finish', () => {
// Generate base64 version of the font
const iconsWoff = fs.readFileSync('vaadin-rich-text-editor-icons.woff');
diff --git a/packages/rich-text-editor/package.json b/packages/rich-text-editor/package.json
index 456898a620c..3db280c8eff 100644
--- a/packages/rich-text-editor/package.json
+++ b/packages/rich-text-editor/package.json
@@ -20,7 +20,7 @@
"module": "vaadin-rich-text-editor.js",
"type": "module",
"scripts": {
- "icons": "gulp icons --gulpfile gulpfile.cjs"
+ "icons": "gulp icons"
},
"files": [
"src",
@@ -54,9 +54,9 @@
"@vaadin/chai-plugins": "25.0.0-alpha3",
"@vaadin/test-runner-commands": "25.0.0-alpha3",
"@vaadin/testing-helpers": "^2.0.0",
- "gulp": "^5.0.0",
- "gulp-cli": "^3.0.0",
- "gulp-iconfont": "^11.0.0",
+ "gulp": "^5.0.1",
+ "gulp-cli": "^3.1.0",
+ "gulp-iconfont": "^12.0.0",
"sinon": "^18.0.0"
},
"cvdlName": "vaadin-rich-text-editor",
diff --git a/packages/rich-text-editor/src/vaadin-rich-text-editor-icons.js b/packages/rich-text-editor/src/vaadin-rich-text-editor-icons.js
index 4649e216e18..aea1da2417d 100644
--- a/packages/rich-text-editor/src/vaadin-rich-text-editor-icons.js
+++ b/packages/rich-text-editor/src/vaadin-rich-text-editor-icons.js
@@ -16,7 +16,7 @@ template.innerHTML = `