Enable by default, other tweaks

[boutell]

• enable by default
• adjust the breakpoints to give them a basis in popular device sizes
• change the option name and translation key names (we can do the rest later) to match the way we talk about the feature elsewhere before it is too late to harmonize them

[boutell]

This is temporary until the rest of the logic can be changed over, I didn't want to cowboy that and risk bugs, the idea is to document breakpointPreviewMode and change the rest of the code when we have time

[haroun]

I'm doing the changes, releasing with the two names will only make our life harder.

[boutell]

Please tell me if we're missing something, e.g. we think this feature is highly likely to break somebody's build completely if we default it to true. Otherwise we really want people to have this experience out of the box

[haroun]

We do some css transformations on css declarations inside media queries.
If you have

@media (max-width: 700px) {
  main {
    width: 100%;
  }
}

you will end up with

@media (max-width: 700px) {
  :where(:not(body[data-breakpoint-preview-mode])) main {
    width: 100%;
  }
}
@container (max-width: 700px) {
  main {
    width: 100%;
  }
}

:where is widely supported https://developer.mozilla.org/en-US/docs/Web/CSS/:where

I should be safe to use.

[haroun]

that was the main driver for setting enabled: false by default.

[BoDonkey]

LGTM