egoist / egoist/rollup-plugin-postcss

Cannot convert deep syntax in Vue

Open
#458 2 comments 0 reactions 0 assignees View on GitHub
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

\r\n 你好\r\n
\r\n 点我\r\n
\r\n\r\n\r\n \r\n 处理中心\r\n \r\n 我的工作台\r\n 选项1\r\n 选项2\r\n 选项3\r\n \r\n 选项4\r\n 选项1\r\n 选项2\r\n 选项3\r\n \r\n \r\n 消息中心\r\n\r\n\r\n
\r\n \r\n
\r\n
\r\n\r\n\r\n\r\nimport jsxCom from './jsx.vue'\r\nexport default {\r\n components: {\r\n jsxCom\r\n },\r\n data() {\r\n return {\r\n activeIndex: '1'\r\n }\r\n }\r\n}\r\n\r\n\r\n\r\n\r\n.el-menu-demo {\r\n display: grid;\r\n\r\n :deep(.el-submenu__title) {\r\n color: blue !important;\r\n }\r\n}\r\n\r\n.test-btn {\r\n display: flex;\r\n color: red;\r\n}\r\n\r\n",".el-menu-demo {\n display: grid;\n}\n.el-menu-demo :deep(.el-submenu__title) {\n color: blue !important;\n}\n\n.test-btn {\n display: flex;\n color: red;\n}\n\n/*# sourceMappingURL=test.vue.map */"]}, media: undefined });

};
```

![image](https://github.com/egoist/rollup-plugin-postcss/assets/152823466/082bec30-8ecd-46d2-99a1-1af45e86ef4f)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.