@modern-js/plugin-tailwindcss 2.27.0 → 2.28.0
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 +8 -0
- package/dist/cjs/cli.js +109 -111
- package/dist/cjs/design-token/cli/index.js +108 -109
- package/dist/esm/cli.js +2 -2
- package/dist/esm/design-token/cli/index.js +2 -1
- package/dist/esm-node/cli.js +109 -111
- package/dist/esm-node/design-token/cli/index.js +108 -109
- package/package.json +10 -10
package/CHANGELOG.md
CHANGED
package/dist/cjs/cli.js
CHANGED
@@ -47,121 +47,119 @@ function getDefaultContent(appDirectory) {
|
|
47
47
|
}
|
48
48
|
const tailwindcssPlugin = ({ pluginName } = {
|
49
49
|
pluginName: "@modern-js/plugin-tailwindcss"
|
50
|
-
}) => {
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
_utils.fs.writeFileSync(internalTwConfigPath, (0, _utils1.template)(files[files.length - 1]), "utf-8");
|
79
|
-
}
|
50
|
+
}) => ({
|
51
|
+
name: "@modern-js/plugin-tailwindcss",
|
52
|
+
// support designSystem.supportStyledComponents
|
53
|
+
usePlugins: [
|
54
|
+
(0, _cli.default)({
|
55
|
+
pluginName
|
56
|
+
})
|
57
|
+
],
|
58
|
+
setup: async (api) => {
|
59
|
+
const { appDirectory, internalDirectory } = api.useAppContext();
|
60
|
+
let internalTwConfigPath = "";
|
61
|
+
const haveTwinMacro = await (0, _utils1.checkTwinMacroExist)(appDirectory);
|
62
|
+
const tailwindPath = (0, _utils1.getTailwindPath)(appDirectory);
|
63
|
+
const tailwindVersion = (0, _utils1.getTailwindVersion)(appDirectory);
|
64
|
+
const defaultContent = getDefaultContent(appDirectory);
|
65
|
+
return {
|
66
|
+
prepare() {
|
67
|
+
if (haveTwinMacro) {
|
68
|
+
const twinMajorVersion = (0, _utils1.getTwinMacroMajorVersion)(appDirectory);
|
69
|
+
const useConfigPath = twinMajorVersion && twinMajorVersion < 3;
|
70
|
+
if (useConfigPath) {
|
71
|
+
internalTwConfigPath = getRandomTwConfigFileName(internalDirectory);
|
72
|
+
const globPattern = (0, _utils.slash)(_path.default.join(appDirectory, _utils.CONFIG_CACHE_DIR, "*.cjs"));
|
73
|
+
const files = _utils.globby.sync(globPattern, {
|
74
|
+
absolute: true
|
75
|
+
});
|
76
|
+
if (files.length > 0) {
|
77
|
+
_utils.fs.writeFileSync(internalTwConfigPath, (0, _utils1.template)(files[files.length - 1]), "utf-8");
|
80
78
|
}
|
81
79
|
}
|
82
|
-
}
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
}
|
94
|
-
];
|
95
|
-
},
|
96
|
-
config() {
|
97
|
-
let tailwindConfig;
|
98
|
-
const initTailwindConfig = () => {
|
99
|
-
if (!tailwindConfig) {
|
100
|
-
var _modernConfig_tools, _modernConfig_source;
|
101
|
-
const modernConfig = api.useResolvedConfigContext();
|
102
|
-
tailwindConfig = (0, _tailwind.getTailwindConfig)(tailwindVersion, 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, {
|
103
|
-
pureConfig: {
|
104
|
-
content: defaultContent
|
105
|
-
}
|
106
|
-
});
|
80
|
+
}
|
81
|
+
},
|
82
|
+
validateSchema() {
|
83
|
+
return [
|
84
|
+
{
|
85
|
+
target: "tools.tailwindcss",
|
86
|
+
schema: {
|
87
|
+
typeof: [
|
88
|
+
"object",
|
89
|
+
"function"
|
90
|
+
]
|
107
91
|
}
|
108
|
-
}
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
92
|
+
}
|
93
|
+
];
|
94
|
+
},
|
95
|
+
config() {
|
96
|
+
let tailwindConfig;
|
97
|
+
const initTailwindConfig = () => {
|
98
|
+
if (!tailwindConfig) {
|
99
|
+
var _modernConfig_tools, _modernConfig, _modernConfig_source, _modernConfig1;
|
100
|
+
const modernConfig = api.useResolvedConfigContext();
|
101
|
+
tailwindConfig = (0, _tailwind.getTailwindConfig)(tailwindVersion, (_modernConfig = modernConfig) === null || _modernConfig === void 0 ? void 0 : (_modernConfig_tools = _modernConfig.tools) === null || _modernConfig_tools === void 0 ? void 0 : _modernConfig_tools.tailwindcss, (_modernConfig1 = modernConfig) === null || _modernConfig1 === void 0 ? void 0 : (_modernConfig_source = _modernConfig1.source) === null || _modernConfig_source === void 0 ? void 0 : _modernConfig_source.designSystem, {
|
102
|
+
pureConfig: {
|
103
|
+
content: defaultContent
|
104
|
+
}
|
105
|
+
});
|
106
|
+
}
|
107
|
+
};
|
108
|
+
return {
|
109
|
+
tools: {
|
110
|
+
// TODO: Add interface about postcss config
|
111
|
+
// TODO: In module project, also is called, but should not be called.
|
112
|
+
postcss: (config) => {
|
113
|
+
initTailwindConfig();
|
114
|
+
const tailwindPlugin = require(tailwindPath)(tailwindConfig);
|
115
|
+
if (Array.isArray(config.postcssOptions.plugins)) {
|
116
|
+
config.postcssOptions.plugins.push(tailwindPlugin);
|
117
|
+
} else {
|
118
|
+
config.postcssOptions.plugins = [
|
119
|
+
tailwindPlugin
|
120
|
+
];
|
121
|
+
}
|
122
|
+
},
|
123
|
+
babel: haveTwinMacro ? (_, { addPlugins }) => {
|
124
|
+
initTailwindConfig();
|
125
|
+
addPlugins([
|
126
|
+
[
|
127
|
+
require.resolve("babel-plugin-macros"),
|
128
|
+
{
|
129
|
+
twin: {
|
130
|
+
preset: supportCssInJsLibrary,
|
131
|
+
config: internalTwConfigPath || tailwindConfig
|
134
132
|
}
|
135
|
-
|
136
|
-
]
|
137
|
-
|
138
|
-
}
|
139
|
-
}
|
140
|
-
}
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
});
|
149
|
-
const tailwindPlugin = require(tailwindPath)(tailwindConfig);
|
150
|
-
if (Array.isArray(config.style.postcss.plugins)) {
|
151
|
-
config.style.postcss.plugins.push(tailwindPlugin);
|
152
|
-
} else {
|
153
|
-
config.style.postcss.plugins = [
|
154
|
-
tailwindPlugin
|
155
|
-
];
|
133
|
+
}
|
134
|
+
]
|
135
|
+
]);
|
136
|
+
} : void 0
|
137
|
+
}
|
138
|
+
};
|
139
|
+
},
|
140
|
+
beforeBuildTask(config) {
|
141
|
+
const modernConfig = api.useResolvedConfigContext();
|
142
|
+
const { designSystem } = modernConfig;
|
143
|
+
const tailwindConfig = (0, _tailwind.getTailwindConfig)(tailwindVersion, config.style.tailwindcss, designSystem, {
|
144
|
+
pureConfig: {
|
145
|
+
content: defaultContent
|
156
146
|
}
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
config.
|
161
|
-
|
147
|
+
});
|
148
|
+
const tailwindPlugin = require(tailwindPath)(tailwindConfig);
|
149
|
+
if (Array.isArray(config.style.postcss.plugins)) {
|
150
|
+
config.style.postcss.plugins.push(tailwindPlugin);
|
151
|
+
} else {
|
152
|
+
config.style.postcss.plugins = [
|
153
|
+
tailwindPlugin
|
154
|
+
];
|
162
155
|
}
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
156
|
+
return config;
|
157
|
+
},
|
158
|
+
modifyLibuild(config, next) {
|
159
|
+
config.transformCache = false;
|
160
|
+
return next(config);
|
161
|
+
}
|
162
|
+
};
|
163
|
+
}
|
164
|
+
});
|
167
165
|
const _default = tailwindcssPlugin;
|
@@ -11,116 +11,115 @@ Object.defineProperty(exports, "default", {
|
|
11
11
|
const _utils = require("@modern-js/utils");
|
12
12
|
const _default = ({ pluginName } = {
|
13
13
|
pluginName: "@modern-js/plugin-tailwindcss"
|
14
|
-
}) => {
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
const
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
14
|
+
}) => ({
|
15
|
+
name: "@modern-js/plugin-design-token",
|
16
|
+
setup(api) {
|
17
|
+
let pluginsExportsUtils;
|
18
|
+
const resolveConfig = (0, _utils.lazyImport)("tailwindcss/resolveConfig", require);
|
19
|
+
const PLUGIN_IDENTIFIER = "designToken";
|
20
|
+
const getDesignTokens = (designSystem) => {
|
21
|
+
const tailwindcssConfig = {};
|
22
|
+
tailwindcssConfig.theme = designSystem ? {
|
23
|
+
...designSystem
|
24
|
+
} : {};
|
25
|
+
if (!designSystem) {
|
26
|
+
tailwindcssConfig.presets = [];
|
27
|
+
}
|
28
|
+
if (designSystem) {
|
29
|
+
delete tailwindcssConfig.theme.supportStyledComponents;
|
30
|
+
}
|
31
|
+
return resolveConfig(tailwindcssConfig).theme || {};
|
32
|
+
};
|
33
|
+
return {
|
34
|
+
config() {
|
35
|
+
const appContext = api.useAppContext();
|
36
|
+
pluginsExportsUtils = (0, _utils.createRuntimeExportsUtils)(appContext.internalDirectory, "plugins");
|
37
|
+
return {
|
38
|
+
source: {
|
39
|
+
alias: {
|
40
|
+
"@modern-js/runtime/plugins": pluginsExportsUtils.getPath()
|
41
|
+
}
|
42
|
+
},
|
43
|
+
tools: {}
|
44
|
+
};
|
45
|
+
},
|
46
|
+
modifyEntryImports({ entrypoint, imports }) {
|
47
|
+
var _userConfig_source;
|
48
|
+
const userConfig = api.useResolvedConfigContext();
|
49
|
+
var _userConfig_source_designSystem;
|
50
|
+
const designSystem = (_userConfig_source_designSystem = (_userConfig_source = userConfig.source) === null || _userConfig_source === void 0 ? void 0 : _userConfig_source.designSystem) !== null && _userConfig_source_designSystem !== void 0 ? _userConfig_source_designSystem : {};
|
51
|
+
if (typeof designSystem === "object" && designSystem.supportStyledComponents) {
|
52
|
+
const designTokens = getDesignTokens(userConfig.source.designSystem);
|
53
|
+
imports.push({
|
54
|
+
value: "@modern-js/runtime/plugins",
|
55
|
+
specifiers: [
|
56
|
+
{
|
57
|
+
imported: PLUGIN_IDENTIFIER
|
42
58
|
}
|
43
|
-
|
44
|
-
|
45
|
-
};
|
46
|
-
},
|
47
|
-
modifyEntryImports({ entrypoint, imports }) {
|
48
|
-
var _userConfig_source;
|
49
|
-
const userConfig = api.useResolvedConfigContext();
|
50
|
-
var _userConfig_source_designSystem;
|
51
|
-
const designSystem = (_userConfig_source_designSystem = (_userConfig_source = userConfig.source) === null || _userConfig_source === void 0 ? void 0 : _userConfig_source.designSystem) !== null && _userConfig_source_designSystem !== void 0 ? _userConfig_source_designSystem : {};
|
52
|
-
if (typeof designSystem === "object" && designSystem.supportStyledComponents) {
|
53
|
-
const designTokens = getDesignTokens(userConfig.source.designSystem);
|
54
|
-
imports.push({
|
55
|
-
value: "@modern-js/runtime/plugins",
|
56
|
-
specifiers: [
|
57
|
-
{
|
58
|
-
imported: PLUGIN_IDENTIFIER
|
59
|
-
}
|
60
|
-
],
|
61
|
-
initialize: `
|
59
|
+
],
|
60
|
+
initialize: `
|
62
61
|
const designTokens = ${JSON.stringify(designTokens)};
|
63
62
|
`
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
if (typeof designSystem === "object" && designSystem.supportStyledComponents) {
|
81
|
-
plugins.push({
|
82
|
-
name: PLUGIN_IDENTIFIER,
|
83
|
-
options: `{token: designTokens, useStyledComponentsThemeProvider: ${useSCThemeProvider ? "true" : "false"}, useDesignTokenContext: false}`
|
84
|
-
});
|
85
|
-
}
|
86
|
-
return {
|
87
|
-
entrypoint,
|
88
|
-
plugins
|
89
|
-
};
|
90
|
-
},
|
91
|
-
validateSchema() {
|
92
|
-
return [
|
93
|
-
// Legacy Features
|
94
|
-
{
|
95
|
-
target: "source.designSystem",
|
96
|
-
schema: {
|
97
|
-
typeof: [
|
98
|
-
"object"
|
99
|
-
]
|
100
|
-
}
|
101
|
-
},
|
102
|
-
{
|
103
|
-
target: "source.designSystem.supportStyledComponents",
|
104
|
-
schema: {
|
105
|
-
type: [
|
106
|
-
"boolean"
|
107
|
-
]
|
108
|
-
}
|
109
|
-
},
|
110
|
-
{
|
111
|
-
target: "designSystem",
|
112
|
-
schema: {
|
113
|
-
typeof: [
|
114
|
-
"object"
|
115
|
-
]
|
116
|
-
}
|
117
|
-
}
|
118
|
-
];
|
119
|
-
},
|
120
|
-
addRuntimeExports() {
|
121
|
-
pluginsExportsUtils.addExport(`export { default as designToken } from '${pluginName}/runtime-design-token'`);
|
63
|
+
});
|
64
|
+
}
|
65
|
+
return {
|
66
|
+
entrypoint,
|
67
|
+
imports
|
68
|
+
};
|
69
|
+
},
|
70
|
+
modifyEntryRuntimePlugins({ entrypoint, plugins }) {
|
71
|
+
var _userConfig_source;
|
72
|
+
const userConfig = api.useResolvedConfigContext();
|
73
|
+
var _userConfig_source_designSystem;
|
74
|
+
const designSystem = (_userConfig_source_designSystem = (_userConfig_source = userConfig.source) === null || _userConfig_source === void 0 ? void 0 : _userConfig_source.designSystem) !== null && _userConfig_source_designSystem !== void 0 ? _userConfig_source_designSystem : {};
|
75
|
+
let useSCThemeProvider = true;
|
76
|
+
if (designSystem) {
|
77
|
+
var _designSystem;
|
78
|
+
useSCThemeProvider = ((_designSystem = designSystem) === null || _designSystem === void 0 ? void 0 : _designSystem.supportStyledComponents) || false;
|
122
79
|
}
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
}
|
80
|
+
if (typeof designSystem === "object" && designSystem.supportStyledComponents) {
|
81
|
+
plugins.push({
|
82
|
+
name: PLUGIN_IDENTIFIER,
|
83
|
+
options: `{token: designTokens, useStyledComponentsThemeProvider: ${useSCThemeProvider ? "true" : "false"}, useDesignTokenContext: false}`
|
84
|
+
});
|
85
|
+
}
|
86
|
+
return {
|
87
|
+
entrypoint,
|
88
|
+
plugins
|
89
|
+
};
|
90
|
+
},
|
91
|
+
validateSchema() {
|
92
|
+
return [
|
93
|
+
// Legacy Features
|
94
|
+
{
|
95
|
+
target: "source.designSystem",
|
96
|
+
schema: {
|
97
|
+
typeof: [
|
98
|
+
"object"
|
99
|
+
]
|
100
|
+
}
|
101
|
+
},
|
102
|
+
{
|
103
|
+
target: "source.designSystem.supportStyledComponents",
|
104
|
+
schema: {
|
105
|
+
type: [
|
106
|
+
"boolean"
|
107
|
+
]
|
108
|
+
}
|
109
|
+
},
|
110
|
+
{
|
111
|
+
target: "designSystem",
|
112
|
+
schema: {
|
113
|
+
typeof: [
|
114
|
+
"object"
|
115
|
+
]
|
116
|
+
}
|
117
|
+
}
|
118
|
+
];
|
119
|
+
},
|
120
|
+
addRuntimeExports() {
|
121
|
+
pluginsExportsUtils.addExport(`export { default as designToken } from '${pluginName}/runtime-design-token'`);
|
122
|
+
}
|
123
|
+
};
|
124
|
+
}
|
125
|
+
});
|
package/dist/esm/cli.js
CHANGED
@@ -89,9 +89,9 @@ export var tailwindcssPlugin = function() {
|
|
89
89
|
var tailwindConfig;
|
90
90
|
var initTailwindConfig = function() {
|
91
91
|
if (!tailwindConfig) {
|
92
|
-
var _modernConfig_tools, _modernConfig_source;
|
92
|
+
var _modernConfig_tools, _modernConfig, _modernConfig_source, _modernConfig1;
|
93
93
|
var modernConfig = api.useResolvedConfigContext();
|
94
|
-
tailwindConfig = getTailwindConfig(tailwindVersion, modernConfig === null ||
|
94
|
+
tailwindConfig = getTailwindConfig(tailwindVersion, (_modernConfig = modernConfig) === null || _modernConfig === void 0 ? void 0 : (_modernConfig_tools = _modernConfig.tools) === null || _modernConfig_tools === void 0 ? void 0 : _modernConfig_tools.tailwindcss, (_modernConfig1 = modernConfig) === null || _modernConfig1 === void 0 ? void 0 : (_modernConfig_source = _modernConfig1.source) === null || _modernConfig_source === void 0 ? void 0 : _modernConfig_source.designSystem, {
|
95
95
|
pureConfig: {
|
96
96
|
content: defaultContent
|
97
97
|
}
|
@@ -65,7 +65,8 @@ export default function() {
|
|
65
65
|
var designSystem = (_userConfig_source_designSystem = (_userConfig_source = userConfig.source) === null || _userConfig_source === void 0 ? void 0 : _userConfig_source.designSystem) !== null && _userConfig_source_designSystem !== void 0 ? _userConfig_source_designSystem : {};
|
66
66
|
var useSCThemeProvider = true;
|
67
67
|
if (designSystem) {
|
68
|
-
|
68
|
+
var _designSystem;
|
69
|
+
useSCThemeProvider = ((_designSystem = designSystem) === null || _designSystem === void 0 ? void 0 : _designSystem.supportStyledComponents) || false;
|
69
70
|
}
|
70
71
|
if (typeof designSystem === "object" && designSystem.supportStyledComponents) {
|
71
72
|
plugins.push({
|
package/dist/esm-node/cli.js
CHANGED
@@ -24,121 +24,119 @@ function getDefaultContent(appDirectory) {
|
|
24
24
|
}
|
25
25
|
export const tailwindcssPlugin = ({ pluginName } = {
|
26
26
|
pluginName: "@modern-js/plugin-tailwindcss"
|
27
|
-
}) => {
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
fs.writeFileSync(internalTwConfigPath, template(files[files.length - 1]), "utf-8");
|
56
|
-
}
|
27
|
+
}) => ({
|
28
|
+
name: "@modern-js/plugin-tailwindcss",
|
29
|
+
// support designSystem.supportStyledComponents
|
30
|
+
usePlugins: [
|
31
|
+
designTokenPlugin({
|
32
|
+
pluginName
|
33
|
+
})
|
34
|
+
],
|
35
|
+
setup: async (api) => {
|
36
|
+
const { appDirectory, internalDirectory } = api.useAppContext();
|
37
|
+
let internalTwConfigPath = "";
|
38
|
+
const haveTwinMacro = await checkTwinMacroExist(appDirectory);
|
39
|
+
const tailwindPath = getTailwindPath(appDirectory);
|
40
|
+
const tailwindVersion = getTailwindVersion(appDirectory);
|
41
|
+
const defaultContent = getDefaultContent(appDirectory);
|
42
|
+
return {
|
43
|
+
prepare() {
|
44
|
+
if (haveTwinMacro) {
|
45
|
+
const twinMajorVersion = getTwinMacroMajorVersion(appDirectory);
|
46
|
+
const useConfigPath = twinMajorVersion && twinMajorVersion < 3;
|
47
|
+
if (useConfigPath) {
|
48
|
+
internalTwConfigPath = getRandomTwConfigFileName(internalDirectory);
|
49
|
+
const globPattern = slash(path.join(appDirectory, CONFIG_CACHE_DIR, "*.cjs"));
|
50
|
+
const files = globby.sync(globPattern, {
|
51
|
+
absolute: true
|
52
|
+
});
|
53
|
+
if (files.length > 0) {
|
54
|
+
fs.writeFileSync(internalTwConfigPath, template(files[files.length - 1]), "utf-8");
|
57
55
|
}
|
58
56
|
}
|
59
|
-
}
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
}
|
71
|
-
];
|
72
|
-
},
|
73
|
-
config() {
|
74
|
-
let tailwindConfig;
|
75
|
-
const initTailwindConfig = () => {
|
76
|
-
if (!tailwindConfig) {
|
77
|
-
var _modernConfig_tools, _modernConfig_source;
|
78
|
-
const modernConfig = api.useResolvedConfigContext();
|
79
|
-
tailwindConfig = getTailwindConfig(tailwindVersion, 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, {
|
80
|
-
pureConfig: {
|
81
|
-
content: defaultContent
|
82
|
-
}
|
83
|
-
});
|
57
|
+
}
|
58
|
+
},
|
59
|
+
validateSchema() {
|
60
|
+
return [
|
61
|
+
{
|
62
|
+
target: "tools.tailwindcss",
|
63
|
+
schema: {
|
64
|
+
typeof: [
|
65
|
+
"object",
|
66
|
+
"function"
|
67
|
+
]
|
84
68
|
}
|
85
|
-
}
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
69
|
+
}
|
70
|
+
];
|
71
|
+
},
|
72
|
+
config() {
|
73
|
+
let tailwindConfig;
|
74
|
+
const initTailwindConfig = () => {
|
75
|
+
if (!tailwindConfig) {
|
76
|
+
var _modernConfig_tools, _modernConfig, _modernConfig_source, _modernConfig1;
|
77
|
+
const modernConfig = api.useResolvedConfigContext();
|
78
|
+
tailwindConfig = getTailwindConfig(tailwindVersion, (_modernConfig = modernConfig) === null || _modernConfig === void 0 ? void 0 : (_modernConfig_tools = _modernConfig.tools) === null || _modernConfig_tools === void 0 ? void 0 : _modernConfig_tools.tailwindcss, (_modernConfig1 = modernConfig) === null || _modernConfig1 === void 0 ? void 0 : (_modernConfig_source = _modernConfig1.source) === null || _modernConfig_source === void 0 ? void 0 : _modernConfig_source.designSystem, {
|
79
|
+
pureConfig: {
|
80
|
+
content: defaultContent
|
81
|
+
}
|
82
|
+
});
|
83
|
+
}
|
84
|
+
};
|
85
|
+
return {
|
86
|
+
tools: {
|
87
|
+
// TODO: Add interface about postcss config
|
88
|
+
// TODO: In module project, also is called, but should not be called.
|
89
|
+
postcss: (config) => {
|
90
|
+
initTailwindConfig();
|
91
|
+
const tailwindPlugin = require(tailwindPath)(tailwindConfig);
|
92
|
+
if (Array.isArray(config.postcssOptions.plugins)) {
|
93
|
+
config.postcssOptions.plugins.push(tailwindPlugin);
|
94
|
+
} else {
|
95
|
+
config.postcssOptions.plugins = [
|
96
|
+
tailwindPlugin
|
97
|
+
];
|
98
|
+
}
|
99
|
+
},
|
100
|
+
babel: haveTwinMacro ? (_, { addPlugins }) => {
|
101
|
+
initTailwindConfig();
|
102
|
+
addPlugins([
|
103
|
+
[
|
104
|
+
require.resolve("babel-plugin-macros"),
|
105
|
+
{
|
106
|
+
twin: {
|
107
|
+
preset: supportCssInJsLibrary,
|
108
|
+
config: internalTwConfigPath || tailwindConfig
|
111
109
|
}
|
112
|
-
|
113
|
-
]
|
114
|
-
|
115
|
-
}
|
116
|
-
};
|
117
|
-
},
|
118
|
-
beforeBuildTask(config) {
|
119
|
-
const modernConfig = api.useResolvedConfigContext();
|
120
|
-
const { designSystem } = modernConfig;
|
121
|
-
const tailwindConfig = getTailwindConfig(tailwindVersion, config.style.tailwindcss, designSystem, {
|
122
|
-
pureConfig: {
|
123
|
-
content: defaultContent
|
124
|
-
}
|
125
|
-
});
|
126
|
-
const tailwindPlugin = require(tailwindPath)(tailwindConfig);
|
127
|
-
if (Array.isArray(config.style.postcss.plugins)) {
|
128
|
-
config.style.postcss.plugins.push(tailwindPlugin);
|
129
|
-
} else {
|
130
|
-
config.style.postcss.plugins = [
|
131
|
-
tailwindPlugin
|
132
|
-
];
|
110
|
+
}
|
111
|
+
]
|
112
|
+
]);
|
113
|
+
} : void 0
|
133
114
|
}
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
115
|
+
};
|
116
|
+
},
|
117
|
+
beforeBuildTask(config) {
|
118
|
+
const modernConfig = api.useResolvedConfigContext();
|
119
|
+
const { designSystem } = modernConfig;
|
120
|
+
const tailwindConfig = getTailwindConfig(tailwindVersion, config.style.tailwindcss, designSystem, {
|
121
|
+
pureConfig: {
|
122
|
+
content: defaultContent
|
123
|
+
}
|
124
|
+
});
|
125
|
+
const tailwindPlugin = require(tailwindPath)(tailwindConfig);
|
126
|
+
if (Array.isArray(config.style.postcss.plugins)) {
|
127
|
+
config.style.postcss.plugins.push(tailwindPlugin);
|
128
|
+
} else {
|
129
|
+
config.style.postcss.plugins = [
|
130
|
+
tailwindPlugin
|
131
|
+
];
|
139
132
|
}
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
133
|
+
return config;
|
134
|
+
},
|
135
|
+
modifyLibuild(config, next) {
|
136
|
+
config.transformCache = false;
|
137
|
+
return next(config);
|
138
|
+
}
|
139
|
+
};
|
140
|
+
}
|
141
|
+
});
|
144
142
|
export default tailwindcssPlugin;
|
@@ -1,116 +1,115 @@
|
|
1
1
|
import { lazyImport, createRuntimeExportsUtils } from "@modern-js/utils";
|
2
2
|
export default ({ pluginName } = {
|
3
3
|
pluginName: "@modern-js/plugin-tailwindcss"
|
4
|
-
}) => {
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
const
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
4
|
+
}) => ({
|
5
|
+
name: "@modern-js/plugin-design-token",
|
6
|
+
setup(api) {
|
7
|
+
let pluginsExportsUtils;
|
8
|
+
const resolveConfig = lazyImport("tailwindcss/resolveConfig", require);
|
9
|
+
const PLUGIN_IDENTIFIER = "designToken";
|
10
|
+
const getDesignTokens = (designSystem) => {
|
11
|
+
const tailwindcssConfig = {};
|
12
|
+
tailwindcssConfig.theme = designSystem ? {
|
13
|
+
...designSystem
|
14
|
+
} : {};
|
15
|
+
if (!designSystem) {
|
16
|
+
tailwindcssConfig.presets = [];
|
17
|
+
}
|
18
|
+
if (designSystem) {
|
19
|
+
delete tailwindcssConfig.theme.supportStyledComponents;
|
20
|
+
}
|
21
|
+
return resolveConfig(tailwindcssConfig).theme || {};
|
22
|
+
};
|
23
|
+
return {
|
24
|
+
config() {
|
25
|
+
const appContext = api.useAppContext();
|
26
|
+
pluginsExportsUtils = createRuntimeExportsUtils(appContext.internalDirectory, "plugins");
|
27
|
+
return {
|
28
|
+
source: {
|
29
|
+
alias: {
|
30
|
+
"@modern-js/runtime/plugins": pluginsExportsUtils.getPath()
|
31
|
+
}
|
32
|
+
},
|
33
|
+
tools: {}
|
34
|
+
};
|
35
|
+
},
|
36
|
+
modifyEntryImports({ entrypoint, imports }) {
|
37
|
+
var _userConfig_source;
|
38
|
+
const userConfig = api.useResolvedConfigContext();
|
39
|
+
var _userConfig_source_designSystem;
|
40
|
+
const designSystem = (_userConfig_source_designSystem = (_userConfig_source = userConfig.source) === null || _userConfig_source === void 0 ? void 0 : _userConfig_source.designSystem) !== null && _userConfig_source_designSystem !== void 0 ? _userConfig_source_designSystem : {};
|
41
|
+
if (typeof designSystem === "object" && designSystem.supportStyledComponents) {
|
42
|
+
const designTokens = getDesignTokens(userConfig.source.designSystem);
|
43
|
+
imports.push({
|
44
|
+
value: "@modern-js/runtime/plugins",
|
45
|
+
specifiers: [
|
46
|
+
{
|
47
|
+
imported: PLUGIN_IDENTIFIER
|
32
48
|
}
|
33
|
-
|
34
|
-
|
35
|
-
};
|
36
|
-
},
|
37
|
-
modifyEntryImports({ entrypoint, imports }) {
|
38
|
-
var _userConfig_source;
|
39
|
-
const userConfig = api.useResolvedConfigContext();
|
40
|
-
var _userConfig_source_designSystem;
|
41
|
-
const designSystem = (_userConfig_source_designSystem = (_userConfig_source = userConfig.source) === null || _userConfig_source === void 0 ? void 0 : _userConfig_source.designSystem) !== null && _userConfig_source_designSystem !== void 0 ? _userConfig_source_designSystem : {};
|
42
|
-
if (typeof designSystem === "object" && designSystem.supportStyledComponents) {
|
43
|
-
const designTokens = getDesignTokens(userConfig.source.designSystem);
|
44
|
-
imports.push({
|
45
|
-
value: "@modern-js/runtime/plugins",
|
46
|
-
specifiers: [
|
47
|
-
{
|
48
|
-
imported: PLUGIN_IDENTIFIER
|
49
|
-
}
|
50
|
-
],
|
51
|
-
initialize: `
|
49
|
+
],
|
50
|
+
initialize: `
|
52
51
|
const designTokens = ${JSON.stringify(designTokens)};
|
53
52
|
`
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
}
|
75
|
-
}
|
76
|
-
return {
|
77
|
-
entrypoint,
|
78
|
-
plugins
|
79
|
-
};
|
80
|
-
},
|
81
|
-
validateSchema() {
|
82
|
-
return [
|
83
|
-
// Legacy Features
|
84
|
-
{
|
85
|
-
target: "source.designSystem",
|
86
|
-
schema: {
|
87
|
-
typeof: [
|
88
|
-
"object"
|
89
|
-
]
|
90
|
-
}
|
91
|
-
},
|
92
|
-
{
|
93
|
-
target: "source.designSystem.supportStyledComponents",
|
94
|
-
schema: {
|
95
|
-
type: [
|
96
|
-
"boolean"
|
97
|
-
]
|
98
|
-
}
|
99
|
-
},
|
100
|
-
{
|
101
|
-
target: "designSystem",
|
102
|
-
schema: {
|
103
|
-
typeof: [
|
104
|
-
"object"
|
105
|
-
]
|
106
|
-
}
|
107
|
-
}
|
108
|
-
];
|
109
|
-
},
|
110
|
-
addRuntimeExports() {
|
111
|
-
pluginsExportsUtils.addExport(`export { default as designToken } from '${pluginName}/runtime-design-token'`);
|
53
|
+
});
|
54
|
+
}
|
55
|
+
return {
|
56
|
+
entrypoint,
|
57
|
+
imports
|
58
|
+
};
|
59
|
+
},
|
60
|
+
modifyEntryRuntimePlugins({ entrypoint, plugins }) {
|
61
|
+
var _userConfig_source;
|
62
|
+
const userConfig = api.useResolvedConfigContext();
|
63
|
+
var _userConfig_source_designSystem;
|
64
|
+
const designSystem = (_userConfig_source_designSystem = (_userConfig_source = userConfig.source) === null || _userConfig_source === void 0 ? void 0 : _userConfig_source.designSystem) !== null && _userConfig_source_designSystem !== void 0 ? _userConfig_source_designSystem : {};
|
65
|
+
let useSCThemeProvider = true;
|
66
|
+
if (designSystem) {
|
67
|
+
var _designSystem;
|
68
|
+
useSCThemeProvider = ((_designSystem = designSystem) === null || _designSystem === void 0 ? void 0 : _designSystem.supportStyledComponents) || false;
|
69
|
+
}
|
70
|
+
if (typeof designSystem === "object" && designSystem.supportStyledComponents) {
|
71
|
+
plugins.push({
|
72
|
+
name: PLUGIN_IDENTIFIER,
|
73
|
+
options: `{token: designTokens, useStyledComponentsThemeProvider: ${useSCThemeProvider ? "true" : "false"}, useDesignTokenContext: false}`
|
74
|
+
});
|
112
75
|
}
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
};
|
76
|
+
return {
|
77
|
+
entrypoint,
|
78
|
+
plugins
|
79
|
+
};
|
80
|
+
},
|
81
|
+
validateSchema() {
|
82
|
+
return [
|
83
|
+
// Legacy Features
|
84
|
+
{
|
85
|
+
target: "source.designSystem",
|
86
|
+
schema: {
|
87
|
+
typeof: [
|
88
|
+
"object"
|
89
|
+
]
|
90
|
+
}
|
91
|
+
},
|
92
|
+
{
|
93
|
+
target: "source.designSystem.supportStyledComponents",
|
94
|
+
schema: {
|
95
|
+
type: [
|
96
|
+
"boolean"
|
97
|
+
]
|
98
|
+
}
|
99
|
+
},
|
100
|
+
{
|
101
|
+
target: "designSystem",
|
102
|
+
schema: {
|
103
|
+
typeof: [
|
104
|
+
"object"
|
105
|
+
]
|
106
|
+
}
|
107
|
+
}
|
108
|
+
];
|
109
|
+
},
|
110
|
+
addRuntimeExports() {
|
111
|
+
pluginsExportsUtils.addExport(`export { default as designToken } from '${pluginName}/runtime-design-token'`);
|
112
|
+
}
|
113
|
+
};
|
114
|
+
}
|
115
|
+
});
|
package/package.json
CHANGED
@@ -15,7 +15,7 @@
|
|
15
15
|
"modern",
|
16
16
|
"modern.js"
|
17
17
|
],
|
18
|
-
"version": "2.
|
18
|
+
"version": "2.28.0",
|
19
19
|
"jsnext:source": "./src/index.ts",
|
20
20
|
"types": "./dist/types/index.d.ts",
|
21
21
|
"main": "./dist/cjs/index.js",
|
@@ -49,7 +49,7 @@
|
|
49
49
|
"babel-plugin-macros": "3.1.0",
|
50
50
|
"hoist-non-react-statics": "^3.3.2",
|
51
51
|
"@swc/helpers": "0.5.1",
|
52
|
-
"@modern-js/utils": "2.
|
52
|
+
"@modern-js/utils": "2.28.0"
|
53
53
|
},
|
54
54
|
"devDependencies": {
|
55
55
|
"@types/jest": "^29",
|
@@ -59,17 +59,17 @@
|
|
59
59
|
"jest": "^29",
|
60
60
|
"react": "^18",
|
61
61
|
"postcss": "8.4.21",
|
62
|
-
"@modern-js/core": "2.
|
63
|
-
"@modern-js/module-tools": "2.
|
64
|
-
"@modern-js/runtime": "2.
|
65
|
-
"@modern-js/types": "2.
|
66
|
-
"@scripts/build": "2.
|
67
|
-
"@modern-js/app-tools": "2.
|
68
|
-
"@scripts/jest-config": "2.
|
62
|
+
"@modern-js/core": "2.28.0",
|
63
|
+
"@modern-js/module-tools": "2.28.0",
|
64
|
+
"@modern-js/runtime": "2.28.0",
|
65
|
+
"@modern-js/types": "2.28.0",
|
66
|
+
"@scripts/build": "2.28.0",
|
67
|
+
"@modern-js/app-tools": "2.28.0",
|
68
|
+
"@scripts/jest-config": "2.28.0"
|
69
69
|
},
|
70
70
|
"peerDependencies": {
|
71
71
|
"tailwindcss": ">= 2.0.0 || >= 3.0.0",
|
72
|
-
"@modern-js/runtime": "^2.
|
72
|
+
"@modern-js/runtime": "^2.28.0"
|
73
73
|
},
|
74
74
|
"peerDependenciesMeta": {
|
75
75
|
"@modern-js/runtime": {
|