next-yak
Version:
next-yak is a CSS-in-JS solution tailored for Next.js that seamlessly combines the expressive power of styled-components syntax with efficient build-time extraction of CSS using Next.js's built-in CSS configuration
119 lines • 3.89 kB
text/typescript
//#region withYak/index.d.ts
type YakConfigOptions = {
/**
* Generate compact CSS class and variable names.
* @defaultValue
* enabled if NODE_ENV is set to `production`, otherwise disabled
*/
minify?: boolean;
contextPath?: string;
/**
* Optional prefix for generated CSS identifiers.
* This can be used to ensure unique class names across different applications
* or to add organization-specific prefixes.
*/
prefix?: string;
/**
* Adds `displayName` to each component for better React DevTools debugging
* - Enabled by default in development mode
* - Disabled by default in production
* - Increases bundle size slightly when enabled
*/
displayNames?: boolean;
/**
* Fold statically known styles at build time: JSX usages of fully static
* styled components become plain DOM elements, and a static `css` prop
* becomes a plain `className`. Both skip the runtime wrapper and merge calls.
* @defaultValue true
*/
foldStatic?: boolean;
/**
* Fail the build when a `css` prop has a value next-yak can't handle
* (e.g. a plain string). next-yak claims the `css` prop, so a malformed
* value is almost always a mistake worth surfacing.
*
* Set to `false` to leave such props untouched instead, e.g. when another
* library on the same element uses its own `css` prop.
* @defaultValue true
*/
strictCssProp?: boolean;
experiments?: {
/**
* Debug logging for transformed files.
* - `true` - log all files
* - `object` - filter by pattern and/or output types (at least one required)
*/
debug?: true | {
pattern: string;
types?: Array<"ts" | "css" | "css-resolved">;
} | {
pattern?: string;
types: Array<"ts" | "css" | "css-resolved">;
};
transpilationMode?: "CssModule" | "Css";
/**
* Suppress deprecation warnings for :global() selectors during migration period
* @defaultValue false
*/
suppressDeprecationWarnings?: boolean;
};
};
/**
* Build the base yak-swc plugin options shared by every bundler integration
* (webpack, turbopack, vite, rsbuild). The caller adds the bundler-specific
* `importMode` on top.
*
* @param yakOptions - Yak configuration options
* @param basePath - Base path used by yak-swc to derive stable identifiers
*/
declare function buildYakPluginOptions(yakOptions: YakConfigOptions, basePath: string): {
minify: boolean;
basePath: string;
prefix: string | undefined;
displayNames: boolean;
foldStatic: boolean;
strictCssProp: boolean;
suppressDeprecationWarnings: boolean;
reactRefreshReg: boolean;
};
/**
* Try to resolve yak
*/
declare function resolveYakContext(contextPath: string | undefined, cwd: string): string | undefined;
/**
* Add Yak to your Next.js app
*
* @usage
*
* ```ts
* // next.config.js
* const { withYak } = require("next-yak/withYak");
* const nextConfig = {
* // your next config here
* };
* module.exports = withYak(nextConfig);
* ```
*
* With a custom yakConfig
*
* ```ts
* // next.config.js
* const { withYak } = require("next-yak/withYak");
* const nextConfig = {
* // your next config here
* };
* const yakConfig = {
* // Optional prefix for generated CSS identifiers
* prefix: "my-app",
* // Other yak config options...
* };
* module.exports = withYak(yakConfig, nextConfig);
* ```
*/
declare const withYak: {
<T extends Record<string, any> | ((...args: any[]) => Record<string, any>) | ((...args: any[]) => Promise<Record<string, any>>)>(yakOptions: YakConfigOptions, nextConfig: T): T;
<T extends Record<string, any> | ((...args: any[]) => Record<string, any>) | ((...args: any[]) => Promise<Record<string, any>>)>(nextConfig: T, _?: undefined): T;
};
//#endregion
export { YakConfigOptions, buildYakPluginOptions, resolveYakContext, withYak };
//# sourceMappingURL=index.d.cts.map