Merge pull request #18 from brionmario/feat-stylelint-support

chore: add `stylelint` support
wso2 · Feb 13, 2023 · 4f9c8e8 · 4f9c8e8
2 parents e34dc02 + 8b67c94
commit 4f9c8e8
Show file tree

Hide file tree

Showing 63 changed files with 1,103 additions and 212 deletions.
diff --git a/.github/workflows/builder.yml b/.github/workflows/builder.yml
@@ -53,6 +53,10 @@ jobs:
         id: install-dependencies
         run: pnpm install
 
+      - name: ⏳ Lint All Files
+        id: lint
+        run: pnpm lint
+
       - name: 🏗️ Build
         id: build
         run:  pnpm build
diff --git a/.github/workflows/pr-builder.yml b/.github/workflows/pr-builder.yml
@@ -68,9 +68,13 @@ jobs:
         id: build
         run:  pnpm build
 
-      - name: ⏳ Lint All Files
+      - name: 🌳 Lint ES Files
         id: lint-with-eslint
-        run: pnpm nx affected --base=${{ env.NX_BASE }} --head=${{ env.NX_HEAD }} --target=lint --parallel=3
+        run: pnpm nx affected --base=${{ env.NX_BASE }} --head=${{ env.NX_HEAD }} --target=lint:es --parallel=3
+
+      - name: 💅 Lint Styles
+        id: lint-with-stylelint
+        run: pnpm nx affected --base=${{ env.NX_BASE }} --head=${{ env.NX_HEAD }} --target=lint:styles --parallel=3
 
   typecheck:
     name: ʦ Typecheck (STATIC ANALYSIS)

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/docs/package.json b/docs/package.json
@@ -20,7 +20,9 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "pnpm lint:es && pnpm lint:styles",
+    "lint:es": "next lint",
+    "lint:styles": "stylelint 'styles/**/*.{css,scss,sass}' --config stylelint.config.cjs --allow-empty-input",
     "typecheck": "tsc --noemit -p tsconfig.json"
   },
   "dependencies": {
@@ -37,8 +39,10 @@
     "typescript": "4.9.3"
   },
   "devDependencies": {
-    "@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/eslint-plugin": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/eslint-plugin?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3",
+    "@wso2/prettier-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/prettier-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3",
+    "@wso2/stylelint-config": "https://gitpkg.now.sh/brionmario/wso2-ui-configs/packages/stylelint-config?b63a99b1c18bac2d9fc856a73b30a8ecaed6b8f3",
+    "stylelint": "^15.1.0"
   },
   "private": true
 }
diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx
@@ -16,7 +16,8 @@
  * under the License.
  */
 
-import '../styles/globals.css';
+import '../styles/globals.scss';
+import '../styles/app.scss';
 import type {AppProps} from 'next/app';
 import {ReactElement} from 'react';
 

diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx
@@ -21,55 +21,50 @@ import Head from 'next/head';
 import Image from 'next/image';
 import {ReactElement} from 'react';
 import {spaceGrotesk} from '../styles/fonts';
-import styles from '../styles/Home.module.css';
 
 const Index = (): ReactElement => (
-  <div className={styles.container}>
+  <div className="container">
     <Head>
       <title>Oxygen UI | by WSO2</title>
       <meta name="description" content="The Design System powering WSO2's core products." />
       <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
       <link rel="icon" type="image/png" href="/favicon.png" />
     </Head>
 
-    <main className={styles.main}>
-      <Image
-        className={styles.hero_logo}
-        src="/assets/images/oxygen-ui/oxygen-ui-logo.svg"
-        alt="Oxygen UI Logo"
-        width={400}
-        height={100}
-      />
-      <p className={clsx(styles.description, spaceGrotesk.className)}>
-        The <span className={styles.emphasis_text}>Design System</span> powering{' '}
+    <main className="main">
+      <div className="hero">
         <Image
-          className={styles.wso2_logo}
-          src="/assets/images/logos/white/wso2.svg"
-          alt="wso2"
-          width={50}
-          height={20}
+          className="hero-logo"
+          src="/assets/images/oxygen-ui/oxygen-ui-logo.svg"
+          alt="Oxygen UI Logo"
+          width={400}
+          height={100}
         />
-        &apos;s core products.
-      </p>
+        <p className={clsx('hero-description', spaceGrotesk.className)}>
+          The <span className="hero-emphasis-text">Design System</span> powering{' '}
+          <Image className="wso2-logo" src="/assets/images/logos/white/wso2.svg" alt="wso2" width={50} height={20} />
+          &apos;s core products.
+        </p>
+      </div>
 
-      <div className={styles.grid}>
+      <div className="grid">
         <a
           href="https://github.com/brionmario/oxygen-ui/tree/main/packages/primitives"
-          className={clsx(styles.card, styles.disabled)}
+          className={clsx('card', 'disabled')}
           target="_blank"
           rel="noreferrer"
         >
           <h2>
             <Image src="/assets/images/oxygen-ui/guidelines-logo.svg" alt="Guidelines Logo" width={20} height={20} />
             Guidelines
-            <div className={clsx(styles['coming-soon-label'], spaceGrotesk.className)}>Coming Soon</div>
+            <div className={clsx('coming-soon-label', spaceGrotesk.className)}>Coming Soon</div>
           </h2>
           <code>@oxygen-ui/guidelines</code>
           <p className={spaceGrotesk.className}>A collection of principles, standards, and usage guidelines.</p>
         </a>
         <a
           href="https://github.com/brionmario/oxygen-ui/tree/main/packages/primitives"
-          className={styles.card}
+          className="card"
           target="_blank"
           rel="noreferrer"
         >
@@ -82,7 +77,7 @@ const Index = (): ReactElement => (
         </a>
         <a
           href="https://oxygen-react.vercel.app/?path=/docs/welcome--page"
-          className={styles.card}
+          className="card"
           target="_blank"
           rel="noreferrer"
         >
@@ -96,7 +91,7 @@ const Index = (): ReactElement => (
 
         <a
           href="https://www.figma.com/file/78epPbkczGFO5RM1sPyNtN/Oxygen?node-id=0%3A1&t=gsdIXRlJ1VChBa37-0"
-          className={styles.card}
+          className="card"
           target="_blank"
           rel="noreferrer"
         >
@@ -108,16 +103,11 @@ const Index = (): ReactElement => (
           <p className={spaceGrotesk.className}>The place where the designing and brainstorming happens.</p>
         </a>
       </div>
-      <div className={styles.divider} />
+      <div className="divider" />
       <h2>Showcase</h2>
-      <div className={styles.grid}>
-        <div className={styles.examples}>
-          <a
-            href="https://oxygen-multi-brand-example.vercel.app"
-            className={styles.card}
-            target="_blank"
-            rel="noreferrer"
-          >
+      <div className="grid">
+        <div className="examples">
+          <a href="https://oxygen-multi-brand-example.vercel.app" className="card" target="_blank" rel="noreferrer">
             <h2>Multi Brand Identity Example</h2>
             <code>@oxygen-ui-examples/multi-brand-identity</code>
             <p className={spaceGrotesk.className}>
@@ -128,7 +118,7 @@ const Index = (): ReactElement => (
       </div>
     </main>
 
-    <footer className={styles.footer}>
+    <footer className="footer">
       <a href="https://wso2.com/" target="_blank" rel="noopener noreferrer">
         Built with ❤️ by
         <Image src="/assets/images/logos/white/wso2.svg" alt="WSO2" width={40} height={16} />

diff --git a/docs/stylelint.config.cjs b/docs/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'],
+};