A Note for Problems

At first I want to use SVG in css-doodle. Oh, ok:

background: @svg(
  <svg></svg>
)

But browsers will check and expose type errors if there are dynamic functions inside the attributes.

background: @svg(
  <svg>
    <path d="M0,0 L@rand(100), @rand(100)" />
  </svg>
)

Ok, I'll write rules inside the custom properties.

--rule: (
  background: @svg(
    <svg>
      <path d="M0,0 L@rand(100), @rand(100)" />
    </svg>
  )
)

But the nested custom properties will not work. Since browsers will evaluate them beforehand and break the whole code silently.

/* The --rule property just returns empty. */
--rule: (
  --color: red;
  color: var(--color);
)

Ok, I'll introduce a new function @var to use instead of var.

--rule: (
  --color: red;
  color: @var(--color);
)

But writing attribute values in multiple lines is invalid inside the custom properties.

--rule: (
  background: @svg(
    <svg>
      <path d="
        M0,0
        ...
      "/>
    </svg>
  )
);

Ok, I'll use `` and replace them at compile time instead.

--rule: (
  background: @svg(
    <svg>
      <path d=`
        M0,0
        ...
      `/>
    </svg>
  )
);

What else is waiting for me？