@modern-js/plugin-tailwindcss 0.0.0-next-20221212043012 → 0.0.0-next-20221212085956
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 +62 -134
- 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 +73 -154
- 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 +115 -266
- 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/types.js +0 -1
- 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 -1
- package/dist/js/treeshaking/modern-app.env.d.js +0 -1
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-20221212085956
|
|
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 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
|
- 67472ca1c: fix: move babel-plugin-marcos to plugin-tailwindcss
|
|
46
46
|
|
|
47
47
|
fix: 将 babel-plugin-marcos 依赖移动到 plugin-tailwindcss 中
|
|
@@ -88,8 +88,8 @@
|
|
|
88
88
|
- Updated dependencies [abf3421a7]
|
|
89
89
|
- Updated dependencies [543be9558]
|
|
90
90
|
- Updated dependencies [14b712da8]
|
|
91
|
-
- @modern-js/runtime@0.0.0-next-
|
|
92
|
-
- @modern-js/utils@0.0.0-next-
|
|
91
|
+
- @modern-js/runtime@0.0.0-next-20221212085956
|
|
92
|
+
- @modern-js/utils@0.0.0-next-20221212085956
|
|
93
93
|
|
|
94
94
|
## 2.0.0-beta.3
|
|
95
95
|
|
package/dist/js/modern/cli.js
CHANGED
|
@@ -1,177 +1,105 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var fulfilled = (value) => {
|
|
4
|
-
try {
|
|
5
|
-
step(generator.next(value));
|
|
6
|
-
} catch (e) {
|
|
7
|
-
reject(e);
|
|
8
|
-
}
|
|
9
|
-
};
|
|
10
|
-
var rejected = (value) => {
|
|
11
|
-
try {
|
|
12
|
-
step(generator.throw(value));
|
|
13
|
-
} catch (e) {
|
|
14
|
-
reject(e);
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
|
-
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
18
|
-
step((generator = generator.apply(__this, __arguments)).next());
|
|
19
|
-
});
|
|
20
|
-
};
|
|
21
|
-
import path from "path";
|
|
22
|
-
import {
|
|
23
|
-
PLUGIN_SCHEMAS,
|
|
24
|
-
fs,
|
|
25
|
-
CONFIG_CACHE_DIR,
|
|
26
|
-
globby,
|
|
27
|
-
nanoid,
|
|
28
|
-
slash
|
|
29
|
-
} from "@modern-js/utils";
|
|
1
|
+
import path from 'path';
|
|
2
|
+
import { PLUGIN_SCHEMAS, fs, CONFIG_CACHE_DIR, globby, nanoid, slash } from '@modern-js/utils';
|
|
30
3
|
import DesignTokenPlugin from "./design-token/cli";
|
|
31
4
|
import { getTailwindConfig } from "./tailwind";
|
|
32
5
|
import { template, checkTwinMacroNotExist } from "./utils";
|
|
33
|
-
const supportCssInJsLibrary =
|
|
34
|
-
const getRandomTwConfigFileName =
|
|
35
|
-
return slash(
|
|
36
|
-
path.join(
|
|
37
|
-
internalDirectory,
|
|
38
|
-
`tailwind.config.${Date.now()}.${nanoid()}.js`
|
|
39
|
-
)
|
|
40
|
-
);
|
|
6
|
+
const supportCssInJsLibrary = 'styled-components';
|
|
7
|
+
export const getRandomTwConfigFileName = internalDirectory => {
|
|
8
|
+
return slash(path.join(internalDirectory, `tailwind.config.${Date.now()}.${nanoid()}.js`));
|
|
41
9
|
};
|
|
42
|
-
|
|
43
|
-
pluginName
|
|
10
|
+
export default (({
|
|
11
|
+
pluginName
|
|
12
|
+
} = {
|
|
13
|
+
pluginName: '@modern-js/plugin-tailwindcss'
|
|
44
14
|
}) => ({
|
|
45
|
-
name:
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
15
|
+
name: '@modern-js/plugin-tailwindcss',
|
|
16
|
+
// support designSystem.supportStyledComponents
|
|
17
|
+
usePlugins: [DesignTokenPlugin({
|
|
18
|
+
pluginName
|
|
19
|
+
})],
|
|
20
|
+
setup: async api => {
|
|
21
|
+
const {
|
|
22
|
+
appDirectory,
|
|
23
|
+
internalDirectory
|
|
24
|
+
} = api.useAppContext();
|
|
25
|
+
let internalTwConfigPath = '';
|
|
26
|
+
// When reinstalling dependencies, most of the time the project will be restarted
|
|
27
|
+
const notHaveTwinMacro = await checkTwinMacroNotExist(appDirectory);
|
|
55
28
|
return {
|
|
56
29
|
prepare() {
|
|
57
30
|
if (notHaveTwinMacro) {
|
|
58
31
|
return;
|
|
59
32
|
}
|
|
60
33
|
internalTwConfigPath = getRandomTwConfigFileName(internalDirectory);
|
|
61
|
-
const globPattern = slash(
|
|
62
|
-
path.join(appDirectory, CONFIG_CACHE_DIR, "*.cjs")
|
|
63
|
-
);
|
|
34
|
+
const globPattern = slash(path.join(appDirectory, CONFIG_CACHE_DIR, '*.cjs'));
|
|
64
35
|
const files = globby.sync(globPattern, {
|
|
65
36
|
absolute: true
|
|
66
37
|
});
|
|
67
38
|
if (files.length > 0) {
|
|
68
|
-
fs.writeFileSync(
|
|
69
|
-
internalTwConfigPath,
|
|
70
|
-
template(files[files.length - 1]),
|
|
71
|
-
"utf-8"
|
|
72
|
-
);
|
|
39
|
+
fs.writeFileSync(internalTwConfigPath, template(files[files.length - 1]), 'utf-8');
|
|
73
40
|
}
|
|
74
41
|
},
|
|
75
42
|
validateSchema() {
|
|
76
|
-
return PLUGIN_SCHEMAS[
|
|
43
|
+
return PLUGIN_SCHEMAS['@modern-js/plugin-tailwindcss'];
|
|
77
44
|
},
|
|
78
45
|
config() {
|
|
79
46
|
return {
|
|
80
47
|
tools: {
|
|
81
|
-
|
|
82
|
-
|
|
48
|
+
// TODO: Add interface about postcss config
|
|
49
|
+
// TODO: In module project, also is called, but should not be called.
|
|
50
|
+
postcss: config => {
|
|
51
|
+
var _modernConfig$tools, _modernConfig$source;
|
|
83
52
|
const modernConfig = api.useResolvedConfigContext();
|
|
84
|
-
const tailwindConfig = getTailwindConfig(
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
content: [
|
|
90
|
-
"./config/html/**/*.html",
|
|
91
|
-
"./config/html/**/*.ejs",
|
|
92
|
-
"./config/html/**/*.hbs",
|
|
93
|
-
"./src/**/*.js",
|
|
94
|
-
"./src/**/*.jsx",
|
|
95
|
-
"./src/**/*.ts",
|
|
96
|
-
"./src/**/*.tsx",
|
|
97
|
-
"./storybook/**/*",
|
|
98
|
-
"./styles/**/*.less",
|
|
99
|
-
"./styles/**/*.css",
|
|
100
|
-
"./styles/**/*.sass",
|
|
101
|
-
"./styles/**/*.scss"
|
|
102
|
-
]
|
|
103
|
-
}
|
|
53
|
+
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, {
|
|
54
|
+
pureConfig: {
|
|
55
|
+
content: ['./config/html/**/*.html', './config/html/**/*.ejs', './config/html/**/*.hbs', './src/**/*.js', './src/**/*.jsx', './src/**/*.ts', './src/**/*.tsx',
|
|
56
|
+
// about storybook
|
|
57
|
+
'./storybook/**/*', './styles/**/*.less', './styles/**/*.css', './styles/**/*.sass', './styles/**/*.scss']
|
|
104
58
|
}
|
|
105
|
-
);
|
|
59
|
+
});
|
|
106
60
|
if (Array.isArray(config.postcssOptions.plugins)) {
|
|
107
|
-
config.postcssOptions.plugins.push(
|
|
108
|
-
require("tailwindcss")(tailwindConfig)
|
|
109
|
-
);
|
|
61
|
+
config.postcssOptions.plugins.push(require('tailwindcss')(tailwindConfig));
|
|
110
62
|
} else {
|
|
111
|
-
config.postcssOptions.plugins = [
|
|
112
|
-
require("tailwindcss")(tailwindConfig)
|
|
113
|
-
];
|
|
63
|
+
config.postcssOptions.plugins = [require('tailwindcss')(tailwindConfig)];
|
|
114
64
|
}
|
|
115
65
|
},
|
|
116
|
-
babel(_, {
|
|
66
|
+
babel(_, {
|
|
67
|
+
addPlugins
|
|
68
|
+
}) {
|
|
117
69
|
if (notHaveTwinMacro) {
|
|
118
70
|
return;
|
|
119
71
|
}
|
|
120
|
-
addPlugins([
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
config: internalTwConfigPath
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
]
|
|
130
|
-
]);
|
|
72
|
+
addPlugins([[require.resolve('babel-plugin-macros'), {
|
|
73
|
+
twin: {
|
|
74
|
+
preset: supportCssInJsLibrary,
|
|
75
|
+
config: internalTwConfigPath
|
|
76
|
+
}
|
|
77
|
+
}]]);
|
|
131
78
|
}
|
|
132
79
|
}
|
|
133
80
|
};
|
|
134
81
|
},
|
|
135
|
-
beforeBuildTask({
|
|
82
|
+
beforeBuildTask({
|
|
83
|
+
config
|
|
84
|
+
}) {
|
|
136
85
|
const modernConfig = api.useResolvedConfigContext();
|
|
137
|
-
const {
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
{
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
"./config/html/**/*.ejs",
|
|
146
|
-
"./config/html/**/*.hbs",
|
|
147
|
-
"./src/**/*.js",
|
|
148
|
-
"./src/**/*.jsx",
|
|
149
|
-
"./src/**/*.ts",
|
|
150
|
-
"./src/**/*.tsx",
|
|
151
|
-
"./storybook/**/*",
|
|
152
|
-
"./styles/**/*.less",
|
|
153
|
-
"./styles/**/*.css",
|
|
154
|
-
"./styles/**/*.sass",
|
|
155
|
-
"./styles/**/*.scss"
|
|
156
|
-
]
|
|
157
|
-
}
|
|
86
|
+
const {
|
|
87
|
+
designSystem
|
|
88
|
+
} = modernConfig;
|
|
89
|
+
const tailwindConfig = getTailwindConfig(config.style.tailwindCss, designSystem, {
|
|
90
|
+
pureConfig: {
|
|
91
|
+
content: ['./config/html/**/*.html', './config/html/**/*.ejs', './config/html/**/*.hbs', './src/**/*.js', './src/**/*.jsx', './src/**/*.ts', './src/**/*.tsx',
|
|
92
|
+
// about storybook
|
|
93
|
+
'./storybook/**/*', './styles/**/*.less', './styles/**/*.css', './styles/**/*.sass', './styles/**/*.scss']
|
|
158
94
|
}
|
|
159
|
-
);
|
|
95
|
+
});
|
|
160
96
|
if (Array.isArray(config.style.postcss.plugins)) {
|
|
161
|
-
config.style.postcss.plugins.push(
|
|
162
|
-
require("tailwindcss")(tailwindConfig)
|
|
163
|
-
);
|
|
97
|
+
config.style.postcss.plugins.push(require('tailwindcss')(tailwindConfig));
|
|
164
98
|
} else {
|
|
165
|
-
config.style.postcss.plugins = [
|
|
166
|
-
require("tailwindcss")(tailwindConfig)
|
|
167
|
-
];
|
|
99
|
+
config.style.postcss.plugins = [require('tailwindcss')(tailwindConfig)];
|
|
168
100
|
}
|
|
169
101
|
return config;
|
|
170
102
|
}
|
|
171
103
|
};
|
|
172
|
-
}
|
|
173
|
-
});
|
|
174
|
-
export {
|
|
175
|
-
cli_default as default,
|
|
176
|
-
getRandomTwConfigFileName
|
|
177
|
-
};
|
|
104
|
+
}
|
|
105
|
+
}));
|
|
@@ -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