Skip to content

Commit a515db4

Browse files
author
zougt
committed
feat(): getLess and getSass v1.1.0
0 parents  commit a515db4

18 files changed

+9366
-0
lines changed

‎.editorconfig

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# editorconfig.org
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.md]
12+
trim_trailing_whitespace = false

‎.eslintignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/coverage
2+
/dist
3+
/node_modules
4+
/test/fixtures

‎.eslintrc.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
root: true,
3+
extends: ["@webpack-contrib/eslint-config-webpack", "prettier"],
4+
};

‎.gitattributes

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
* text=auto
2+
bin/* eol=lf
3+
yarn.lock -diff
4+
package-lock.json -diff

‎.gitignore

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
lib-cov
2+
*.seed
3+
*.log
4+
*.csv
5+
*.dat
6+
*.out
7+
*.pid
8+
*.gz
9+
pids
10+
logs
11+
results
12+
npm-debug.log
13+
/node_modules
14+
/coverage
15+
.idea
16+
.nyc_output
17+
npm-debug.log*
18+
yarn-debug.log*
19+
.eslintcache
20+
/coverage
21+
/dist
22+
/local
23+
/reports
24+
/test/fixtures/css
25+
/test/fixtures/generated-1.less
26+
/test/fixtures/generated-2.less
27+
/test/fixtures/generated-3.less
28+
/test/output
29+
.DS_Store
30+
Thumbs.db
31+
.vscode
32+
*.sublime-project
33+
*.sublime-workspace
34+
*.iml

‎.prettierignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/coverage
2+
/dist
3+
/node_modules
4+
/test/fixtures
5+
CHANGELOG.md

‎LICENSE

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
Copyright JS Foundation and other contributors
2+
3+
Permission is hereby granted, free of charge, to any person obtaining
4+
a copy of this software and associated documentation files (the
5+
'Software'), to deal in the Software without restriction, including
6+
without limitation the rights to use, copy, modify, merge, publish,
7+
distribute, sublicense, and/or sell copies of the Software, and to
8+
permit persons to whom the Software is furnished to do so, subject to
9+
the following conditions:
10+
11+
The above copyright notice and this permission notice shall be
12+
included in all copies or substantial portions of the Software.
13+
14+
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
15+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
16+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
17+
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
18+
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
19+
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
20+
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
# @zougt/some-loader-utils
2+
3+
开始作为[`@zougt/less-loader`](https://github.com/GitOfZGT/less-loader)和[`@zougt/sass-loader`](https://github.com/GitOfZGT/less-loader)的公共依赖
4+
5+
提供了方法：
6+
7+
- [getAllStyleVarFiles](#getAllStyleVarFiles)
8+
- [getVarsContent](#getVarsContent)
9+
- [getScopeProcessResult](#getScopeProcessResult)
10+
11+
之后可能不再维护[`@zougt/less-loader`](https://github.com/GitOfZGT/less-loader)和[`@zougt/sass-loader`](https://github.com/GitOfZGT/less-loader)同步 fork 更新，提供了[`less-loader`](https://github.com/webpack-contrib/less-loader)和[`sass-loader`](https://github.com/webpack-contrib/sass-loader)的 `implementation` 版本的多主题变量文件编译方案的方法：
12+
13+
- [getLess](#getLess)
14+
- [getSass](#getSass)
15+
16+
使得基于`less`、`sass`的(新、旧)项目实现在线预设主题的动态切换变得很简单
17+
18+
## 安装与使用
19+
20+
```bash
21+
# use npm
22+
npm install @zougt/some-loader-utils -D
23+
# use yarn
24+
yarn add @zougt/some-loader-utils -D
25+
```
26+
27+
## getLess
28+
29+
Type `Function`
30+
31+
获取支持多个变量文件的`less`编译器
32+
33+
used in [`less-loader`](https://github.com/webpack-contrib/less-loader)
34+
35+
```js
36+
const path = require("path");
37+
// const less = require("less");
38+
const { getLess } = require("@zougt/some-loader-utils");
39+
40+
const multipleScopeVars = [
41+
{
42+
scopeName: "theme-default",
43+
path: path.resolve("src/theme/default-vars.less"),
44+
},
45+
{
46+
scopeName: "theme-mauve",
47+
path: path.resolve("src/theme/mauve-vars.less"),
48+
},
49+
];
50+
module.exports = {
51+
module: {
52+
rules: [
53+
{
54+
test: /\.less$/i,
55+
loader: "less-loader",
56+
options: {
57+
lessOptions: {
58+
// 不使用 getMultipleScopeVars时，也可从这里传入 multipleScopeVars
59+
// multipleScopeVars
60+
},
61+
implementation: getLess({
62+
// getMultipleScopeVars优先于 lessOptions.multipleScopeVars
63+
getMultipleScopeVars: (lessOptions) => multipleScopeVars,
64+
// 可选项
65+
// implementation:less
66+
}),
67+
},
68+
},
69+
],
70+
},
71+
};
72+
```
73+
74+
## getSass
75+
76+
Type `Function`
77+
78+
获取支持多个变量文件的`sass`编译器
79+
80+
used in [`sass-loader`](https://github.com/webpack-contrib/sass-loader)
81+
82+
```js
83+
const path = require("path");
84+
// const sass = require("sass");
85+
const { getSass } = require("@zougt/some-loader-utils");
86+
const multipleScopeVars = [
87+
{
88+
scopeName: "theme-default",
89+
path: path.resolve("src/theme/default-vars.scss"),
90+
},
91+
{
92+
scopeName: "theme-mauve",
93+
path: path.resolve("src/theme/mauve-vars.scss"),
94+
},
95+
];
96+
module.exports = {
97+
module: {
98+
rules: [
99+
{
100+
test: /\.scss$/i,
101+
loader: "sass-loader",
102+
options: {
103+
sassOptions: {
104+
// 不使用 getMultipleScopeVars 时，也可从这里传入 multipleScopeVars
105+
// multipleScopeVars
106+
},
107+
implementation: getSass({
108+
// getMultipleScopeVars优先于 sassOptions.multipleScopeVars
109+
getMultipleScopeVars: (sassOptions) => multipleScopeVars,
110+
// 可选项
111+
// implementation:less
112+
}),
113+
},
114+
},
115+
],
116+
},
117+
};
118+
```
119+
120+
## 多主题编译示例
121+
122+
请查看[多主题编译示例](https://github.com/GitOfZGT/less-loader#%E7%A4%BA%E4%BE%8B)
123+
124+
如需对编译后的主题 css 抽取成独立的文件请看 webpack 插件[`@zougt/theme-css-extract-webpack-plugin`](https://github.com/GitOfZGT/theme-css-extract-webpack-plugin)
125+
126+
以上是基于 webpack 的多主题的编译方案实现，如需 vite 版本的请看 vite 插件[@zougt/vite-plugin-theme-preprocessor](https://github.com/GitOfZGT/vite-plugin-theme-preprocessor)
127+
128+
# 依赖方法
129+
130+
## getAllStyleVarFiles
131+
132+
Type `Function`
133+
134+
用于处理`multipleScopeVars`属性
135+
136+
### multipleScopeVars
137+
138+
Type `object[]`
139+
140+
#### multipleScopeVars[].scopeName
141+
142+
Type `string`
143+
144+
#### multipleScopeVars[].path
145+
146+
```js
147+
const multipleScopeVars = [
148+
{
149+
scopeName: "theme-default",
150+
path: path.resolve("src/theme/default-vars.less"),
151+
},
152+
{
153+
scopeName: "theme-mauve",
154+
path: path.resolve("src/theme/mauve-vars.less"),
155+
},
156+
];
157+
const allStyleVarFiles = getAllStyleVarFiles(
158+
{
159+
emitError: (msg) => {
160+
throw new Error(msg);
161+
},
162+
},
163+
{ multipleScopeVars }
164+
);
165+
```
166+
167+
## getVarsContent
168+
169+
Type `Function`
170+
171+
用于获取 multipleScopeVars[].path 文件的内容
172+
173+
```js
174+
const lessVarscontent = getVarsContent(allStyleVarFiles[0].path, "less");
175+
const sassVarscontent = getVarsContent(allStyleVarFiles[0].path, "sass");
176+
```
177+
178+
## getScopeProcessResult
179+
180+
Type `Function`
181+
182+
把多个 css 内容按 multipleScopeVars 对应顺序合并，并去重
183+
184+
```js
185+
const result = getScopeProcessResult(
186+
[
187+
{
188+
map: sourceMap || null,
189+
code: `
190+
.un-btn {
191+
position: relative;
192+
background-color: #0081ff;
193+
}
194+
.un-btn .anticon {
195+
line-height: 1;
196+
}`,
197+
deps: ["E:\\sub\\panel1.less", "E:\\sub\\panel2.less"],
198+
},
199+
{
200+
map: sourceMap || null,
201+
code: `
202+
.un-btn {
203+
position: relative;
204+
background-color: #9c26b0;
205+
}
206+
.un-btn .anticon {
207+
line-height: 1;
208+
}`,
209+
deps: ["E:\\sub\\panel1.less", "E:\\sub\\panel2.less"],
210+
},
211+
],
212+
[
213+
{ scopeName: "theme-default", path: "E:\\sub\\default-vars.less" },
214+
{ scopeName: "theme-mauve", path: "E:\\sub\\mauve-vars.less" },
215+
],
216+
"E:\\sub\\style.less"
217+
);
218+
219+
//result
220+
// {
221+
// code: `
222+
// .un-btn {
223+
// position: relative;
224+
// }
225+
// .theme-default .un-btn{
226+
// background-color: #0081ff;
227+
// }
228+
// .theme-mauve .un-btn{
229+
// background-color: #9c26b0;
230+
// }
231+
// .un-btn .anticon {
232+
// line-height: 1;
233+
// }`,
234+
// deps: [
235+
// "E:\\sub\\default-vars.less",
236+
// "E:\\sub\\mauve-vars.less",
237+
// "E:\\sub\\panel1.less",
238+
// "E:\\sub\\panel2.less",
239+
// ],
240+
// map: sourceMap || null,
241+
// };
242+
```

‎babel.config.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const MIN_BABEL_VERSION = 7;
2+
3+
module.exports = (api) => {
4+
api.assertVersion(MIN_BABEL_VERSION);
5+
api.cache(true);
6+
7+
return {
8+
presets: [
9+
[
10+
"@babel/preset-env",
11+
{
12+
targets: {
13+
node: "10.13.0",
14+
},
15+
},
16+
],
17+
],
18+
};
19+
};

‎commitlint.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
extends: ["@commitlint/config-conventional"],
3+
};

‎husky.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
hooks: {
3+
"pre-commit": "lint-staged",
4+
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
5+
},
6+
};

‎lint-staged.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
"*.js": ["eslint --fix", "prettier --write"],
3+
"*.{json,md,yml,css,ts}": ["prettier --write"],
4+
};

0 commit comments

Comments
 (0)