Add some sass, with stylelint and prettier

.github/workflows/node.js.yml

@@ -21,15 +21,15 @@ jobs:
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'yarn'
-    - uses: ./.github/actions/build
-    - run: yarn lint-strict
-    - run: yarn test
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "yarn"
+      - uses: ./.github/actions/build
+      - run: yarn lint-strict
+      - run: yarn test
 
   publish-npm:
     needs: test

.gitignore

@@ -12,3 +12,9 @@ lib/
 coverage/
 
 *.local
+
+# CSS build files
+css/
+
+# Stylelint
+.stylelintcache

.prettierignore

@@ -0,0 +1 @@
+.yarn

.prettierrc

@@ -1,3 +1,12 @@
 {
-  "trailingComma": "all"
+  "plugins": ["prettier-plugin-css-order"],
+  "overrides": [
+    {
+      "files": ["tsconfig.json"],
+      "options": {
+        "parser": "json5",
+        "quoteProps": "preserve"
+      }
+    }
+  ]
 }

.stylelintrc.json

@@ -0,0 +1,14 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-standard-scss"],
+  "reportDescriptionlessDisables": true,
+  "reportInvalidScopeDisables": true,
+  "reportNeedlessDisables": true,
+  "rules": {
+    "comment-empty-line-before": null,
+    "no-unknown-animations": true,
+    "scss/at-function-pattern": null,
+    "scss/at-mixin-pattern": null,
+    "scss/dollar-variable-pattern": null,
+    "scss/operator-no-newline-after": null
+  }
+}

.yarnrc.yml

@@ -17,6 +17,9 @@ packageExtensions:
     peerDependencies:
       "@babel/core": "*"
       "@typescript-eslint/parser": "*"
+  prettier-plugin-css-order@2:
+    peerDependencies:
+      postcss: "*"
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs

README.md

@@ -1,2 +1,3 @@
 # super-duper-parakeet
+
 just general stuff. name suggested by github

package.json

@@ -10,11 +10,17 @@
   },
   "types": "lib/src/index.d.ts",
   "scripts": {
-    "clean": "rm -rf lib/",
+    "all-prettier": "prettier --write .",
+    "build-css": "sass sass:css",
+    "css": "yarn build-css --watch",
+    "clean": "rm -rf lib/ css/",
     "build": "tsc --pretty",
     "watch": "tsc --pretty -w",
-    "lint": "eslint . --ext ts --ext tsx --ext js",
-    "lint-strict": "yarn lint --max-warnings 0",
+    "lint-js": "eslint . --ext ts,tsx,js",
+    "lint-css": "stylelint \"sass/**/*.{css,scss}\" --cache",
+    "lint-strict-js": "yarn lint-js --max-warnings 0",
+    "lint-strict": "yarn lint-strict-js && yarn lint-css",
+    "lint": "yarn lint-js && yarn lint-css",
     "test-nc": "jest",
     "test": "yarn test-nc --coverage"
   },
@@ -84,12 +90,18 @@
     "nanoid": "^4.0.0",
     "newtype-ts": "^0.3.4",
     "next": "13.1.6",
+    "postcss": "^8.4.31",
     "prettier": "^3.0.0",
+    "prettier-plugin-css-order": "^2.0.0",
     "putout": "^30.7.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-query": "^3.13.12",
     "react-test-renderer": "^18.0.0",
+    "sass": "^1.68.0",
+    "stylelint": "^15.10.3",
+    "stylelint-config-standard": "^34.0.0",
+    "stylelint-config-standard-scss": "^11.0.0",
     "ts-jest": "^29.1.0",
     "ts-node": "^10.1.0",
     "ts-toolbelt": "^9.6.0",

sass/_bare-button.scss

@@ -0,0 +1,9 @@
+@mixin bareButton {
+  border: 0;
+  background: none;
+  padding: 0;
+  color: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+}

src/readonly-overrides.d.ts

@@ -6,8 +6,8 @@ interface ObjectConstructor {
   values<T>(o: Readonly<{ [s: string]: T } | ArrayLike<T>>): T[];
 
   /**
-     * Returns an array of key/values of the enumerable properties of an object
-     * @param o Object that contains the properties and methods. This can be an object that you created or an existing Document Object Model (DOM) object.
-     */
+   * Returns an array of key/values of the enumerable properties of an object
+   * @param o Object that contains the properties and methods. This can be an object that you created or an existing Document Object Model (DOM) object.
+   */
   entries<T>(o: Readonly<{ [s: string]: T } | ArrayLike<T>>): [string, T][];
 }

tsconfig.json

@@ -5,7 +5,14 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
-    "lib": ["es2019", "es2020.bigint", "es2020.string", "es2020.symbol.wellknown", "dom", "dom.iterable"],
+    "lib": [
+      "es2019",
+      "es2020.bigint",
+      "es2020.string",
+      "es2020.symbol.wellknown",
+      "dom",
+      "dom.iterable",
+    ],
     "module": "commonjs",
     "moduleResolution": "node",
     "noFallthroughCasesInSwitch": true,
@@ -19,9 +26,5 @@
     "target": "es2019",
   },
   "exclude": ["node_modules", "lib"],
-  "include": [
-    ".*",
-    "*",
-    "**/*",
-  ]
+  "include": [".*", "*", "**/*"],
 }