Add starting-style to bubble defaults

Author: ai

README.md

@@ -8,25 +8,25 @@
 
 ```css
 .phone {
-    &_title {
-        width: 500px;
-        @media (max-width: 500px) {
-            width: auto;
-        }
-        body.is_dark & {
-            color: white;
-        }
+  &_title {
+    width: 500px;
+    @media (max-width: 500px) {
+      width: auto;
     }
-    img {
-        display: block;
+    body.is_dark & {
+      color: white;
     }
+  }
+  img {
+    display: block;
+  }
 }
 
 .title {
   font-size: var(--font);
 
   @at-root html {
-      --font: 16px
+    --font: 16px;
   }
 }
 ```
@@ -35,39 +35,39 @@ will be processed to:
 
 ```css
 .phone_title {
-    width: 500px;
+  width: 500px;
 }
 @media (max-width: 500px) {
-    .phone_title {
-        width: auto;
-    }
+  .phone_title {
+    width: auto;
+  }
 }
 body.is_dark .phone_title {
-    color: white;
+  color: white;
 }
 .phone img {
-    display: block;
+  display: block;
 }
 
 .title {
   font-size: var(--font);
 }
 html {
-  --font: 16px
+  --font: 16px;
 }
 ```
 
 Related plugins:
 
-* Use [`postcss-current-selector`] **after** this plugin if you want
+- Use [`postcss-current-selector`] **after** this plugin if you want
   to use current selector in properties or variables values.
-* Use [`postcss-nested-ancestors`] **before** this plugin if you want
+- Use [`postcss-nested-ancestors`] **before** this plugin if you want
   to reference any ancestor element directly in your selectors with `^&`.
 
 Alternatives:
 
-* See also [`postcss-nesting`], which implements [CSSWG draft].
-* [`postcss-nested-props`] for nested properties like `font-size`.
+- See also [`postcss-nesting`], which implements [CSSWG draft].
+- [`postcss-nested-props`] for nested properties like `font-size`.
 
 <a href="https://evilmartians.com/?utm_source=postcss-nested">
   <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
@@ -76,11 +76,10 @@ Alternatives:
 
 [`postcss-current-selector`]: https://github.com/komlev/postcss-current-selector
 [`postcss-nested-ancestors`]: https://github.com/toomuchdesign/postcss-nested-ancestors
-[`postcss-nested-props`]:     https://github.com/jedmao/postcss-nested-props
-[`postcss-nesting`]:          https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting
-[CSSWG draft]:              https://drafts.csswg.org/css-nesting-1/
-[PostCSS]:                  https://github.com/postcss/postcss
-
+[`postcss-nested-props`]: https://github.com/jedmao/postcss-nested-props
+[`postcss-nesting`]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting
+[CSSWG draft]: https://drafts.csswg.org/css-nesting-1/
+[PostCSS]: https://github.com/postcss/postcss
 
 ## Usage
 
@@ -110,16 +109,16 @@ module.exports = {
 
 [official docs]: https://github.com/postcss/postcss#usage
 
-
 ## Options
 
 ### `bubble`
 
-By default, plugin will bubble only `@media`, `@supports` and `@layer`
-at-rules. Use this option to add your custom at-rules to this list.
+By default, plugin will bubble only `@media`, `@supports`, `@layer`,
+`@container`, and `@starting-style` at-rules. Use this option
+to add your custom at-rules to this list.
 
 ```js
-postcss([ require('postcss-nested')({ bubble: ['phone'] }) ])
+postcss([require('postcss-nested')({ bubble: ['phone'] })])
 ```
 
 ```css
@@ -141,14 +140,13 @@ a {
 }
 ```
 
-
 ### `unwrap`
 
 By default, plugin will unwrap only `@font-face`, `@keyframes` and `@document`
 at-rules. You can add your custom at-rules to this list by `unwrap` option:
 
 ```js
-postcss([ require('postcss-nested')({ unwrap: ['phone'] }) ])
+postcss([require('postcss-nested')({ unwrap: ['phone'] })])
 ```
 
 ```css
@@ -168,51 +166,56 @@ a {
 }
 ```
 
-
 ### `preserveEmpty`
 
 By default, plugin will strip out any empty selector generated by intermediate
 nesting levels. You can set `preserveEmpty` to `true` to preserve them.
 
 ```css
 .a {
-    .b {
-        color: black;
-    }
+  .b {
+    color: black;
+  }
 }
 ```
 
 Will be compiled to:
 
 ```css
-.a { }
+.a {
+}
 .a .b {
-    color: black;
+  color: black;
 }
 ```
 
 This is especially useful if you want to export the empty classes with `postcss-modules`.
 
-
 ### `rootRuleName`
 
 The plugin supports the SCSS custom at-rule `@at-root` which breaks rule
 blocks out of their nested position. If you want, you can choose a new
 custom name for this rule in your code.
 
 ```js
-postcss([ require('postcss-nested')({ rootRuleName: '_escape-nesting' }) ])
+postcss([require('postcss-nested')({ rootRuleName: '_escape-nesting' })])
 ```
 
 ```css
 /* input */
 .a {
   color: white;
   @_escape-nesting {
-    .b { color: black; }
+    .b {
+      color: black;
+    }
   }
 }
 /* output */
-.a { color: white; }
-.b { color: black; }
+.a {
+  color: white;
+}
+.b {
+  color: black;
+}
 ```

index.js

@@ -269,7 +269,7 @@ const hasRootRule = Symbol('hasRootRule')
 
 module.exports = (opts = {}) => {
   let bubble = atruleNames(
-    ['media', 'supports', 'layer', 'container'],
+    ['media', 'supports', 'layer', 'container', 'starting-style'],
     opts.bubble
   )
   let atruleChilds = createFnAtruleChilds(bubble)