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
65 lines (63 loc) • 1.94 kB
text/typescript
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;
experiments?: {
debug?: boolean | {
filter?: (path: string) => boolean;
type: "all" | "ts" | "css" | "css resolved";
};
};
};
/**
* 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;
};
export { type YakConfigOptions, withYak };