Config conditions soft validation

[olafurns7]

Description

In our project we've been adding custom condition selectors, like _groupInputFocusedWithin and things like that.

You can almost type anything in there though without a smidgen of warning, It would be cool to have some sort quasi validation so that a rule isn't utterly bad.

Problem Statement/Justification

Somewhat functional typescript validation of css selector conditions in panda.config.

This would mostly prevent faulty rules being added.

Proposed Solution or API

A really really complicated type that utilizes tagged template literals to typecheck the conditions.

Alternatives

No response

Additional Information

No response

[segunadebayo]

Correct. We mainly need to ensure that the condition is a valid CSS selector.

I think it's doable. cc @astahmer

[olafurns7]

Doing a magical template literal to handle this might be a .. task for someone quite crazy.

But possibly you could use for example css-what to parse the conditions. Since defineConfig is a function, we should be able to run the conditions through a function on calling time at least?

Mock-ish idea for simple parsing:

 import { parse } from 'css-what'; // 7.5kb (3.1kb gzipped)

  const cssConditions = {
    hasInvalid: ':has(:invalid, [data-invalid], [aria-invalid=true])',
    groupHover: '[role=group]:where(:hover, [data-hover])',
    groupInvalid:
      '[role=group]:where(:has(:invalid, [data-invalid], [aria-invalid=true]), [data-invalid], [aria-invalid=true])',
    groupValid:
      '[role=group]:where(:has(:valid, [data-valid], [aria-valid=true]), [data-valid], [aria-valid=true])',
    groupInputFocusedWithin: '[role=group]:where(:has(input:focus))',
    newSelector: 'XX !',
  };

  Object.values(cssConditions).map((condition) => {
    try {
      return parse(condition);
    } catch (e) {
      throw new Error(`❗ Invalid CSS condition: ${condition},`);
    }
  });

Possibly wouldn't be throwing an error, but an warning, but this is how I'm experimenting with it at the moment.