egoist / egoist/rollup-plugin-postcss
Cannot convert deep syntax in Vue
- Dominant language
- JavaScript
- Stars
- 689
- Forks
- 210
- PR merge metrics
- No merged PRs in 30d
Description
### Basic environment
【zh-cn】基础环境
```
pnpm @8.10.2
node@20.10.0
vue@2.7.16
vue-template-compiler @2.7.16
"postcss": "^8.4.33",
"rollup": "^4.9.2",
"rollup-plugin-postcss": "^4.0.2",
```
demo vue file
【zh-cn】示例vue文件
```html
你好
点我
处理中心
我的工作台
选项1
选项2
选项3
选项4
选项1
选项2
选项3
消息中心
export default {
data() {
return {
activeIndex: '1'
}
}
}
.el-menu-demo {
display: grid;
:deep(.el-submenu__title) {
color: blue !important;
}
}
.test-btn {
display: flex;
color: red;
}
```
【en】Hope to convert deep syntax
【zh-cn】希望能转换 deep语法
【en】Now, packaging is being executed without any errors, but the deep syntax has not been converted
【zh-cn】现在,打包没有报任何错误,但是deep语法没有被转换
```shell
PS D:\参考资料\test-ui> pnpm run build
> xyzui@0.1.1 build D:\参考资料\test-ui
> rollup -c
./src/index.js → lib/index.esm.js, lib/index.umd.js...
created lib/index.esm.js, lib/index.umd.js in 467ms
```
### demo
【en】Complete configuration file
【zh-cn】完整的配置文件
`rollup.config.mjs`
```js
import { defineConfig } from 'rollup'
import vue from 'rollup-plugin-vue'
import { cleandir } from 'rollup-plugin-cleandir'
import { babel } from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss'
import autoprefixer from 'autoprefixer'
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import copy from 'rollup-plugin-copy'
import sass from 'rollup-plugin-sass';
export default defineConfig({
input: './src/index.js',
output: [
{
file: 'lib/index.esm.js',
format: 'esm',
exports: 'named'
},
{
file: 'lib/index.umd.js',
format: 'umd',
name: 'xyzui',
globals: {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
'element-ui': 'ELEMENT'
}
}
],
plugins: [
cleandir('lib'),
// 将node_modules里面的依赖打包
resolve(), // 解析依赖
vue(),
babel({
// exclude: 'node_modules/**',
presets: ['@vue/babel-preset-jsx'],
// bundled-需要显示指明babelHelpers 配置, 没配置,控制台有一些warning
babelHelpers: 'bundled',
// 5.2.1 是可以不用配置 extensions
// 5.2.2 以后 需要将 vue配置进去
extensions:['.js', '.jsx', '.es6', '.es', '.mjs','.vue'],
filter: id=>{
return /(\.js|\.jsx|\.es6|\.es|\.mjs)$/.test(id) && !/node_modules/.test(id)
}
}),
// 需要处理vue中的css
postcss({
plugins: [
/**
* {
// browsers: 'last 5 version'
overrideBrowserslist: [
"last 2 versions"
]
}
*/
// autoprefixer()
],
extensions: ['.css', '.scss', '.less']
}),
],
external: [
"Vue",
'vue-router',
'axios',
'element-ui'
]
})
```
【en】**Complete dependency files**
【zh-cn】完整的依赖文件
```json
{
"name": "xyzui",
"description": "vue公共组件",
"version": "0.1.1",
"main": "lib/index.umd.js",
"module": "lib/index.esm.js",
"scripts": {
"build": "rollup -c"
},
"devDependencies": {
"@babel/core": "^7.23.7",
"@rollup/plugin-babel": "^6.0.4",
"@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-node-resolve": "^15.2.3",
"@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
"@vue/babel-preset-jsx": "^1.4.0",
"autoprefixer": "^10.4.16",
"axios": "^1.6.4",
"babel-preset-env": "^1.7.0",
"element-ui": "^2.15.14",
"less": "^4.2.0",
"postcss": "^8.4.33",
"rollup": "^4.9.2",
"rollup-plugin-cleandir": "^2.0.0",
"rollup-plugin-copy": "^3.5.0",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-sass": "^1.12.21",
"rollup-plugin-vue": "^5.1.9",
"sass": "^1.69.7",
"vue": "2.7.16",
"vue-router": "3.6.5",
"vue-template-compiler": "2.7.16"
}
}
```
### Project Structure
【zh-cn】项目结构
```
- lib
- src
- index.js
- test.vue
- rollup.config.mjs
```
### Current conversion results
【zh-cn】 当前转换的结果
```js
/* style */
const __vue_inject_styles__ = function (inject) {
if (!inject) return
inject("data-v-178f2dae_0", { source: ".el-menu-demo[data-v-178f2dae] {\n display: grid;\n}\n.el-menu-demo[data-v-178f2dae] :deep(.el-submenu__title) {\n color: blue !important;\n}\n.test-btn[data-v-178f2dae] {\n display: flex;\n color: red;\n}\n\n/*# sourceMappingURL=test.vue.map */", map: {"version":3,"sources":["D:\\参考资料\\test-ui\\src\\test.vue","test.vue"],"names":[],"mappings":"AA+CA;EACA,aAAA;AC9CA;ADgDA;EACA,sBAAA;AC9CA;ADkDA;EACA,aAAA;EACA,UAAA;AC/CA;;AAEA,mCAAmC","file":"test.vue","sourcesContent":["\r\n
};
```

Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.