Skip to content

fix(preview): resolve Windows path generation and handle undefined font configurations cleanly #718

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bshiva2004 wants to merge 1 commit into
base: master
Choose a base branch
from
+43 −32
Open

fix(preview): resolve Windows path generation and handle undefined font configurations cleanly #718

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 39 additions & 29 deletions gulp-tasks/build/deploy-preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,19 +21,24 @@ const _LIST_PACKAGES = [];
* List packages with output CSS
*/
function _listPackages() {

const listPackages = globSync(`packages/**/${config.cssSrc}`);

listPackages.length && listPackages.forEach(( path ) => {

const [, family] = path.split("/");

_LIST_PACKAGES.push({
family,
path,
cssPath: `assets/${family}/${config.cssSrc}/ibm-${family}-all.css`
if (listPackages.length) {
listPackages.forEach((pathStr) => {
// FIX: Handles both Windows backward slashes (\) and Unix forward slashes (/)
const pathParts = pathStr.split(/[\\/]/);
const family = pathParts[1];

// CRITICAL GUARD: Only register valid, existing font package directories
if (family && family !== 'undefined') {
_LIST_PACKAGES.push({
family,
path: pathStr,
cssPath: `assets/${family}/${config.cssSrc}/ibm-${family}-all.css`
});
}
});
});
}
}

/**
Expand All @@ -43,14 +48,16 @@ const _transformFamilyMap = {
jp: "JP",
kr: "KR",
tc: "TC"
}
};

function _transformFamilyName(family) {
// CRITICAL GUARD: Stop string operation crashes if family data string is corrupt
if (!family || typeof family !== 'string' || family === 'undefined') {
return "IBM Plex";
}

return "IBM " + family.split("-").map((part) => {

return _transformFamilyMap[part] ? _transformFamilyMap[part] : part.charAt(0).toUpperCase() + part.slice(1);

}).join(" ");
}

Expand All @@ -60,7 +67,6 @@ function _transformFamilyName(family) {
* @returns {*} gulp stream
*/
function _copyTest() {

_listPackages();

return gulp
Expand All @@ -74,7 +80,6 @@ function _copyTest() {
* @returns {*} gulp stream
*/
function _injectHtml() {

console.log("Inject html");

const injectCss = [];
Expand All @@ -84,41 +89,42 @@ function _injectHtml() {
];

_LIST_PACKAGES.forEach(({ family, cssPath }) => {
// Double check to prevent injecting undefined layouts into stream
if (!family || family === 'undefined') return;

injectCss.push(`${config.deployPreviewPath}/${cssPath}`);

injectStyle.push(`div[data-family="${family}"] { display: initial; }`);

const transformedFamily = _transformFamilyName(family);

injectOptions.push(`<option value="${transformedFamily}">${transformedFamily}</option>`)
injectOptions.push(`<option value="${transformedFamily}">${transformedFamily}</option>`);
});

// CRITICAL FIX FOR GULP GLOB ERRORS:
// If no packages compiled yet, clean array out to prevent singular glob crash
const verifiedCssSources = injectCss.filter(Boolean);

const target = gulp.src(`${config.deployPreviewPath}/index.html`);

return target
.pipe(inject(
gulp.src(injectCss, { read: false }), {
gulp.src(verifiedCssSources, { read: false, allowEmpty: true }), {
transform: function(filepath) {

return `<link rel="stylesheet" href="${filepath.replace("/public/", "")}" />`;
}
}
))
.pipe(inject(
gulp.src(config.testSrc + "/inject.txt", { ready: false }), {
gulp.src(config.testSrc + "/inject.txt", { read: false, allowEmpty: true }), {
starttag: '<!-- inject:style -->',
transform: function() {

return `<style>\n${injectStyle.join('\n')}\n</style>`;
}
}
))
.pipe(inject(
gulp.src(config.testSrc + "/inject.txt", { ready: false }), {
gulp.src(config.testSrc + "/inject.txt", { read: false, allowEmpty: true }), {
starttag: '<!-- inject:options -->',
transform: function() {

return injectOptions.join('\n');
}
}
Expand All @@ -132,11 +138,14 @@ function _injectHtml() {
* @returns {*} gulp stream
*/
function _copyCss(done) {

console.log("Copy css");

const tasks = _LIST_PACKAGES.map(({ path, family }) => {
// Safety exit if package tree array parsing state came back blank
if (_LIST_PACKAGES.length === 0) {
return done();
}

const tasks = _LIST_PACKAGES.map(({ path, family }) => {
return () => gulp
.src([path + "/*.*", "!" + path + "/*.min.*"])
.pipe(replace(/local\(.*?\),/gm, ""))
Expand All @@ -155,11 +164,13 @@ function _copyCss(done) {
* @returns {*} gulp stream
*/
function _copyFonts(done) {

console.log("Copy fonts");

const tasks = _LIST_PACKAGES.map(({ path, family }) => {
if (_LIST_PACKAGES.length === 0) {
return done();
}

const tasks = _LIST_PACKAGES.map(({ path, family }) => {
return () => gulp
.src([`packages/${family}/fonts/**/*.*`])
.pipe(gulp.dest([`${config.deployPreviewAssets}/${family}/fonts`]));
Expand All @@ -177,7 +188,6 @@ function _copyFonts(done) {
* @returns {*} gulp stream
*/
function _copyPreview() {

return gulp
.src(["scripts/preview.js"])
.pipe(gulp.dest(config.deployPreviewPath));
Expand Down
7 changes: 4 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,24 @@
"workspaces": [
"packages/*"
],
"scripts": {
"scripts": {
"clean": "rimraf public zip dist",
"clean:family": "node ./scripts/clean.js",
"build": "yarn clean:family && yarn build:scss && yarn build:css",
"build:zip": "rimraf zip && yarn build && node ./scripts/prepare-zip.js && sh scripts/zip.sh && node ./scripts/clean-zip.js",
"build:css": "node ./scripts/compile-css.js",
"build:scss": "node ./scripts/generate-scss.js",
"build:deploy-preview": "gulp build:deploy-preview",
"build:deploy-preview": "yarn build:scss && yarn build:css && gulp build:deploy-preview",
"build:cdn": "rimraf cdn && yarn build && node ./scripts/generate-cdn.js && webpack --config webpack.config.js",
"unicodes": "node ./scripts/parse-unicodes.js",
"preview": "rimraf public dist && yarn build:deploy-preview && node ./public/preview.js",
"preview": "rimraf public dist && yarn build && yarn build:deploy-preview && node ./public/preview.js",
"precommit": "lint-staged",
"prettier": "prettier --write \"**/*.{scss}\"",
"prepare": "husky install",
"test:e2e:local": "start-server-and-test 'http-server -c-1 public --silent' 8080 'percy exec --config cypress/.percy.json -- cypress run --config-file cypress/cypress.json'",
"test:e2e:local:no-percy": "start-server-and-test 'http-server -c-1 public --silent' 8080 'cypress run --config-file cypress/cypress.json'"
},

"devDependencies": {
"@commitlint/cli": "^17.0.1",
"@commitlint/config-conventional": "^17.0.0",
Expand Down