Attribute selector support?

[lanyusan]

I am trying out framer motion library with theme-ui. They have some examples that animate React components based on attribute selector.

https://codesandbox.io/s/framer-motion-2-scale-correction-z4tgr?from-embed=&file=/src/styles.css

This part:

.parent[data-isOpen="true"] {
  width: 300px;
  height: 300px;
}

And JS:

export default function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <motion.div
      layout
      data-isOpen={isOpen}
      initial={{ borderRadius: 50 }}
      className="parent"
      onClick={() => setIsOpen(!isOpen)}
    >
      <motion.div layout className="child" />
    </motion.div>
  );
}

I have found out framer motion wouldn't animate sx but only style, which is fine. But I don't want to put the above css in a css file.

I am wondering if there is a way to do attribute selection in sx so theme-ui would work with framer motion with no need of css file.

Thanks.

[hasparus]

Selecting on data attributes should just work (TM).

        sx={{
          '[data-my-attribute="hello"]': { color: "blue" }
        }}

Here's a CodeSandbox for you: https://codesandbox.io/s/gracious-zhukovsky-4ikim?file=/src/App.tsx

I have found out framer motion wouldn't animate sx but only style, which is fine. But I don't want to put the above css in a css file.

Sidenote: I think animating sx is technically possible to do with some more fiddling, but it's a really bad idea anyway -- each unique style object given to sx will create a new className and append a style tag to your DOM.

Later, if you need dynamic, frequently changing values in your styles (e.g. animations), you can set a CSS Custom Property inside of a style prop, and use it in your sx prop.

[lanyusan]

Thanks.

Yes it works. It requires & though if it is animating the current component.

The code below works the same as the original example.

/** @jsxImportSource theme-ui */

export default function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <motion.div
      layout
      data-isOpen={isOpen ? "true" : "false"}
      initial={{ borderRadius: 50 }}
      className="parent"
      onClick={() => setIsOpen(!isOpen)}
      sx={{
        "&[data-isOpen='true']": {
          width: "300px",
          height: "300px",
        },
      }}
    >
      <motion.div layout className="child" />
    </motion.div>
  );
}