v1.0 with SW PWA enabled

frontend/node_modules/postcss-load-config/README.md

@@ -83,26 +83,34 @@ plugins:
   postcss-plugin: {}
 ```
 
+> [!NOTE]
+> For YAML configs, you must have [yaml](https://www.npmjs.com/package/yaml) installed as a peer dependency.
+
 ### `.postcssrc.js` or `postcss.config.js`
 
 You may need some logic within your config.
-In this case create JS file named:
+In this case create JS/TS file named:
 - `.postcssrc.js`
 - `.postcssrc.mjs`
 - `.postcssrc.cjs`
 - `.postcssrc.ts`
+- `.postcssrc.mts`
 - `.postcssrc.cts`
 - `postcss.config.js`
 - `postcss.config.mjs`
 - `postcss.config.cjs`
 - `postcss.config.ts`
+- `postcss.config.mts`
 - `postcss.config.cts`
 
+> [!NOTE]
+> For TypeScript configs, you must have [tsx](https://www.npmjs.com/package/tsx) or [jiti](https://www.npmjs.com/package/jiti) installed as a peer dependency.
+
 ```
 Project (Root)
   |– client
   |– public
-  |- (.postcssrc|postcss.config).(js|mjs|cjs|ts|cts)
+  |- (.postcssrc|postcss.config).(js|mjs|cjs|ts|mts|cts)
   |- package.json
 ```
 
@@ -334,7 +342,7 @@ const { readFileSync } = require('fs')
 const postcss = require('postcss')
 const postcssrc = require('postcss-load-config')
 
-const css = readFileSync('index.sss', 'utf8')
+const css = readFileSync('index.css', 'utf8')
 
 const ctx = { parser: true, map: 'inline' }
 

frontend/node_modules/postcss-load-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-load-config",
-  "version": "4.0.2",
+  "version": "6.0.1",
   "description": "Autoload Config for PostCSS",
   "main": "src/index.js",
   "types": "src/index.d.ts",
@@ -8,7 +8,7 @@
     "src"
   ],
   "engines": {
-    "node": ">= 14"
+    "node": ">= 18"
   },
   "funding": [
     {
@@ -21,19 +21,26 @@
     }
   ],
   "dependencies": {
-    "lilconfig": "^3.0.0",
-    "yaml": "^2.3.4"
+    "lilconfig": "^3.1.1"
   },
   "peerDependencies": {
+    "jiti": ">=1.21.0",
     "postcss": ">=8.0.9",
-    "ts-node": ">=9.0.0"
+    "tsx": "^4.8.1",
+    "yaml": "^2.4.2"
   },
   "peerDependenciesMeta": {
-    "ts-node": {
+    "jiti": {
       "optional": true
     },
     "postcss": {
       "optional": true
+    },
+    "tsx": {
+      "optional": true
+    },
+    "yaml": {
+      "optional": true
     }
   },
   "keywords": [

frontend/node_modules/postcss-load-config/src/index.d.ts

@@ -1,65 +1,65 @@
 // based on @types/postcss-load-config@2.0.1
 // Type definitions for postcss-load-config 2.1
-import Processor from 'postcss/lib/processor';
-import { Plugin, ProcessOptions, Transformer } from 'postcss';
-import { Options as ConfigOptions } from "lilconfig";
+import Processor from 'postcss/lib/processor'
+import { Plugin, ProcessOptions, Transformer } from 'postcss'
+import { Options as ConfigOptions } from 'lilconfig'
 
 declare function postcssrc(
   ctx?: postcssrc.ConfigContext,
   path?: string,
   options?: ConfigOptions
-): Promise<postcssrc.Result>;
+): Promise<postcssrc.Result>
 
 declare namespace postcssrc {
   // In the ConfigContext, these three options can be instances of the
   // appropriate class, or strings. If they are strings, postcss-load-config will
   // require() them and pass the instances along.
   export interface ProcessOptionsPreload {
-    parser?: string | ProcessOptions['parser'];
-    stringifier?: string | ProcessOptions['stringifier'];
-    syntax?: string | ProcessOptions['syntax'];
+    parser?: string | ProcessOptions['parser']
+    stringifier?: string | ProcessOptions['stringifier']
+    syntax?: string | ProcessOptions['syntax']
   }
 
   // The remaining ProcessOptions, sans the three above.
   export type RemainingProcessOptions = Pick<
     ProcessOptions,
     Exclude<keyof ProcessOptions, keyof ProcessOptionsPreload>
-  >;
+  >
 
   // Additional context options that postcss-load-config understands.
   export interface Context {
-    cwd?: string;
-    env?: string;
+    cwd?: string
+    env?: string
   }
 
   // The full shape of the ConfigContext.
   export type ConfigContext = Context &
     ProcessOptionsPreload &
-    RemainingProcessOptions;
+    RemainingProcessOptions
 
   // Result of postcssrc is a Promise containing the filename plus the options
   // and plugins that are ready to pass on to postcss.
-  export type ResultPlugin = Plugin | Transformer | Processor;
+  export type ResultPlugin = Plugin | Transformer | Processor
 
   export interface Result {
-    file: string;
-    options: ProcessOptions;
-    plugins: ResultPlugin[];
+    file: string
+    options: ProcessOptions
+    plugins: ResultPlugin[]
   }
 
-  export type ConfigPlugin = Transformer | Plugin | Processor;
+  export type ConfigPlugin = Transformer | Plugin | Processor
 
   export interface Config {
-    parser?: string | ProcessOptions['parser'] | false;
-    stringifier?: string | ProcessOptions['stringifier'] | false;
-    syntax?: string | ProcessOptions['syntax'] | false;
-    map?: string | false;
-    from?: string;
-    to?: string;
-    plugins?: Array<ConfigPlugin | false> | Record<string, object | false>;
+    parser?: string | ProcessOptions['parser'] | false
+    stringifier?: string | ProcessOptions['stringifier'] | false
+    syntax?: string | ProcessOptions['syntax'] | false
+    map?: string | false
+    from?: string
+    to?: string
+    plugins?: Array<ConfigPlugin | false> | Record<string, object | false>
   }
 
-  export type ConfigFn = (ctx: ConfigContext) => Config | Promise<Config>;
+  export type ConfigFn = (ctx: ConfigContext) => Config | Promise<Config>
 }
 
-export = postcssrc;
+export = postcssrc

frontend/node_modules/postcss-load-config/src/index.js

@@ -1,16 +1,14 @@
-'use strict'
-
-const resolve = require('path').resolve
-const url = require('url')
+// @ts-check
+const { resolve } = require('node:path')
 
 const config = require('lilconfig')
-const yaml = require('yaml')
 
 const loadOptions = require('./options.js')
 const loadPlugins = require('./plugins.js')
+const req = require('./req.js')
 
-/* istanbul ignore next */
-const interopRequireDefault = (obj) => obj && obj.__esModule ? obj : { default: obj }
+const interopRequireDefault = obj =>
+  obj && obj.__esModule ? obj : { default: obj }
 
 /**
  * Process the result from cosmiconfig
@@ -18,27 +16,29 @@ const interopRequireDefault = (obj) => obj && obj.__esModule ? obj : { default:
  * @param  {Object} ctx Config Context
  * @param  {Object} result Cosmiconfig result
  *
- * @return {Object} PostCSS Config
+ * @return {Promise<Object>} PostCSS Config
  */
-const processResult = (ctx, result) => {
-  const file = result.filepath || ''
-  let config = interopRequireDefault(result.config).default || {}
+async function processResult(ctx, result) {
+  let file = result.filepath || ''
+  let projectConfig = interopRequireDefault(result.config).default || {}
 
-  if (typeof config === 'function') {
-    config = config(ctx)
+  if (typeof projectConfig === 'function') {
+    projectConfig = projectConfig(ctx)
   } else {
-    config = Object.assign({}, config, ctx)
+    projectConfig = Object.assign({}, projectConfig, ctx)
   }
 
-  if (!config.plugins) {
-    config.plugins = []
+  if (!projectConfig.plugins) {
+    projectConfig.plugins = []
   }
 
-  return {
-    plugins: loadPlugins(config, file),
-    options: loadOptions(config, file),
-    file
+  let res = {
+    file,
+    options: await loadOptions(projectConfig, file),
+    plugins: await loadPlugins(projectConfig, file)
   }
+  delete projectConfig.plugins
+  return res
 }
 
 /**
@@ -48,17 +48,20 @@ const processResult = (ctx, result) => {
  *
  * @return {Object} Config Context
  */
-const createContext = (ctx) => {
+function createContext(ctx) {
   /**
    * @type {Object}
    *
    * @prop {String} cwd=process.cwd() Config search start location
    * @prop {String} env=process.env.NODE_ENV Config Enviroment, will be set to `development` by `postcss-load-config` if `process.env.NODE_ENV` is `undefined`
    */
-  ctx = Object.assign({
-    cwd: process.cwd(),
-    env: process.env.NODE_ENV
-  }, ctx)
+  ctx = Object.assign(
+    {
+      cwd: process.cwd(),
+      env: process.env.NODE_ENV
+    },
+    ctx
+  )
 
   if (!ctx.env) {
     process.env.NODE_ENV = 'development'
@@ -67,16 +70,42 @@ const createContext = (ctx) => {
   return ctx
 }
 
-const importDefault = async filepath => {
-  const module = await import(url.pathToFileURL(filepath).href)
-  return module.default
+async function loader(filepath) {
+  return req(filepath)
 }
 
-const addTypeScriptLoader = (options = {}, loader) => {
-  const moduleName = 'postcss'
+let yaml
+async function yamlLoader(_, content) {
+  if (!yaml) {
+    try {
+      yaml = await import('yaml')
+    } catch (e) {
+      /* c8 ignore start */
+      throw new Error(
+        `'yaml' is required for the YAML configuration files. Make sure it is installed\nError: ${e.message}`
+      )
+    }
+  }
+  return yaml.parse(content);
+}
+
+/** @return {import('lilconfig').Options} */
+const withLoaders = (options = {}) => {
+  let moduleName = 'postcss'
 
   return {
     ...options,
+    loaders: {
+      ...options.loaders,
+      '.cjs': loader,
+      '.cts': loader,
+      '.js': loader,
+      '.mjs': loader,
+      '.mts': loader,
+      '.ts': loader,
+      '.yaml': yamlLoader,
+      '.yml': yamlLoader
+    },
     searchPlaces: [
       ...(options.searchPlaces || []),
       'package.json',
@@ -86,53 +115,17 @@ const addTypeScriptLoader = (options = {}, loader) => {
       `.${moduleName}rc.yml`,
       `.${moduleName}rc.ts`,
       `.${moduleName}rc.cts`,
+      `.${moduleName}rc.mts`,
       `.${moduleName}rc.js`,
       `.${moduleName}rc.cjs`,
       `.${moduleName}rc.mjs`,
       `${moduleName}.config.ts`,
       `${moduleName}.config.cts`,
+      `${moduleName}.config.mts`,
       `${moduleName}.config.js`,
       `${moduleName}.config.cjs`,
       `${moduleName}.config.mjs`
-    ],
-    loaders: {
-      ...options.loaders,
-      '.yaml': (filepath, content) => yaml.parse(content),
-      '.yml': (filepath, content) => yaml.parse(content),
-      '.js': importDefault,
-      '.cjs': importDefault,
-      '.mjs': importDefault,
-      '.ts': loader,
-      '.cts': loader
-    }
-  }
-}
-
-const withTypeScriptLoader = (rcFunc) => {
-  return (ctx, path, options) => {
-    return rcFunc(ctx, path, addTypeScriptLoader(options, (configFile) => {
-      let registerer = { enabled () {} }
-
-      try {
-        // Register TypeScript compiler instance
-        registerer = require('ts-node').register({
-          // transpile to cjs even if compilerOptions.module in tsconfig is not Node16/NodeNext.
-          moduleTypes: { '**/*.cts': 'cjs' }
-        })
-
-        return require(configFile)
-      } catch (err) {
-        if (err.code === 'MODULE_NOT_FOUND') {
-          throw new Error(
-            `'ts-node' is required for the TypeScript configuration files. Make sure it is installed\nError: ${err.message}`
-          )
-        }
-
-        throw err
-      } finally {
-        registerer.enabled(false)
-      }
-    }))
+    ]
   }
 }
 
@@ -147,7 +140,7 @@ const withTypeScriptLoader = (rcFunc) => {
  *
  * @return {Promise} config PostCSS Config
  */
-const rc = withTypeScriptLoader((ctx, path, options) => {
+function rc(ctx, path, options) {
   /**
    * @type {Object} The full Config Context
    */
@@ -158,16 +151,16 @@ const rc = withTypeScriptLoader((ctx, path, options) => {
    */
   path = path ? resolve(path) : process.cwd()
 
-  return config.lilconfig('postcss', options)
+  return config
+    .lilconfig('postcss', withLoaders(options))
     .search(path)
-    .then((result) => {
+    .then(result => {
       if (!result) {
         throw new Error(`No PostCSS Config found in: ${path}`)
       }
-
       return processResult(ctx, result)
     })
-})
+}
 
 /**
  * Autoload Config for PostCSS

frontend/node_modules/postcss-load-config/src/options.js

@@ -1,5 +1,4 @@
-'use strict'
-
+// @ts-check
 const req = require('./req.js')
 
 /**
@@ -10,37 +9,39 @@ const req = require('./req.js')
  *
  * @param  {Object} config  PostCSS Config
  *
- * @return {Object} options PostCSS Options
+ * @return {Promise<Object>} options PostCSS Options
  */
-const options = (config, file) => {
+async function options(config, file) {
   if (config.parser && typeof config.parser === 'string') {
     try {
-      config.parser = req(config.parser, file)
+      config.parser = await req(config.parser, file)
     } catch (err) {
-      throw new Error(`Loading PostCSS Parser failed: ${err.message}\n\n(@${file})`)
+      throw new Error(
+        `Loading PostCSS Parser failed: ${err.message}\n\n(@${file})`
+      )
     }
   }
 
   if (config.syntax && typeof config.syntax === 'string') {
     try {
-      config.syntax = req(config.syntax, file)
+      config.syntax = await req(config.syntax, file)
     } catch (err) {
-      throw new Error(`Loading PostCSS Syntax failed: ${err.message}\n\n(@${file})`)
+      throw new Error(
+        `Loading PostCSS Syntax failed: ${err.message}\n\n(@${file})`
+      )
     }
   }
 
   if (config.stringifier && typeof config.stringifier === 'string') {
     try {
-      config.stringifier = req(config.stringifier, file)
+      config.stringifier = await req(config.stringifier, file)
     } catch (err) {
-      throw new Error(`Loading PostCSS Stringifier failed: ${err.message}\n\n(@${file})`)
+      throw new Error(
+        `Loading PostCSS Stringifier failed: ${err.message}\n\n(@${file})`
+      )
     }
   }
 
-  if (config.plugins) {
-    delete config.plugins
-  }
-
   return config
 }
 

frontend/node_modules/postcss-load-config/src/plugins.js

@@ -1,5 +1,4 @@
-'use strict'
-
+// @ts-check
 const req = require('./req.js')
 
 /**
@@ -11,21 +10,24 @@ const req = require('./req.js')
  * @param  {String} plugin PostCSS Plugin Name
  * @param  {Object} options PostCSS Plugin Options
  *
- * @return {Function} PostCSS Plugin
+ * @return {Promise<Function>} PostCSS Plugin
  */
-const load = (plugin, options, file) => {
+async function load(plugin, options, file) {
   try {
     if (
       options === null ||
       options === undefined ||
       Object.keys(options).length === 0
     ) {
-      return req(plugin, file)
+      return await req(plugin, file)
     } else {
-      return req(plugin, file)(options)
+      return (await req(plugin, file))(options)
+      /* c8 ignore next */
     }
   } catch (err) {
-    throw new Error(`Loading PostCSS Plugin failed: ${err.message}\n\n(@${file})`)
+    throw new Error(
+      `Loading PostCSS Plugin failed: ${err.message}\n\n(@${file})`
+    )
   }
 }
 
@@ -37,25 +39,26 @@ const load = (plugin, options, file) => {
  *
  * @param {Object} config PostCSS Config Plugins
  *
- * @return {Array} plugins PostCSS Plugins
+ * @return {Promise<Array>} plugins PostCSS Plugins
  */
-const plugins = (config, file) => {
-  let plugins = []
+async function plugins(config, file) {
+  let list = []
 
   if (Array.isArray(config.plugins)) {
-    plugins = config.plugins.filter(Boolean)
+    list = config.plugins.filter(Boolean)
   } else {
-    plugins = Object.keys(config.plugins)
-      .filter((plugin) => {
-        return config.plugins[plugin] !== false ? plugin : ''
+    list = Object.entries(config.plugins)
+      .filter(([, options]) => {
+        return options !== false
       })
-      .map((plugin) => {
-        return load(plugin, config.plugins[plugin], file)
+      .map(([plugin, options]) => {
+        return load(plugin, options, file)
       })
+    list = await Promise.all(list)
   }
 
-  if (plugins.length && plugins.length > 0) {
-    plugins.forEach((plugin, i) => {
+  if (list.length && list.length > 0) {
+    list.forEach((plugin, i) => {
       if (plugin.default) {
         plugin = plugin.default
       }
@@ -67,19 +70,20 @@ const plugins = (config, file) => {
       }
 
       if (
-        // eslint-disable-next-line
         !(
           (typeof plugin === 'object' && Array.isArray(plugin.plugins)) ||
           (typeof plugin === 'object' && plugin.postcssPlugin) ||
-          (typeof plugin === 'function')
+          typeof plugin === 'function'
         )
       ) {
-        throw new TypeError(`Invalid PostCSS Plugin found at: plugins[${i}]\n\n(@${file})`)
+        throw new TypeError(
+          `Invalid PostCSS Plugin found at: plugins[${i}]\n\n(@${file})`
+        )
       }
     })
   }
 
-  return plugins
+  return list
 }
 
 module.exports = plugins

frontend/node_modules/postcss-load-config/src/req.js

@@ -1,10 +1,62 @@
-// eslint-disable-next-line n/no-deprecated-api
-const { createRequire, createRequireFromPath } = require('module')
+// @ts-check
+const { createRequire } = require('node:module')
+const { pathToFileURL } = require('node:url')
 
-function req (name, rootFile) {
-  const create = createRequire || createRequireFromPath
-  const require = create(rootFile)
-  return require(name)
+const TS_EXT_RE = /\.[mc]?ts$/
+
+let tsx
+
+let jiti
+
+let importError = []
+
+/**
+ * @param {string} name
+ * @param {string} rootFile
+ * @returns {Promise<any>}
+ */
+async function req(name, rootFile = __filename) {
+  let url = createRequire(rootFile).resolve(name)
+
+  try {
+    return (await import(`${pathToFileURL(url)}?t=${Date.now()}`)).default
+  } catch (err) {
+    if (!TS_EXT_RE.test(url)) {
+      /* c8 ignore start */
+      throw err
+    }
+  }
+
+  if (tsx === undefined) {
+    try {
+      tsx = await import('tsx/cjs/api')
+    } catch (error) {
+      importError.push(error)
+    }
+  }
+
+  if (tsx) {
+    let loaded = tsx.require(name, rootFile)
+    return loaded && '__esModule' in loaded ? loaded.default : loaded
+  }
+
+  if (jiti === undefined) {
+    try {
+      jiti = (await import('jiti')).default
+    } catch (error) {
+      importError.push(error)
+    }
+  }
+
+  if (jiti) {
+    return jiti(rootFile, { interopDefault: true })(name)
+  }
+
+  throw new Error(
+    `'tsx' or 'jiti' is required for the TypeScript configuration files. Make sure it is installed\nError: ${importError
+      .map(error => error.message)
+      .join('\n')}`
+  )
 }
 
 module.exports = req