Closed mokeyish closed 1 year ago
我实现了 Build 的 placeholder 替换,请问 serve dev 下的替换怎么搞?
@lisonge 你好,我提交了 PR, vite build 生成可以的。请指导下,怎么让 placeholder 在 vite serve dev 下生效?
你的改动会造成 serve 与 build 模式下的行为不一致
import './xxx.css'
这类代码的 副作用 被 vite 视为全局样式
vite 目前暂未支持 shadow-dom 下 css https://github.com/vitejs/vite/pull/12206
目前看起来 shadow-dom 下的 css 只能使用 css?inline
实现,而且失去了 hmr
import cssText from './style.css?inline';
const style = document.createElement('style');
style.textContent = cssText;
shadow.appendChild(style);
我用了 unocss ,没有单独的 style.css 文件,是动态生成的。
unocss 的 shadow-dom 的 placeholder 也好像有问题,它只管那个组件文件的 css,像油猴插件,其实就是最外层的组件才是 shadow-dom,需要把所有样式收集,放到 shadow–dom 的 <style>标签里</style>
.
你为什么不在 vite-plugin-monkey 前面加一个插件把 css 移动到 js 里
这样没必要修改 vite-plugin-monkey 源代码
收集 css 的代码你可以直接复用
然后只需要把
换成
Object.values(esmBundle).forEach((chunk) => {
if (chunk.type == 'chunk') {
chunk.code = chunk.code.replace(`/* global-placeholder */`, css);
}
});
思路差不多是这样
嗯,好像也可以。把我之前写的脚本放在 vite-plugin-monkey 之前就行了。到 vite-plugin-monkey 就没 css 给它注入了。
build 和 serve 行为不一致,你有什么思路,也通过插件来快捷的解决吗?上面你引用的 PR 貌似没那么容易合并。
可以试试这个 https://github.com/web-widget/vite-plugin-shadow-dom-css 但是我不知道是否有用
反正我用起来直接报错
build 和 serve 行为不一致,你有什么思路,也通过插件来快捷的解决吗?
如果导入的 css 都是 styleDom 对象,将副作用交给开发者实现,似乎可以实现 shadow-dom 下 css 的 hmr,同时保持 serve 和 build 下的一致
import styleDom from './style.css?style';
import unocssStyleDom from 'uno.css?style';
customShadow.appendChild(style);
hmr 的时候内部模块更改 styleDom.textContent 即可,也不影响外部模块
由于是同一个 styleDom 引用, shadow-dom 下的 style.textContent 也会自动更改
谢谢你的耐心解答,我改成这样完美解决了,开发模式去 Head 上取样式,放到 shadow dom 里,生产模式就用 placeholder 替换。
SolidJs 完美啊,代码可以写的这么简洁。
如果 unocss 支持直接导出 原生 style 对象,生产模式 额外的插件 也不需要了
import unocssStyle from 'virtual:uno.css?style';
render(
() => (
<Portal useShadow>
{unocssStyle}
<App />
</Portal>
),
document.body,
);```
我上面的写法相当于启动后将 head 里的 styledom 对象移动到了 shadowdom 里,hmr 也都正常。
这个插件不错👍,先前是自己写 vite 脚本调整的,但是 dev 模式并不好,看到你这个插件,想切换过来。但是发现这个插件默认把样式注入到全局了,没看到关的地方。对于油猴插件为了不受全局样式影响,shadow-dom 是不错的选择。因此需要把样式替换到
/* global-placeholder */
占位符上。两个方案
/* global-placeholder */
占位符替换。怎么快速让样式插入到我这个占位符上呢?
先前写过的脚本。