Skip to content

[types] fix @stylexjs/babel plugin cjs compat #1322

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
henryqdineen wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[types] fix @stylexjs/babel plugin cjs compat #1322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 48 additions & 38 deletions packages/@stylexjs/babel-plugin/src/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// Solves the issue: https://github.com/facebook/stylex/issues/889
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
Expand All @@ -10,44 +9,55 @@

import type { PluginObj } from '@babel/core';
import type { StyleXOptions } from './utils/state-manager';
export type Options = StyleXOptions;
/**
* Entry point for the StyleX babel plugin.
*/
declare function styleXTransform(): PluginObj;
declare function stylexPluginWithOptions(
options: Partial<StyleXOptions>,
): [typeof styleXTransform, Partial<StyleXOptions>];
/**
*
* @param rules An array of CSS rules that has been generated and collected from all JS files
* in a project
* @returns A string that represents the final CSS file.
*
* This function take an Array of CSS rules, de-duplicates them, sorts them priority and generates
* a final CSS file.
*
* When Stylex is correctly configured, the babel plugin will return an array of CSS rule objects.
* You're expected to concatenate all the Rules into a single Array and use this function to convert
* that into the final CSS file.
*
* End-users can choose to not use this function and use their own logic instead.
*/
export type Rule = [string, { ltr: string; rtl?: null | string }, number];
declare function processStylexRules(
rules: Array<Rule>,
config?:
| boolean
| {
useLayers?: boolean;
enableLTRRTLComments?: boolean;
legacyDisableLayers?: boolean;
},
): string;
export type StyleXTransformObj = Readonly<{
Copy link
Collaborator

@nmn nmn Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if you can use this type and use the export = syntax to make it work with cjs?

Copy link
Contributor Author

@henryqdineen henryqdineen Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't seem to find a way to do it with running in to "An export assignment cannot be used in a module with other exported elements.(2309)"

(): PluginObj;
withOptions: typeof stylexPluginWithOptions;
processStylexRules: typeof processStylexRules;
}>;
declare const $$EXPORT_DEFAULT_DECLARATION$$: StyleXTransformObj;
export default $$EXPORT_DEFAULT_DECLARATION$$;

declare namespace styleXTransform {
Copy link
Collaborator

@nmn nmn Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we avoid using a namespace here? Other than that the changes look good.

Copy link
Contributor Author

@henryqdineen henryqdineen Nov 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @nmn. I was following this advice from the DefinitelyTyped README. Do you have a recommended solution without a namespace?

When the implementation package uses module.exports = ..., the DefinitelyTyped package should use export =, not export default. (Alternatively, if the module.exports is just an object of named properties, the DefinitelyTyped package can use a series of named exports.) The most common obstacle to correcting this problem is confusion about how to export types in addition to the primary export. For example, assume these types are incorrectly using export default:

export interface Options {
    // ...
}
export default function doSomething(options: Options): void;

Changing the export default to an export = creates an error:

export interface Options {
    // ...
}
declare function doSomething(options: Options): void;
export = doSomething;
// ^^^^^^^^^^^^^^^^^
// Error: An export assignment cannot be used in a module with other exported elements.

To fix this, move the types inside a namespace with the same name as the function:

declare namespace doSomething {
    export interface Options {
        // ...
    }
}
declare function doSomething(options: doSomething.Options): void;
export = doSomething;

export type Options = StyleXOptions;

/**
*
* @param rules An array of CSS rules that has been generated and collected from all JS files
* in a project
* @returns A string that represents the final CSS file.
*
* This function take an Array of CSS rules, de-duplicates them, sorts them priority and generates
* a final CSS file.
*
* When Stylex is correctly configured, the babel plugin will return an array of CSS rule objects.
* You're expected to concatenate all the Rules into a single Array and use this function to convert
* that into the final CSS file.
*
* End-users can choose to not use this function and use their own logic instead.
*/
export type Rule = [
string,
{
ltr: string;
rtl?: null | string;
constKey?: string;
constVal?: string | number;
},
number,
];

export function withOptions(
options: Partial<StyleXOptions>,
): [typeof styleXTransform, Partial<StyleXOptions>];

export function processStylexRules(
rules: Array<Rule>,
config?:
| boolean
| {
useLayers?: boolean;
enableLTRRTLComments?: boolean;
legacyDisableLayers?: boolean;
useLegacyClassnamesSort?: boolean;
},
): string;
}

export = styleXTransform;
14 changes: 14 additions & 0 deletions packages/typescript-tests/src/babel-plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*
*/

/* eslint-disable no-unused-vars */

import stylexBabelPlugin from '@stylexjs/babel-plugin';

const css = stylexBabelPlugin.processStylexRules([]);
Loading