Update dependency stylelint-config-cloudfour to v12

[renovate]

Overview

This PR updates stylelint-config-cloudfour from v11 to v12. v12 now requires logical properties, and it turns off the stylelint-scss formatting rules that conflict with Prettier. We'd already set up both of those in our local Stylelint config. Keeping our own copies would also have thrown away v12's exceptions for properties browsers don't fully support yet, because a local rule replaces the shared config's options instead of merging with them. So this PR removes our local versions and relies on the shared config instead.

Our local logical-property rules also had exceptions for physical corner radii and floats, added in #1595 to wait for Safari 15 support. Every browser we target now supports the logical versions, so this PR drops those exceptions and converts the remaining styles with stylelint --fix. In left-to-right pages, the new properties do exactly what the old ones did, so nothing should look different. The compiled CSS only changes by these renames, plus the physical float fallbacks removed from the float utilities. A changeset is included because the published CSS changes.

Screenshots

Testing

All links go to this PR's deploy preview. None of these should look any different from production (https://cloudfour-patterns.netlify.app).

• Open Components/Alert → Icon. The tinted box behind the checkmark icon should have rounded corners on its left side, matching the rest of the alert.
• Open Components/Calendar Date → Basic. The month at the top should have rounded top corners, and the day below it should have rounded bottom corners.
• Open Objects/Input Group → Example. Where the input meets the button, the corners should be square, and the outer corners should stay rounded.
• Open Design/Favicons. The browser-tab mockups should have rounded top corners.
• Open Objects/Hype Group → Single and make the window narrow (phone width). The image should sit on the right with the text wrapping around it.
• Open Utilities/Float → Direction. The box should float right with the text wrapping around it. Change the float control to inline-start, and it should move to the left.
• Open Vendor/WordPress/Core Blocks → Image in a window at least tablet width. Set Alignment to Left, then Right. The image should float to that side with the text wrapping around it.
• Open Vendor/WordPress/Jetpack Blocks → Contact Form Success. Each submitted field name should start a new line, with its value next to it on the same line.

---

Release notes for stylelint-config-cloudfour v12

cloudfour/stylelint-config-cloudfour (stylelint-config-cloudfour)

v12.0.0

Compare Source

• Sass rules and the SCSS parser now only apply to .scss files (#​638)
  • .css files are now parsed as CSS, and get core rules that stylelint-config-standard-scss turns off, such as declaration-property-value-no-unknown, at-rule-prelude-no-invalid, media-query-no-invalid, and no-duplicate-selectors
  • at-rule-disallowed-list (@extend and @import) now only applies to .scss files
  • Added a stylelint-config-cloudfour/scss entry point, for applying the Sass rules to other file types, such as Vue components with <style lang="scss">
• Disabled the stylelint-scss formatting rules that conflict with Prettier, such as scss/operator-no-newline-after (#​638)
• order/order no longer sets the position of @include, because since Dart Sass 1.92, an @include's position decides which styles win. Variables and custom properties still come first, and declarations still come before nested rules (#​528)
• Enabled property-layout-mappings, unit-layout-mappings, and value-keyword-layout-mappings, which require logical properties, units, and keywords, such as margin-inline-start instead of margin-left (#​214)
  • Set languageOptions.directionality to left-to-right, top-to-bottom, so stylelint --fix can convert physical properties
  • overflow-x and overflow-y (#​662), and physical keywords in offset-anchor and offset-position (#​663), are still allowed, since browsers don't fully support their logical versions yet
• Added stylelint-config-standard as a direct dependency
• Updated the README's examples and links, which used rules removed in earlier Stylelint versions (#​661)

Migrating from v11

All projects: logical properties

This config now requires logical properties, so most projects will see many new warnings for properties like margin-left, width, and top. Stylelint can fix all of them automatically:

1. Run stylelint --fix on your styles. This converts physical properties, units, and keywords to their logical versions, such as margin-left to margin-inline-start, width to inline-size, and 100vw to 100vi.
2. Run stylelint --fix a second time. Renaming properties can put them out of alphabetical order, and the second run sorts them again.
3. Search your styles for writing-mode: vertical or writing-mode: sideways. On those elements, logical properties map to different sides, so inline-size sets the height, not the width. Check that they still look right, or keep the physical properties with a stylelint-disable comment.

If your build uses postcss-preset-env older than v8, or postcss-logical older than v6, check your compiled CSS after converting. These versions convert logical properties back to physical ones inside [dir="ltr"] and [dir="rtl"] selectors, so those styles only apply if your HTML has a dir attribute. To keep logical properties as written, turn that feature off:

postcssPresetEnv({
  features: {
    "logical-properties-and-values": false
  }
});

If your project uses a right-to-left or vertical writing direction, override languageOptions.directionality before running --fix, as described in the README. To keep using physical properties, turn off the three rules in your config.

Projects that lint CSS files

Your .css files were previously parsed as Sass, which turned off several of Stylelint's CSS validity rules. Those rules now run, so you may see new warnings after upgrading. Most of them point to real bugs, such as a unit on a unitless property (opacity: 0.5em), an invalid value (padding: auto), or a duplicated selector. Fix these in your CSS.

The Sass rules no longer run on .css files, so you can remove any overrides you added to work around them:

• Remove any rules that start with scss/, such as "scss/operator-no-newline-after": null.

• Remove any override of at-rule-disallowed-list. It used to ban @import in CSS files, but now only applies to Sass files.

• If you configured ignoreAtRules on scss/at-rule-no-unknown, move those options to the core at-rule-no-unknown rule instead:

  // Before
  "scss/at-rule-no-unknown": [true, { ignoreAtRules: ["define-mixin"] }],
  
  // After
  "at-rule-no-unknown": [true, { ignoreAtRules: ["define-mixin"] }],

  If your project also lints .scss files, set at-rule-no-unknown in an overrides entry for .css files instead. Setting it in your rules turns it back on for Sass files, where it reports @use and @include as unknown. See "Changing rules for one file type" in the README.

Projects that use PostCSS plugins

If your CSS uses syntax from PostCSS plugins, such as postcss-mixins or postcss-inline-svg, the newly enabled CSS rules may report that syntax as invalid. Add ignore options for the at-rules and functions your plugins provide. For example:

rules: {
  // @define-mixin and @mixin from postcss-mixins
  "at-rule-no-unknown": [true, { ignoreAtRules: ["define-mixin", "mixin"] }],
  "at-rule-prelude-no-invalid": [true, { ignoreAtRules: ["mixin"] }],
  // svg-load() from postcss-inline-svg, in any property
  "declaration-property-value-no-unknown": [
    true,
    { ignoreProperties: { "/.+/": "/svg-load\\(/" } },
  ],
}

Projects that lint Sass files

No config changes are required, but there are two differences to be aware of.

@include can now go anywhere in a rule, and stylelint --fix no longer moves it. Since Dart Sass 1.92, Sass outputs a mixin's styles where the @include is written, so its position decides which styles win:

.title {
  @include type.fluid; // the mixin's font sizes, including its media queries...
  font-size: 2rem; // ...are overridden by this
}

.title {
  font-size: 2rem; // this is overridden by...
  @include type.fluid; // ...the mixin's font sizes
}

Previous versions of this config required the first form, and --fix would move an @include above your declarations. If your project uses Sass 1.92 or later, that may have changed your compiled CSS. It's worth checking any @include whose mixin outputs declarations you also set yourself.

The stylelint-scss formatting rules that conflict with Prettier are now turned off. If you turned any of those off in your own config, you can remove those overrides:

• scss/at-else-closing-brace-newline-after
• scss/at-else-closing-brace-space-after
• scss/at-else-empty-line-before
• scss/at-else-if-parentheses-space-before
• scss/at-function-parentheses-space-before
• scss/at-if-closing-brace-newline-after
• scss/at-if-closing-brace-space-after
• scss/at-mixin-parentheses-space-before
• scss/dollar-variable-colon-space-after
• scss/dollar-variable-colon-space-before
• scss/operator-no-newline-after
• scss/operator-no-newline-before
• scss/operator-no-unspaced

Vue projects that use <style lang="scss">

Previously, Vue components got the Sass rules. Now they get the CSS rules by default, which report Sass features like @use and @include as unknown at-rules. To lint your components as Sass, apply the Sass config to .vue files:

{
  extends: ["stylelint-config-cloudfour"],
  overrides: [
    {
      files: ["**/*.vue"],
      extends: ["stylelint-config-cloudfour/scss"],
      customSyntax: "postcss-html",
    },
  ],
}

If your components mix Sass and plain CSS, see the README for the trade-offs.

---

[changeset-bot]

🦋 Changeset detected

Latest commit: 8b1911a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@cloudfour/patterns	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for cloudfour-patterns ready!

Name	Link
🔨 Latest commit	8b1911a
🔍 Latest deploy log	https://app.netlify.com/projects/cloudfour-patterns/deploys/6acfb7c8a10c88c4b0bc3437
😎 Deploy Preview	https://deploy-preview-2548--cloudfour-patterns.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.