@modern-js/plugin-tailwindcss 0.0.0-next-1690395678952 → 0.0.0-next-1690452127732

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