{"id":20364643,"url":"https://github.com/gitofzgt/some-loader-utils","last_synced_at":"2025-04-12T04:46:00.371Z","repository":{"id":43122990,"uuid":"353627384","full_name":"GitOfZGT/some-loader-utils","owner":"GitOfZGT","description":"implementation for less-loader or sass-loader. Compiles Less or sass to  theme CSS.","archived":false,"fork":false,"pushed_at":"2022-03-17T03:40:28.000Z","size":3121,"stargazers_count":60,"open_issues_count":4,"forks_count":9,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T04:45:29.336Z","etag":null,"topics":["dynamic-theme","less","plugins","scss","themes","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GitOfZGT.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-04-01T08:21:20.000Z","updated_at":"2024-07-03T07:20:49.000Z","dependencies_parsed_at":"2022-09-23T04:41:53.116Z","dependency_job_id":null,"html_url":"https://github.com/GitOfZGT/some-loader-utils","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GitOfZGT%2Fsome-loader-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GitOfZGT%2Fsome-loader-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GitOfZGT%2Fsome-loader-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GitOfZGT%2Fsome-loader-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GitOfZGT","download_url":"https://codeload.github.com/GitOfZGT/some-loader-utils/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248519471,"owners_count":21117757,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dynamic-theme","less","plugins","scss","themes","webpack"],"created_at":"2024-11-15T00:12:52.324Z","updated_at":"2025-04-12T04:46:00.349Z","avatar_url":"https://github.com/GitOfZGT.png","language":"JavaScript","readme":"# @zougt/some-loader-utils\n\n提供了\n\n-   [getLess](#getLess)，本质上不是针对 less-loader 的扩展，而是[less 包](https://github.com/less/less.js)的扩展\n-   [getSass](#getSass)，本质上不是针对 sass-loader 的扩展，而是[sass 包](https://github.com/sass/dart-sass)的扩展\n\n让你轻松实现基于`less`、`sass`的 web 应用在线动态主题切换。\n\n有[动态主题模式](#动态主题模式)和[预设主题模式](#预设主题模式)\n\n特点：\n\n-   使用成本很低\n-   不限 ui 框架，Element-ui、iview、Ant-design 等等等（只要基于 less/sass）\n-   不依赖 css3 vars\n-   浏览器兼容性良好（IE9+ ?）\n\n[demo repositories](https://github.com/GitOfZGT/dynamic-theme-demos)\n\n# 动态主题模式\n\n\u003e v1.4.0+支持\n\n可用颜色板选择任意颜色切换相关的梯度颜色，这里以 scss 为例\n\n[one inline demo](https://gitofzgt.github.io/dynamic-theme-demos/webpack-vuecli4-elementui-dynamic-theme/)\n\n[one demo repository](https://github.com/GitOfZGT/dynamic-theme-demos/tree/master/projects/webpack-vuecli4-elementui-dynamic-theme/)\n\n![效果图](https://img-blog.csdnimg.cn/56589b227df9470c83389b4fc0adbaaf.gif#pic_center)\n\n## 在 webpack 中使用\n\n```bash\n# use npm or pnpm\nnpm install color@3.2.1 @zougt/some-loader-utils @zougt/theme-css-extract-webpack-plugin -D\n# use yarn\nyarn add color@3.2.1 @zougt/some-loader-utils @zougt/theme-css-extract-webpack-plugin -D\n```\n\n**webpack.config.js**\n\n```js\nconst path = require('path');\n\nconst { getSass } = require('@zougt/some-loader-utils');\n\nconst ThemeCssExtractWebpackPlugin = require('@zougt/theme-css-extract-webpack-plugin');\n\nconst multipleScopeVars = [\n    {\n        // 必需,任意名称\n        scopeName: 'theme-vars',\n        // path和varsContent选一个\n        path: path.resolve('src/theme/theme-vars.scss'),\n        // varsContent:`@--color-primary:#9c26b;`\n    },\n];\n\nmodule.exports = {\n    module: {\n        rules: [\n            {\n                // 添加 setCustomTheme 的热更新loader\n                test: /setCustomTheme\\.js$/,\n                enforce: 'pre',\n                loader: require.resolve(\n                    '@zougt/theme-css-extract-webpack-plugin/dist/hot-loader/index.js'\n                ),\n            },\n            {\n                test: /\\.(scss|sass)$/i,\n                // 请确保支持 implementation 属性的 sass-loader版本，webpack4 =\u003e sass-loader v10.x，webpack5 =\u003e sass-loader v12.x，请安装sass， 非 node-sass\n                loader: 'sass-loader',\n                options: {\n                    implementation: getSass({\n                        // getMultipleScopeVars优先于 sassOptions.multipleScopeVars\n                        getMultipleScopeVars: (lessOptions) =\u003e\n                            multipleScopeVars,\n                        // 可选项\n                        // implementation:sass\n                    }),\n                },\n            },\n        ],\n    },\n    plugins: [\n        new ThemeCssExtractWebpackPlugin({\n            // 启用动态主题模式\n            arbitraryMode: true,\n            // 默认主题色，与\"src/theme/theme-vars.scss\"的@--color-primary主题色相同\n            defaultPrimaryColor: '#512da7',\n            multipleScopeVars,\n            // 【注意】includeStyleWithColors作用： css中不是由主题色变量生成的颜色，也让它抽取到主题css内，可以提高权重\n            includeStyleWithColors: [\n                {\n                    // color也可以是array，如 [\"#ffffff\",\"#000\"]\n                    color: '#ffffff',\n                    // 排除属性，如 不提取背景色的#ffffff\n                    // excludeCssProps:[\"background\",\"background-color\"]\n                    // 排除选择器，如 不提取以下选择器的 #ffffff\n                    // excludeSelectors: [\n                    //   \".ant-btn-link:hover, .ant-btn-link:focus, .ant-btn-link:active\",\n                    // ],\n                },\n            ],\n            // 是否在html默认添加主题的style标签\n            InjectDefaultStyleTagToHtml: true,\n            // setCustomTheme.js的一个依赖的生成路径，默认是 @zougt/theme-css-extract-webpack-plugin/dist/hot-loader/setCustomThemeContent.js\n            customThemeOutputPath: '',\n            // 调整色相值偏差，某些颜色值是由主题色通过mix等函数转化后，两者色相值不相等，无法确认是梯度颜色，可以调整low和high，允许偏差范围， 例如 hueDiffControls:{low: 2,high:2}\n            // hueDiffControls: {\n            //     low: 0,\n            //     high: 0,\n            // },\n        }),\n    ],\n};\n```\n\n**src/theme/theme-vars.scss**\n\n```scss\n/*说明：此文件不应该被其他@import，此文件的变量并不是来设置项目的主题（当然，你可以作为加载时的默认主题），主要作用是，这里的变量值只要与项目的原变量值有差别，编译后就会抽取跟随主题色梯度变化的css*/\n\n/*注意（重要）：此文件的内容一旦固定下来就不需要改，在线动态切换主题，调用setCustomTheme方法即可*/\n\n/*注意（强调）：变量值改动会影响 gradientReplacer 和 targetValueReplacer 的可用属性的变化，所以内容一旦固定下来就不需要改（强调）*/\n\n/*主题色，通常与  插件的 defaultPrimaryColor 相同， 使用setCustomTheme({primaryColor})切换*/\n\n$--color-primary: #512da7;\n\n/*与此颜色对应的样式，默认情况也会跟主色变化的，要切换它对应的梯度颜色，使用setCustomTheme({gradientReplacer:{\"#F7D06B\":\"#F7D06B\"}})切换 */\n$--color-success: #f7d06b;\n\n// /*圆角值，尽量与原值差别大一点，方便分析 targetValueReplacer 的可用属性，非颜色值的切换，可以使用 setCustomTheme({targetValueReplacer:{\"6px\"}}) 精准替换*/\n// @border-radius-base:6px;\n```\n\n**在线切换主题**\n\n动态主题切换必须使用的 \"setCustomTheme\" 模块，会自动处理项目中包括组件库涉及的梯度颜色替换\n\n```js\n// color@4 使用了Numeric separators，如需良好兼容性应该安装 color@3\nimport Color from 'color';\n// setCustomTheme的参数必须提供Color模块，至于为什么不把 Color 直接依赖进去是有原因的\nimport setCustomTheme from '@zougt/theme-css-extract-webpack-plugin/dist/setCustomTheme';\n// 设置任意主题色既可\nsetCustomTheme({\n    Color,\n    primaryColor: '#FF005A',\n    //gradientReplacer:{},\n    //targetValueReplacer:{}\n});\n```\n\n`setCustomTheme` 的可选参数 gradientReplacer 与 targetValueReplacer 的可用属性会跟随 .scss 内容变化的，所以整个项目动态主题的模型应该最开始固化下来\n\n```shell\n# npm run dev 之后\n# 可以在终端使用 z-theme 命令查看  gradientReplacer 与 targetValueReplacer 的可用属性\nnpx z-theme inspect\n```\n\n## 预设主题模式\n\n只预设多种可选主题，这里以less为例\n\n[one inline demo](https://gitofzgt.github.io/dynamic-theme-demos/webpack-vuecli4-antdvue-preset-theme/)\n\n[one demo repository](https://github.com/GitOfZGT/dynamic-theme-demos/tree/master/projects/webpack-vuecli4-antdvue-preset-theme/)\n\n![效果图](https://img-blog.csdnimg.cn/c11382d232a84aebab80b9f87eb66cc5.gif#pic_center)\n\n## 在 webpack 中使用\n\n```bash\n# use npm or pnpm\nnpm install @zougt/some-loader-utils @zougt/theme-css-extract-webpack-plugin -D\n# use yarn\nyarn add @zougt/some-loader-utils @zougt/theme-css-extract-webpack-plugin -D\n```\n\n**webpack.config.js**\n\n```js\nconst path = require('path');\nconst webpack = require('webpack');\n\nconst { getLess } = require('@zougt/some-loader-utils');\n\nconst ThemeCssExtractWebpackPlugin = require('@zougt/theme-css-extract-webpack-plugin');\n\nconst multipleScopeVars = [\n    {\n        // 必需\n        scopeName: 'theme-default',\n        // path 和 varsContent 必选一个\n        path: path.resolve('src/theme/theme-default.less'),\n        // varsContent参数等效于 path文件的内容\n        // varsContent:`@primary-color:${defaultPrimaryColor};`\n    },\n\n    {\n        scopeName: 'theme-red',\n        path: path.resolve('src/theme/theme-red.less'),\n    },\n];\nconst extract = process.env.NODE_ENV === 'production';\nconst publicPath = '/';\nconst assetsDir = 'assets';\nconst extractCssOutputDir = `${assetsDir}/css`;\n\nmodule.exports = {\n    output: {\n        publicPath,\n    },\n    module: {\n        rules: [\n            {\n                test: /\\.less$/i,\n                // webpack4 =\u003e less-loader v7.x , webpack5 =\u003e less-loader v10.x\n                loader: 'less-loader',\n                options: {\n                    lessOptions: {\n                        javascriptEnabled: true,\n                    },\n                    implementation: getLess({\n                        // getMultipleScopeVars优先于 lessOptions.multipleScopeVars\n                        getMultipleScopeVars: (lessOptions) =\u003e\n                            multipleScopeVars,\n                        // 可选项\n                        // implementation:less\n                    }),\n                },\n            },\n        ],\n    },\n    plugins: [\n        // 添加参数到浏览器端\n        new webpack.DefinePlugin({\n            'env.themeConfig': {\n                multipleScopeVars: JSON.stringify(multipleScopeVars),\n                extract: JSON.stringify(extract),\n                publicPath: JSON.stringify(publicPath),\n                extractCssOutputDir: JSON.stringify(extractCssOutputDir),\n            },\n        }),\n\n        new ThemeCssExtractWebpackPlugin({\n            multipleScopeVars,\n            // 【注意】includeStyleWithColors作用： css中不是由主题色变量生成的颜色，也让它抽取到主题css内，可以提高权重\n            includeStyleWithColors: [\n                {\n                    // color也可以是array，如 [\"#ffffff\",\"#000\"]\n                    color: '#ffffff',\n                    // 排除属性，如 不提取背景色的#ffffff\n                    // excludeCssProps:[\"background\",\"background-color\"]\n                    // 排除选择器，如 不提取以下选择器的 #ffffff\n                    // excludeSelectors: [\n                    //   \".ant-btn-link:hover, .ant-btn-link:focus, .ant-btn-link:active\",\n                    // ],\n                },\n                {\n                    color: ['transparent', 'none'],\n                },\n            ],\n            // 默认使用哪份主题，默认取 multipleScopeVars[0].scopeName\n            defaultScopeName: '',\n            // 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效\n            extract,\n            // 独立主题css文件的输出路径\n            outputDir: extractCssOutputDir,\n            // 会选取defaultScopeName对应的主题css文件在html添加link\n            themeLinkTagId: 'theme-link-tag',\n            // 是否对抽取的css文件内对应scopeName的权重类名移除\n            removeCssScopeName: false,\n        }),\n    ],\n};\n```\n\n**在线切换主题**\n\n预设主题切换，需要做的事情\n\n1、开发时只需，html 标签的 calss 添加对应的 scopeName，移除上个 scopeName  \n2、打包后，如果开启 extract: true，需要切换对应的 link 标签的 href\n\n可以选择使用如下封装好的方法\n\n```js\nimport { toggleTheme } from '@zougt/theme-css-extract-webpack-plugin/dist/toggleTheme';\n// env.themeConfig 来源 (webpack.DefinePlugin)\nconst themeConfig = env.themeConfig;\ntoggleTheme({\n    scopeName,\n    multipleScopeVars: themeConfig.multipleScopeVars,\n    extract: themeConfig.extract,\n    publicPath: themeConfig.publicPath,\n    outputDir: themeConfig.extractCssOutputDir,\n    // customLinkHref: (href) =\u003e href,\n    // themeLinkTagId: \"theme-link-tag\",\n    // removeCssScopeName: false,\n    // loading: {\n    //   show: () =\u003e {},\n    //   hide: () =\u003e {},\n    // },\n});\n```\n\n**预设多主题编译原理示例（以 sass 为例）**\n\n**主题包含的可能不只是颜色部分**\n\n```scss\n//src/theme/default-vars.scss\n/**\n*此scss变量文件作为multipleScopeVars去编译时，会自动移除!default以达到变量提升\n*同时此scss变量文件作为默认主题变量文件，被其他.scss通过 @import 时，必需 !default\n*/\n$primary-color: #0081ff !default;\n$--border-radius-base: 4px !default;\n```\n\n```scss\n//src/theme/mauve-vars.scss\n$primary-color: #9c26b0 !default;\n$--border-radius-base: 8px !default;\n```\n\n```scss\n//src/components/Button/style.scss\n@import '../../theme/default-vars';\n.un-btn {\n    position: relative;\n    display: inline-block;\n    font-weight: 400;\n    white-space: nowrap;\n    text-align: center;\n    border: 1px solid transparent;\n    background-color: $primary-color;\n    border-radius: $--border-radius-base;\n    .anticon {\n        line-height: 1;\n    }\n}\n```\n\n编译之后\n\nsrc/components/Button/style.css\n\n```css\n.un-btn {\n    position: relative;\n    display: inline-block;\n    font-weight: 400;\n    white-space: nowrap;\n    text-align: center;\n    border: 1px solid transparent;\n}\n.theme-default .un-btn {\n    background-color: #0081ff;\n    border-radius: 4px;\n}\n.theme-mauve .un-btn {\n    background-color: #9c26b0;\n    border-radius: 8px;\n}\n.un-btn .anticon {\n    line-height: 1;\n}\n```\n\n在`html`中改变 classname 切换主题，只作用于 html 标签 ：\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"zh\" class=\"theme-default\"\u003e\n    \u003chead\u003e\n        \u003cmeta charset=\"utf-8\" /\u003e\n        \u003ctitle\u003etitle\u003c/title\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n        \u003c!-- built files will be auto injected --\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n```js\ndocument.documentElement.className = 'theme-mauve';\n```\n\n### 使用 Css Modules\n\n如果是模块化的 scss，得到的 css 类似：\n\n```css\n.src-components-Button-style_theme-default-3CPvz\n    .src-components-Button-style_un-btn-1n85E {\n    background-color: #0081ff;\n}\n.src-components-Button-style_theme-mauve-3yajX\n    .src-components-Button-style_un-btn-1n85E {\n    background-color: #9c26b0;\n}\n```\n\n实际需要的结果应该是这样：\n\n```css\n.theme-default .src-components-Button-style_un-btn-1n85E {\n    background-color: #0081ff;\n}\n.theme-mauve .src-components-Button-style_un-btn-1n85E {\n    background-color: #9c26b0;\n}\n```\n\n在 webpack.config.js 需要对`css-loader` (v4.0+) 的 modules 属性添加 getLocalIdent:\n\n```js\nconst path = require('path');\n// const sass = require(\"sass\");\nconst { getSass } = require('@zougt/some-loader-utils');\nconst { interpolateName } = require('loader-utils');\nfunction normalizePath(file) {\n    return path.sep === '\\\\' ? file.replace(/\\\\/g, '/') : file;\n}\nconst multipleScopeVars = [\n    {\n        scopeName: 'theme-default',\n        path: path.resolve('src/theme/default-vars.scss'),\n    },\n    {\n        scopeName: 'theme-mauve',\n        path: path.resolve('src/theme/mauve-vars.scss'),\n    },\n];\nmodule.exports = {\n    module: {\n        rules: [\n            {\n                test: /\\.module.scss$/i,\n                use: [\n                    {\n                        loader: 'css-loader',\n                        options: {\n                            importLoaders: 1,\n                            modules: {\n                                localIdentName:\n                                    process.env.NODE_ENV === 'production'\n                                        ? '[hash:base64:5]'\n                                        : '[path][name]_[local]-[hash:base64:5]',\n                                //使用 getLocalIdent 自定义模块化名称 ， css-loader v4.0+\n                                getLocalIdent: (\n                                    loaderContext,\n                                    localIdentName,\n                                    localName,\n                                    options\n                                ) =\u003e {\n                                    if (\n                                        multipleScopeVars.some(\n                                            (item) =\u003e\n                                                item.scopeName === localName\n                                        )\n                                    ) {\n                                        //localName 属于 multipleScopeVars 的不用模块化\n                                        return localName;\n                                    }\n                                    const { context, hashPrefix } = options;\n                                    const { resourcePath } = loaderContext;\n                                    const request = normalizePath(\n                                        path.relative(context, resourcePath)\n                                    );\n                                    // eslint-disable-next-line no-param-reassign\n                                    options.content = `${\n                                        hashPrefix + request\n                                    }\\x00${localName}`;\n                                    const inname = interpolateName(\n                                        loaderContext,\n                                        localIdentName,\n                                        options\n                                    );\n\n                                    return inname.replace(\n                                        /\\\\?\\[local\\\\?]/gi,\n                                        localName\n                                    );\n                                },\n                            },\n                        },\n                    },\n                    {\n                        loader: 'sass-loader',\n                        options: {\n                            implementation: getSass({\n                                // getMultipleScopeVars优先于 sassOptions.multipleScopeVars\n                                getMultipleScopeVars: (sassOptions) =\u003e\n                                    multipleScopeVars,\n                                // 可选项\n                                // implementation:sass\n                            }),\n                        },\n                    },\n                ],\n            },\n        ],\n    },\n};\n```\n\n\u003e 以上是基于 webpack 的多主题的编译方案实现，如需 vite 版本的请看 vite 插件[@zougt/vite-plugin-theme-preprocessor](https://github.com/GitOfZGT/vite-plugin-theme-preprocessor)\n\n### multipleScopeVars\n\n必需的\n\n\u003e 当 multipleScopeVars 只有一项时， scopeName 就没有意义，但是 path 可以起到 变量提升的作用\n\nType `object[]`\n\n#### multipleScopeVars[].scopeName\n\nType `string`\n\n#### multipleScopeVars[].path\n\n必需的，变量文件的绝对路径\n\nType `string || string[]`\n\n```js\nconst multipleScopeVars = [\n    {\n        scopeName: 'theme-default',\n        path: path.resolve('src/theme/default-vars.less'),\n    },\n    {\n        scopeName: 'theme-mauve',\n        path: path.resolve('src/theme/mauve-vars.less'),\n    },\n];\n```\n\n### multipleScopeVars[].includeStyles\n\n\u003e v1.3.0 支持 includeStyles,只在预设主题模式有效\n\nType: `Object`\n\n当存在以下情况时，可以用这个属性处理\n\n```css\n.theme-blue .el-button:focus,\n.theme-blue .el-button:hover {\n    /*这里的color值由 $primary-color 编译得来的，所以选择器前面加了 .theme-blue 提高了权重*/\n    color: #0281ff;\n    border-color: #b3d9ff;\n    background-color: #e6f2ff;\n}\n.el-button--primary:focus,\n.el-button--primary:hover {\n    /*这里的color值不是由 变量 编译得来的，这时就会被上面那个 color 覆盖了， 实际上这里的color才是需要的效果*/\n    color: #fff;\n}\n```\n\n```js\nconst includeStyles = {\n    '.el-button--primary:hover, .el-button--primary:focus': {\n        color: '#FFFFFF',\n    },\n};\nconst multipleScopeVars = [\n    {\n        scopeName: 'theme-default',\n        path: path.resolve('src/theme/default-vars.less'),\n        includeStyles,\n    },\n    {\n        scopeName: 'theme-mauve',\n        path: path.resolve('src/theme/mauve-vars.less'),\n        includeStyles,\n    },\n];\n```\n\n得到\n\n```css\n.theme-blue .el-button:focus,\n.theme-blue .el-button:hover {\n    /*这里的color值由 $primary-color 编译得来的，所以选择器前面加了 .theme-blue 提高了权重*/\n    color: #0281ff;\n    border-color: #b3d9ff;\n    background-color: #e6f2ff;\n}\n.theme-blue .el-button--primary:focus,\n.theme-blue .el-button--primary:hover {\n    /*这里的color值不是由 变量 编译得来的，通过includeStyles也提高了权重得到实际的效果*/\n    color: #ffffff;\n}\n```\n\n出现权重问题效果图\n\n![includeStyles](https://user-images.githubusercontent.com/21262000/133917696-804f8a75-2540-48e4-8b46-84ddc0b3fef1.png)\n\n使用了 includeStyles 的效果图\n\n![includeStyles](https://user-images.githubusercontent.com/21262000/133917724-4d64f4e5-af9b-4dd6-8481-b10b20f3204f.png)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitofzgt%2Fsome-loader-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgitofzgt%2Fsome-loader-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitofzgt%2Fsome-loader-utils/lists"}