Stylelint

README.md

@@ -8,6 +8,7 @@
 
 * [@10up/babel-preset-default](packages/babel-preset-default/README.md)
 * [@10up/eslint-config](packages/eslint-config/README.md)
+* [@10up/stylelint-config](packages/stylelint-config/README.md)
 * [10up-toolkit](packages/toolkit/README.md)
 
 ## Support Level

packages/stylelint-config/CHANGELOG.md

@@ -0,0 +1,6 @@
+# Changelog
+
+All notable changes to this project will be documented in this file, per [the Keep a Changelog standard](http://keepachangelog.com/).
+
+## [1.1.0]
+- Updates dependencies

packages/stylelint-config/README.md

@@ -0,0 +1,110 @@
+# 10up Stylelint Config
+
+> At 10up, we strive to provide digital products that yield a top-notch user experience. In order to improve both our efficiency and consistency, we need to standardize what we use and how we use it. This theme scaffold allows us to share initial set up procedures to make sure all projects can get up and running as quickly as possible while closely adhering to 10up's high quality standards.
+
+[![Support Level](https://img.shields.io/badge/support-active-green.svg)](#support-level)
+
+
+## Dependencies
+
+1. [Node & NPM](https://www.npmjs.com/get-npm) - 3rd party dependencies are managed through NPM, so you will need that installed globally
+2. [Stylelint](https://stylelint.io/) - as this is a config extention for Stylelint, you will need Stylelint installed in your main project in order for it to work.
+
+## Installation
+
+First, install Stylelint:
+```
+// NPM
+npm install stylelint --save-dev
+
+// Yarn
+yarn add stylelint
+```
+
+Then install the 10up Stylelint config:
+```
+// NPM
+npm install @10up/stylelint-config --save-dev
+```
+
+## Usage
+
+Add the following to your `.stylelintrc` file:
+
+```js
+{
+  "extends": [
+    "@10up/stylelint-config"
+  ]
+}
+
+```
+
+### SCSS:
+By default 10up Stylelint Config does not support out-the-box support for `scss` based projects. That being said, it is not difficult to add support by following the below process:
+
+Install the `stylelint-scss` dependency:
+```
+// NPM
+npm install stylelint-scss --save-dev
+```
+
+You will then need to update the plugins section of your projects `.stylelintrc`:
+
+```
+{
+  "plugins": [
+    "stylelint-scss"
+  ],
+  "rules": {
+   ...
+  }
+}
+```
+
+A set of rules are located on the [packages NPM page](https://www.npmjs.com/package/stylelint-scss) if you would like to override or customize the defaults further.
+
+
+#### Selector Nested Pattern
+Certain rules that apply to flavours of CSS (`post-css`, `scss`, `sass` etc) can cause a conflict in your build pipelines. One such rule is
+[Selector Nested Pattern](https://stylelint.io/user-guide/rules/selector-nested-pattern).
+
+By default we ensure that any nested `css` uses a prefixed `&` symbol, as required in languages like `post-css` or `postcss-preset-env`, however you will want to turn this off if using `scss`.
+
+To get around this issue, add the following to your projects, `.stylelintrc`
+
+```js
+{
+  "rules": [
+    "selector-nested-pattern": null,
+  ]
+}
+
+```
+
+### Webpack Setup
+Run `npm install stylelint-webpack-plugin --save-dev`. You should already have the proper loader in `postcss-loader`, but if you don't install that as well. After installing stylelint and the configuration above add the following to your Webpack config:
+
+```js
+import StyleLintPlugin from 'stylelint-webpack-plugin';
+
+plugins: [
+  new StyleLintPlugin( {
+    configFile: ".stylelintrc", // if your config is in a non-standard place
+    files: "src/**/*.css", // location of your CSS files
+    fix: true, // if you want to auto-fix some of the basic rules
+  } ),
+]
+
+```
+
+Read more about these options at [stylelint-webpack-plugin](https://github.com/webpack-contrib/stylelint-webpack-plugin), [the main stylelint documentation](https://stylelint.io/) and [postcss-loader](https://github.com/postcss/postcss-loader). That should be all you need, but if there are any errors in this documentation, [please file an issue and let us know](https://github.com/10up/stylelint-config/issues/new)!
+
+## Autofixing
+
+Certain rules / violations can be fixed automatically using the `--fix` flag via the command line.
+To ensure that Stylelint fixes what it can, you can run:
+
+```
+stylelint path/to/css/file.css --fix`
+```

packages/stylelint-config/index.js

@@ -0,0 +1,15 @@
+module.exports = {
+	extends: 'stylelint-config-wordpress',
+	plugins: ['stylelint-declaration-use-variable', 'stylelint-order'],
+	rules: {
+		'sh-waqar/declaration-use-variable': [
+			['/color/', { ignoreValues: ['transparent', 'inherit', 'currentColor'] }],
+		],
+		'order/properties-alphabetical-order': true,
+		'function-url-quotes': 'always',
+		'selector-class-pattern': null,
+		'no-eol-whitespace': null,
+		'selector-nested-pattern': ['^&'],
+		'no-descending-specificity': null,
+	},
+};

packages/stylelint-config/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@10up/stylelint-config",
+  "version": "1.1.0",
+  "description": "10up stylelint config for WordPress projects",
+  "main": "index.js",
+  "homepage": "https://github.com/10up/10up-toolkit/tree/develop/packages/stylelint-configg#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/10up/10up-toolkit.git"
+  },
+  "keywords": [
+    "stylelint",
+    "stylelint-config",
+    "wordpress",
+    "coding-standards",
+    "10up"
+  ],
+  "files": [
+    "index.js"
+  ],
+  "author": {
+    "name": "10up",
+    "email": "info@10up.com",
+    "url": "https://10up.com",
+    "role": "developer"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/10up/10up-toolkit/issues"
+  },
+  "engineStrict": true,
+  "engines": {
+    "node": ">=12"
+  },
+  "dependencies": {
+    "@wordpress/stylelint-config": "^19.0.3",
+    "stylelint-declaration-use-variable": "^1.7.2",
+    "stylelint-order": "^4.1.0"
+  }
+}

packages/toolkit/package.json

@@ -31,7 +31,7 @@
   "dependencies": {
     "@10up/babel-preset-default": "^1.1.1",
     "@10up/eslint-config": "^2.3.4",
-    "@10up/stylelint-config": "^1.0.11",
+    "@10up/stylelint-config": "^1.1.0",
     "@babel/core": "^7.2.0",
     "@babel/eslint-parser": "^7.12.13",
     "@svgr/webpack": "^5.5.0",

projects/10up-theme/assets/css/frontend/layout/index.css

@@ -1 +1,5 @@
 /* Layout */
+
+h1 {
+	font-weight: 700;
+}

projects/library/package.json

@@ -14,8 +14,7 @@
     "watch": "concurrently \"npm run build:modern -- --watch\" \"npm run build:umd -- --watch\"",
     "build": "npm run build:modern && npm run build:umd",
     "build:modern": "10up-toolkit build -f=commonjs",
-    "build:umd": "10up-toolkit build -f=umd -i=src/index.umd.js --name=TenUpAccordion --external=none",
-    "prepare": "npm run build"
+    "build:umd": "10up-toolkit build -f=umd -i=src/index.umd.js --name=TenUpAccordion --external=none"
   },
   "browserslist": [
     "> 1%",

projects/library/src/accordion.js

@@ -67,9 +67,8 @@ export default class Accordion {
 		this.removeAllEventListeners();
 
 		this.$accordions.forEach((accordionArea) => {
-			const [accordionLinks, accordionContent] = this.getAccordionLinksAndContent(
-				accordionArea,
-			);
+			const [accordionLinks, accordionContent] =
+				this.getAccordionLinksAndContent(accordionArea);
 
 			accordionLinks.forEach((accordionLink) => {
 				accordionLink.removeAttribute('id');