format-demo-stylelint-config 1.0.1

package/README.md

@@ -0,0 +1,22 @@
+# format-demo-markdownlint-config
+
+支持配套的 [stylelint 可共享配置](https://stylelint.io/user-guide/configure)。
+
+## 安装
+
+需要先行安装 [stylelint](https://www.npmjs.com/package/stylelint) �?[stylelint-scss](https://www.npmjs.com/package/stylelint-scss)：
+
+```bash
+npm install format-demo-stylelint-config stylelint stylelint-scss --save-dev
+```
+
+## 使用
+
+在 `.stylelintrc` 中继承本包:
+
+```json
+{
+  "extends": "format-demo-stylelint-config"
+}
+```
+

package/__tests__/fixtures/css-module.scss

@@ -0,0 +1,47 @@
+.commits {
+  padding: 0;
+
+  :global(.ant-timeline-item-content) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #fff1aa;
+
+    &>span {
+      margin-right: 20px;
+      white-space: nowrap;
+      user-select: none;
+    }
+  }
+}
+
+:global(.tree-node-yellow) {
+  :global(.ant-tree-node-content-wrapper) {
+    color: var(--color-yellow) !important;
+  }
+}
+
+:global(.ant-tree-treenode-switcher-close), :global(.tree-node-file) {
+  display: flex;
+  overflow: hidden;
+
+  :global(.ant-tree-switcher) {
+    flex-shrink: 0;
+  }
+  
+  :global(.ant-tree-node-content-wrapper) {
+    flex-shrink: 1;
+    display: inline-flex !important;
+    overflow: hidden;
+
+    :global(.ant-tree-iconEle) {
+      flex-shrink: 0;
+    }
+   
+    :global(.ant-tree-title) {
+      flex-shrink: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}

package/__tests__/fixtures/essential.css

@@ -0,0 +1,58 @@
+@charset "UTF-8";
+@unknown {}
+
+.a {
+  color: #fff1az;
+
+  /**/
+
+  font-weight: 400;
+  color: #fff;
+
+  padding-left: 10px;
+  padding: 20px;
+
+  font-family: 'Times', Times, serif;
+
+  font-family: Helvetica, Arial, Verdana, Tahoma;
+
+  top: calc(1px +2px);
+
+  background: linear-gradient(bottom, #fff, #000);
+}
+
+@keyframes important1 {
+  from {
+    margin-top: 50px;
+  }
+  to {
+    margin-top: 100px !important;
+  }
+}
+
+@media screen and (unknown) {
+  .a {
+    color: #fff;
+  }
+}
+
+@import 'a.css';
+@import 'a.css';
+
+.a {
+  background: #000;;
+  colr: blue;
+}
+// css注释
+.b:unknown {
+  background: #000;
+}
+.b::unknown {
+  background: #000;
+}
+unknown {
+  content: "first
+    second";
+  width: 10pixels;
+  background: #000
+}

package/__tests__/fixtures/index.css

@@ -0,0 +1,33 @@
+.foo {
+    color: #abc;
+}
+
+.selector{padding-left: 15px;}
+
+.selector1 {
+  padding-left :15px;
+
+  background-size: 0,0;
+}
+
+.selector2 {padding-left: 15px;
+}
+.selector3 {
+  padding-left: 15px;}
+
+.selector4 { color: pink; top: 3px; }
+
+.selector5 {
+  width: 0rem;
+
+  color: #AAA;
+  background: #aaaaaa;
+}
+
+#foo {
+  color: #ccc;
+}
+
+/*comment */
+
+@unkown colorTag(#abc);

package/__tests__/fixtures/less-test.less

@@ -0,0 +1,25 @@
+@nice-bg: #abc;
+
+.normal {
+  background: @nice-bg;
+
+  .nest {
+    font-size: 60px
+  }
+}
+
+.my-hover-mixin() {
+  &:hover {
+    border: 1px solid red;
+  }
+}
+.btn {
+  .my-hover-mixin();
+  width: $default-width /2;
+  :global(.ant-table) {
+    font-size: 10px;
+  }
+}
+.extProp:extend(.btn) {
+  background-color:yellowgreen;
+}

package/__tests__/fixtures/sass-test.scss

@@ -0,0 +1,12 @@
+@mixin colorTag ($color1, $color2) {
+  color: $color1;
+  border-color: $color2;
+}
+
+//css注释
+.a {
+  width: $default-width /2;
+
+  @include colorTag(#abc,#bcd);
+  @unkown colorTag(#abc);
+}

package/__tests__/rules-validate.test.js

@@ -0,0 +1,85 @@
+const assert = require('assert');
+const stylelint = require('stylelint');
+const path = require('path');
+
+describe('test/rules-validate.test.js', () => {
+  // 每一个it就是一个jest的小单元
+  // 验证默认值的选项
+  it('Validate default', async () => {
+    const filePaths = [path.join(__dirname, './fixtures/index.css')];
+    const result = await stylelint.lint({
+      configFile: path.join(__dirname, '../index.js'),  //  配置stylelint规则的的路径
+      files: filePaths, //  需要校验的文件路径
+      fix: false, // 是否自动修复，默认为false
+    });
+    if (result && result.errored) {
+      const filesResult = JSON.parse(result.output || '[]') || [];
+      filesResult.forEach((fileResult) => {
+        console.log(`========= ${filePaths} ==========`);
+        console.log(fileResult.warnings);
+      });
+
+      assert.ok(filesResult.length !== 0);
+    }
+  });
+
+  it('Validate sass', async () => {
+    const filePaths = [path.join(__dirname, './fixtures/sass-test.scss')];
+
+    const result = await stylelint.lint({
+      configFile: path.join(__dirname, '../index.js'),
+      files: filePaths,
+      fix: false,
+    });
+
+    if (result && result.errored) {
+      const filesResult = JSON.parse(result.output || '[]') || [];
+      filesResult.forEach((fileResult) => {
+        console.log(`========= ${filePaths} ==========`);
+        console.log(fileResult.warnings);
+      });
+
+      assert.ok(filesResult.length !== 0);
+    }
+  });
+
+  it('Validate less', async () => {
+    const filePaths = [path.join(__dirname, './fixtures/less-test.less')];
+
+    const result = await stylelint.lint({
+      configFile: path.join(__dirname, '../index.js'),
+      files: filePaths,
+      fix: false,
+    });
+
+    if (result && result.errored) {
+      const filesResult = JSON.parse(result.output || '[]') || [];
+      filesResult.forEach((fileResult) => {
+        console.log(`========= ${filePaths} ==========`);
+        console.log(fileResult.warnings);
+      });
+
+      assert.ok(filesResult.length !== 0);
+    }
+  });
+
+  it('Validate css-module', async () => {
+    const filePaths = [path.join(__dirname, './fixtures/css-module.scss')];
+
+    const result = await stylelint.lint({
+      configFile: path.join(__dirname, '../index.js'),
+      files: filePaths,
+      fix: false,
+    });
+
+    if (result && result.errored) {
+      const filesResult = JSON.parse(result.output || '[]') || [];
+      filesResult.forEach((fileResult) => {
+        console.log(`========= ${filePaths} ==========`);
+        console.log(fileResult.warnings);
+      });
+
+      assert.ok(filesResult.length === 0);
+    }
+  });
+});

package/index.js

@@ -0,0 +1,87 @@
+module.exports = {
+  defaultSeverity: 'error',
+  plugins: ['stylelint-scss'],
+  rules: {
+    /**
+     * Possible errors
+     * @link https://stylelint.io/user-guide/rules/#possible-errors
+     */
+    'at-rule-no-unknown': null,
+    'scss/at-rule-no-unknown': true,
+    'block-no-empty': null,
+    'color-no-invalid-hex': true,
+    'comment-no-empty': true,
+    'declaration-block-no-duplicate-properties': [
+      true,
+      {
+        ignore: ['consecutive-duplicates-with-different-values'],
+      },
+    ],
+    'declaration-block-no-shorthand-property-overrides': true,
+    'font-family-no-duplicate-names': true,
+    'function-calc-no-unspaced-operator': true,
+    'function-linear-gradient-no-nonstandard-direction': true,
+    'keyframe-declaration-no-important': true,
+    'media-feature-name-no-unknown': true,
+    'no-descending-specificity': null, // @reason 实际有很多这样用的，且多数人熟悉 css 优先级
+    'no-duplicate-at-import-rules': true,
+    'no-duplicate-selectors': true,
+    'no-empty-source': null,
+    'no-extra-semicolons': true,
+    'no-invalid-double-slash-comments': true,
+    'property-no-unknown': true,
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        ignorePseudoClasses: ['global', 'local', 'export'],
+      },
+    ],
+    'selector-pseudo-element-no-unknown': true,
+    'string-no-newline': true,
+    'unit-no-unknown': [
+      true,
+      {
+        ignoreUnits: ['rpx'],
+      },
+    ],
+
+    /**
+     * Stylistic issues
+     * @link https://stylelint.io/user-guide/rules/list#stylistic-issues
+     */
+    indentation: 2,
+    'block-closing-brace-newline-before': 'always-multi-line',
+    'block-closing-brace-space-before': 'always-single-line',
+    'block-opening-brace-newline-after': 'always-multi-line',
+    'block-opening-brace-space-before': 'always',
+    'block-opening-brace-space-after': 'always-single-line',
+    'color-hex-case': 'lower',
+    'color-hex-length': 'short',
+    'comment-whitespace-inside': 'always',
+    'declaration-colon-space-before': 'never',
+    'declaration-colon-space-after': 'always',
+    'declaration-block-single-line-max-declarations': 1,
+    'declaration-block-trailing-semicolon': [
+      'always',
+      {
+        severity: 'error',
+      },
+    ],
+    'length-zero-no-unit': [
+      true,
+      {
+        ignore: ['custom-properties'],
+      },
+    ],
+    'max-line-length': 100,
+    'selector-max-id': 0,
+    'value-list-comma-space-after': 'always-single-line',
+
+    /**
+     * stylelint-scss rules
+     * @link https://www.npmjs.com/package/stylelint-scss
+     */
+    'scss/double-slash-comment-whitespace-inside': 'always',
+  },
+  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
+};

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "format-demo-stylelint-config",
+  "version": "1.0.1",
+  "description": "印客学院 CSS规范",
+  "main": "index.js",
+  "keywords": [
+    "encode",
+    "style",
+    "lint"
+  ],
+  "scripts": {
+    "test": "jest"
+  },
+  "author": "hyx",
+  "homepage": "https://github.com/Huang-Yux/format_demo#readme",
+  "license": "ISC",
+  "peerDependencies": {
+    "stylelint": ">=8.3.0",
+    "stylelint-scss": ">=2.0.0"
+  },
+  "devDependencies": {
+    "jest": "^29.5.0",
+    "stylelint": "^14.3.0",
+    "stylelint-scss": "^4.1.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Huang-Yux/format_demo.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Huang-Yux/format_demo/issues"
+  },
+  "gitHead": "400e366da374414a0b11d025d7f31d37a6a03643"
+}