@modern-js/plugin-tailwindcss 0.0.0-next-20221206140510 → 0.0.0-next-20221207091327
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 +5 -5
- package/dist/js/modern/cli.js +142 -64
- package/dist/js/modern/design-token/cli/index.js +57 -53
- package/dist/js/modern/design-token/global.d.js +0 -0
- package/dist/js/modern/design-token/index.js +5 -2
- package/dist/js/modern/design-token/postcss-plugin/index.js +11 -8
- package/dist/js/modern/design-token/runtime/index.js +4 -1
- package/dist/js/modern/design-token/runtime/plugin.js +41 -31
- package/dist/js/modern/index.js +4 -1
- package/dist/js/modern/modern-app.env.d.js +0 -0
- package/dist/js/modern/tailwind.js +28 -21
- package/dist/js/modern/utils.js +32 -8
- package/dist/js/node/cli.js +162 -75
- package/dist/js/node/design-token/cli/index.js +70 -58
- package/dist/js/node/design-token/global.d.js +0 -0
- package/dist/js/node/design-token/index.js +29 -24
- package/dist/js/node/design-token/postcss-plugin/index.js +28 -13
- package/dist/js/node/design-token/runtime/index.js +31 -22
- package/dist/js/node/design-token/runtime/plugin.js +65 -42
- package/dist/js/node/index.js +27 -11
- package/dist/js/node/modern-app.env.d.js +0 -0
- package/dist/js/node/tailwind.js +47 -27
- package/dist/js/node/utils.js +56 -16
- package/dist/js/treeshaking/cli.js +303 -132
- package/dist/js/treeshaking/design-token/cli/index.js +116 -99
- package/dist/js/treeshaking/design-token/global.d.js +0 -0
- package/dist/js/treeshaking/design-token/index.js +3 -2
- package/dist/js/treeshaking/design-token/postcss-plugin/index.js +17 -26
- package/dist/js/treeshaking/design-token/runtime/index.js +2 -1
- package/dist/js/treeshaking/design-token/runtime/plugin.js +76 -55
- package/dist/js/treeshaking/index.js +2 -1
- package/dist/js/treeshaking/modern-app.env.d.js +0 -0
- package/dist/js/treeshaking/tailwind.js +86 -42
- package/dist/js/treeshaking/utils.js +159 -44
- package/dist/types/cli.d.ts +3 -1
- package/dist/types/design-token/cli/index.d.ts +2 -0
- package/dist/types/design-token/postcss-plugin/index.d.ts +2 -0
- package/dist/types/design-token/runtime/plugin.d.ts +2 -0
- package/package.json +10 -10
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-20221207091327
|
|
4
4
|
|
|
5
5
|
### Major Changes
|
|
6
6
|
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
|
|
41
41
|
### Patch Changes
|
|
42
42
|
|
|
43
|
-
- d6546ad91: add buildConfig style in module-tools
|
|
44
|
-
在 module-tools
|
|
43
|
+
- d6546ad91: add buildConfig style in module-tools and remove tools
|
|
44
|
+
在 module-tools 里新增 buildConfig style 并删除 tools
|
|
45
45
|
- Updated dependencies [2344eb26e]
|
|
46
46
|
- Updated dependencies [a11fcf8b5]
|
|
47
47
|
- Updated dependencies [e7ce0636d]
|
|
@@ -79,8 +79,8 @@
|
|
|
79
79
|
- Updated dependencies [abf3421a7]
|
|
80
80
|
- Updated dependencies [543be9558]
|
|
81
81
|
- Updated dependencies [14b712da8]
|
|
82
|
-
- @modern-js/runtime@0.0.0-next-
|
|
83
|
-
- @modern-js/utils@0.0.0-next-
|
|
82
|
+
- @modern-js/runtime@0.0.0-next-20221207091327
|
|
83
|
+
- @modern-js/utils@0.0.0-next-20221207091327
|
|
84
84
|
|
|
85
85
|
## 2.0.0-beta.2
|
|
86
86
|
|
package/dist/js/modern/cli.js
CHANGED
|
@@ -1,75 +1,136 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
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";
|
|
8
46
|
import DesignTokenPlugin from "./design-token/cli";
|
|
9
47
|
import { getTailwindConfig } from "./tailwind";
|
|
10
48
|
import { template, checkTwinMacroNotExist } from "./utils";
|
|
11
|
-
const supportCssInJsLibrary =
|
|
12
|
-
|
|
13
|
-
return slash(
|
|
49
|
+
const supportCssInJsLibrary = "styled-components";
|
|
50
|
+
const getRandomTwConfigFileName = (internalDirectory) => {
|
|
51
|
+
return slash(
|
|
52
|
+
path.join(
|
|
53
|
+
internalDirectory,
|
|
54
|
+
`tailwind.config.${Date.now()}.${nanoid()}.js`
|
|
55
|
+
)
|
|
56
|
+
);
|
|
14
57
|
};
|
|
15
|
-
|
|
16
|
-
pluginName
|
|
17
|
-
} = {
|
|
18
|
-
pluginName: '@modern-js/plugin-tailwindcss'
|
|
58
|
+
var cli_default = ({ pluginName } = {
|
|
59
|
+
pluginName: "@modern-js/plugin-tailwindcss"
|
|
19
60
|
}) => ({
|
|
20
|
-
name:
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
let internalTwConfigPath = '';
|
|
31
|
-
// When reinstalling dependencies, most of the time the project will be restarted
|
|
32
|
-
const notHaveTwinMacro = await checkTwinMacroNotExist(appDirectory);
|
|
61
|
+
name: "@modern-js/plugin-tailwindcss",
|
|
62
|
+
usePlugins: [
|
|
63
|
+
DesignTokenPlugin({
|
|
64
|
+
pluginName
|
|
65
|
+
})
|
|
66
|
+
],
|
|
67
|
+
setup: (api) => __async(void 0, null, function* () {
|
|
68
|
+
const { appDirectory, internalDirectory } = api.useAppContext();
|
|
69
|
+
let internalTwConfigPath = "";
|
|
70
|
+
const notHaveTwinMacro = yield checkTwinMacroNotExist(appDirectory);
|
|
33
71
|
return {
|
|
34
72
|
prepare() {
|
|
35
73
|
if (notHaveTwinMacro) {
|
|
36
74
|
return;
|
|
37
75
|
}
|
|
38
76
|
internalTwConfigPath = getRandomTwConfigFileName(internalDirectory);
|
|
39
|
-
const globPattern = slash(
|
|
77
|
+
const globPattern = slash(
|
|
78
|
+
path.join(appDirectory, CONFIG_CACHE_DIR, "*.cjs")
|
|
79
|
+
);
|
|
40
80
|
const files = globby.sync(globPattern, {
|
|
41
81
|
absolute: true
|
|
42
82
|
});
|
|
43
83
|
if (files.length > 0) {
|
|
44
|
-
fs.writeFileSync(
|
|
84
|
+
fs.writeFileSync(
|
|
85
|
+
internalTwConfigPath,
|
|
86
|
+
template(files[files.length - 1]),
|
|
87
|
+
"utf-8"
|
|
88
|
+
);
|
|
45
89
|
}
|
|
46
90
|
},
|
|
47
91
|
validateSchema() {
|
|
48
|
-
return PLUGIN_SCHEMAS[
|
|
92
|
+
return PLUGIN_SCHEMAS["@modern-js/plugin-tailwindcss"];
|
|
49
93
|
},
|
|
50
94
|
config() {
|
|
51
95
|
return {
|
|
52
96
|
tools: {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
postcss: config => {
|
|
56
|
-
var _modernConfig$tools, _modernConfig$source;
|
|
97
|
+
postcss: (config) => {
|
|
98
|
+
var _a, _b;
|
|
57
99
|
const modernConfig = api.useResolvedConfigContext();
|
|
58
|
-
const tailwindConfig = getTailwindConfig(
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
100
|
+
const tailwindConfig = getTailwindConfig(
|
|
101
|
+
(_a = modernConfig == null ? void 0 : modernConfig.tools) == null ? void 0 : _a.tailwindcss,
|
|
102
|
+
(_b = modernConfig == null ? void 0 : modernConfig.source) == null ? void 0 : _b.designSystem,
|
|
103
|
+
{
|
|
104
|
+
pureConfig: {
|
|
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
|
+
}
|
|
63
120
|
}
|
|
64
|
-
|
|
121
|
+
);
|
|
65
122
|
if (Array.isArray(config.postcssOptions.plugins)) {
|
|
66
|
-
config.postcssOptions.plugins.push(
|
|
123
|
+
config.postcssOptions.plugins.push(
|
|
124
|
+
require("tailwindcss")(tailwindConfig)
|
|
125
|
+
);
|
|
67
126
|
} else {
|
|
68
|
-
config.postcssOptions.plugins = [
|
|
127
|
+
config.postcssOptions.plugins = [
|
|
128
|
+
require("tailwindcss")(tailwindConfig)
|
|
129
|
+
];
|
|
69
130
|
}
|
|
70
131
|
},
|
|
71
132
|
babel(config) {
|
|
72
|
-
var
|
|
133
|
+
var _a;
|
|
73
134
|
if (notHaveTwinMacro) {
|
|
74
135
|
return;
|
|
75
136
|
}
|
|
@@ -79,15 +140,13 @@ export default (({
|
|
|
79
140
|
config: internalTwConfigPath
|
|
80
141
|
}
|
|
81
142
|
};
|
|
82
|
-
(
|
|
143
|
+
(_a = config.plugins) == null ? void 0 : _a.some((plugin) => {
|
|
83
144
|
if (Array.isArray(plugin) && plugin[0]) {
|
|
84
145
|
const pluginTarget = plugin[0];
|
|
85
146
|
let pluginOptions = plugin[1];
|
|
86
|
-
if (typeof pluginTarget ===
|
|
87
|
-
// TODO: use babel chain
|
|
88
|
-
slash(pluginTarget).includes('compiled/babel-plugin-macros')) {
|
|
147
|
+
if (typeof pluginTarget === "string" && slash(pluginTarget).includes("compiled/babel-plugin-macros")) {
|
|
89
148
|
if (pluginOptions) {
|
|
90
|
-
pluginOptions =
|
|
149
|
+
pluginOptions = __spreadValues(__spreadValues({}, pluginOptions), twinConfig);
|
|
91
150
|
} else {
|
|
92
151
|
plugin.push(twinConfig);
|
|
93
152
|
}
|
|
@@ -100,27 +159,46 @@ export default (({
|
|
|
100
159
|
}
|
|
101
160
|
};
|
|
102
161
|
},
|
|
103
|
-
beforeBuildTask({
|
|
104
|
-
config
|
|
105
|
-
}) {
|
|
162
|
+
beforeBuildTask({ config }) {
|
|
106
163
|
const modernConfig = api.useResolvedConfigContext();
|
|
107
|
-
const {
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
164
|
+
const { designSystem } = modernConfig;
|
|
165
|
+
const tailwindConfig = getTailwindConfig(
|
|
166
|
+
config.style.tailwindCss,
|
|
167
|
+
designSystem,
|
|
168
|
+
{
|
|
169
|
+
pureConfig: {
|
|
170
|
+
content: [
|
|
171
|
+
"./config/html/**/*.html",
|
|
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
|
+
}
|
|
115
185
|
}
|
|
116
|
-
|
|
186
|
+
);
|
|
117
187
|
if (Array.isArray(config.style.postcss.plugins)) {
|
|
118
|
-
config.style.postcss.plugins.push(
|
|
188
|
+
config.style.postcss.plugins.push(
|
|
189
|
+
require("tailwindcss")(tailwindConfig)
|
|
190
|
+
);
|
|
119
191
|
} else {
|
|
120
|
-
config.style.postcss.plugins = [
|
|
192
|
+
config.style.postcss.plugins = [
|
|
193
|
+
require("tailwindcss")(tailwindConfig)
|
|
194
|
+
];
|
|
121
195
|
}
|
|
122
196
|
return config;
|
|
123
197
|
}
|
|
124
198
|
};
|
|
125
|
-
}
|
|
126
|
-
})
|
|
199
|
+
})
|
|
200
|
+
});
|
|
201
|
+
export {
|
|
202
|
+
cli_default as default,
|
|
203
|
+
getRandomTwConfigFileName
|
|
204
|
+
};
|
|
@@ -1,29 +1,36 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
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
|
+
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",
|
|
13
24
|
setup(api) {
|
|
14
25
|
let pluginsExportsUtils;
|
|
15
|
-
const resolveConfig = lazyImport(
|
|
16
|
-
const PLUGIN_IDENTIFIER =
|
|
17
|
-
const getDesignTokens = designSystem => {
|
|
26
|
+
const resolveConfig = lazyImport("tailwindcss/resolveConfig", require);
|
|
27
|
+
const PLUGIN_IDENTIFIER = "designToken";
|
|
28
|
+
const getDesignTokens = (designSystem) => {
|
|
18
29
|
const tailwindcssConfig = {};
|
|
19
|
-
tailwindcssConfig.theme = designSystem ?
|
|
20
|
-
|
|
21
|
-
// not use default design token when designToken.defaultTheme is false or theme is false
|
|
30
|
+
tailwindcssConfig.theme = designSystem ? __spreadValues({}, designSystem) : {};
|
|
22
31
|
if (!designSystem) {
|
|
23
32
|
tailwindcssConfig.presets = [];
|
|
24
33
|
}
|
|
25
|
-
|
|
26
|
-
// when only designSystem exist, need remove supportStyledComponents
|
|
27
34
|
if (designSystem) {
|
|
28
35
|
delete tailwindcssConfig.theme.supportStyledComponents;
|
|
29
36
|
}
|
|
@@ -32,35 +39,32 @@ export default (({
|
|
|
32
39
|
return {
|
|
33
40
|
config() {
|
|
34
41
|
const appContext = api.useAppContext();
|
|
35
|
-
pluginsExportsUtils = createRuntimeExportsUtils(
|
|
42
|
+
pluginsExportsUtils = createRuntimeExportsUtils(
|
|
43
|
+
appContext.internalDirectory,
|
|
44
|
+
"plugins"
|
|
45
|
+
);
|
|
36
46
|
return {
|
|
37
47
|
source: {
|
|
38
48
|
alias: {
|
|
39
|
-
|
|
49
|
+
"@modern-js/runtime/plugins": pluginsExportsUtils.getPath()
|
|
40
50
|
}
|
|
41
51
|
},
|
|
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
|
-
}
|
|
52
|
+
tools: {}
|
|
48
53
|
};
|
|
49
54
|
},
|
|
50
|
-
modifyEntryImports({
|
|
51
|
-
|
|
52
|
-
imports
|
|
53
|
-
}) {
|
|
54
|
-
var _userConfig$source$de, _userConfig$source;
|
|
55
|
+
modifyEntryImports({ entrypoint, imports }) {
|
|
56
|
+
var _a, _b;
|
|
55
57
|
const userConfig = api.useResolvedConfigContext();
|
|
56
|
-
const designSystem = (
|
|
57
|
-
if (typeof designSystem ===
|
|
58
|
+
const designSystem = (_b = (_a = userConfig.source) == null ? void 0 : _a.designSystem) != null ? _b : {};
|
|
59
|
+
if (typeof designSystem === "object" && designSystem.supportStyledComponents) {
|
|
58
60
|
const designTokens = getDesignTokens(userConfig.source.designSystem);
|
|
59
61
|
imports.push({
|
|
60
|
-
value:
|
|
61
|
-
specifiers: [
|
|
62
|
-
|
|
63
|
-
|
|
62
|
+
value: "@modern-js/runtime/plugins",
|
|
63
|
+
specifiers: [
|
|
64
|
+
{
|
|
65
|
+
imported: PLUGIN_IDENTIFIER
|
|
66
|
+
}
|
|
67
|
+
],
|
|
64
68
|
initialize: `
|
|
65
69
|
const designTokens = ${JSON.stringify(designTokens)};
|
|
66
70
|
`
|
|
@@ -71,22 +75,18 @@ export default (({
|
|
|
71
75
|
imports
|
|
72
76
|
};
|
|
73
77
|
},
|
|
74
|
-
modifyEntryRuntimePlugins({
|
|
75
|
-
|
|
76
|
-
plugins
|
|
77
|
-
}) {
|
|
78
|
-
var _userConfig$source$de2, _userConfig$source2;
|
|
78
|
+
modifyEntryRuntimePlugins({ entrypoint, plugins }) {
|
|
79
|
+
var _a, _b;
|
|
79
80
|
const userConfig = api.useResolvedConfigContext();
|
|
80
|
-
const designSystem = (
|
|
81
|
+
const designSystem = (_b = (_a = userConfig.source) == null ? void 0 : _a.designSystem) != null ? _b : {};
|
|
81
82
|
let useSCThemeProvider = true;
|
|
82
83
|
if (designSystem) {
|
|
83
|
-
|
|
84
|
-
useSCThemeProvider = (designSystem === null || designSystem === void 0 ? void 0 : designSystem.supportStyledComponents) || false;
|
|
84
|
+
useSCThemeProvider = (designSystem == null ? 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,12 +95,16 @@ export default (({
|
|
|
95
95
|
};
|
|
96
96
|
},
|
|
97
97
|
validateSchema() {
|
|
98
|
-
|
|
99
|
-
return PLUGIN_SCHEMAS['@modern-js/plugin-design-token'];
|
|
98
|
+
return PLUGIN_SCHEMAS["@modern-js/plugin-design-token"];
|
|
100
99
|
},
|
|
101
100
|
addRuntimeExports() {
|
|
102
|
-
pluginsExportsUtils.addExport(
|
|
101
|
+
pluginsExportsUtils.addExport(
|
|
102
|
+
`export { default as designToken } from '${pluginName}/runtime-design-token'`
|
|
103
|
+
);
|
|
103
104
|
}
|
|
104
105
|
};
|
|
105
106
|
}
|
|
106
|
-
})
|
|
107
|
+
});
|
|
108
|
+
export {
|
|
109
|
+
cli_default as default
|
|
110
|
+
};
|
|
File without changes
|
|
@@ -1,15 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
cssVarsHash
|
|
1
|
+
var postcss_plugin_default = ({
|
|
2
|
+
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, match => {
|
|
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
|
-
})
|
|
15
|
+
});
|
|
16
|
+
export {
|
|
17
|
+
postcss_plugin_default as default
|
|
18
|
+
};
|
|
@@ -1,51 +1,56 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
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
|
+
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",
|
|
13
24
|
setup: () => ({
|
|
14
|
-
hoc({
|
|
15
|
-
|
|
16
|
-
}, next) {
|
|
17
|
-
const DesignTokenAppWrapper = props => {
|
|
25
|
+
hoc({ App }, next) {
|
|
26
|
+
const DesignTokenAppWrapper = (props) => {
|
|
18
27
|
const {
|
|
19
28
|
token = {},
|
|
20
29
|
useStyledComponentsThemeProvider = false,
|
|
21
30
|
useDesignTokenContext = false
|
|
22
31
|
} = options;
|
|
23
32
|
if (useStyledComponentsThemeProvider && useDesignTokenContext) {
|
|
24
|
-
const {
|
|
25
|
-
|
|
26
|
-
} = require('@modern-js/runtime/styled');
|
|
27
|
-
return /*#__PURE__*/_jsx(ThemeProvider, {
|
|
33
|
+
const { ThemeProvider } = require("@modern-js/runtime/styled");
|
|
34
|
+
return /* @__PURE__ */ jsx(ThemeProvider, {
|
|
28
35
|
theme: token,
|
|
29
|
-
children:
|
|
36
|
+
children: /* @__PURE__ */ jsx(DesignTokenContext.Provider, {
|
|
30
37
|
value: token,
|
|
31
|
-
children:
|
|
38
|
+
children: /* @__PURE__ */ jsx(App, __spreadValues({}, props))
|
|
32
39
|
})
|
|
33
40
|
});
|
|
34
41
|
} else if (useStyledComponentsThemeProvider) {
|
|
35
|
-
const {
|
|
36
|
-
|
|
37
|
-
} = require('@modern-js/runtime/styled');
|
|
38
|
-
return /*#__PURE__*/_jsx(ThemeProvider, {
|
|
42
|
+
const { ThemeProvider } = require("@modern-js/runtime/styled");
|
|
43
|
+
return /* @__PURE__ */ jsx(ThemeProvider, {
|
|
39
44
|
theme: token,
|
|
40
|
-
children:
|
|
45
|
+
children: /* @__PURE__ */ jsx(App, __spreadValues({}, props))
|
|
41
46
|
});
|
|
42
47
|
} else if (useDesignTokenContext) {
|
|
43
|
-
return
|
|
48
|
+
return /* @__PURE__ */ jsx(DesignTokenContext.Provider, {
|
|
44
49
|
value: token,
|
|
45
|
-
children:
|
|
50
|
+
children: /* @__PURE__ */ jsx(App, __spreadValues({}, props))
|
|
46
51
|
});
|
|
47
52
|
} else {
|
|
48
|
-
return
|
|
53
|
+
return /* @__PURE__ */ jsx(App, __spreadValues({}, props));
|
|
49
54
|
}
|
|
50
55
|
};
|
|
51
56
|
return next({
|
|
@@ -53,4 +58,9 @@ export default ((options = {}) => ({
|
|
|
53
58
|
});
|
|
54
59
|
}
|
|
55
60
|
})
|
|
56
|
-
})
|
|
61
|
+
});
|
|
62
|
+
export {
|
|
63
|
+
DesignTokenContext,
|
|
64
|
+
plugin_default as default,
|
|
65
|
+
useDesignTokens
|
|
66
|
+
};
|
package/dist/js/modern/index.js
CHANGED
|
File without changes
|