Initial commit

stylelint config with standard rules and plugins

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": [
+    "@changesets/changelog-github",
+    { "repo": "frontendfixer/-frontendfixer-stylelint-config-standard" }
+  ],
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/dry-forks-learn.md

@@ -0,0 +1,10 @@
+---
+"@frontendfixer/stylelint-config-standard": major
+---
+
+stylelint config with standard rules and plugins
+
+### Features
+
+- Extends stylelint config with [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard)
+  - SCSS support with [stylelint-scss](https://github.com/stylelint-scss/stylelint-scss) and [postcss-scss](https://github.com/postcss/postcss-scss)

.github/workflows/release.yml

@@ -0,0 +1,34 @@
+name: Release
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+
+      - name: Install Dependencies
+        run: yarn
+
+      - name: Create Release Pull Request
+        uses: changesets/action@v1
+        with:
+          publish: yarn release
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -0,0 +1 @@
+node_modules

.stylelintrc.json

@@ -0,0 +1,18 @@
+{
+  "plugins": ["stylelint-scss"],
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-standard-scss",
+    "stylelint-config-css-modules",
+    "stylelint-config-recess-order"
+  ],
+  "rules": {
+    "selector-class-pattern": null
+  },
+  "overrides": [
+    {
+      "files": ["*.scss", "**/*.scss"],
+      "customSyntax": "postcss-scss"
+    }
+  ]
+}

index.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: './.stylelintrc.json'
+}

package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@frontendfixer/stylelint-config-standard",
+  "version": "0.0.0",
+  "description": "Stylelint config with standard rules and useful plugins",
+  "keywords": [
+    "stylelint",
+    "config",
+    "lint",
+    "css",
+    "scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:frontendfixer/-frontendfixer-stylelint-config-standard.git"
+  },
+  "author": {
+    "name": "Lakshmikanta Patra",
+    "email": "[email protected]"
+  },
+  "license": "MIT",
+  "files": [
+    "./index.js",
+    "./.stylelintrc.json"
+  ],
+  "main": "index.js",
+  "stylelint": {
+    "extends": "./index.js"
+  },
+  "scripts": {
+    "lint": "stylelint '**/*.{css,scss}'",
+    "lint:fix": "stylelint '**/*.{css,scss}' --fix",
+    "changeset": "changeset"
+  },
+  "dependencies": {
+    "postcss-scss": "^4.0.6",
+    "stylelint-config-css-modules": "^4.3.0",
+    "stylelint-config-recess-order": "^4.3.0",
+    "stylelint-config-standard": "^34.0.0",
+    "stylelint-config-standard-scss": "^10.0.0",
+    "stylelint-scss": "^5.0.1"
+  },
+  "devDependencies": {
+    "@changesets/changelog-github": "^0.4.8",
+    "@changesets/cli": "^2.26.2",
+    "postcss": "^8.4.27",
+    "stylelint": "^15.10.2"
+  }
+}

tests/global.scss

@@ -0,0 +1,38 @@
+@import './variables.scss';
+@import './responsive.scss';
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.main {
+  font-family: 'Inter', sans-serif;
+  font-size: 1rem;
+  background-color: $main-bg;
+  color: $main-color;
+}
+
+.container {
+  display: flex;
+}
+
+.menuContainer {
+  padding: 5px 20px;
+  border-right: 2px solid $soft-bg;
+  max-width: 250px;
+  @include md {
+    padding-top: 20px;
+    padding-inline: 10px;
+  }
+}
+.contentContainer {
+  width: 100%;
+  padding: 5px 20px;
+}

tests/index.css

@@ -0,0 +1,69 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

tests/responsive.scss

@@ -0,0 +1,34 @@
+$sm: 480px;
+$md: 768px;
+$lg: 1024px;
+$xl: 1200px;
+$xxl: 1400px;
+
+@mixin sm {
+  @media screen and (max-width: $sm) {
+    @content;
+  }
+}
+
+@mixin md {
+  @media screen and (max-width: $md) {
+    @content;
+  }
+}
+
+@mixin lg {
+  @media screen and (max-width: $lg) {
+    @content;
+  }
+}
+
+@mixin xl {
+  @media screen and (max-width: $xl) {
+    @content;
+  }
+}
+@mixin xxl {
+  @media screen and (max-width: $xxl) {
+    @content;
+  }
+}

tests/variables.scss

@@ -0,0 +1,8 @@
+// BG
+$main-bg: #2a3447;
+$soft-bg: #384256;
+$dark-bg: #222b3c;
+//TEXT
+$main-color: white;
+$soft-color: #ddd;
+$dark-color: #2a3447;