china-diff 1.0.1

package/.gitattributes

@@ -0,0 +1 @@
+* text=auto

package/.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+dist

package/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 120
+}

package/README.md

@@ -0,0 +1 @@
+

package/build/css.ts

@@ -0,0 +1,293 @@
+import fs from 'fs';
+
+export interface Rule {
+  match: string;
+  build(outputs: string[], selector: string, value: string): void;
+}
+
+export const rules: Rule[] = [
+  {
+    match: '.margin',
+    build: (outputs: string[], selector: string, value: string) => {
+      outputs.push(`${selector} { margin: ${value} }`);
+      outputs.push(`${selector.replace('margin', 'margin-t')} { margin-top: ${value}; }`);
+      outputs.push(`${selector.replace('margin', 'margin-r')} { margin-right: ${value}; }`);
+      outputs.push(`${selector.replace('margin', 'margin-b')} { margin-bottom: ${value}; }`);
+      outputs.push(`${selector.replace('margin', 'margin-l')} { margin-left: ${value}; }`);
+      outputs.push(`${selector.replace('margin', 'margin-x')} { margin-left: ${value}; margin-right: ${value}; }`);
+      outputs.push(`${selector.replace('margin', 'margin-y')} { margin-top: ${value}; margin-bottom: ${value}; }\n`);
+
+      outputs.push(`${selector.replace('margin', '-margin-t')} { margin-top: -${value}; }`);
+      outputs.push(`${selector.replace('margin', '-margin-r')} { margin-right: -${value}; }`);
+      outputs.push(`${selector.replace('margin', '-margin-b')} { margin-bottom: -${value}; }`);
+      outputs.push(`${selector.replace('margin', '-margin-l')} { margin-left: -${value}; }`);
+
+      outputs.push(`${selector.replace('margin', 'padding-m')} { padding: ${value}; }`);
+      outputs.push(`${selector.replace('margin', 'padding-m-t')} { padding-top: ${value}; }`);
+      outputs.push(`${selector.replace('margin', 'padding-m-r')} { padding-right: ${value}; }`);
+      outputs.push(`${selector.replace('margin', 'padding-m-b')} { padding-bottom: ${value}; }`);
+      outputs.push(`${selector.replace('margin', 'padding-m-l')} { padding-left: ${value}; }`);
+      outputs.push(`${selector.replace('margin', 'padding-m-x')} { padding-left: ${value}; padding-right: ${value}; }`);
+      outputs.push(
+        `${selector.replace('margin', 'padding-m-y')} { padding-top: ${value}; padding-bottom: ${value}; }\n`,
+      );
+    },
+  },
+  {
+    match: '.border-c',
+    build: (outputs: string[], selector: string, value: string) => {
+      if (selector === '.border-c') {
+        outputs.push(`.border { border-color: ${value} }`);
+        outputs.push(`.border-t { border-top-color: ${value} }`);
+        outputs.push(`.border-r { border-right-color: ${value} }`);
+        outputs.push(`.border-b { border-bottom-color: ${value} }`);
+        outputs.push(`.border-l { border-left-color: ${value} }`);
+      }
+
+      outputs.push(`${selector} { border-color: ${value} }`);
+      outputs.push(`${selector.replace('border-c', 'border-t-c')} { border-top-color: ${value}; }`);
+      outputs.push(`${selector.replace('border-c', 'border-r-c')} { border-right-color: ${value}; }`);
+      outputs.push(`${selector.replace('border-c', 'border-b-c')} { border-bottom-color: ${value}; }`);
+      outputs.push(`${selector.replace('border-c', 'border-l-c')} { border-left-color: ${value}; }`);
+      outputs.push(
+        `${selector.replace('border-c', 'border-x-c')} { border-left-color: ${value}; border-right-color: ${value}; }`,
+      );
+      outputs.push(
+        `${selector.replace('border-c', 'border-y-c')} { border-top-color: ${value}; border-bottom-color: ${value}; }`,
+      );
+    },
+  },
+  {
+    match: '.border-s',
+    build: (outputs: string[], selector: string, value: string) => {
+      outputs.push(`${selector} { border-style: ${value} }`);
+      outputs.push(`${selector.replace('border-s', 'border-t-s')} { border-top-style: ${value}; }`);
+      outputs.push(`${selector.replace('border-s', 'border-r-s')} { border-right-style: ${value}; }`);
+      outputs.push(`${selector.replace('border-s', 'border-b-s')} { border-bottom-style: ${value}; }`);
+      outputs.push(`${selector.replace('border-s', 'border-l-s')} { border-left-style: ${value}; }`);
+      outputs.push(
+        `${selector.replace('border-s', 'border-x-s')} { border-left-style: ${value}; border-right-style: ${value}; }`,
+      );
+      outputs.push(
+        `${selector.replace('border-s', 'border-y-s')} { border-top-style: ${value}; border-bottom-style: ${value}; }`,
+      );
+    },
+  },
+  {
+    match: '.border',
+    build: (outputs: string[], selector: string, value: string) => {
+      outputs.push(`${selector} { border-width: ${value}; border-style: solid; }`);
+      outputs.push(
+        `${selector.replace('border', 'border-t')} { border-top-width: ${value}; border-top-style: solid; }`,
+      );
+      outputs.push(
+        `${selector.replace('border', 'border-r')} { border-right-width: ${value}; border-right-style: solid; }`,
+      );
+      outputs.push(
+        `${selector.replace('border', 'border-b')} { border-bottom-width: ${value}; border-bottom-style: solid; }`,
+      );
+      outputs.push(
+        `${selector.replace('border', 'border-l')} { border-left-width: ${value}; border-left-style: solid; }`,
+      );
+      outputs.push(
+        `${selector.replace('border', 'border-x')} { border-left-width: ${value}; border-right-width: ${value}; border-left-style: solid; border-right-style: solid; }`,
+      );
+      outputs.push(
+        `${selector.replace('border', 'border-y')} { border-top-width: ${value}; border-bottom-width: ${value}; border-top-style: solid; border-bottom-style: solid; }`,
+      );
+    },
+  },
+  {
+    match: '.round',
+    build: (outputs: string[], selector: string, value: string) => {
+      outputs.push(`${selector} { border-radius: ${value} }`);
+    },
+  },
+  {
+    match: '.padding',
+    build: (outputs: string[], selector: string, value: string) => {
+      outputs.push(`${selector} { padding: ${value} }`);
+      outputs.push(`${selector.replace('padding', 'padding-t')} { padding-top: ${value}; }`);
+      outputs.push(`${selector.replace('padding', 'padding-r')} { padding-right: ${value}; }`);
+      outputs.push(`${selector.replace('padding', 'padding-b')} { padding-bottom: ${value}; }`);
+      outputs.push(`${selector.replace('padding', 'padding-l')} { padding-left: ${value}; }`);
+      outputs.push(`${selector.replace('padding', 'padding-x')} { padding-left: ${value}; padding-right: ${value}; }`);
+      outputs.push(
+        `${selector.replace('padding', 'padding-y')} { padding-top: ${value}; padding-bottom: ${value}; }\n`,
+      );
+    },
+  },
+  {
+    match: '.bg-c',
+    build: (outputs: string[], selector: string, value: string) => {
+      outputs.push(`${selector} { background-color: ${value} }`);
+    },
+  },
+  {
+    match: '.color',
+    build: (outputs: string[], selector: string, value: string) => {
+      outputs.push(`${selector} { color: ${value} }`);
+    },
+  },
+  {
+    match: '.font-s',
+    build: (outputs: string[], selector: string, value: string) => {
+      outputs.push(`${selector} { font-size: ${value} }`);
+    },
+  },
+  {
+    match: '.font',
+    build: (outputs: string[], selector: string, value: string) => {
+      outputs.push(`${selector} { font-weight: ${value} }`);
+    },
+  },
+  {
+    match: '.icon-c',
+    build: (outputs: string[], selector: string, value: string) => {
+      if (selector === '.icon-c') {
+        outputs.unshift(`body { stroke: ${value}; fill: ${value}; }\n.icon { stroke: inherit; fill: inherit; }\n`);
+      }
+
+      outputs.push(`${selector} { stroke: ${value}; fill: ${value}; }`);
+    },
+  },
+  {
+    match: '.icon-s',
+    build: (outputs: string[], selector: string, value: string) => {
+      if (selector === '.icon-s') {
+        outputs.unshift(`.icon { width: ${value}; height: ${value}; }\n`);
+      }
+
+      outputs.push(`${selector} .icon { width: ${value}; height: ${value}; }`);
+      outputs.push(`${selector}.icon { width: ${value}; height: ${value}; }`);
+    },
+  },
+  {
+    match: '.button',
+    build: (outputs: string[], selector: string, value: string) => {
+      outputs.push(`${selector} { ${value} }`);
+    },
+  },
+  {
+    match: '.link',
+    build: (outputs: string[], selector: string, value: string) => {
+      if (selector === '.link') {
+        outputs.push(`a, .link { ${value} }`);
+      } else {
+        outputs.push(`${selector} { ${value} }`);
+      }
+    },
+  },
+];
+
+const findRule = (name: string) => {
+  for (let i = 0, l = rules.length; i < l; i++) {
+    if (name.startsWith(rules[i].match)) {
+      return rules[i];
+    }
+  }
+};
+
+const parse = (rule: Rule, outputs: string[], selectorPrefix: string, name: string, value: string) => {
+  if (name.endsWith('-hover')) {
+    rule.build(outputs, selectorPrefix + name + ':hover', value);
+    rule.build(outputs, selectorPrefix + '.hover:hover ' + name, value);
+    return;
+  }
+
+  if (name.endsWith('-active')) {
+    rule.build(outputs, selectorPrefix + name + ':active', value);
+    rule.build(outputs, selectorPrefix + '.active:active ' + name, value);
+    return;
+  }
+
+  if (name.endsWith('-focus')) {
+    rule.build(outputs, selectorPrefix + name + ':focus', value);
+    rule.build(outputs, selectorPrefix + '.focus:focus ' + name, value);
+    return;
+  }
+
+  if (name.endsWith('-selected')) {
+    rule.build(outputs, selectorPrefix + name + '.selected', value);
+    rule.build(outputs, selectorPrefix + '.selected ' + name, value);
+    return;
+  }
+
+  rule.build(outputs, selectorPrefix + name, value);
+};
+
+/**
+ * 解析 CSS 规范生成原子样式
+ *
+ * @param cssRuleFile CSS 规范文件路径（markdown规范文档）
+ * @param cssFile 写 css 文件路径
+ */
+export const buildCSS = (cssRuleFile: string, cssFile?: string) => {
+  let css = fs.readFileSync(cssRuleFile, 'utf8');
+  let lines = css.split(/\r?\n\s*/);
+  let selectorPrefix = '';
+  let outputs = [];
+
+  for (let i = 0, l = lines.length; i < l; i++) {
+    let line = lines[i].trim();
+
+    switch (line[0] || '') {
+      case '.':
+        let index = line.indexOf('{');
+        let name, value, rule: Rule;
+
+        // 样式组
+        if (index > 0 && (name = line.slice(0, index).trim()) && (rule = findRule(name))) {
+          value = line.slice(index + 1);
+
+          if ((value = value.replace(/}\s*\;*\s*/, '').trim())) {
+            rule.build(outputs, selectorPrefix + name, value);
+          }
+
+          continue;
+        }
+
+        // 单样式值
+        if ((index = line.indexOf(':')) > 0 && (name = line.slice(0, index).trim()) && (rule = findRule(name))) {
+          value = line
+            .slice(index + 1)
+            .replace(/;\s*/g, '')
+            .trim();
+
+          if (value && value !== '#') {
+            parse(rule, outputs, selectorPrefix, name, value);
+          }
+
+          continue;
+        }
+
+        console.error('不合法的格式：' + lines[i]);
+        break;
+
+      case '+': // 上级选择器
+        selectorPrefix = line.slice(1).trim() + ' ';
+        outputs.push('\n');
+        break;
+
+      case '#': // 新的分组
+        selectorPrefix = '';
+        outputs.push('\n');
+        break;
+
+      case '>':
+      case '':
+        break;
+
+      default:
+        console.error('不合法的格式：' + lines[i]);
+    }
+  }
+
+  css = outputs.join('\n');
+
+  if (cssFile) {
+    fs.writeFileSync(cssFile, css, 'utf8');
+  }
+
+  return css;
+};

package/build/icons.ts

@@ -0,0 +1,108 @@
+import fs from 'fs';
+import path from 'path';
+
+/**
+ * 从指定 svg 文件读取 symbol 内容
+ *
+ * @param svgFile 指定 svg 文件
+ * @param removeColor 去色标记 fill: 去填充色  stroke：去描边色  both：都去
+ */
+export const readIconFile = (svgFile: string, removeColor?: 'fill' | 'stroke' | 'both'): string => {
+  let name = path.basename(svgFile).replace('.svg', '');
+  let svg = fs.readFileSync(svgFile, 'utf8');
+  let index = svg.indexOf(' viewBox="');
+  let viewBox = svg.slice(index, (index = svg.indexOf('"', index + 12) + 1));
+  let content = svg.slice(svg.indexOf('>', index) + 1, svg.lastIndexOf('</svg>'));
+  let hasStroke = content.indexOf(' stroke="') > 0;
+  let hasFill = content.indexOf(' fill="') > 0;
+
+  // 没有描边
+  if (!hasStroke) {
+    // 强制禁止外部修改描边
+    viewBox += ' stroke="none"';
+  } else if (!hasFill) {
+    // 没有填充则强制禁止外部修改填充
+    viewBox += ' fill="none"';
+  }
+
+  if (removeColor) {
+    // 去填充色
+    if (hasFill && removeColor !== 'stroke') {
+      content = content.replace(/ fill=\"[^"]+\"/g, '');
+    }
+
+    // 去描边色
+    if (hasStroke && removeColor !== 'fill') {
+      content = content.replace(/ stroke=\"[^"]+\"/g, '');
+    }
+  }
+
+  return `<symbol id="icon-${name}"${viewBox}>${content}</symbol>`;
+};
+
+/**
+ * 从指定图标目录读取 svg symbol 内容
+ *
+ * @param svgDirectory 指定 svg 目录
+ * @param removeColor 去色标记 fill: 去填充色  stroke：去描边色  both：都去
+ */
+export const readIconsDirectory = (svgDirectory: string, removeColor?: 'fill' | 'stroke' | 'both'): string => {
+  const outputs = [];
+  const files = fs.readdirSync(svgDirectory);
+
+  for (let i = 0, l = files.length; i < l; i++) {
+    let file = path.join(svgDirectory, files[i]);
+
+    if (path.extname(file) === '.svg') {
+      outputs.push(readIconFile(file, removeColor));
+    }
+  }
+
+  return outputs.join('\n');
+};
+
+/**
+ * 把图标 symbol 内容写入 html 文件
+ *
+ * @param htmlFile html 文件路径
+ * @param symbols 图标 symbol 集合
+ */
+export const writeIconsToHtml = (htmlFile: string, symbols: string) => {
+  let html = fs.readFileSync(htmlFile, 'utf8');
+  let index = html.indexOf('<svg id="ICONS" ');
+
+  if (index > 0) {
+    let start = html.indexOf('>', index) + 1;
+    let end = html.indexOf('</svg>', start);
+
+    html = html.slice(0, start) + '\n' + symbols + '\n' + html.slice(end);
+  } else {
+    let start = html.indexOf('>', html.indexOf('<body')) + 1;
+
+    html =
+      html.slice(0, start) +
+      '\n<svg id="ICONS" aria-hidden="true" style="position: absolute; width: 0px; height: 0px; overflow: hidden;" xmlns="http://www.w3.org/2000/svg">' +
+      symbols +
+      '\n</svg>' +
+      html.slice(start);
+  }
+
+  fs.writeFileSync(htmlFile, html, 'utf8');
+};
+
+/**
+ * 写 svg 图标到模块文件
+ *
+ * @param moduleFile 模块文件名
+ * @param symbols svg 图标内容
+ */
+export const writeIconsModule = (moduleFile: string, symbols: string) => {
+  fs.writeFileSync(
+    moduleFile,
+    `import { loadSvgIcons } from 'china-diff';
+
+loadSvgIcons(\`${symbols}\`);
+`,
+    'utf8',
+  );
+};

package/css/all.css

@@ -0,0 +1,8 @@
+@import url(base.css);
+
+@import url(icon.css);
+
+@import url(combobox.css);
+@import url(carousel.css);
+
+@import url(atomic/all.css);

package/css/atomic/align.css

@@ -0,0 +1,35 @@
+.text-align-start {
+  text-align: start;
+}
+
+.text-align-center {
+  text-align: center;
+}
+
+.text-align-right {
+  text-align: right;
+}
+
+.vertical-align-top {
+  vertical-align: top;
+}
+
+.vertical-align-middle {
+  vertical-align: middle;
+}
+
+.vertical-align-right {
+  vertical-align: right;
+}
+
+.vertical-align-baseline {
+  vertical-align: baseline;
+}
+
+.vertical-align-text-top {
+  vertical-align: text-top;
+}
+
+.vertical-align-text-bottom {
+  vertical-align: text-bottom;
+}

package/css/atomic/all.css

@@ -0,0 +1,13 @@
+@import url(display.css);
+@import url(position.css);
+@import url(align.css);
+
+@import url(flex.css);
+
+@import url(overflow.css);
+
+@import url(cursor.css);
+
+@import url(hidden.css);
+
+@import url(other.css);

package/css/atomic/cursor.css

@@ -0,0 +1,7 @@
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.cursor-default {
+  cursor: default;
+}

package/css/atomic/display.css

@@ -0,0 +1,11 @@
+.hidden {
+  display: none;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}

package/css/atomic/flex.css

@@ -0,0 +1,124 @@
+.flex {
+  display: flex;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-row-reverse {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.flex-column-reverse {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.flex-auto {
+  flex: auto;
+}
+
+.flex-none {
+  flex: none;
+}
+
+.justify-normal {
+  justify-content: normal;
+}
+
+.justify-start {
+  justify-items: flex-start;
+  justify-content: flex-start;
+}
+
+.justify-end {
+  justify-items: flex-end;
+  justify-content: flex-end;
+}
+
+.justify-center {
+  justify-items: center;
+  justify-content: center;
+}
+
+.justify-space-between {
+  justify-content: space-between;
+}
+
+.justify-space-around {
+  justify-content: space-around;
+}
+
+.justify-space-evenly {
+  justify-content: space-evenly;
+}
+
+.justify-stretch {
+  justify-items: stretch;
+  justify-content: stretch;
+}
+
+.align-normal {
+  align-items: normal;
+  align-content: normal;
+}
+
+.align-center {
+  align-items: center;
+  align-content: center;
+}
+
+.align-start {
+  align-items: flex-start;
+  align-content: flex-start;
+}
+
+.align-end {
+  align-items: flex-end;
+  align-content: flex-end;
+}
+
+.align-space-between {
+  align-content: space-between;
+}
+
+.align-space-around {
+  align-content: space-around;
+}
+
+.align-space-evenly {
+  align-content: space-evenly;
+}
+
+.align-baseline {
+  align-content: baseline;
+}
+
+.align-stretch {
+  align-items: stretch;
+  align-content: stretch;
+}

package/css/atomic/hidden.css

@@ -0,0 +1,37 @@
+.hidden {
+  display: none;
+}
+
+.hover:hover .hidden-hover,
+.hidden-hover:hover {
+  display: none;
+}
+
+.active:active .hidden-active,
+.hidden-active:active {
+  display: none;
+}
+
+.selected .hidden-selected,
+.hidden-selected.selected {
+  display: none;
+}
+
+.no-hidden {
+  display: unset;
+}
+
+.hover:hover .no-hidden-hover,
+.no-hidden-hover:hover {
+  display: unset;
+}
+
+.active:active .no-hidden-active,
+.no-hidden-active:active {
+  display: unset;
+}
+
+.selected .no-hidden-selected,
+.no-hidden-selected.selected {
+  display: unset;
+}

package/css/atomic/other.css

@@ -0,0 +1,23 @@
+.width-auto {
+  width: auto;
+}
+
+.width-100 {
+  width: 100%;
+}
+
+.height-auto {
+  height: auto;
+}
+
+.height-100 {
+  height: 100%;
+}
+
+.border-none {
+  border: none;
+}
+
+.padding-0 {
+  padding: 0;
+}