feat: import local themes (#27)

README.md

@@ -72,6 +72,9 @@ function ThemeProvider({ children }) {
           '**/*-theme-basis.*',
         ],
 
+        // (optional) An array of RegExp that defines what should be threaded and splitted into themes.
+        themeMatchers: [/\/themes\/[^/]*theme-([^/.]*)[/.]/],
+
         // (optional) when set to false, all theme styles will be loaded as separate files.
         inlineDefaultTheme: true,
 
@@ -89,6 +92,48 @@ function ThemeProvider({ children }) {
 }
 ```
 
+You can also import local themes. They need to start with `./` when defined in `filesGlobs` and the files need to include `theme-{theme-name}` in the name:
+
+```js
+// Your Config
+import {
+  filesGlobsFallback,
+  includeFilesFallback,
+} from 'gatsby-plugin-eufemia-theme-handler/config.js'
+
+export default {
+  plugins: [
+    'gatsby-plugin-sass',
+    {
+      resolve: 'gatsby-plugin-eufemia-theme-handler',
+      options: {
+        verbose: true,
+        defaultTheme: 'ui',
+        storageId: 'eufemia-ui',
+        filesGlobs: [
+          // Eufemia Styles
+          ...filesGlobsFallback,
+
+          // Local themes
+          './**/styles/themes/**/*.css',
+        ],
+        includeFiles: [
+          // Eufemia Styles
+          ...includeFilesFallback,
+
+          // Local themes
+          '**/styles/themes/**/*.css',
+        ],
+        themes: {
+          ui: { name: 'DNB Eufemia' },
+          sbanken: { name: 'Sbanken' },
+        },
+      },
+    },
+  ],
+}
+```
+
 You can also use the interceptor methods from inside your components:
 
 ```js

examples/ui-theme-example/gatsby-config.mjs

@@ -0,0 +1,36 @@
+import {
+  filesGlobsFallback,
+  includeFilesFallback,
+} from 'gatsby-plugin-eufemia-theme-handler/config.js'
+
+export default {
+  plugins: [
+    'gatsby-plugin-sass',
+    {
+      resolve: 'gatsby-plugin-eufemia-theme-handler',
+      options: {
+        verbose: true,
+        defaultTheme: 'ui',
+        storageId: 'eufemia-ui',
+        filesGlobs: [
+          // Eufemia Styles
+          ...filesGlobsFallback,
+
+          // Local styles
+          './**/styles/themes/**/*',
+        ],
+        includeFiles: [
+          // Eufemia Styles
+          ...includeFilesFallback,
+
+          // Local styles
+          '**/styles/themes/**/*',
+        ],
+        themes: {
+          ui: { name: 'DNB Eufemia' },
+          sbanken: { name: 'Sbanken' },
+        },
+      },
+    },
+  ],
+}

examples/ui-theme-example/src/pages/index.tsx

@@ -3,7 +3,6 @@ import { Anchor, Button, Card } from '@dnb/eufemia'
 import { Form } from '@dnb/eufemia/extensions/forms'
 import ChangeStyleTheme from '../../../shared/ChangeStyleTheme'
 import { Link } from 'gatsby'
-import './style.css'
 
 const App = () => {
   return (

examples/ui-theme-example/src/styles/themes/theme-sbanken.scss

@@ -0,0 +1,3 @@
+.eufemia-theme__sbanken {
+  background: limegreen;
+}

examples/ui-theme-example/src/styles/themes/theme-ui.scss

@@ -0,0 +1,3 @@
+.eufemia-theme__ui {
+  background: tomato;
+}

package.json

@@ -12,7 +12,7 @@
     "start": "yarn watch & yarn workspace sb-theme-example start & yarn workspace ui-theme-example start",
     "build": "yarn workspace gatsby-plugin-eufemia-theme-handler build && yarn workspace ui-theme-example build && yarn workspace ui-theme-example serve & yarn workspace sb-theme-example build",
     "serve": "yarn workspace sb-theme-example serve & yarn workspace ui-theme-example serve",
-    "clean": "yarn workspace sb-theme-example clean & yarn workspace ui-theme-example clean",
+    "clean": "yarn workspace gatsby-plugin-eufemia-theme-handler clean && yarn workspace sb-theme-example clean & yarn workspace ui-theme-example clean",
     "release": "yarn workspace gatsby-plugin-eufemia-theme-handler release"
   },
   "devDependencies": {

packages/gatsby-plugin-eufemia-theme-handler/package.json

@@ -29,6 +29,7 @@
     },
     "./collectThemes.js": "./collectThemes.js",
     "./themeHandler.js": "./themeHandler.js",
+    "./config.js": "./config.js",
     "./themeHandler.d.ts": "./themeHandler.d.ts",
     "./inlineScriptDev.js": "./inlineScriptDev.js",
     "./inlineScript.js": "./inlineScript.js",
@@ -44,8 +45,8 @@
     "build": "yarn build:cmd && GATSBY_FILES=true yarn build:cmd && yarn build:types",
     "build:cmd": "yarn babel src --extensions .js,.ts,.tsx,.mjs --out-dir .",
     "build:types": "tsc --project tsconfig.json",
-    "build:watch": "yarn build:cmd --watch",
-    "clean": "rm !(src|babel.config.js|.gitignore|.npmignore|LICENSE|.env|*.md|*.json)",
+    "build:watch": "concurrently 'yarn clean' 'yarn build:cmd --watch' 'GATSBY_FILES=true yarn build:cmd --watch' 'yarn build:types --watch'",
+    "clean": "rm !(src|babel.config.js|.gitignore|.npmignore|LICENSE|.env|*.md|*.json) & echo 1",
     "test:types": "tsc --noEmit"
   },
   "dependencies": {
@@ -61,6 +62,7 @@
     "@babel/preset-env": "^7.23.6",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
+    "concurrently": "8.2.2",
     "semantic-release": "21.1.1",
     "typescript": "5.3.3"
   },

packages/gatsby-plugin-eufemia-theme-handler/src/collectThemes.ts

@@ -20,11 +20,13 @@ export function createThemesImport({
 }) {
   const includeFiles = pluginOptions.includeFiles
 
-  const limitThemes = Object.keys(pluginOptions.themes || [])
   const packageRoot = path.dirname(
     require.resolve('@dnb/eufemia', { paths: [programDirectory] })
   )
   const globbyPaths = pluginOptions.filesGlobs.map((glob) => {
+    if (glob.startsWith('./')) {
+      return slash(path.join(programDirectory, glob))
+    }
     return slash(path.join(packageRoot, glob))
   })
 
@@ -36,24 +38,19 @@ export function createThemesImport({
     )
   }
 
-  const importFiles = globby
-    .sync(globbyPaths)
-    .map((file) => {
-      return slash(file)
-    })
-    .filter((file) => {
-      if (/\/(es|cjs)\/style\//.test(file)) {
-        return false
-      }
+  const importFiles = globby.sync(globbyPaths).filter((file) => {
+    if (/\/(es|cjs)\/style\//.test(file)) {
+      return false
+    }
 
-      if (includeFiles.length > 0) {
-        return includeFiles.some((glob) =>
-          micromatch.isMatch(file, '**/' + glob)
-        )
-      }
+    if (includeFiles.length > 0) {
+      return includeFiles.some((glob) =>
+        micromatch.isMatch(file, '**/' + glob)
+      )
+    }
 
-      return true
-    })
+    return true
+  })
 
   if (pluginOptions.verbose) {
     reporter.info(
@@ -94,6 +91,55 @@ export function createThemesImport({
     )
   }
 
+  /**
+   * Report about what Eufemia versions are found and used
+   */
+  if (pluginOptions.verbose) {
+    const roots = {}
+    const versions = {}
+
+    sortedImportFiles.forEach(({ file }) => {
+      const rootPath = findNearestPackageJson(file)
+      roots[rootPath] = [...(roots[rootPath] || []), file]
+    })
+
+    Object.entries(roots).forEach(([file, info]) => {
+      const content = fs.readFileSync(file, 'utf-8')
+      const json = JSON.parse(content)
+      const { name, version, dependencies, devDependencies } = json
+
+      const collection = [
+        name !== '@dnb/eufemia' ? 'local' : version,
+        dependencies?.['@dnb/eufemia'],
+        devDependencies?.['@dnb/eufemia'],
+      ].filter(Boolean)
+
+      collection.forEach((version) => {
+        versions[version] = [...(versions[version] || []), info]
+      })
+    })
+
+    const listOfVersions = Object.keys(versions).filter(
+      (version) => version !== 'local'
+    )
+
+    if (listOfVersions.length > 1) {
+      reporter.warn(
+        `gatsby-plugin-eufemia-theme-handler > @dnb/eufemia versions:\n${JSON.stringify(
+          versions,
+          null,
+          2
+        )}`
+      )
+    } else {
+      reporter.info(
+        `gatsby-plugin-eufemia-theme-handler > @dnb/eufemia version: ${listOfVersions.join(
+          ', '
+        )}`
+      )
+    }
+  }
+
   const writeThemesImports = () => {
     const imports = sortedImportFiles.map(({ file }) => {
       return `import '${file}'`
@@ -124,3 +170,20 @@ export function createThemesImport({
 
   showReports()
 }
+
+function findNearestPackageJson(filePath) {
+  let currentDir = path.dirname(filePath)
+
+  while (currentDir !== '/') {
+    const packageJsonPath = path.join(currentDir, 'package.json')
+
+    if (fs.existsSync(packageJsonPath)) {
+      return packageJsonPath
+    }
+
+    // Move up one level in the directory tree
+    currentDir = path.dirname(currentDir)
+  }
+
+  return null // No package.json found
+}

packages/gatsby-plugin-eufemia-theme-handler/src/config.ts

@@ -0,0 +1,12 @@
+export const filesGlobsFallback = [
+  '**/style/dnb-ui-core.min.css',
+  '**/style/themes/**/*-theme-{basis,components}.min.css',
+]
+
+export const includeFilesFallback = [
+  '**/dnb-ui-core.*',
+  '**/*-theme-components.*',
+  '**/*-theme-basis.*',
+]
+
+export const themeMatchersFallback = [/\/themes\/[^/]*theme-([^/.]*)[/.]/]