Creating Rules

See below for different examples configuring rules.

stilvoll.config.js

export default {
  input: ["./src/index.css"],
  rules: [
    // Defines a static rule, will generate just the "hidden" class
    ["hidden", { display: "none" }],

    // Another example of a static rule, but defining more properties
    [
      "sr-only",
      {
        position: "absolute",
        width: "1px",
        height: "1px",
        padding: "0",
        margin: "-1px",
        overflow: "hidden",
        clip: "rect(0, 0, 0, 0)",
        "white-space": "nowrap",
        border: "0",
      },
      {
        // You can provide an optional text explaining what
        // the rule does. This will show up as in the auto-
        // completion of the classname when using the sv object.
        explainer:
          "Hides the element visually but keeps it accessible to screenreaders",
      },
    ],

    // A dynamic rule, that will potentially generate all permutations
    // based on the pased values. Note how name and rule definition
    // are functions now
    [
      (name) => `m-${name}`,
      (value) => ({ margin: value }),

      // Passing a regular expression will find matching CSS
      // variables in your input CSS file and generate
      // variations for them. So if you had --space-l and
      // --space-xl design tokens, this would generate the
      // classes m-l and m-xl. Note how the regular expression
      // part is stripped from the classname
      /^--space-/,
    ],

    // Options for dynamic rules can be passed as a regular
    // expression, as shown above, or as an array of key-value
    // sub-arrays for static values.
    [
      (name) => `p-${name}`,
      (value) => ({ padding: value }),
      [
        ["none", 0],
        ["px", "1px"],
      ],
    ],

    // Instead of just passing the dynamic values, the last part
    // of a rule can also contain configuration options for that
    // rule. The dynamic values — if any — are passed in the `values`
    // key in this case.
    [
      (name) => `mt-${name}`,
      (value) => ({ "padding-top": value }),
      {
        // Opting out of generating responsive variants of
        // this utility class.
        responsive: false,
        values: /^--space-/,
      },
    ],

    // Instead of returning an object you can also return a
    // string of CSS. Note how the string needs to include the
    // selector explicitly.
    [
      (name) => `stack-${name}`,
      (value, selector) => `.${selector} > * + * {
        margin-top: ${value};
      }`,
      {
        values: [["none", 0], /^--space-/],
      },
    ],
  ],
};