@modern-js/plugin-tailwindcss 0.0.0-next-20221207163013 → 0.0.0-next-20221207182406
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -5
- package/dist/js/modern/cli.js +64 -142
- package/dist/js/modern/design-token/cli/index.js +53 -57
- package/dist/js/modern/design-token/index.js +2 -5
- package/dist/js/modern/design-token/postcss-plugin/index.js +8 -11
- package/dist/js/modern/design-token/runtime/index.js +1 -4
- package/dist/js/modern/design-token/runtime/plugin.js +31 -41
- package/dist/js/modern/index.js +1 -4
- package/dist/js/modern/tailwind.js +21 -28
- package/dist/js/modern/utils.js +8 -32
- package/dist/js/node/cli.js +75 -162
- package/dist/js/node/design-token/cli/index.js +58 -70
- package/dist/js/node/design-token/index.js +24 -29
- package/dist/js/node/design-token/postcss-plugin/index.js +13 -28
- package/dist/js/node/design-token/runtime/index.js +22 -31
- package/dist/js/node/design-token/runtime/plugin.js +42 -65
- package/dist/js/node/index.js +11 -27
- package/dist/js/node/tailwind.js +27 -47
- package/dist/js/node/utils.js +16 -56
- package/dist/js/treeshaking/cli.js +132 -303
- package/dist/js/treeshaking/design-token/cli/index.js +99 -116
- package/dist/js/treeshaking/design-token/index.js +2 -3
- package/dist/js/treeshaking/design-token/postcss-plugin/index.js +26 -17
- package/dist/js/treeshaking/design-token/runtime/index.js +1 -2
- package/dist/js/treeshaking/design-token/runtime/plugin.js +55 -76
- package/dist/js/treeshaking/index.js +1 -2
- package/dist/js/treeshaking/tailwind.js +42 -86
- package/dist/js/treeshaking/utils.js +44 -159
- package/dist/types/cli.d.ts +1 -3
- package/dist/types/design-token/cli/index.d.ts +0 -2
- package/dist/types/design-token/postcss-plugin/index.d.ts +0 -2
- package/dist/types/design-token/runtime/plugin.d.ts +0 -2
- package/package.json +10 -10
- package/dist/js/modern/design-token/global.d.js +0 -0
- package/dist/js/modern/modern-app.env.d.js +0 -0
- package/dist/js/node/design-token/global.d.js +0 -0
- package/dist/js/node/modern-app.env.d.js +0 -0
- package/dist/js/treeshaking/design-token/global.d.js +0 -0
- package/dist/js/treeshaking/modern-app.env.d.js +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @modern-js/plugin-tailwindcss
|
|
2
2
|
|
|
3
|
-
## 0.0.0-next-
|
|
3
|
+
## 0.0.0-next-20221207182406
|
|
4
4
|
|
|
5
5
|
### Major Changes
|
|
6
6
|
|
|
@@ -40,13 +40,14 @@
|
|
|
40
40
|
|
|
41
41
|
### Patch Changes
|
|
42
42
|
|
|
43
|
-
- d6546ad91: add buildConfig style in module-tools and remove tools
|
|
44
|
-
在 module-tools 里新增 buildConfig style 并删除 tools
|
|
43
|
+
- d6546ad91: add buildConfig style in module-tools-v2 and remove tools
|
|
44
|
+
在 module-tools-v2 里新增 buildConfig style 并删除 tools
|
|
45
45
|
- Updated dependencies [2344eb26e]
|
|
46
46
|
- Updated dependencies [a11fcf8b5]
|
|
47
47
|
- Updated dependencies [e7ce0636d]
|
|
48
48
|
- Updated dependencies [b18fa8f3e]
|
|
49
49
|
- Updated dependencies [c9e800d39]
|
|
50
|
+
- Updated dependencies [6604f1b8b]
|
|
50
51
|
- Updated dependencies [6aca87501]
|
|
51
52
|
- Updated dependencies [fda836fe8]
|
|
52
53
|
- Updated dependencies [3e57f2bd5]
|
|
@@ -79,8 +80,8 @@
|
|
|
79
80
|
- Updated dependencies [abf3421a7]
|
|
80
81
|
- Updated dependencies [543be9558]
|
|
81
82
|
- Updated dependencies [14b712da8]
|
|
82
|
-
- @modern-js/runtime@0.0.0-next-
|
|
83
|
-
- @modern-js/utils@0.0.0-next-
|
|
83
|
+
- @modern-js/runtime@0.0.0-next-20221207182406
|
|
84
|
+
- @modern-js/utils@0.0.0-next-20221207182406
|
|
84
85
|
|
|
85
86
|
## 2.0.0-beta.2
|
|
86
87
|
|
package/dist/js/modern/cli.js
CHANGED
|
@@ -1,136 +1,75 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
var
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
if (__hasOwnProp.call(b, prop))
|
|
9
|
-
__defNormalProp(a, prop, b[prop]);
|
|
10
|
-
if (__getOwnPropSymbols)
|
|
11
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
-
if (__propIsEnum.call(b, prop))
|
|
13
|
-
__defNormalProp(a, prop, b[prop]);
|
|
14
|
-
}
|
|
15
|
-
return a;
|
|
16
|
-
};
|
|
17
|
-
var __async = (__this, __arguments, generator) => {
|
|
18
|
-
return new Promise((resolve, reject) => {
|
|
19
|
-
var fulfilled = (value) => {
|
|
20
|
-
try {
|
|
21
|
-
step(generator.next(value));
|
|
22
|
-
} catch (e) {
|
|
23
|
-
reject(e);
|
|
24
|
-
}
|
|
25
|
-
};
|
|
26
|
-
var rejected = (value) => {
|
|
27
|
-
try {
|
|
28
|
-
step(generator.throw(value));
|
|
29
|
-
} catch (e) {
|
|
30
|
-
reject(e);
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
34
|
-
step((generator = generator.apply(__this, __arguments)).next());
|
|
35
|
-
});
|
|
36
|
-
};
|
|
37
|
-
import path from "path";
|
|
38
|
-
import {
|
|
39
|
-
PLUGIN_SCHEMAS,
|
|
40
|
-
fs,
|
|
41
|
-
CONFIG_CACHE_DIR,
|
|
42
|
-
globby,
|
|
43
|
-
nanoid,
|
|
44
|
-
slash
|
|
45
|
-
} from "@modern-js/utils";
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
3
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
5
|
+
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
6
|
+
import path from 'path';
|
|
7
|
+
import { PLUGIN_SCHEMAS, fs, CONFIG_CACHE_DIR, globby, nanoid, slash } from '@modern-js/utils';
|
|
46
8
|
import DesignTokenPlugin from "./design-token/cli";
|
|
47
9
|
import { getTailwindConfig } from "./tailwind";
|
|
48
10
|
import { template, checkTwinMacroNotExist } from "./utils";
|
|
49
|
-
const supportCssInJsLibrary =
|
|
50
|
-
const getRandomTwConfigFileName =
|
|
51
|
-
return slash(
|
|
52
|
-
path.join(
|
|
53
|
-
internalDirectory,
|
|
54
|
-
`tailwind.config.${Date.now()}.${nanoid()}.js`
|
|
55
|
-
)
|
|
56
|
-
);
|
|
11
|
+
const supportCssInJsLibrary = 'styled-components';
|
|
12
|
+
export const getRandomTwConfigFileName = internalDirectory => {
|
|
13
|
+
return slash(path.join(internalDirectory, `tailwind.config.${Date.now()}.${nanoid()}.js`));
|
|
57
14
|
};
|
|
58
|
-
|
|
59
|
-
pluginName
|
|
15
|
+
export default (({
|
|
16
|
+
pluginName
|
|
17
|
+
} = {
|
|
18
|
+
pluginName: '@modern-js/plugin-tailwindcss'
|
|
60
19
|
}) => ({
|
|
61
|
-
name:
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
20
|
+
name: '@modern-js/plugin-tailwindcss',
|
|
21
|
+
// support designSystem.supportStyledComponents
|
|
22
|
+
usePlugins: [DesignTokenPlugin({
|
|
23
|
+
pluginName
|
|
24
|
+
})],
|
|
25
|
+
setup: async api => {
|
|
26
|
+
const {
|
|
27
|
+
appDirectory,
|
|
28
|
+
internalDirectory
|
|
29
|
+
} = api.useAppContext();
|
|
30
|
+
let internalTwConfigPath = '';
|
|
31
|
+
// When reinstalling dependencies, most of the time the project will be restarted
|
|
32
|
+
const notHaveTwinMacro = await checkTwinMacroNotExist(appDirectory);
|
|
71
33
|
return {
|
|
72
34
|
prepare() {
|
|
73
35
|
if (notHaveTwinMacro) {
|
|
74
36
|
return;
|
|
75
37
|
}
|
|
76
38
|
internalTwConfigPath = getRandomTwConfigFileName(internalDirectory);
|
|
77
|
-
const globPattern = slash(
|
|
78
|
-
path.join(appDirectory, CONFIG_CACHE_DIR, "*.cjs")
|
|
79
|
-
);
|
|
39
|
+
const globPattern = slash(path.join(appDirectory, CONFIG_CACHE_DIR, '*.cjs'));
|
|
80
40
|
const files = globby.sync(globPattern, {
|
|
81
41
|
absolute: true
|
|
82
42
|
});
|
|
83
43
|
if (files.length > 0) {
|
|
84
|
-
fs.writeFileSync(
|
|
85
|
-
internalTwConfigPath,
|
|
86
|
-
template(files[files.length - 1]),
|
|
87
|
-
"utf-8"
|
|
88
|
-
);
|
|
44
|
+
fs.writeFileSync(internalTwConfigPath, template(files[files.length - 1]), 'utf-8');
|
|
89
45
|
}
|
|
90
46
|
},
|
|
91
47
|
validateSchema() {
|
|
92
|
-
return PLUGIN_SCHEMAS[
|
|
48
|
+
return PLUGIN_SCHEMAS['@modern-js/plugin-tailwindcss'];
|
|
93
49
|
},
|
|
94
50
|
config() {
|
|
95
51
|
return {
|
|
96
52
|
tools: {
|
|
97
|
-
|
|
98
|
-
|
|
53
|
+
// TODO: Add interface about postcss config
|
|
54
|
+
// TODO: In module project, also is called, but should not be called.
|
|
55
|
+
postcss: config => {
|
|
56
|
+
var _modernConfig$tools, _modernConfig$source;
|
|
99
57
|
const modernConfig = api.useResolvedConfigContext();
|
|
100
|
-
const tailwindConfig = getTailwindConfig(
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
content: [
|
|
106
|
-
"./config/html/**/*.html",
|
|
107
|
-
"./config/html/**/*.ejs",
|
|
108
|
-
"./config/html/**/*.hbs",
|
|
109
|
-
"./src/**/*.js",
|
|
110
|
-
"./src/**/*.jsx",
|
|
111
|
-
"./src/**/*.ts",
|
|
112
|
-
"./src/**/*.tsx",
|
|
113
|
-
"./storybook/**/*",
|
|
114
|
-
"./styles/**/*.less",
|
|
115
|
-
"./styles/**/*.css",
|
|
116
|
-
"./styles/**/*.sass",
|
|
117
|
-
"./styles/**/*.scss"
|
|
118
|
-
]
|
|
119
|
-
}
|
|
58
|
+
const tailwindConfig = getTailwindConfig(modernConfig === null || modernConfig === void 0 ? void 0 : (_modernConfig$tools = modernConfig.tools) === null || _modernConfig$tools === void 0 ? void 0 : _modernConfig$tools.tailwindcss, modernConfig === null || modernConfig === void 0 ? void 0 : (_modernConfig$source = modernConfig.source) === null || _modernConfig$source === void 0 ? void 0 : _modernConfig$source.designSystem, {
|
|
59
|
+
pureConfig: {
|
|
60
|
+
content: ['./config/html/**/*.html', './config/html/**/*.ejs', './config/html/**/*.hbs', './src/**/*.js', './src/**/*.jsx', './src/**/*.ts', './src/**/*.tsx',
|
|
61
|
+
// about storybook
|
|
62
|
+
'./storybook/**/*', './styles/**/*.less', './styles/**/*.css', './styles/**/*.sass', './styles/**/*.scss']
|
|
120
63
|
}
|
|
121
|
-
);
|
|
64
|
+
});
|
|
122
65
|
if (Array.isArray(config.postcssOptions.plugins)) {
|
|
123
|
-
config.postcssOptions.plugins.push(
|
|
124
|
-
require("tailwindcss")(tailwindConfig)
|
|
125
|
-
);
|
|
66
|
+
config.postcssOptions.plugins.push(require('tailwindcss')(tailwindConfig));
|
|
126
67
|
} else {
|
|
127
|
-
config.postcssOptions.plugins = [
|
|
128
|
-
require("tailwindcss")(tailwindConfig)
|
|
129
|
-
];
|
|
68
|
+
config.postcssOptions.plugins = [require('tailwindcss')(tailwindConfig)];
|
|
130
69
|
}
|
|
131
70
|
},
|
|
132
71
|
babel(config) {
|
|
133
|
-
var
|
|
72
|
+
var _config$plugins;
|
|
134
73
|
if (notHaveTwinMacro) {
|
|
135
74
|
return;
|
|
136
75
|
}
|
|
@@ -140,13 +79,15 @@ var cli_default = ({ pluginName } = {
|
|
|
140
79
|
config: internalTwConfigPath
|
|
141
80
|
}
|
|
142
81
|
};
|
|
143
|
-
(
|
|
82
|
+
(_config$plugins = config.plugins) === null || _config$plugins === void 0 ? void 0 : _config$plugins.some(plugin => {
|
|
144
83
|
if (Array.isArray(plugin) && plugin[0]) {
|
|
145
84
|
const pluginTarget = plugin[0];
|
|
146
85
|
let pluginOptions = plugin[1];
|
|
147
|
-
if (typeof pluginTarget ===
|
|
86
|
+
if (typeof pluginTarget === 'string' &&
|
|
87
|
+
// TODO: use babel chain
|
|
88
|
+
slash(pluginTarget).includes('compiled/babel-plugin-macros')) {
|
|
148
89
|
if (pluginOptions) {
|
|
149
|
-
pluginOptions =
|
|
90
|
+
pluginOptions = _objectSpread(_objectSpread({}, pluginOptions), twinConfig);
|
|
150
91
|
} else {
|
|
151
92
|
plugin.push(twinConfig);
|
|
152
93
|
}
|
|
@@ -159,46 +100,27 @@ var cli_default = ({ pluginName } = {
|
|
|
159
100
|
}
|
|
160
101
|
};
|
|
161
102
|
},
|
|
162
|
-
beforeBuildTask({
|
|
103
|
+
beforeBuildTask({
|
|
104
|
+
config
|
|
105
|
+
}) {
|
|
163
106
|
const modernConfig = api.useResolvedConfigContext();
|
|
164
|
-
const {
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
{
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
"./config/html/**/*.ejs",
|
|
173
|
-
"./config/html/**/*.hbs",
|
|
174
|
-
"./src/**/*.js",
|
|
175
|
-
"./src/**/*.jsx",
|
|
176
|
-
"./src/**/*.ts",
|
|
177
|
-
"./src/**/*.tsx",
|
|
178
|
-
"./storybook/**/*",
|
|
179
|
-
"./styles/**/*.less",
|
|
180
|
-
"./styles/**/*.css",
|
|
181
|
-
"./styles/**/*.sass",
|
|
182
|
-
"./styles/**/*.scss"
|
|
183
|
-
]
|
|
184
|
-
}
|
|
107
|
+
const {
|
|
108
|
+
designSystem
|
|
109
|
+
} = modernConfig;
|
|
110
|
+
const tailwindConfig = getTailwindConfig(config.style.tailwindCss, designSystem, {
|
|
111
|
+
pureConfig: {
|
|
112
|
+
content: ['./config/html/**/*.html', './config/html/**/*.ejs', './config/html/**/*.hbs', './src/**/*.js', './src/**/*.jsx', './src/**/*.ts', './src/**/*.tsx',
|
|
113
|
+
// about storybook
|
|
114
|
+
'./storybook/**/*', './styles/**/*.less', './styles/**/*.css', './styles/**/*.sass', './styles/**/*.scss']
|
|
185
115
|
}
|
|
186
|
-
);
|
|
116
|
+
});
|
|
187
117
|
if (Array.isArray(config.style.postcss.plugins)) {
|
|
188
|
-
config.style.postcss.plugins.push(
|
|
189
|
-
require("tailwindcss")(tailwindConfig)
|
|
190
|
-
);
|
|
118
|
+
config.style.postcss.plugins.push(require('tailwindcss')(tailwindConfig));
|
|
191
119
|
} else {
|
|
192
|
-
config.style.postcss.plugins = [
|
|
193
|
-
require("tailwindcss")(tailwindConfig)
|
|
194
|
-
];
|
|
120
|
+
config.style.postcss.plugins = [require('tailwindcss')(tailwindConfig)];
|
|
195
121
|
}
|
|
196
122
|
return config;
|
|
197
123
|
}
|
|
198
124
|
};
|
|
199
|
-
}
|
|
200
|
-
});
|
|
201
|
-
export {
|
|
202
|
-
cli_default as default,
|
|
203
|
-
getRandomTwConfigFileName
|
|
204
|
-
};
|
|
125
|
+
}
|
|
126
|
+
}));
|
|
@@ -1,36 +1,29 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
var
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
__defNormalProp(a, prop, b[prop]);
|
|
14
|
-
}
|
|
15
|
-
return a;
|
|
16
|
-
};
|
|
17
|
-
import {
|
|
18
|
-
lazyImport,
|
|
19
|
-
PLUGIN_SCHEMAS,
|
|
20
|
-
createRuntimeExportsUtils
|
|
21
|
-
} from "@modern-js/utils";
|
|
22
|
-
var cli_default = ({ pluginName } = { pluginName: "@modern-js/plugin-tailwindcss" }) => ({
|
|
23
|
-
name: "@modern-js/plugin-design-token",
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
3
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
5
|
+
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
6
|
+
import { lazyImport, PLUGIN_SCHEMAS, createRuntimeExportsUtils } from '@modern-js/utils';
|
|
7
|
+
export default (({
|
|
8
|
+
pluginName
|
|
9
|
+
} = {
|
|
10
|
+
pluginName: '@modern-js/plugin-tailwindcss'
|
|
11
|
+
}) => ({
|
|
12
|
+
name: '@modern-js/plugin-design-token',
|
|
24
13
|
setup(api) {
|
|
25
14
|
let pluginsExportsUtils;
|
|
26
|
-
const resolveConfig = lazyImport(
|
|
27
|
-
const PLUGIN_IDENTIFIER =
|
|
28
|
-
const getDesignTokens =
|
|
15
|
+
const resolveConfig = lazyImport('tailwindcss/resolveConfig', require);
|
|
16
|
+
const PLUGIN_IDENTIFIER = 'designToken';
|
|
17
|
+
const getDesignTokens = designSystem => {
|
|
29
18
|
const tailwindcssConfig = {};
|
|
30
|
-
tailwindcssConfig.theme = designSystem ?
|
|
19
|
+
tailwindcssConfig.theme = designSystem ? _objectSpread({}, designSystem) : {};
|
|
20
|
+
|
|
21
|
+
// not use default design token when designToken.defaultTheme is false or theme is false
|
|
31
22
|
if (!designSystem) {
|
|
32
23
|
tailwindcssConfig.presets = [];
|
|
33
24
|
}
|
|
25
|
+
|
|
26
|
+
// when only designSystem exist, need remove supportStyledComponents
|
|
34
27
|
if (designSystem) {
|
|
35
28
|
delete tailwindcssConfig.theme.supportStyledComponents;
|
|
36
29
|
}
|
|
@@ -39,32 +32,35 @@ var cli_default = ({ pluginName } = { pluginName: "@modern-js/plugin-tailwindcss
|
|
|
39
32
|
return {
|
|
40
33
|
config() {
|
|
41
34
|
const appContext = api.useAppContext();
|
|
42
|
-
pluginsExportsUtils = createRuntimeExportsUtils(
|
|
43
|
-
appContext.internalDirectory,
|
|
44
|
-
"plugins"
|
|
45
|
-
);
|
|
35
|
+
pluginsExportsUtils = createRuntimeExportsUtils(appContext.internalDirectory, 'plugins');
|
|
46
36
|
return {
|
|
47
37
|
source: {
|
|
48
38
|
alias: {
|
|
49
|
-
|
|
39
|
+
'@modern-js/runtime/plugins': pluginsExportsUtils.getPath()
|
|
50
40
|
}
|
|
51
41
|
},
|
|
52
|
-
tools: {
|
|
42
|
+
tools: {
|
|
43
|
+
// TODO: support less、scss、css vars
|
|
44
|
+
// less: https://github.com/modern-js-dev/modern.js/pull/398/files#diff-f77c749e403fbf1fb676d5687bef3d7138a230331c849298d8afaff9b6afbc3dR166
|
|
45
|
+
// sass: https://github.com/modern-js-dev/modern.js/pull/398/files#diff-f77c749e403fbf1fb676d5687bef3d7138a230331c849298d8afaff9b6afbc3dR229
|
|
46
|
+
// postcss: https://github.com/modern-js-dev/modern.js/pull/398/files#diff-f77c749e403fbf1fb676d5687bef3d7138a230331c849298d8afaff9b6afbc3dR281
|
|
47
|
+
}
|
|
53
48
|
};
|
|
54
49
|
},
|
|
55
|
-
modifyEntryImports({
|
|
56
|
-
|
|
50
|
+
modifyEntryImports({
|
|
51
|
+
entrypoint,
|
|
52
|
+
imports
|
|
53
|
+
}) {
|
|
54
|
+
var _userConfig$source$de, _userConfig$source;
|
|
57
55
|
const userConfig = api.useResolvedConfigContext();
|
|
58
|
-
const designSystem = (
|
|
59
|
-
if (typeof designSystem ===
|
|
56
|
+
const designSystem = (_userConfig$source$de = (_userConfig$source = userConfig.source) === null || _userConfig$source === void 0 ? void 0 : _userConfig$source.designSystem) !== null && _userConfig$source$de !== void 0 ? _userConfig$source$de : {};
|
|
57
|
+
if (typeof designSystem === 'object' && designSystem.supportStyledComponents) {
|
|
60
58
|
const designTokens = getDesignTokens(userConfig.source.designSystem);
|
|
61
59
|
imports.push({
|
|
62
|
-
value:
|
|
63
|
-
specifiers: [
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
}
|
|
67
|
-
],
|
|
60
|
+
value: '@modern-js/runtime/plugins',
|
|
61
|
+
specifiers: [{
|
|
62
|
+
imported: PLUGIN_IDENTIFIER
|
|
63
|
+
}],
|
|
68
64
|
initialize: `
|
|
69
65
|
const designTokens = ${JSON.stringify(designTokens)};
|
|
70
66
|
`
|
|
@@ -75,18 +71,22 @@ var cli_default = ({ pluginName } = { pluginName: "@modern-js/plugin-tailwindcss
|
|
|
75
71
|
imports
|
|
76
72
|
};
|
|
77
73
|
},
|
|
78
|
-
modifyEntryRuntimePlugins({
|
|
79
|
-
|
|
74
|
+
modifyEntryRuntimePlugins({
|
|
75
|
+
entrypoint,
|
|
76
|
+
plugins
|
|
77
|
+
}) {
|
|
78
|
+
var _userConfig$source$de2, _userConfig$source2;
|
|
80
79
|
const userConfig = api.useResolvedConfigContext();
|
|
81
|
-
const designSystem = (
|
|
80
|
+
const designSystem = (_userConfig$source$de2 = (_userConfig$source2 = userConfig.source) === null || _userConfig$source2 === void 0 ? void 0 : _userConfig$source2.designSystem) !== null && _userConfig$source$de2 !== void 0 ? _userConfig$source$de2 : {};
|
|
82
81
|
let useSCThemeProvider = true;
|
|
83
82
|
if (designSystem) {
|
|
84
|
-
|
|
83
|
+
// when designSystem exist, designToken.styledComponents`s default value is false.
|
|
84
|
+
useSCThemeProvider = (designSystem === null || designSystem === void 0 ? void 0 : designSystem.supportStyledComponents) || false;
|
|
85
85
|
}
|
|
86
|
-
if (typeof designSystem ===
|
|
86
|
+
if (typeof designSystem === 'object' && designSystem.supportStyledComponents) {
|
|
87
87
|
plugins.push({
|
|
88
88
|
name: PLUGIN_IDENTIFIER,
|
|
89
|
-
options: `{token: designTokens, useStyledComponentsThemeProvider: ${useSCThemeProvider ?
|
|
89
|
+
options: `{token: designTokens, useStyledComponentsThemeProvider: ${useSCThemeProvider ? 'true' : 'false'}, useDesignTokenContext: false}`
|
|
90
90
|
});
|
|
91
91
|
}
|
|
92
92
|
return {
|
|
@@ -95,16 +95,12 @@ var cli_default = ({ pluginName } = { pluginName: "@modern-js/plugin-tailwindcss
|
|
|
95
95
|
};
|
|
96
96
|
},
|
|
97
97
|
validateSchema() {
|
|
98
|
-
|
|
98
|
+
// add source.designSystem.supportStyledComponents config
|
|
99
|
+
return PLUGIN_SCHEMAS['@modern-js/plugin-design-token'];
|
|
99
100
|
},
|
|
100
101
|
addRuntimeExports() {
|
|
101
|
-
pluginsExportsUtils.addExport(
|
|
102
|
-
`export { default as designToken } from '${pluginName}/runtime-design-token'`
|
|
103
|
-
);
|
|
102
|
+
pluginsExportsUtils.addExport(`export { default as designToken } from '${pluginName}/runtime-design-token'`);
|
|
104
103
|
}
|
|
105
104
|
};
|
|
106
105
|
}
|
|
107
|
-
});
|
|
108
|
-
export {
|
|
109
|
-
cli_default as default
|
|
110
|
-
};
|
|
106
|
+
}));
|
|
@@ -1,18 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
cssVarsHash = {}
|
|
1
|
+
export default (({
|
|
2
|
+
cssVarsHash: _cssVarsHash = {}
|
|
3
3
|
} = {}) => ({
|
|
4
|
-
postcssPlugin:
|
|
4
|
+
postcssPlugin: 'postcss-replace-css-vars',
|
|
5
5
|
Declaration(decl) {
|
|
6
|
-
if (decl.value && typeof decl.value ===
|
|
7
|
-
decl.value = decl.value.replace(/--\S*/g,
|
|
8
|
-
if (
|
|
9
|
-
return
|
|
6
|
+
if (decl.value && typeof decl.value === 'string') {
|
|
7
|
+
decl.value = decl.value.replace(/--\S*/g, match => {
|
|
8
|
+
if (_cssVarsHash[match]) {
|
|
9
|
+
return _cssVarsHash[match];
|
|
10
10
|
}
|
|
11
11
|
return match;
|
|
12
12
|
});
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
|
-
});
|
|
16
|
-
export {
|
|
17
|
-
postcss_plugin_default as default
|
|
18
|
-
};
|
|
15
|
+
}));
|
|
@@ -1,56 +1,51 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
var
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
__defNormalProp(a, prop, b[prop]);
|
|
14
|
-
}
|
|
15
|
-
return a;
|
|
16
|
-
};
|
|
17
|
-
import { jsx } from "react/jsx-runtime";
|
|
18
|
-
import hoistNonReactStatics from "hoist-non-react-statics";
|
|
19
|
-
import React, { useContext } from "react";
|
|
20
|
-
const DesignTokenContext = React.createContext({});
|
|
21
|
-
const useDesignTokens = () => useContext(DesignTokenContext);
|
|
22
|
-
var plugin_default = (options = {}) => ({
|
|
23
|
-
name: "@modern-js/plugin-design-token",
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
3
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
4
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
5
|
+
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
6
|
+
import hoistNonReactStatics from 'hoist-non-react-statics';
|
|
7
|
+
import React, { useContext } from 'react';
|
|
8
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
+
export const DesignTokenContext = /*#__PURE__*/React.createContext({});
|
|
10
|
+
export const useDesignTokens = () => useContext(DesignTokenContext);
|
|
11
|
+
export default ((options = {}) => ({
|
|
12
|
+
name: '@modern-js/plugin-design-token',
|
|
24
13
|
setup: () => ({
|
|
25
|
-
hoc({
|
|
26
|
-
|
|
14
|
+
hoc({
|
|
15
|
+
App
|
|
16
|
+
}, next) {
|
|
17
|
+
const DesignTokenAppWrapper = props => {
|
|
27
18
|
const {
|
|
28
19
|
token = {},
|
|
29
20
|
useStyledComponentsThemeProvider = false,
|
|
30
21
|
useDesignTokenContext = false
|
|
31
22
|
} = options;
|
|
32
23
|
if (useStyledComponentsThemeProvider && useDesignTokenContext) {
|
|
33
|
-
const {
|
|
34
|
-
|
|
24
|
+
const {
|
|
25
|
+
ThemeProvider
|
|
26
|
+
} = require('@modern-js/runtime/styled');
|
|
27
|
+
return /*#__PURE__*/_jsx(ThemeProvider, {
|
|
35
28
|
theme: token,
|
|
36
|
-
children:
|
|
29
|
+
children: /*#__PURE__*/_jsx(DesignTokenContext.Provider, {
|
|
37
30
|
value: token,
|
|
38
|
-
children:
|
|
31
|
+
children: /*#__PURE__*/_jsx(App, _objectSpread({}, props))
|
|
39
32
|
})
|
|
40
33
|
});
|
|
41
34
|
} else if (useStyledComponentsThemeProvider) {
|
|
42
|
-
const {
|
|
43
|
-
|
|
35
|
+
const {
|
|
36
|
+
ThemeProvider
|
|
37
|
+
} = require('@modern-js/runtime/styled');
|
|
38
|
+
return /*#__PURE__*/_jsx(ThemeProvider, {
|
|
44
39
|
theme: token,
|
|
45
|
-
children:
|
|
40
|
+
children: /*#__PURE__*/_jsx(App, _objectSpread({}, props))
|
|
46
41
|
});
|
|
47
42
|
} else if (useDesignTokenContext) {
|
|
48
|
-
return
|
|
43
|
+
return /*#__PURE__*/_jsx(DesignTokenContext.Provider, {
|
|
49
44
|
value: token,
|
|
50
|
-
children:
|
|
45
|
+
children: /*#__PURE__*/_jsx(App, _objectSpread({}, props))
|
|
51
46
|
});
|
|
52
47
|
} else {
|
|
53
|
-
return
|
|
48
|
+
return /*#__PURE__*/_jsx(App, _objectSpread({}, props));
|
|
54
49
|
}
|
|
55
50
|
};
|
|
56
51
|
return next({
|
|
@@ -58,9 +53,4 @@ var plugin_default = (options = {}) => ({
|
|
|
58
53
|
});
|
|
59
54
|
}
|
|
60
55
|
})
|
|
61
|
-
});
|
|
62
|
-
export {
|
|
63
|
-
DesignTokenContext,
|
|
64
|
-
plugin_default as default,
|
|
65
|
-
useDesignTokens
|
|
66
|
-
};
|
|
56
|
+
}));
|
package/dist/js/modern/index.js
CHANGED