search

mui / pigment-css

Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
MIT License
389 stars 18 forks source link

[nextjs] `url(#)` cannot be used as a value #90

Closed siriwatknp closed 4 weeks ago

siriwatknp commented 1 month ago

Search keywords

url

Latest version

Steps to reproduce

Try this component with Pigment CSS:

function GradientCircularProgress() {
  return (
    <React.Fragment>
      <svg width={0} height={0}>
        <defs>
          <linearGradient id="my_gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stopColor="#e01cd5" />
            <stop offset="100%" stopColor="#1CB5E0" />
          </linearGradient>
        </defs>
      </svg>
      <CircularProgress sx={{ 'svg circle': { stroke: 'url(#my_gradient)' } }} />
    </React.Fragment>
  );
}

Current behavior

unhandledRejection Error: Can't resolve '#my_gradient' in '/home/runner/work/material-ui/material-ui/docs/data/material/components/progress'
image

Expected behavior

There should be no error and the generated CSS should be correct.

Context

No response

Your environment

@pigment-css/react: 0.0.11, @pigment-css/nextjs-plugin: 0.0.11