chore: integrate stylelint

wso2 · Feb 13, 2023 · 2e320ee · 2e320ee
1 parent e34dc02
commit 2e320ee
Show file tree

Hide file tree

Showing 21 changed files with 628 additions and 22 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -14,5 +14,9 @@
     "typescriptreact",
     "html",
     "vue"
-  ]
+  ],
+  "css.validate": false,
+  "less.validate": false,
+  "scss.validate": false,
+  "stylelint.validate": ["css", "scss"]
 }
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -59,6 +59,14 @@ These developer tools will help you to have a better developer experience since
     * [Download for Webstorm](https://www.jetbrains.com/help/webstorm/eslint.html)
     * [Download for VS Code](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
 
+#### Stylelint
+
+* Type 🧰 : IDE Extension
+* Description 🗒️ : Static code analysis tool for Stylesheets. 
+* Download Links 🔗
+    * [Setup for Webstorm](https://www.jetbrains.com/help/webstorm/using-stylelint-code-quality-tool.html)
+    * [Download for VS Code](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
+
 #### ShellCheck
 
 * Type 🧰 : IDE Extension

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -28,7 +28,9 @@
   "scripts": {
     "build": "rollup -c",
     "build-storybook": "build-storybook --no-manager-cache",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint": "pnpm lint:es && pnpm lint:styles",
+    "lint:es": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint:styles": "stylelint 'src/**/*.{css,scss,sass}' --config stylelint.config.cjs --allow-empty-input",
     "start": "pnpm storybook",
     "storybook": "start-storybook -p 6006",
     "test": "NODE_OPTIONS=--experimental-vm-modules pnpm jest --passWithNoTests",
@@ -75,6 +77,7 @@
     "@types/testing-library__jest-dom": "^5.14.5",
     "@wso2/eslint-plugin": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?27de3d37a97801704a42e407342eca01dfd00ff6",
     "@wso2/prettier-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?27de3d37a97801704a42e407342eca01dfd00ff6",
+    "@wso2/stylelint-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?27de3d37a97801704a42e407342eca01dfd00ff6",
     "babel-jest": "^29.3.1",
     "babel-loader": "^8.3.0",
     "eslint": "8.25.0",
@@ -95,6 +98,7 @@
     "storybook-addon-designs": "^6.3.1",
     "storybook-addon-themes": "^6.1.0",
     "storybook-dark-mode": "^1.1.2",
+    "stylelint": "^15.1.0",
     "ts-dedent": "^2.2.0",
     "ts-jest": "^29.0.3",
     "tsconfig-paths-webpack-plugin": "^4.0.0",

diff --git a/packages/react/src/components/AppBar/app-bar.scss b/packages/react/src/components/AppBar/app-bar.scss
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.oxygen-button {
+  font-size: 1rem;
+  padding: 8px 16px;
+}
diff --git a/packages/react/src/components/Box/box.scss b/packages/react/src/components/Box/box.scss
@@ -16,4 +16,6 @@
  * under the License.
  */
 
-.oxygen-box {}
+.oxygen-box {
+  /* Add Styles */
+}
diff --git a/packages/react/src/components/Button/button.scss b/packages/react/src/components/Button/button.scss
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.oxygen-button {
+  font-size: 1rem;
+  padding: 8px 16px;
+}
diff --git a/packages/react/src/components/ColorModeToggle/color-mode-toggle.scss b/packages/react/src/components/ColorModeToggle/color-mode-toggle.scss
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.oxygen-color-mode-toggle {
+  /* Add Styles */
+}
diff --git a/packages/react/src/components/Grid/grid.scss b/packages/react/src/components/Grid/grid.scss
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.oxygen-grid {
+  /* Add Styles */
+}
diff --git a/packages/react/src/components/IconButton/icon-button.scss b/packages/react/src/components/IconButton/icon-button.scss
@@ -16,4 +16,6 @@
  * under the License.
  */
 
-.oxygen-icon-button {}
+.oxygen-icon-button {
+  /* Add Styles */
+}
diff --git a/packages/react/src/components/Link/link.scss b/packages/react/src/components/Link/link.scss
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.oxygen-link {
+  /* Add Styles */
+}
diff --git a/packages/react/src/components/List/list.scss b/packages/react/src/components/List/list.scss
@@ -16,4 +16,6 @@
  * under the License.
  */
 
-.oxygen-list {}
+.oxygen-list {
+  /* Add Styles */
+}
diff --git a/packages/react/src/components/ListItem/list-item.scss b/packages/react/src/components/ListItem/list-item.scss
@@ -16,4 +16,6 @@
  * under the License.
  */
 
-.oxygen-list-item {}
+.oxygen-list-item {
+  /* Add Styles */
+}
diff --git a/packages/react/src/components/ListItemButton/list-item-button.scss b/packages/react/src/components/ListItemButton/list-item-button.scss
@@ -16,4 +16,6 @@
  * under the License.
  */
 
-.oxygen-list-item-button {}
+.oxygen-list-item-button {
+  /* Add Styles */
+}
diff --git a/packages/react/src/components/ListItemIcon/list-item-icon.scss b/packages/react/src/components/ListItemIcon/list-item-icon.scss
@@ -16,4 +16,6 @@
  * under the License.
  */
 
-.oxygen-list-item-icon {}
+.oxygen-list-item-icon {
+  /* Add Styles */
+}
diff --git a/packages/react/src/components/ListItemText/list-item-text.scss b/packages/react/src/components/ListItemText/list-item-text.scss
@@ -16,4 +16,6 @@
  * under the License.
  */
 
-.oxygen-list-item-text {}
+.oxygen-list-item-text {
+  /* Add Styles */
+}
diff --git a/packages/react/src/components/SignIn/sign-in.scss b/packages/react/src/components/SignIn/sign-in.scss
@@ -18,8 +18,7 @@
 
 .oxygen-sign-in {
   display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
+  flex-flow: column nowrap;
   align-content: center;
   justify-content: center;
   align-items: center;

diff --git a/packages/react/src/components/TextField/text-field.scss b/packages/react/src/components/TextField/text-field.scss
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.oxygen-text-field {
+  /* Add Styles */
+}
diff --git a/packages/react/src/components/Tooltip/tooltip.scss b/packages/react/src/components/Tooltip/tooltip.scss
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.oxygen-tooltip {
+  /* Add Styles */
+}
diff --git a/packages/react/src/components/Typography/typography.scss b/packages/react/src/components/Typography/typography.scss
@@ -16,4 +16,6 @@
  * under the License.
  */
 
-.oxygen-typography {}
+.oxygen-typography {
+  /* Add Styles */
+}
diff --git a/packages/react/stylelint.config.cjs b/packages/react/stylelint.config.cjs
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+module.exports = {
+  extends: ['@wso2/stylelint-config'],
+  ignoreFiles: ['**/*.js', '**/*.cjs'],
+};