test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 02:58:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

amis-saas-7517 postcss

Browse Source 
Change-Id: Id8a3cae08bea3bdd4dd8744a795d185a41579a74
This commit is contained in:
qkiroc 2022-11-28 14:31:48 +08:00
parent ade4919cc5
commit 07a857a5f0
2 changed files with 28 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/amis-editor/package.json
View File

@ -1,6 +1,6 @@
{
"name": "amis-editor",
"version": "5.2.1-theme.0",
"version": "5.2.1-theme.6",
"description": "amis 可视化编辑器",
"main": "lib/index.js",
"module": "esm/index.js",
@ -33,7 +33,8 @@
},
"dependencies": {
"@webcomponents/webcomponentsjs": "^2.6.0",
"amis-editor-core": "^5.2.1-theme.0",
"amis-editor-core": "^5.2.1-theme.6",
"amis-postcss": "1.0.0",
"amis-theme-editor": "*",
"i18n-runtime": "*",
"lodash": "^4.17.15"

46
packages/amis-editor/src/renderer/style-control/ThemeClassName.tsx
View File

@ -4,7 +4,7 @@
import React, {useEffect, useRef, useState} from 'react';
import {Button, Editor, Icon, Overlay, PopOver} from 'amis-ui';
import {FormControlProps, FormItem, render} from 'amis-core';
import {parse as cssParse} from 'postcss';
import {parse as cssParse} from 'amis-postcss';
import {PlainObject} from './types';
import {debounce} from 'lodash';
@ -51,27 +51,31 @@ function AmisStyleCodeEditor(props: FormControlProps) {
const [value, setValue] = useState('');
function getCssAndSetValue(classname?: string, name?: string) {
const id = classname?.replace(name + '-', '');
const dom = document.getElementById(id || '') || null;
const content = dom?.innerHTML || '';
const ast = cssParse(content);
const nodes: any[] = [];
ast.nodes.forEach((node: any) => {
const selector = node.selector;
if (!selector.endsWith('.hover') && !selector.endsWith('.active')) {
nodes.push(node);
}
});
ast.nodes = nodes;
try {
const id = classname?.replace(name + '-', '');
const dom = document.getElementById(id || '') || null;
const content = dom?.innerHTML || '';
const ast = cssParse(content);
const nodes: any[] = [];
ast.nodes.forEach((node: any) => {
const selector = node.selector;
if (!selector.endsWith('.hover') && !selector.endsWith('.active')) {
nodes.push(node);
}
});
ast.nodes = nodes;
const css = nodes
.map(node => {
const style = node.nodes.map((n: any) => `${n.prop}: ${n.value};`);
return `${node.selector} {\n ${style.join('\n ')}\n}`;
})
.join('\n\n');
const css = nodes
.map(node => {
const style = node.nodes.map((n: any) => `${n.prop}: ${n.value};`);
return `${node.selector} {\n ${style.join('\n ')}\n}`;
})
.join('\n\n');
setValue(css);
setValue(css);
} catch (error) {
console.error(error);
}
}
useEffect(() => {
@ -136,7 +140,7 @@ function AmisStyleCodeEditor(props: FormControlProps) {
css: newCss
});
} catch (error) {
console.log(error);
console.error(error);
}
});