Jux Configuration File
Configuring Jux allows you to customize its behavior to fit your project’s needs. By default, Jux uses a configuration file named jux.config.ts
in the root of your project.
A valid Jux config file exports its configuration using the default export. Using defineConfig
is recommended for automatic type hints in your IDE, but not required.
preflight
- Default:
true
Whether to apply css reset styles. Preflight styles are a set of base styles that normalize the appearance of HTML elements across browsers.
You can check the default styles in the Preflight section of the documentation.
include
- Default:
[]
An array of glob patterns that specify which files Jux should watch for changes. Jux will only parse files that match these patterns.
exclude
- Default:
['**/*.d.ts']
An array of glob patterns that specify which files Jux should ignore.
globalCss
- Default:
{}
Apply global CSS styles to your project. Global CSS are inserted at the top of the generated CSS file and are scoped to @layer base
cascade layer.
core_tokens
- Default:
{}
Define your design system’s core token:
Learn more about defining tokens and the different categories you can use in the Tokens & Themes section of the documentation.
themes
- Default:
{}
Define your design system’s themes:
Learn more about defining themes and the different categories you can use in the Tokens & Themes section of the documentation.
presets
- Default:
[]
Use configuration presets to share settings across projects. Any preset will be merged with the rest of the configuration, acting as a set of overrides / extensions.
Learn more about presets in the Presets section of the documentation.
utilities
- Default:
JuxUtilitiesBase
Create custom CSS properties that can be used when you style your components.
screens
- Default:
{}
Customize the breakpoints used in your project.
Learn more about utilities in the Utilities section of the documentation.
cssVarsRoot
- Type:
string
- Default:
:where(:root, :host)
Specify the root pseudo-class for CSS variables.
builtInFonts
- Type:
BuiltInFonts
- Default:
{}
A helper object to specify fonts to use in your project (currently supports Google Fonts only).
This will automatically add the following import to Jux CSS file:
browserslist
- Type:
string[]
- Default:
[]
Specify browser targets for compatibility.
components_directory
- Type:
string
- Default:
./src/jux/components
Specifies where to pull generated components when working with Jux editor.
tokens_directory
- Type:
string
- Default:
./src/jux/components
Specifies where to pull design tokens when working with Jux editor.
definitions_directory
- Type:
string
- Default:
./src/jux/types
Specifies where to pull generated type definitions when working with Jux editor.