Add @wordpress stylelint config

README.md

@@ -32,7 +32,8 @@ It can be configured using a [configuration file](http://stylelint.io/user-guide
 - [stylelint-config-styled-components](https://github.com/styled-components/stylelint-config-styled-components): The shareable stylelint config for stylelint-processor-styled-components
 - [stylelint-config-sugarss-recommended](https://github.com/kkoudev/stylelint-config-sugarss-recommended): The recommended shareable config of SugarSS for stylelint.
 - [stylelint-config-suitcss](https://github.com/suitcss/stylelint-config-suitcss): SUIT CSS config
-- [stylelint-config-wordpress](https://github.com/ntwb/stylelint-config-wordpress/): WordPress CSS Coding Standards shareable config
+- [@wordpress/stylelint-config](https://github.com/WordPress/gutenberg/blob/trunk/packages/stylelint-config/README.md): WordPress CSS Coding Standards shareable config (current, supports CSS and SCSS)
+- [stylelint-config-wordpress](https://github.com/ntwb/stylelint-config-wordpress/): WordPress CSS Coding Standards shareable config (deprecated)
 - [stylelint-rscss](https://github.com/rstacruz/stylelint-rscss): Validate RSCSS conventions
 
 ### Processors
@@ -84,9 +85,14 @@ npm test
 
 Install the desired packages as dependencies and test it.
 
+#### To add tests for a plugin
 If it is a plugin, add it to the `.stylelint` config in the `test/stylelint-plugins` directory and make sure it trigger some issues. Update the `snapshot` file with the new issue count. 
 
-If it is a config or processor, add a new directory inside the `tests` directory with the name of the package and make sure it trigger some issues.
+#### To add tests for a config or processor
+- Add a new directory inside the `tests` directory with the name of the package.
+- Add sample code to the new folder which you know will trigger an error, along with a snapshot file containing the number of issues that the sample code should trigger, a codeclimate.yml file, and .stylelintrc configuration that uses the new config or processor.
+- Run `npm run build` to rebuild the docker image. This allows Codeclimate to run with your new package.
+- Run `npm test`, and ensure all tests pass successfully, including your new test.
 
 Before commiting your changes run the tests!
 

package.json

@@ -20,6 +20,7 @@
   ],
   "dependencies": {
     "@mapbox/stylelint-processor-arbitrary-tags": "^0.3.0",
+    "@wordpress/stylelint-config": "^20.0.2",
     "cosmiconfig": "^7.0.0",
     "glob": "^7.1.6",
     "prettier": "^2.1.2",

test/@wordpress-stylelint-config/.codeclimate.yml

@@ -0,0 +1,7 @@
+---
+version: "2"
+plugins:
+  stylelint:
+    enabled: true
+    config:
+      ignore_warnings: true

test/@wordpress-stylelint-config/.stylelintrc

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "@wordpress/stylelint-config"
+  ]
+}

test/@wordpress-stylelint-config/main.less

@@ -0,0 +1,191 @@
+//
+// Dropdown menus
+// --------------------------------------------------
+
+.caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: 2px;
+  vertical-align: middle;
+  border-top: @caret-width-base solid @dropdown-caret-color;
+  border-right: @caret-width-base solid transparent;
+  border-left: @caret-width-base solid transparent;
+
+  // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed,
+  // we can just straight up remove this.
+  border-bottom: 0 dotted;
+  content: "";
+}
+
+// The dropdown wrapper (div)
+.dropdown {
+  position: relative;
+}
+
+// Prevent the focus on the dropdown toggle when closing dropdowns
+.dropdown-toggle:focus {
+  outline: 0;
+}
+
+// The dropdown menu (ul)
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: @zindex-dropdown;
+  display: none; // none by default, but block on "open" of the menu
+  float: left;
+  min-width: 160px;
+  padding: 5px 0;
+  margin: 2px 0 0; // override default ul
+  list-style: none;
+  font-size: @font-size-base;
+  background-color: @dropdown-bg;
+  border: 1px solid @dropdown-fallback-border; // IE8 fallback
+  border: 1px solid @dropdown-border;
+  border-radius: @border-radius-base;
+  .box-shadow(0 6px 12px rgba(0, 0, 0, .175));
+  background-clip: padding-box;
+
+  // Aligns the dropdown menu to right
+  &.pull-right {
+    right: 0;
+    left: auto;
+  }
+
+  // Dividers (basically an hr) within the dropdown
+  .divider {
+    .nav-divider(@dropdown-divider-bg);
+  }
+
+  // Links within the dropdown menu
+  > li > a {
+    display: block;
+    padding: 3px 20px;
+    clear: both;
+    font-weight: normal;
+    line-height: @line-height-base;
+    color: @dropdown-link-color;
+    white-space: nowrap; // prevent links from randomly breaking onto new lines
+  }
+}
+
+// Hover/Focus state
+.dropdown-menu > li > a {
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    color: @dropdown-link-hover-color;
+    background-color: @dropdown-link-hover-bg;
+  }
+}
+
+// Active state
+.dropdown-menu > .active > a {
+  &,
+  &:hover,
+  &:focus {
+    color: @dropdown-link-active-color;
+    text-decoration: none;
+    outline: 0;
+    background-color: @dropdown-link-active-bg;
+  }
+}
+
+// Disabled state
+//
+// Gray out text and ensure the hover/focus state remains gray
+
+.dropdown-menu > .disabled > a {
+  &,
+  &:hover,
+  &:focus {
+    color: @dropdown-link-disabled-color;
+  }
+}
+
+// Nuke hover/focus effects
+.dropdown-menu > .disabled > a {
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    background-color: transparent;
+    background-image: none; // Remove CSS gradient
+    .reset-filter();
+    cursor: not-allowed;
+  }
+}
+
+// Open state for the dropdown
+.open {
+  // Show the menu
+  > .dropdown-menu {
+    display: block;
+  }
+
+  // Remove the outline when :focus is triggered
+  > a {
+    outline: 0;
+  }
+}
+
+// Dropdown section headers
+.dropdown-header {
+  display: block;
+  padding: 3px 20px;
+  font-size: @font-size-small;
+  line-height: @line-height-base;
+  color: @dropdown-header-color;
+}
+
+// Backdrop to catch body clicks on mobile, etc.
+.dropdown-backdrop {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: @zindex-dropdown - 10;
+}
+
+// Right aligned dropdowns
+.pull-right > .dropdown-menu {
+  right: 0;
+  left: auto;
+}
+
+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+//
+// Just add .dropup after the standard .dropdown class and you're set, bro.
+// TODO: abstract this so that the navbar fixed styles are not placed here?
+
+.dropup,
+.navbar-fixed-bottom .dropdown {
+  // Reverse the caret
+  .caret {
+    // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this
+    // gets fixed, restore `border-top: 0;`.
+    border-top: 0 dotted;
+    border-bottom: 4px solid @dropdown-caret-color;
+    content: "";
+  }
+  // Different positioning for bottom up menu
+  .dropdown-menu {
+    top: auto;
+    bottom: 100%;
+    margin-bottom: 1px;
+  }
+}
+
+// Component alignment
+//
+// Reiterate per navbar.less and the modified component alignment there.
+
+@media (min-width: @grid-float-breakpoint) {
+  .navbar-right {
+    .dropdown-menu {
+      .pull-right > .dropdown-menu();
+    }
+  }
+}

test/@wordpress-stylelint-config/main.scss

@@ -0,0 +1,69 @@
+html {
+  font-size: 62.5%;
+  -webkit-font-smoothing: antialiased;
+  height: 100%;
+}
+
+body {
+  min-height: 100%;
+}
+
+img {
+  height: auto;
+  opacity: .1;
+  max-width: 100%;
+}
+
+a {
+  text-decoration: none;
+
+  &.disabled {
+    pointer-events: none;
+  }
+}
+
+.app {
+  &__items__kols {
+    &__item {
+      background-color: #fff;
+
+      &--app {
+        color: #000000;
+      }
+    }
+  }
+}
+
+#react {
+  min-height: 100vh;
+
+  > div > div {
+    color: #AAA;
+
+    .col {
+      max-width: 200px;
+
+      span {
+        color: green;
+
+        span {
+          background-color: rgba(#000, .1);
+        }
+      }
+    }
+  }
+}
+
+.not-found {
+  text-align: center;
+
+  h1 {
+    font-size: 128px;
+    margin: 0;
+
+    @media all and (min-width: 300px) {
+      font-size: 256px;
+
+    }
+  }
+}

test/@wordpress-stylelint-config/snapshot

@@ -0,0 +1 @@
+218