Merge 689af1d into 10c2d85

ota-meshi · Nov 11, 2021 · 24725a3 · 24725a3
2 parents 10c2d85 + 689af1d
commit 24725a3
Show file tree

Hide file tree

Showing 25 changed files with 1,475 additions and 98 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -57,7 +57,7 @@ The following steps will walk you through the process of creating a new rule.
 
     The `createVisitor` function will be where you implement your rule. The `cssContext` object contains information and methods that you will need for static analysis, reporting, and fixing. Use `messageId`s for report and suggestion messages.
 
-    The [`no-unknown-property`](./lib/rules/no-unknown-property.ts) and [`no-length-zero-unit`](./lib/rules/no-length-zero-unit.ts) rules are good examples to see how we usually implement rules.
+    The [`no-length-zero-unit`](./lib/rules/no-length-zero-unit.ts) and [`no-number-trailing-zeros`](./lib/rules/no-number-trailing-zeros.ts) rules are good examples to see how we usually implement rules.
 
 1.  Test your rule:
 

diff --git a/README.md b/README.md
@@ -19,8 +19,8 @@
 This ESLint plugin provides linting rules to verify CSS definition objects.
 
 - Find the wrong usage of CSS definition objects, and their hints.
-- The plugin support for Vue and JSX (React).
-- The plugin partial support for [styled-components] style objects.
+- Support for Vue and JSX (React).
+- Partial support for [styled-components] style objects.
 
 You can check on the [Online DEMO](https://ota-meshi.github.io/eslint-plugin-css/playground/).
 
@@ -100,6 +100,52 @@ module.exports = {
 The `plugin:css/all` config enables all rules. It's meant for testing, not for production use because it changes with every minor and major version of the plugin. Use it at your own risk.
 *See [lib/configs/all.ts](https://github.com/ota-meshi/eslint-plugin-css/blob/main/lib/configs/all.ts) for more details.*
 
+### How does ESLint detect CSS objects?
+
+All CSS-related rules are applied to code that passes any of the following checks:
+
+- `style={ {} }` JSX attribute expression
+
+    ```jsx
+    const jsx = <div
+        style={ {/* JSX attribute expression */} }
+    />
+    ```
+
+- `v-bind:style="{}"` Vue directive
+
+    ```vue
+    <template>
+        <div
+            v-bind:style="{/* Vue directive */}"
+        />
+    </template>
+    ```
+
+- CSS definition function call for [styled-components](https://styled-components.com/docs/advanced#style-objects)
+
+    e.g.
+
+    ```js
+    import styled, { css, createGlobalStyle } from 'styled-components'
+
+    styled.input({/*CSS*/})
+    styled.input.attrs({})({/*CSS*/})
+    css({/*CSS*/})
+    createGlobalStyle({/*CSS*/})
+    ```
+
+- According to [`settings.css.target` settings](../settings/README.md#target).
+
+However, if you want to take advantage of the rules in any of your custom objects that are CSS objects, you might need to use the special comment `// @css` that marks an object in the next line as a CSS object in any file, e.g.:
+
+```js
+// @css
+const myStyle = {
+  height: '100px'
+}
+```
+
 <!--USAGE_SECTION_END-->
 
 ## :white_check_mark: Rules
@@ -125,11 +171,14 @@ The rules with the following star :star: are included in the `plugin:css/recomme
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [css/no-length-zero-unit](https://ota-meshi.github.io/eslint-plugin-css/rules/no-length-zero-unit.html) | disallow units for zero lengths | :wrench: |
+| [css/prefer-reduce-shorthand-property-box-values](https://ota-meshi.github.io/eslint-plugin-css/rules/prefer-reduce-shorthand-property-box-values.html) | require reduction in box values of shorthand property | :wrench: |
 
 ### Stylistic Issues
 
 | Rule ID | Description |    |
 |:--------|:------------|:---|
+| [css/no-number-trailing-zeros](https://ota-meshi.github.io/eslint-plugin-css/rules/no-number-trailing-zeros.html) | disallow trailing zeros in numbers. | :wrench: |
+| [css/number-leading-zero](https://ota-meshi.github.io/eslint-plugin-css/rules/number-leading-zero.html) | require or disallow a leading zero for fractional numbers less than 1 | :wrench: |
 | [css/property-casing](https://ota-meshi.github.io/eslint-plugin-css/rules/property-casing.html) | enforce specific casing for CSS properties | :wrench: |
 
 <!--RULES_TABLE_END-->

diff --git a/docs/rules/README.md b/docs/rules/README.md
@@ -9,7 +9,7 @@ The rules with the following star :star: are included in the `plugin:css/recomme
 
 <!-- This file is automatically generated in tools/update-docs-rules-index.js, do not change! -->
 
-### Possible Errors
+## Possible Errors
 
 | Rule ID | Description |    |
 |:--------|:------------|:---|
@@ -18,14 +18,17 @@ The rules with the following star :star: are included in the `plugin:css/recomme
 | [css/no-unknown-property](./no-unknown-property.md) | disallow unknown properties | :star: |
 | [css/no-unknown-unit](./no-unknown-unit.md) | disallow unknown units | :star: |
 
-### Best Practices
+## Best Practices
 
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [css/no-length-zero-unit](./no-length-zero-unit.md) | disallow units for zero lengths | :wrench: |
+| [css/prefer-reduce-shorthand-property-box-values](./prefer-reduce-shorthand-property-box-values.md) | require reduction in box values of shorthand property | :wrench: |
 
-### Stylistic Issues
+## Stylistic Issues
 
 | Rule ID | Description |    |
 |:--------|:------------|:---|
+| [css/no-number-trailing-zeros](./no-number-trailing-zeros.md) | disallow trailing zeros in numbers. | :wrench: |
+| [css/number-leading-zero](./number-leading-zero.md) | require or disallow a leading zero for fractional numbers less than 1 | :wrench: |
 | [css/property-casing](./property-casing.md) | enforce specific casing for CSS properties | :wrench: |
diff --git a/docs/rules/no-number-trailing-zeros.md b/docs/rules/no-number-trailing-zeros.md
@@ -0,0 +1,59 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "css/no-number-trailing-zeros"
+description: "disallow trailing zeros in numbers."
+---
+# css/no-number-trailing-zeros
+
+> disallow trailing zeros in numbers.
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule aims to remove unnecessary trailing zeros.
+
+This rule was inspired by [Stylelint's number-no-trailing-zeros rule](https://stylelint.io/user-guide/rules/list/color-no-invalid-hex/).
+
+<eslint-code-block fix>
+
+```js
+/* eslint css/no-number-trailing-zeros: "error" */
+
+/* ✓ GOOD */
+var foo = <div
+  style={
+    {
+      height: '0.5px'
+    }
+  } >
+  </div>
+
+/* ✗ BAD */
+var foo = <div
+  style={
+    {
+      height: '0.50px'
+    }
+  } >
+  </div>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further reading
+
+- [Stylelint - number-no-trailing-zeros]
+
+[Stylelint - number-no-trailing-zeros]: https://stylelint.io/user-guide/rules/list/number-no-trailing-zeros/
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/ota-meshi/eslint-plugin-css/blob/main/lib/rules/no-number-trailing-zeros.ts)
+- [Test source](https://github.com/ota-meshi/eslint-plugin-css/blob/main/tests/lib/rules/no-number-trailing-zeros.ts)
diff --git a/docs/rules/number-leading-zero.md b/docs/rules/number-leading-zero.md
@@ -0,0 +1,68 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "css/number-leading-zero"
+description: "require or disallow a leading zero for fractional numbers less than 1"
+---
+# css/number-leading-zero
+
+> require or disallow a leading zero for fractional numbers less than 1
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule aims to consistently require or disallow leading zeros for fractional numbers less than one.
+
+This rule was inspired by [Stylelint's number-leading-zero rule](https://stylelint.io/user-guide/rules/list/number-leading-zero/).
+
+<eslint-code-block fix>
+
+```js
+/* eslint css/number-leading-zero: "error" */
+
+/* ✓ GOOD */
+var foo = <div
+  style={
+    {
+      height: '0.5px'
+    }
+  } >
+  </div>
+
+/* ✗ BAD */
+var foo = <div
+  style={
+    {
+      height: '.5px'
+    }
+  } >
+  </div>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "css/number-leading-zero": ["error", 
+    "always" // or "never"
+  ]
+}
+```
+
+- `"always"` ... Require always have leading zero.
+- `"never"` ... Disallow leading zero.
+
+## :books: Further reading
+
+- [Stylelint - number-leading-zero]
+
+[Stylelint - number-leading-zero]: https://stylelint.io/user-guide/rules/list/number-leading-zero/
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/ota-meshi/eslint-plugin-css/blob/main/lib/rules/number-leading-zero.ts)
+- [Test source](https://github.com/ota-meshi/eslint-plugin-css/blob/main/tests/lib/rules/number-leading-zero.ts)
diff --git a/docs/rules/prefer-reduce-shorthand-property-box-values.md b/docs/rules/prefer-reduce-shorthand-property-box-values.md
@@ -0,0 +1,59 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "css/prefer-reduce-shorthand-property-box-values"
+description: "require reduction in box values of shorthand property"
+---
+# css/prefer-reduce-shorthand-property-box-values
+
+> require reduction in box values of shorthand property
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule aims to reduce the box values of the shorthand properties.
+
+This rule was inspired by [Stylelint's shorthand-property-no-redundant-values rule](https://stylelint.io/user-guide/rules/list/shorthand-property-no-redundant-values/).
+
+<eslint-code-block fix>
+
+```js
+/* eslint css/prefer-reduce-shorthand-property-box-values: "error" */
+
+/* ✓ GOOD */
+var foo = <div
+  style={
+    {
+      padding: '8px'
+    }
+  } >
+  </div>
+
+/* ✗ BAD */
+var foo = <div
+  style={
+    {
+      padding: '8px 8px 8px 8px'
+    }
+  } >
+  </div>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further reading
+
+- [Stylelint - shorthand-property-no-redundant-values]
+
+[Stylelint - shorthand-property-no-redundant-values]: https://stylelint.io/user-guide/rules/list/shorthand-property-no-redundant-values/
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/ota-meshi/eslint-plugin-css/blob/main/lib/rules/prefer-reduce-shorthand-property-box-values.ts)
+- [Test source](https://github.com/ota-meshi/eslint-plugin-css/blob/main/tests/lib/rules/prefer-reduce-shorthand-property-box-values.ts)
diff --git a/docs/user-guide/README.md b/docs/user-guide/README.md
@@ -61,6 +61,52 @@ module.exports = {
 The `plugin:css/all` config enables all rules. It's meant for testing, not for production use because it changes with every minor and major version of the plugin. Use it at your own risk.
 *See [lib/configs/all.ts](https://github.com/ota-meshi/eslint-plugin-css/blob/main/lib/configs/all.ts) for more details.*
 
+### How does ESLint detect CSS objects?
+
+All CSS-related rules are applied to code that passes any of the following checks:
+
+- `style={ {} }` JSX attribute expression
+
+    ```jsx
+    const jsx = <div
+        style={ {/* JSX attribute expression */} }
+    />
+    ```
+
+- `v-bind:style="{}"` Vue directive
+
+    ```vue
+    <template>
+        <div
+            v-bind:style="{/* Vue directive */}"
+        />
+    </template>
+    ```
+
+- CSS definition function call for [styled-components](https://styled-components.com/docs/advanced#style-objects)
+
+    e.g.
+
+    ```js
+    import styled, { css, createGlobalStyle } from 'styled-components'
+
+    styled.input({/*CSS*/})
+    styled.input.attrs({})({/*CSS*/})
+    css({/*CSS*/})
+    createGlobalStyle({/*CSS*/})
+    ```
+
+- According to [`settings.css.target` settings](../settings/README.md#target).
+
+However, if you want to take advantage of the rules in any of your custom objects that are CSS objects, you might need to use the special comment `// @css` that marks an object in the next line as a CSS object in any file, e.g.:
+
+```js
+// @css
+const myStyle = {
+  height: '100px'
+}
+```
+
 <!--USAGE_SECTION_END-->
 
 See [the rule list](../rules/README.md) to get the `rules` that this plugin provides.

diff --git a/lib/rules/no-dupe-properties.ts b/lib/rules/no-dupe-properties.ts
@@ -17,7 +17,6 @@ export default createRule("no-dupe-properties", {
         schema: [],
         messages: {
             unexpected: "Duplicate property '{{name}}' and '{{other}}'.",
-            unexpectedSame: "Duplicate property '{{name}}'.",
         },
         type: "problem",
     },
@@ -41,7 +40,11 @@ export default createRule("no-dupe-properties", {
                 for (const name of names) {
                     const normalized = normalizePropName(name.name)
                     const already = map.get(normalized)
-                    if (already) {
+                    if (
+                        already &&
+                        // Ignore same name
+                        name.name !== already.name
+                    ) {
                         for (const [report, other] of [
                             [already, name],
                             [name, already],
@@ -50,10 +53,7 @@ export default createRule("no-dupe-properties", {
                                 node:
                                     report.directExpression ||
                                     report.expression,
-                                messageId:
-                                    report.name === other.name
-                                        ? "unexpectedSame"
-                                        : "unexpected",
+                                messageId: "unexpected",
                                 data: { name: report.name, other: other.name },
                             })
                             reported.add(report)