diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json index 930807c6dcd..b60aa596284 100644 --- a/packages/react-styles/package.json +++ b/packages/react-styles/package.json @@ -14,12 +14,12 @@ "access": "public" }, "scripts": { - "generate": "rimraf css && node scripts/writeClassMaps.js && node scripts/copyStyles.js", + "generate": "rimraf css && node scripts/writeClassMaps.mjs && node scripts/copyStyles.mjs", "clean": "rimraf dist css" }, "devDependencies": { "@patternfly/patternfly": "5.4.0-prerelease.3", - "camel-case": "^3.0.0", + "change-case": "^5.4.4", "css": "^2.2.4", "fs-extra": "^11.2.0", "jsdom": "^15.2.1" diff --git a/packages/react-styles/scripts/copyStyles.js b/packages/react-styles/scripts/copyStyles.js deleted file mode 100644 index 2cc729195a2..00000000000 --- a/packages/react-styles/scripts/copyStyles.js +++ /dev/null @@ -1,7 +0,0 @@ -const { copySync } = require('fs-extra'); -const { resolve, dirname, join } = require('path'); - -const toDir = resolve(__dirname, '../css'); -const fromDir = dirname(require.resolve('@patternfly/patternfly/package.json')); - -copySync(join(fromDir, 'assets/images'), join(toDir, 'assets/images')); diff --git a/packages/react-styles/scripts/copyStyles.mjs b/packages/react-styles/scripts/copyStyles.mjs new file mode 100644 index 00000000000..184a4a6bdc2 --- /dev/null +++ b/packages/react-styles/scripts/copyStyles.mjs @@ -0,0 +1,8 @@ +import { copySync } from 'fs-extra/esm'; +import path from 'node:path'; +import url from 'node:url'; + +const toDir = path.resolve(import.meta.dirname, '../css'); +const fromDir = path.dirname(url.fileURLToPath(import.meta.resolve('@patternfly/patternfly/package.json'))); + +copySync(path.join(fromDir, 'assets/images'), path.join(toDir, 'assets/images')); diff --git a/packages/react-styles/scripts/generateClassMaps.js b/packages/react-styles/scripts/generateClassMaps.mjs similarity index 80% rename from packages/react-styles/scripts/generateClassMaps.js rename to packages/react-styles/scripts/generateClassMaps.mjs index 4a6377e051b..22912e1640f 100644 --- a/packages/react-styles/scripts/generateClassMaps.js +++ b/packages/react-styles/scripts/generateClassMaps.mjs @@ -1,7 +1,8 @@ -const path = require('path'); -const fs = require('fs-extra'); -const { glob } = require('glob'); -const camelcase = require('camel-case'); +import { camelCase } from 'change-case'; +import { glob } from 'glob'; +import fs from 'node:fs'; +import path from 'node:path'; +import url from 'node:url'; /** * @param {string} cssString - CSS string @@ -14,7 +15,7 @@ function getCSSClasses(cssString) { * @param {string} className - Class name */ function formatClassName(className) { - return camelcase(className.replace(/pf-(v5-)?((c|l|m|u|is|has)-)?/g, '')); + return camelCase(className.replace(/pf-(v5-)?((c|l|m|u|is|has)-)?/g, '')); } /** @@ -53,8 +54,8 @@ function getClassMaps(cssString) { /** * @returns {any} Map of file names to classMaps */ -function generateClassMaps() { - const pfStylesDir = path.dirname(require.resolve('@patternfly/patternfly/patternfly.css')); +export function generateClassMaps() { + const pfStylesDir = path.dirname(url.fileURLToPath(import.meta.resolve('@patternfly/patternfly/patternfly.css'))); const patternflyCSSFiles = glob.sync('**/*.css', { cwd: pfStylesDir, @@ -73,7 +74,3 @@ function generateClassMaps() { return res; } - -module.exports = { - generateClassMaps -}; diff --git a/packages/react-styles/scripts/writeClassMaps.js b/packages/react-styles/scripts/writeClassMaps.mjs similarity index 52% rename from packages/react-styles/scripts/writeClassMaps.js rename to packages/react-styles/scripts/writeClassMaps.mjs index ca919c3015a..253265c2ea9 100644 --- a/packages/react-styles/scripts/writeClassMaps.js +++ b/packages/react-styles/scripts/writeClassMaps.mjs @@ -1,34 +1,36 @@ -const { join, basename, resolve, relative, dirname } = require('path'); -const { outputFileSync, copyFileSync } = require('fs-extra'); -const { generateClassMaps } = require('./generateClassMaps'); +import { outputFileSync } from 'fs-extra/esm'; +import fs from 'node:fs'; +import path from 'node:path'; +import url from 'node:url'; +import { generateClassMaps } from './generateClassMaps.mjs'; -const outDir = resolve(__dirname, '../css'); +const outDir = path.resolve(import.meta.dirname, '../css'); const writeCJSExport = (file, classMap) => outputFileSync( - join(outDir, file.replace(/.css$/, '.js')), + path.join(outDir, file.replace(/.css$/, '.js')), ` "use strict"; exports.__esModule = true; -require('./${basename(file, '.css.js')}'); +require('./${path.basename(file, '.css.js')}'); exports.default = ${JSON.stringify(classMap, null, 2)}; `.trim() ); const writeESMExport = (file, classMap) => outputFileSync( - join(outDir, file.replace(/.css$/, '.mjs')), + path.join(outDir, file.replace(/.css$/, '.mjs')), ` -import './${basename(file, '.css.js')}'; +import './${path.basename(file, '.css.js')}'; export default ${JSON.stringify(classMap, null, 2)}; `.trim() ); const writeDTSExport = (file, classMap) => outputFileSync( - join(outDir, file.replace(/.css$/, '.d.ts')), + path.join(outDir, file.replace(/.css$/, '.d.ts')), ` -import './${basename(file, '.css.js')}'; +import './${path.basename(file, '.css.js')}'; declare const _default: ${JSON.stringify(classMap, null, 2)}; export default _default; `.trim() @@ -38,15 +40,15 @@ export default _default; * @param {any} classMaps Map of file names to classMaps */ function writeClassMaps(classMaps) { - const pfStylesDir = dirname(require.resolve('@patternfly/patternfly/patternfly.css')); + const pfStylesDir = path.dirname(url.fileURLToPath(import.meta.resolve('@patternfly/patternfly/patternfly.css'))); Object.entries(classMaps).forEach(([file, classMap]) => { - const outPath = file.includes(pfStylesDir) ? relative(pfStylesDir, file) : relative('src/css', file); + const outPath = file.includes(pfStylesDir) ? path.relative(pfStylesDir, file) : path.relative('src/css', file); writeCJSExport(outPath, classMap); writeDTSExport(outPath, classMap); writeESMExport(outPath, classMap); - copyFileSync(file, join(outDir, outPath)); + fs.copyFileSync(file, path.join(outDir, outPath)); }); // eslint-disable-next-line no-console diff --git a/yarn.lock b/yarn.lock index 90cd151382d..18b665e2892 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3270,7 +3270,7 @@ __metadata: resolution: "@patternfly/react-styles@workspace:packages/react-styles" dependencies: "@patternfly/patternfly": "npm:5.4.0-prerelease.3" - camel-case: "npm:^3.0.0" + change-case: "npm:^5.4.4" css: "npm:^2.2.4" fs-extra: "npm:^11.2.0" jsdom: "npm:^15.2.1" @@ -6002,11 +6002,11 @@ __metadata: linkType: hard "bare-stream@npm:^2.0.0": - version: 2.0.1 - resolution: "bare-stream@npm:2.0.1" + version: 2.1.0 + resolution: "bare-stream@npm:2.1.0" dependencies: streamx: "npm:^2.18.0" - checksum: 10c0/79185d1f4c0b299ce9e79023d73713ab41df518fab040285bad16deea42808cd2f90b792a48ba06fde419d56e0fbab4aa54b5ce5f8e9bc15acabee1832f72e80 + checksum: 10c0/eede27114b209eb3b455a5c63f5926d17ffc28f28c5a61e502a5f9d92e0e1e8238f3ee7c9099fe07149e30d3223f6791b3704ff7d2d669f8dcd1fc13d41a9fc5 languageName: node linkType: hard @@ -6483,16 +6483,6 @@ __metadata: languageName: node linkType: hard -"camel-case@npm:^3.0.0": - version: 3.0.0 - resolution: "camel-case@npm:3.0.0" - dependencies: - no-case: "npm:^2.2.0" - upper-case: "npm:^1.1.1" - checksum: 10c0/491c6bbf986b9d8355e12cca6beb719b44c2fe96e8526c09958a1b4e0dbb081a82ea59c13b5a6ccf9158ce5979cbe56a8a10d7322bfeed2d84725c6b89d8f934 - languageName: node - linkType: hard - "camel-case@npm:^4.1.2": version: 4.1.2 resolution: "camel-case@npm:4.1.2" @@ -6649,6 +6639,13 @@ __metadata: languageName: node linkType: hard +"change-case@npm:^5.4.4": + version: 5.4.4 + resolution: "change-case@npm:5.4.4" + checksum: 10c0/2a9c2b9c9ad6ab2491105aaf506db1a9acaf543a18967798dcce20926c6a173aa63266cb6189f3086e3c14bf7ae1f8ea4f96ecc466fcd582310efa00372f3734 + languageName: node + linkType: hard + "char-regex@npm:^1.0.2": version: 1.0.2 resolution: "char-regex@npm:1.0.2" @@ -14350,13 +14347,6 @@ __metadata: languageName: node linkType: hard -"lower-case@npm:^1.1.1": - version: 1.1.4 - resolution: "lower-case@npm:1.1.4" - checksum: 10c0/2153ae5490d655a63addc8e7d2f848c6c94803b342ed2d177f75e8073e9fbb50a733d1432c82e1cb8425fa6eae14b2877bf5bbdcb93ab93bb982fb5c3962c57b - languageName: node - linkType: hard - "lower-case@npm:^2.0.2": version: 2.0.2 resolution: "lower-case@npm:2.0.2" @@ -15339,15 +15329,6 @@ __metadata: languageName: node linkType: hard -"no-case@npm:^2.2.0": - version: 2.3.2 - resolution: "no-case@npm:2.3.2" - dependencies: - lower-case: "npm:^1.1.1" - checksum: 10c0/63f306e83c18efa0bb37f1c23a25baf4ccf5ebaec70b482fa04d4c5bf8bbb8bcc9a8fbcd818af828ab69f2b602153daf81ec26e448b2bda2d704b8d0c7eec8fa - languageName: node - linkType: hard - "no-case@npm:^3.0.4": version: 3.0.4 resolution: "no-case@npm:3.0.4" @@ -21096,13 +21077,6 @@ __metadata: languageName: node linkType: hard -"upper-case@npm:^1.1.1": - version: 1.1.3 - resolution: "upper-case@npm:1.1.3" - checksum: 10c0/3e4d3a90519915bb591db84d72610392518806d8287b8f7541d87642d30388f42b2def1ed2f687e5792ee025e8f7e17d3a0dcbd5b3b59e306ceb1f3b8121ef54 - languageName: node - linkType: hard - "upper-case@npm:^2.0.2": version: 2.0.2 resolution: "upper-case@npm:2.0.2"