🩹 fix(patch): update @roots/sage/stylelint (#2607)

Update: `@roots/sage/stylelint` config
Adds: `examples/sage-with-stylelint`

The conf change is here: https://github.com/roots/bud/compare/main...fix-2605-stylelint-error?body=&expand=1#diff-73c6bd3eb14f934c85b687f68cd04d88dbf07e9608422f988014e70fac148eb5

## Type of change

**PATCH: backwards compatible change**



@chrillep does this seem right to you?

examples/sage-with-stylelint/.gitignore

@@ -0,0 +1,8 @@
+/node_modules
+/vendor
+/public
+.env
+npm-debug.log
+yarn-error.log
+/storage/bud/**/*
+theme.json

examples/sage-with-stylelint/.stylelintrc.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: [
+    '@roots/sage/config/stylelint',
+    '@roots/bud-tailwindcss/stylelint',
+  ],
+}

examples/sage-with-stylelint/bud.config.js

@@ -0,0 +1,17 @@
+import {bud} from '@roots/bud'
+
+bud
+  .entry({
+    app: ['@scripts/app', '@styles/app'],
+    editor: ['@scripts/editor', '@styles/editor'],
+  })
+  .copyDir('images')
+  .watch(['resources/views/*.blade.php'])
+  .serve(3000)
+  .proxy('http://example.test')
+
+bud.wp.json
+  .useTailwindColors('extend')
+  .useTailwindFontFamily()
+  .useTailwindFontSize()
+  .useTailwindSpacing()

examples/sage-with-stylelint/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@examples/sage-with-stylelint",
+  "$schema": "https://bud.js.org/bud.package.json",
+  "private": true,
+  "type": "module",
+  "browserslist": [
+    "extends @roots/browserslist-config"
+  ],
+  "devDependencies": {
+    "@roots/bud": "workspace:*",
+    "@roots/bud-stylelint": "workspace:*",
+    "@roots/bud-tailwindcss": "workspace:*",
+    "@roots/sage": "workspace:*"
+  }
+}

examples/sage-with-stylelint/resources/scripts/app.js

@@ -0,0 +1,12 @@
+import {main} from '@scripts/components/main.js'
+
+const init = () =>
+  window.requestAnimationFrame(function ready() {
+    return document.body ? main() : window.requestAnimationFrame(ready)
+  })
+
+init()
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept('./components/main.js', init)
+}

examples/sage-with-stylelint/resources/scripts/components/main.js

@@ -0,0 +1,7 @@
+export const main = () => {
+  document.body.classList.contains('no-js') &&
+    document.body.classList.remove('no-js')
+
+  document.body.classList.add(`text-xl`)
+  document.body.classList.add(`text-custom`)
+}

examples/sage-with-stylelint/resources/scripts/editor.js

@@ -0,0 +1,17 @@
+import '@wordpress/edit-post'
+
+import {registerBlockStyle, unregisterBlockStyle} from '@wordpress/blocks'
+import domReady from '@wordpress/dom-ready'
+
+domReady(() => {
+  unregisterBlockStyle('core/button', 'outline')
+
+  registerBlockStyle('core/button', {
+    name: 'outline',
+    label: 'Outline',
+  })
+})
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept(console.error)
+}

examples/sage-with-stylelint/resources/styles/app.css

@@ -0,0 +1,10 @@
+@import 'tailwindcss/base';
+
+@import 'common/global';
+
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+body {
+  background: url('@src/images/logo.svg?inline') no-repeat;
+}

examples/sage-with-stylelint/resources/styles/common/global.css

@@ -0,0 +1,9 @@
+body {
+  @apply font-sans text-custom;
+}
+
+#root {
+  @apply font-medium text-indigo-500 text-xl;
+
+  background: url("~@images/image.jpeg");
+}

examples/sage-with-stylelint/resources/styles/editor.css

@@ -0,0 +1,11 @@
+.block-editor-block-list__layout {
+  @apply font-sans;
+}
+
+.wp-block {
+  @apply max-w-screen-md;
+
+  &.editor-post-title__block .editor-post-title__input {
+    @apply font-sans;
+  }
+}

examples/sage-with-stylelint/tailwind.config.js

@@ -0,0 +1,20 @@
+export default {
+  content: ['resources/**/*.{js,css,html}'],
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          gray: '#f7fafc',
+        },
+      },
+      fontFamily: {
+        sans: ['Inter', 'sans-serif'],
+      },
+      fontSize: {
+        xl: '1.25rem',
+        custom: '.625rem',
+      },
+    },
+  },
+  plugins: [],
+}

examples/sage-with-stylelint/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@roots/bud/config/tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "@src/*": ["./src/*"]
+    },
+    "types": ["@roots/bud", "@roots/bud-preset-wordpress", "@roots/bud-stylelint", "@roots/sage"]
+  },
+  "files": ["bud.config.js"],
+  "include": ["./src"],
+  "exclude": ["./dist"]
+}

sources/@roots/sage/config/stylelint.cjs

@@ -8,12 +8,9 @@ module.exports = {
   ],
   rules: {
     'at-rule-empty-line-before': null,
-    'declaration-colon-newline-after': null,
     'no-descending-specificity': null,
     'no-empty-source': null,
     'selector-class-pattern': null,
     'selector-id-pattern': null,
-    'string-quotes': null,
-    'value-list-comma-newline-after': null,
   },
 }

yarn.lock

@@ -8619,6 +8619,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@examples/sage-with-stylelint@workspace:examples/sage-with-stylelint":
+  version: 0.0.0-use.local
+  resolution: "@examples/sage-with-stylelint@workspace:examples/sage-with-stylelint"
+  dependencies:
+    "@roots/bud": "workspace:*"
+    "@roots/bud-stylelint": "workspace:*"
+    "@roots/bud-tailwindcss": "workspace:*"
+    "@roots/sage": "workspace:*"
+  languageName: unknown
+  linkType: soft
+
 "@examples/sage@workspace:examples/sage":
   version: 0.0.0-use.local
   resolution: "@examples/sage@workspace:examples/sage"