diff --git a/packages/dnb-design-system-portal/gatsby-node.js b/packages/dnb-design-system-portal/gatsby-node.js index 46f0ff22d8f..68436ea34b8 100644 --- a/packages/dnb-design-system-portal/gatsby-node.js +++ b/packages/dnb-design-system-portal/gatsby-node.js @@ -8,9 +8,6 @@ const path = require('path') const { isCI } = require('repo-utils') const getCurrentBranchName = require('current-git-branch') const { init } = require('./scripts/version.js') -const { - defineSrcAddition, -} = require('gatsby-plugin-eufemia-theme-handler/collectThemes') let prebuildExists = false const currentBranch = getCurrentBranchName() @@ -21,7 +18,6 @@ exports.onPreInit = async () => { } catch (e) { // } - defineSrcAddition(isCI && prebuildExists ? 'build/' : 'src/') if (process.env.NODE_ENV === 'production') { await init() diff --git a/packages/gatsby-plugin-eufemia-theme-handler/collectThemes.js b/packages/gatsby-plugin-eufemia-theme-handler/collectThemes.js index badfa0d8fc3..e78c3589720 100644 --- a/packages/gatsby-plugin-eufemia-theme-handler/collectThemes.js +++ b/packages/gatsby-plugin-eufemia-theme-handler/collectThemes.js @@ -2,47 +2,82 @@ const path = require('path') const fs = require('fs') const globby = require('globby') -function createThemesImport(pluginOptions) { +/** + * We want to run this in sync, + * because we need to create a import file, + * before Gatsby does import our app source. + * + * @param {object} param0 Options + * @property {object} reporter Gatsby Reporter + * @property {object} pluginOptions Gatsby pluginOptions + */ +function createThemesImport({ reporter, pluginOptions }) { const limitThemes = Object.keys(pluginOptions.themes || []) const packageRoot = path.dirname(require.resolve('@dnb/eufemia')) const selector = 'style/themes/**/dnb-theme-*.{scss,css}' - const themesFiles = globby - .sync([ - path.join(packageRoot, selector), - path.join(packageRoot, '**/' + selector), - ]) - .filter((file) => { - return !file.includes('/build/style/') - }) + const globbyPaths = [ + path.join(packageRoot, selector), + path.join(packageRoot, '**', selector), + ] + + const rawThemesFiles = globby.sync(globbyPaths) + const hasSRC = rawThemesFiles.some((file) => + file.includes('/src/style/themes') + ) + const themesFiles = rawThemesFiles.filter((file) => { + /** Never source minified files */ + if (file.endsWith('.min.css')) { + return false + } + + /** + * If a src folder with our styles exists locally/or on CI, + * then only use e.g. this file: dnb-theme-ui.scss + * With that, we ensure that /build can exists locally as well. + */ + if (hasSRC) { + return file.includes('/src/style/themes') && file.endsWith('.scss') + } + + return file.endsWith('.css') + }) + const themes = themesFiles .map((file) => { const themeName = (file.match(/\/dnb-theme-([^.]*)\./) || [])?.[1] - return themeName + return { file, themeName } }) - .filter((themeName) => { + .filter(({ themeName }) => { return limitThemes.length === 0 || limitThemes.includes(themeName) }) - const srcAddition = globalThis.eufemiaThemeImportAddition - ? globalThis.eufemiaThemeImportAddition - : themesFiles.some((file) => file.includes('/src/')) - ? 'src/' - : '' - - const imports = themes.map((themeName) => { - return `import '@dnb/eufemia/${srcAddition}style/themes/${themeName}'` - }) - fs.writeFileSync( - path.resolve(__dirname, 'load-eufemia-themes.js'), - imports.join('\n') - ) + const writeThemesImports = () => { + const imports = themes.map(({ file }) => { + return `import '${file}'` + }) - return themes -} + fs.writeFileSync( + path.resolve(__dirname, 'load-eufemia-themes.js'), + imports.join('\n') + ) + } + + writeThemesImports() + + const showReports = () => { + const themeNames = themes.reduce((acc, { themeName }) => { + acc.push(themeName) + return acc + }, []) + + if (themeNames.length > 0) { + reporter.success(`✨ Eufemia themes: ${themeNames.join(', ')}`) + } else { + reporter.warn('Could not find any Eufemia themes!') + } + } -function defineSrcAddition(srcAddition) { - globalThis.eufemiaThemeImportAddition = srcAddition + showReports() } -exports.defineSrcAddition = defineSrcAddition exports.createThemesImport = createThemesImport diff --git a/packages/gatsby-plugin-eufemia-theme-handler/gatsby-node.js b/packages/gatsby-plugin-eufemia-theme-handler/gatsby-node.js index 8fed9bcb8d2..9335520787c 100644 --- a/packages/gatsby-plugin-eufemia-theme-handler/gatsby-node.js +++ b/packages/gatsby-plugin-eufemia-theme-handler/gatsby-node.js @@ -5,6 +5,8 @@ const { createThemesImport } = require('./collectThemes') +global.themeNames = [] + exports.pluginOptionsSchema = ({ Joi }) => { return Joi.object({ themes: Joi.object().required(), @@ -12,9 +14,21 @@ exports.pluginOptionsSchema = ({ Joi }) => { }) } -exports.onPreBootstrap = (_, pluginOptions) => { +exports.onPreBootstrap = ({ reporter }, pluginOptions) => { // ensure to run this after the main app has run onPreInit - createThemesImport(pluginOptions) + createThemesImport({ reporter, pluginOptions }) +} + +exports.onPostBuild = ({ reporter }) => { + if (global.themeNames.length > 0) { + reporter.success( + `Eufemia themes successfully extracted: ${global.themeNames.join( + ', ' + )}` + ) + } else { + reporter.warn('No Eufemia themes found!') + } } exports.onCreateWebpackConfig = ( @@ -38,10 +52,12 @@ exports.onCreateWebpackConfig = ( config.optimization.splitChunks.cacheGroups.styles = { ...config.optimization.splitChunks.cacheGroups.styles, name(module) { - if (module.context.includes('/style/themes/')) { + if (module.context.includes('/style/themes')) { const match = module.context.match(/\/([^/]*)$/) const moduleName = match[1].replace('theme-', '') + global.themeNames.push(moduleName) + return moduleName } diff --git a/packages/gatsby-plugin-eufemia-theme-handler/themeHandler.js b/packages/gatsby-plugin-eufemia-theme-handler/themeHandler.js index 9dfa21b31d4..e82f47df779 100644 --- a/packages/gatsby-plugin-eufemia-theme-handler/themeHandler.js +++ b/packages/gatsby-plugin-eufemia-theme-handler/themeHandler.js @@ -59,19 +59,18 @@ export const onPreRenderHTML = ({ if (!isDev) { let defaultElement for (const element of headComponents) { - if (element.type === 'style' && element.props['data-href']) { + const href = element.props['data-href'] + if (href && href.includes('.css')) { if ( availableThemesArray.some((name) => { - return element.props['data-href'].includes(`/${name}.`) + return href.includes(`/${name}.`) }) ) { - const themeName = (element.props['data-href'].match( - /\/([^.]*)\./ - ) || [])?.[1] + const themeName = (href.match(/\/([^.]*)\./) || [])?.[1] // Collect all theme CSS file paths if (availableThemes[themeName]) { - availableThemes[themeName].file = element.props['data-href'] + availableThemes[themeName].file = href // Store the default inline styles, // and place it below data-href="/commons.*.css"