feat: support justify-content, align-items, align-self, align-content…

… properties (#628)

* chore: add test files

* feat: support justify-content property

* feat: support align-items property

* feat: support align-self property

* feat: support align-content property

src/__tests__/properties/align-content/flex_context/baseline/test.spec.ts

@@ -0,0 +1,64 @@
+/* eslint-disable sort/object-properties */
+import { stripIndent } from 'common-tags';
+import { getTestRule } from 'jest-preset-stylelint';
+
+import { messages, plugin, ruleName } from '~/rule';
+
+const testRule = getTestRule({
+  plugins: [plugin],
+});
+
+testRule({
+  ruleName,
+  config: [
+    true,
+    {
+      allow: {
+        features: [
+          'properties.align-content',
+          'properties.align-content.flex_context.first_baseline',
+          'properties.align-content.flex_context.last_baseline',
+        ],
+      },
+      browserslist: 'chrome 20',
+    },
+  ],
+  reject: [
+    {
+      code: stripIndent`
+        #id {
+          align-content: baseline;
+        }
+      `,
+      line: 2,
+      column: 18,
+      endLine: 2,
+      endColumn: 26,
+      message: messages.rejected('"baseline" value specified as align-content', 'Chrome 20', ''),
+    },
+    {
+      code: stripIndent`
+        #id {
+          align-content: first baseline;
+        }
+      `,
+      line: 2,
+      column: 24,
+      endLine: 2,
+      endColumn: 32,
+      message: messages.rejected('"baseline" value specified as align-content', 'Chrome 20', ''),
+    },
+    {
+      code: stripIndent`
+        #id {
+          align-content: last baseline;
+        }
+      `,
+      line: 2,
+      column: 23,
+      endLine: 2,
+      endColumn: 31,
+      message: messages.rejected('"baseline" value specified as align-content', 'Chrome 20', ''),
+    },
+  ],
+});

src/__tests__/properties/align-content/flex_context/first_baseline/test.spec.ts

@@ -0,0 +1,33 @@
+/* eslint-disable sort/object-properties */
+import { stripIndent } from 'common-tags';
+import { getTestRule } from 'jest-preset-stylelint';
+
+import { messages, plugin, ruleName } from '~/rule';
+
+const testRule = getTestRule({
+  plugins: [plugin],
+});
+
+testRule({
+  ruleName,
+  config: [
+    true,
+    {
+      browserslist: 'chrome 58',
+    },
+  ],
+  reject: [
+    {
+      code: stripIndent`
+        #id {
+          align-content: first baseline;
+        }
+      `,
+      line: 2,
+      column: 18,
+      endLine: 2,
+      endColumn: 32,
+      message: messages.rejected('"first baseline" value specified as align-content', 'Chrome 58', ''),
+    },
+  ],
+});

src/__tests__/properties/align-content/flex_context/last_baseline/test.spec.ts

@@ -0,0 +1,33 @@
+/* eslint-disable sort/object-properties */
+import { stripIndent } from 'common-tags';
+import { getTestRule } from 'jest-preset-stylelint';
+
+import { messages, plugin, ruleName } from '~/rule';
+
+const testRule = getTestRule({
+  plugins: [plugin],
+});
+
+testRule({
+  ruleName,
+  config: [
+    true,
+    {
+      browserslist: 'chrome 107',
+    },
+  ],
+  reject: [
+    {
+      code: stripIndent`
+        #id {
+          align-content: last baseline;
+        }
+      `,
+      line: 2,
+      column: 18,
+      endLine: 2,
+      endColumn: 31,
+      message: messages.rejected('"last baseline" value specified as align-content', 'Chrome 107', ''),
+    },
+  ],
+});

src/__tests__/properties/align-content/flex_context/safe_unsafe/test.spec.ts

@@ -0,0 +1,45 @@
+/* eslint-disable sort/object-properties */
+import { stripIndent } from 'common-tags';
+import { getTestRule } from 'jest-preset-stylelint';
+
+import { messages, plugin, ruleName } from '~/rule';
+
+const testRule = getTestRule({
+  plugins: [plugin],
+});
+
+testRule({
+  ruleName,
+  config: [
+    true,
+    {
+      browserslist: 'chrome 114',
+    },
+  ],
+  reject: [
+    {
+      code: stripIndent`
+        #id {
+          align-content: safe center;
+        }
+      `,
+      line: 2,
+      column: 18,
+      endLine: 2,
+      endColumn: 22,
+      message: messages.rejected('"safe" value specified as align-content', 'Chrome 114', ''),
+    },
+    {
+      code: stripIndent`
+        #id {
+          align-content: unsafe center;
+        }
+      `,
+      line: 2,
+      column: 18,
+      endLine: 2,
+      endColumn: 24,
+      message: messages.rejected('"unsafe" value specified as align-content', 'Chrome 114', ''),
+    },
+  ],
+});

src/__tests__/properties/align-content/flex_context/space-evenly/test.spec.ts

@@ -0,0 +1,33 @@
+/* eslint-disable sort/object-properties */
+import { stripIndent } from 'common-tags';
+import { getTestRule } from 'jest-preset-stylelint';
+
+import { messages, plugin, ruleName } from '~/rule';
+
+const testRule = getTestRule({
+  plugins: [plugin],
+});
+
+testRule({
+  ruleName,
+  config: [
+    true,
+    {
+      browserslist: 'chrome 59',
+    },
+  ],
+  reject: [
+    {
+      code: stripIndent`
+        #id {
+          align-content: space-evenly;
+        }
+      `,
+      line: 2,
+      column: 18,
+      endLine: 2,
+      endColumn: 30,
+      message: messages.rejected('"space-evenly" value specified as align-content', 'Chrome 59', ''),
+    },
+  ],
+});

src/__tests__/properties/align-content/flex_context/start_end/test.spec.ts

@@ -0,0 +1,96 @@
+/* eslint-disable sort/object-properties */
+import { stripIndent } from 'common-tags';
+import { getTestRule } from 'jest-preset-stylelint';
+
+import { messages, plugin, ruleName } from '~/rule';
+
+const testRule = getTestRule({
+  plugins: [plugin],
+});
+
+testRule({
+  ruleName,
+  config: [
+    true,
+    {
+      allow: {
+        features: ['properties.align-content.flex_context.safe_unsafe'],
+      },
+      browserslist: 'chrome 92',
+    },
+  ],
+  reject: [
+    {
+      code: stripIndent`
+        #id {
+          align-content: start;
+        }
+      `,
+      line: 2,
+      column: 18,
+      endLine: 2,
+      endColumn: 23,
+      message: messages.rejected('"start" value specified as align-content', 'Chrome 92', ''),
+    },
+    {
+      code: stripIndent`
+        #id {
+          align-content: safe start;
+        }
+      `,
+      line: 2,
+      column: 23,
+      endLine: 2,
+      endColumn: 28,
+      message: messages.rejected('"start" value specified as align-content', 'Chrome 92', ''),
+    },
+    {
+      code: stripIndent`
+        #id {
+          align-content: unsafe start;
+        }
+      `,
+      line: 2,
+      column: 25,
+      endLine: 2,
+      endColumn: 30,
+      message: messages.rejected('"start" value specified as align-content', 'Chrome 92', ''),
+    },
+    {
+      code: stripIndent`
+        #id {
+          align-content: end;
+        }
+      `,
+      line: 2,
+      column: 18,
+      endLine: 2,
+      endColumn: 21,
+      message: messages.rejected('"end" value specified as align-content', 'Chrome 92', ''),
+    },
+    {
+      code: stripIndent`
+        #id {
+          align-content: safe end;
+        }
+      `,
+      line: 2,
+      column: 23,
+      endLine: 2,
+      endColumn: 26,
+      message: messages.rejected('"end" value specified as align-content', 'Chrome 92', ''),
+    },
+    {
+      code: stripIndent`
+        #id {
+          align-content: unsafe end;
+        }
+      `,
+      line: 2,
+      column: 25,
+      endLine: 2,
+      endColumn: 28,
+      message: messages.rejected('"end" value specified as align-content', 'Chrome 92', ''),
+    },
+  ],
+});

src/__tests__/properties/align-content/flex_context/stretch/test.spec.ts

@@ -0,0 +1,33 @@
+/* eslint-disable sort/object-properties */
+import { stripIndent } from 'common-tags';
+import { getTestRule } from 'jest-preset-stylelint';
+
+import { messages, plugin, ruleName } from '~/rule';
+
+const testRule = getTestRule({
+  plugins: [plugin],
+});
+
+testRule({
+  ruleName,
+  config: [
+    true,
+    {
+      browserslist: 'chrome 56',
+    },
+  ],
+  reject: [
+    {
+      code: stripIndent`
+        #id {
+          align-content: stretch;
+        }
+      `,
+      line: 2,
+      column: 18,
+      endLine: 2,
+      endColumn: 25,
+      message: messages.rejected('"stretch" value specified as align-content', 'Chrome 56', ''),
+    },
+  ],
+});

src/__tests__/selectors/right/test.skip.spec.ts → src/__tests__/properties/align-content/test.spec.ts

@@ -13,23 +13,24 @@ testRule({
   config: [
     true,
     {
-      browserslist: 'chrome 17',
+      browserslist: 'chrome 20',
     },
   ],
   reject: [
     {
       code: stripIndent`
-        @page :right {
+        #id {
+          align-content: normal;
         }
       `,
-      line: 1,
-      column: 7,
-      endLine: 1,
-      endColumn: 12,
+      line: 2,
+      column: 3,
+      endLine: 2,
+      endColumn: 16,
       message: messages.rejected(
-        '":right" pseudo-class',
-        'Chrome 17',
-        'https://developer.mozilla.org/docs/Web/CSS/:right',
+        '"align-content" property',
+        'Chrome 20',
+        'https://developer.mozilla.org/docs/Web/CSS/align-content',
       ),
     },
   ],