Skip to content

Commit 016c015

Browse files
committed
Revert "Revert "fix: cli should rewrite the aliases (#847)""
This reverts commit ef75f1e.
1 parent ef75f1e commit 016c015

File tree

7 files changed

+80
-13
lines changed

7 files changed

+80
-13
lines changed

.flowconfig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ module.name_mapper='^@stylexjs\/shared\/lib\/\([a-zA-Z0-9_\-]+\)$' -> '<PROJECT_
3030
module.name_mapper='^@stylexjs/stylex$' -> '<PROJECT_ROOT>/packages/stylex/src/stylex.js'
3131
module.name_mapper='^@stylexjs/stylex\/lib\/\([a-zA-Z0-9_\-]+\)$' -> '<PROJECT_ROOT>/packages/stylex/src/\1'
3232
module.name_mapper='^@stylexjs/babel-plugin$' -> '<PROJECT_ROOT>/packages/babel-plugin/src/index.js'
33-
module.name_mapper='^@stylexjs/babel-plugin\/lib\/\([a-zA-Z0-9_\-]+\)$' -> '<PROJECT_ROOT>/packages/babel-plugin/src/\1'
33+
module.name_mapper='^@stylexjs/babel-plugin\/lib\/\(.+\)$' -> '<PROJECT_ROOT>/packages/babel-plugin/src/\1'
3434
; type-stubs
3535
module.system.node.resolve_dirname=flow_modules
3636
module.system.node.resolve_dirname=node_modules

packages/babel-plugin/src/index.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@ import type { NodePath } from '@babel/traverse';
1212
import type { PluginObj } from '@babel/core';
1313
import type { StyleXOptions } from './utils/state-manager';
1414
import StateManager from './utils/state-manager';
15+
import {
16+
EXTENSIONS,
17+
filePathResolver,
18+
matchesFileSuffix,
19+
getRelativePath,
20+
} from './utils/state-manager';
1521
import { readImportDeclarations, readRequires } from './visitors/imports';
1622
import transformStyleXCreate from './visitors/stylex-create';
1723
import transformStyleXDefineVars from './visitors/stylex-define-vars';
@@ -74,6 +80,44 @@ function styleXTransform(): PluginObj<> {
7480
// variables entirely if they're not needed.
7581
exit: (path: NodePath<t.Program>) => {
7682
path.traverse({
83+
ImportDeclaration(path: NodePath<t.ImportDeclaration>) {
84+
const filename = state.filename;
85+
if (filename == null || !state.options.rewriteAliases) {
86+
return;
87+
}
88+
89+
const source = path.node.source.value;
90+
91+
const aliases = state.options.aliases;
92+
93+
const themeFileExtension = '.stylex';
94+
if (!matchesFileSuffix(themeFileExtension)(source)) {
95+
return;
96+
}
97+
const resolvedFilePath = filePathResolver(
98+
source,
99+
filename,
100+
aliases,
101+
);
102+
103+
if (resolvedFilePath == null) {
104+
return;
105+
}
106+
107+
let relativeFilePath = getRelativePath(
108+
filename,
109+
resolvedFilePath,
110+
);
111+
112+
const extension = EXTENSIONS.find((ext) =>
113+
relativeFilePath.endsWith(ext),
114+
);
115+
if (extension != null) {
116+
relativeFilePath = relativeFilePath.slice(0, -extension.length);
117+
}
118+
119+
path.node.source.value = relativeFilePath;
120+
},
77121
Identifier(path: NodePath<t.Identifier>) {
78122
// Look for variables bound to `stylex.create` calls that are used
79123
// outside of `stylex(...)` calls

packages/babel-plugin/src/utils/state-manager.js

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -78,13 +78,15 @@ export type StyleXOptions = $ReadOnly<{
7878
genConditionalClasses: boolean,
7979
unstable_moduleResolution?: ?ModuleResolution,
8080
aliases?: ?$ReadOnly<{ [string]: string | $ReadOnlyArray<string> }>,
81+
rewriteAliases?: boolean,
8182
...
8283
}>;
8384

8485
type StyleXStateOptions = $ReadOnly<{
8586
...StyleXOptions,
8687
runtimeInjection: ?string | $ReadOnly<{ from: string, as: ?string }>,
8788
aliases?: ?$ReadOnly<{ [string]: $ReadOnlyArray<string> }>,
89+
rewriteAliases: boolean,
8890
...
8991
}>;
9092

@@ -289,6 +291,10 @@ export default class StateManager {
289291
styleResolution,
290292
unstable_moduleResolution,
291293
treeshakeCompensation,
294+
rewriteAliases:
295+
typeof options.rewriteAliases === 'boolean'
296+
? options.rewriteAliases
297+
: false,
292298
};
293299
return opts;
294300
}
@@ -671,7 +677,7 @@ const getPossibleFilePaths = (filePath: string) => {
671677

672678
// a function that resolves the absolute path of a file when given the
673679
// relative path of the file from the source file
674-
const filePathResolver = (
680+
export const filePathResolver = (
675681
relativeFilePath: string,
676682
sourceFilePath: string,
677683
aliases: StyleXStateOptions['aliases'],
@@ -704,7 +710,7 @@ const filePathResolver = (
704710
return null;
705711
};
706712

707-
const EXTENSIONS = ['.js', '.ts', '.tsx', '.jsx', '.mjs', '.cjs'];
713+
export const EXTENSIONS = ['.js', '.ts', '.tsx', '.jsx', '.mjs', '.cjs'];
708714

709715
const addFileExtension = (
710716
importedFilePath: string,
@@ -721,10 +727,11 @@ const addFileExtension = (
721727
return importedFilePath + fileExtension;
722728
};
723729

724-
const matchesFileSuffix = (allowedSuffix: string) => (filename: string) =>
725-
['', ...EXTENSIONS].some((extension) =>
726-
filename.endsWith(`${allowedSuffix}${extension}`),
727-
);
730+
export const matchesFileSuffix: (string) => (string) => boolean =
731+
(allowedSuffix) => (filename) =>
732+
['', ...EXTENSIONS].some((extension) =>
733+
filename.endsWith(`${allowedSuffix}${extension}`),
734+
);
728735

729736
const getProgramPath = (path: NodePath<>): null | NodePath<t.Program> => {
730737
let programPath = path;
@@ -749,3 +756,16 @@ const getProgramStatement = (path: NodePath<>): NodePath<> => {
749756
}
750757
return programPath;
751758
};
759+
760+
export function getRelativePath(from: string, to: string): string {
761+
const relativePath = path.relative(path.parse(from).dir, to);
762+
return formatRelativePath(toPosixPath(relativePath));
763+
}
764+
765+
function toPosixPath(filePath: string): string {
766+
return filePath.split(path.sep).join(path.posix.sep);
767+
}
768+
769+
function formatRelativePath(filePath: string) {
770+
return filePath.startsWith('.') ? filePath : './' + filePath;
771+
}

packages/cli/src/config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
* @flow strict
99
*/
1010

11-
import type { Rule } from '@stylexjs/babel-plugin';
11+
import type { Rule, Options as StyleXOptions } from '@stylexjs/babel-plugin';
1212

1313
export type ModuleType =
1414
| string
@@ -24,7 +24,7 @@ export type CliConfig = {
2424
babelPluginsPost?: $ReadOnlyArray<any>,
2525
modules_EXPERIMENTAL: $ReadOnlyArray<ModuleType>,
2626
useCSSLayers?: boolean,
27-
styleXConfig?: { +[string]: mixed },
27+
styleXConfig?: StyleXOptions,
2828
};
2929

3030
export type TransformConfig = {

packages/cli/src/index.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
* @flow strict
99
*/
1010

11-
import type { Rule } from '@stylexjs/babel-plugin';
11+
import type { Rule, Options as StyleXOptions } from '@stylexjs/babel-plugin';
1212
import yargs from 'yargs';
1313
import path from 'path';
1414
import ansis from 'ansis';
@@ -71,8 +71,7 @@ const babelPresets: $ReadOnlyArray<any> = args.babelPresets;
7171
const babelPluginsPre: $ReadOnlyArray<any> = args.babelPluginsPre;
7272
const babelPluginsPost: $ReadOnlyArray<any> = args.babelPluginsPost;
7373
const useCSSLayers: boolean = args.useCSSLayers;
74-
const styleXConfig: { +[string]: mixed } =
75-
(config.styleXConfig as $FlowFixMe) ?? {};
74+
const styleXConfig: StyleXOptions = (config.styleXConfig as $FlowFixMe) ?? {};
7675

7776
const cliArgsConfig: CliConfig = {
7877
input,

packages/cli/src/plugins.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ import * as nodePath from 'path';
1717

1818
type ImportModifierPlugin = $ReadOnly<{
1919
visitor: {
20-
Program: { enter(path: NodePath<t.Program>): void },
20+
Program: {
21+
enter?: (path: NodePath<t.Program>) => void,
22+
exit?: (path: NodePath<t.Program>) => void,
23+
},
2124
},
2225
}>;
2326

packages/cli/src/transform.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,7 @@ export async function transformFile(
179179
rootDir: path.parse(config.output).dir,
180180
},
181181
...(config.styleXConfig as $FlowFixMe),
182+
rewriteAliases: true,
182183
},
183184
],
184185
createImportPlugin(relativeImport),

0 commit comments

Comments
 (0)