UNPKG

@zohodesk/client_build_tool

Version:

A CLI tool to build web applications and client libraries

72 lines (36 loc) • 4.81 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
## CSS Custom Plugins Documentation The following documentation provides an overview of the CSS custom plugins available in the Client Build Tool (CBT) configuration. These plugins allow you to extend the functionality of PostCSS, a powerful tool for transforming CSS using JavaScript plugins. Each plugin can be customized based on your specific requirements. Here are the available CSS custom plugins: ### rtlSplit - **enableRTLSplit** (boolean): Specifies whether to enable Right-to-Left (RTL) splitting. When enabled, this plugin generates separate CSS files for RTL layouts. The default value is `false`. - **templateLabel** (string): Specifies the template label used for RTL splitting. The default value is `'{{--dir}}'`. - **disableMinifySelector** (boolean): Specifies whether to disable minification of CSS selectors during RTL splitting. The default value is `false`. - **dirVarName** (string): Specifies the variable name used to store the direction (LTR or RTL). The default value is `'document.dir'`. ### selectorWeight - **enable** (boolean): Specifies whether to enable the selector weight plugin. When enabled, this plugin calculates the weight of CSS selectors based on specificity. The default value is `false`. - **patterns** (array): Specifies an array of file patterns to apply the selector weight plugin. The default value is an empty array. - **configFile** (null): Specifies the configuration file for the selector weight plugin. The default value is `null`. - **defaultSelector** (string): Specifies the default selector used by the selector weight plugin. The default value is an empty string. - **customFileDetails** (string): Specifies custom file details for the selector weight plugin. The default value is an empty string. - **excludeStrings** (array): Specifies an array of strings to exclude from the selector weight calculations. The default value is an empty array. ### valueReplacer - **enable** (boolean): Specifies whether to enable the value replacer plugin. When enabled, this plugin replaces values in CSS properties based on specified patterns. The default value is `false`. - **patterns** (array): Specifies an array of patterns to match CSS property values for replacement. The default value is an empty array. - **config** (array): Specifies an array of configuration options for the value replacer plugin. The default value is an empty array. ### selectorReplace - **enable** (boolean): Specifies whether to enable the selector replace plugin. When enabled, this plugin replaces CSS selectors based on specified patterns. The default value is `false`. - **patterns** (array): Specifies an array of patterns to match CSS selectors for replacement. The default value is an empty array. - **before** (array): Specifies an array of strings or regular expressions to match selector patterns that should be replaced before the main replacement. The default value is an empty array. - **after** (array): Specifies an array of strings or regular expressions to match selector patterns that should be replaced after the main replacement. The default value is an empty array. ### hoverActive - **enable** (boolean): Specifies whether to enable the hover and active plugin. When enabled, this plugin generates CSS for hover and active states based on specified patterns. The default value is `false`. - **patterns** (array): Specifies an array of patterns to match CSS selectors for generating hover and active states. The default value is an empty array. - **hover** (string): Specifies the CSS pseudo-class for the hover state. The default value is `'(hover: hover)'`. - **active** (string): Specifies the CSS pseudo-class for the active state. The default value is `'(hover: none)'`. ### cssVariableReplacement - **enable** (boolean): Specifies whether to enable the CSS variable replacement plugin. When enabled, this plugin replaces CSS variables based on specified patterns. The default value is `false`. - **patterns** (array): Specifies an array of patterns to match CSS variable names for replacement. The default value is an empty array. - **configFile** (null): Specifies the configuration file for the CSS variable replacement plugin. The default value is `null`. ### rtl - **enable** (boolean): Specifies whether to enable the RTL plugin. When enabled, this plugin generates RTL-specific CSS based on specified patterns. The default value is `false`. - **patterns** (array): Specifies an array of patterns to match CSS selectors for RTL transformation. The default value is an empty array. These custom plugins provide additional functionality and customization options for transforming CSS during the build process. You can enable or disable each plugin as needed and configure them according to your project's requirements.