Scoped css with pure css string

I tried to add scoped CSS plug-in to preact. But I have a problem. Can i get the component instance in “vnode hook” function?

import { options } from 'preact'

options.vnode = (vnode, component) =>{
  //generate scoped attr by component

  //add attr to vnode
}

Thanks! -dntzhang

[developit]

@dntzhang technically there is a reference to the component instance associated with a given VNode, as a ._component property (compressed in production as .__c). However, VNodes are created long before they can be associated with a component, so this is not a reliable method of associating vnodes and components during the options.vnode hook.

The workaround is to store the component’s associated VNode, then reference it dynamically in your options.vnode hook:

import { options } from 'preact';

let componentNode;

// store a reference to the "current component" vnode
let oldDiff = options._diff || options.__b;
options._diff = options.__b = vnode => {
  componentNode = vnode;
  if (oldDiff) oldDiff(vnode);
};

// reset component reference at end of diffing:
let oldDiffed = options.diffed;
options.diffed = vnode => {
  if (componentNode === vnode) componentNode = null;
  if (oldDiffed) oldDiffed(vnode);
};

// our vnode hook looks up the associated component
let old = options.vnode;
options.vnode = vnode => {
  const component = componentNode && (componentNode._component || componentNode.__c);
  if (component) {
    // component is the component instance
    component.css;
    // example: assign component's unique CSS ID:
    (vnode.props || (vnode.props = {}))[component._styleId] = '';
  }
  if (old) old(vnode);
};

[dntzhang]

https://github.com/Tencent/omi/tree/master/packages/preact-css

Done. Many thanks to @developit and @marvinhagemeister .