Skip to content

css

The community/lang/css directory provides support for CSS and SCSS within Talon. It includes a Python file (css.py) that defines lists of common CSS keywords, and a Talon file (css.talon) that defines grammar for working with CSS.

css.py defines three lists of CSS-related values:

  • css_unit: A list of CSS units, like em, px, deg, and s.
  • css_at_rule: A list of CSS at-rules, such as @media, @import, and @keyframes.
  • css_global_value: A list of global CSS values, including initial, inherit, and unset.

These lists are used in the css.talon file to provide easy access to these values. The file also defines a list of common functions (e.g. rgb, calc, linear-gradient) using the user.code_common_function list from the user namespace. These functions are accessible through the code_insert_function action defined in css.py. css.py also defines actions to insert common operators like +, -, *, /, and, or, >, >=, <, and <=.

css.talon defines several rules for inserting CSS syntax:

  • attribute [<user.text>]: Inserts an attribute with the provided text formatted as dash-separated, enclosed in square brackets (e.g. [my-attribute]).
  • prop <user.text>: Inserts a CSS property with the provided text formatted as dash-separated, followed by a colon and a semicolon (e.g., my-property: ;).
  • rule <user.text>: Inserts a CSS rule with the provided text formatted as dash-separated, followed by a colon and a space (e.g. my-rule:).
  • value <user.number_string> [{user.css_unit}] and value <user.number_string> point <digit_string> [{user.css_unit}]: Inserts a numerical CSS value with an optional unit (e.g., 10px, 1.5em).
  • (value | state) {user.css_global_value}: Inserts a global CSS value (e.g. initial, unset).
  • value <user.text>: Inserts a dash separated value.
  • variable <user.text>: Inserts a CSS variable reference (e.g., var(--my-variable)).
  • op var: Inserts var(--) with the cursor in the parentheses.
  • at {user.css_at_rule}: Inserts a CSS at-rule (e.g., @media).
  • unit {user.css_unit}: Inserts a CSS unit (e.g. em, px).
  • [value] current color: Inserts currentColor.
  • op important: Inserts !important.

The file also sets the user.code_public_variable_formatter to DASH_SEPARATED which is used for formatting the text in the attribute, prop, and variable rules.

The css.talon file also includes tags: * user.code_block_c_like * user.code_comment_block_c_like * user.code_functions_common * user.code_libraries * user.code_operators_math

These tags allow the user to leverage existing functionality in other parts of the Talon configuration that use these tags. For instance user.code_block_c_like enables commands that insert code blocks using curly braces ({}), while user.code_operators_math enables math operator commands.

In summary, css.py provides the basic lists of CSS keywords and operators, and css.talon provides the grammar for inserting those keywords, along with CSS properties, values, and other syntax, making it easier to write CSS with voice.