Verified Commit 7e8c3b8b authored by Alex Pott's avatar Alex Pott
Browse files

Issue #3313146 by mherchel, andy-blum: PostCSS Logical not transpiling flow... 

Issue #3313146 by mherchel, andy-blum:  PostCSS Logical not transpiling flow relative properties (e.g. float: inline-start) which are not supported by Chrome and Safari

(cherry picked from commit 33c59bbc)
parent b2ab27aa

core/modules/workspaces/css/workspaces.toolbar.css

+27 −2
Original line number Diff line number Diff line
@@ -22,12 +22,37 @@ 
}



.toolbar-oriented .toolbar-bar .workspaces-toolbar-tab {

  float: inline-end;

  float: right; /* LTR */



  /**

   * Chromium and Webkit do not yet support flow relative logical properties,

   * such as float: inline-end. However, PostCSS Logical does not compile this

   * value, so we accommodate by not using these.

   *

   * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values

   * @see https://github.com/csstools/postcss-plugins/issues/632

   */

}



[dir="rtl"] .toolbar-oriented .toolbar-bar .workspaces-toolbar-tab {

    float: left;

  }



@media (min-width: 16.5rem) {

  .toolbar:not(.toolbar-oriented) .toolbar-bar .workspaces-toolbar-tab {

    float: inline-end;

    float: right; /* LTR */



    /**

     * Chromium and Webkit do not yet support flow relative logical properties,

     * such as float: inline-end. However, PostCSS Logical does not compile this

     * value, so we accommodate by not using these.

     *

     * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values

     * @see https://github.com/csstools/postcss-plugins/issues/632

     */

  }

    [dir="rtl"] .toolbar:not(.toolbar-oriented) .toolbar-bar .workspaces-toolbar-tab {

      float: left;

    }

}

core/modules/workspaces/css/workspaces.toolbar.pcss.css

+26 −2
Original line number Diff line number Diff line
@@ -12,12 +12,36 @@ 
  background-color: #81c071;

}

.toolbar-oriented .toolbar-bar .workspaces-toolbar-tab {

  float: inline-end;

  float: right; /* LTR */



  /**

   * Chromium and Webkit do not yet support flow relative logical properties,

   * such as float: inline-end. However, PostCSS Logical does not compile this

   * value, so we accommodate by not using these.

   *

   * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values

   * @see https://github.com/csstools/postcss-plugins/issues/632

   */

  &:dir(rtl) {

    float: left;

  }

}



@media (min-width: 264px) {

  .toolbar:not(.toolbar-oriented) .toolbar-bar .workspaces-toolbar-tab {

    float: inline-end;

    float: right; /* LTR */



    /**

     * Chromium and Webkit do not yet support flow relative logical properties,

     * such as float: inline-end. However, PostCSS Logical does not compile this

     * value, so we accommodate by not using these.

     *

     * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values

     * @see https://github.com/csstools/postcss-plugins/issues/632

     */

    &:dir(rtl) {

      float: left;

    }

  }

}

core/themes/olivero/css/components/embedded-media.css

+26 −2
Original line number Diff line number Diff line
@@ -59,12 +59,24 @@ figcaption { 
@media (min-width: 43.75rem) {



.align-right {

    float: inline-end;

    float: right; /* LTR */

    max-width: 50%;

    margin-block-start: var(--sp);

    margin-block-end: var(--sp);

    margin-inline-start: var(--sp);

    margin-inline-end: 0;



    /**

     * Chromium and Webkit do not yet support flow relative logical properties,

     * such as float: inline-end. However, PostCSS Logical does not compile this

     * value, so we accommodate by not using these.

     *

     * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values

     * @see https://github.com/csstools/postcss-plugins/issues/632

     */

}

    [dir="rtl"] .align-right {

      float: left;

    }

  }
@@ -116,12 +128,24 @@ figcaption { 
@media (min-width: 43.75rem) {



.align-left {

    float: inline-start;

    float: left; /* LTR */

    max-width: 50%;

    margin-block-start: var(--sp);

    margin-block-end: var(--sp);

    margin-inline-start: 0;

    margin-inline-end: var(--sp2); /* Extra right margins in case of aligning next to lists. */



    /**

     * Chromium and Webkit do not yet support flow relative logical properties,

     * such as float: inline-end. However, PostCSS Logical does not compile this

     * value, so we accommodate by not using these.

     *

     * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values

     * @see https://github.com/csstools/postcss-plugins/issues/632

     */

}

    [dir="rtl"] .align-left {

      float: right;

    }

  }

core/themes/olivero/css/components/embedded-media.pcss.css

+26 −2
Original line number Diff line number Diff line
@@ -35,12 +35,24 @@ figcaption { 
  margin-inline-end: 0;



  @media (--grid-md) {

    float: inline-end;

    float: right; /* LTR */

    max-width: 50%;

    margin-block-start: var(--sp);

    margin-block-end: var(--sp);

    margin-inline-start: var(--sp);

    margin-inline-end: 0;



    /**

     * Chromium and Webkit do not yet support flow relative logical properties,

     * such as float: inline-end. However, PostCSS Logical does not compile this

     * value, so we accommodate by not using these.

     *

     * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values

     * @see https://github.com/csstools/postcss-plugins/issues/632

     */

    &:dir(rtl) {

      float: left;

    }

  }

}
@@ -74,12 +86,24 @@ figcaption { 
  margin-inline-end: 0;



  @media (--grid-md) {

    float: inline-start;

    float: left; /* LTR */

    max-width: 50%;

    margin-block-start: var(--sp);

    margin-block-end: var(--sp);

    margin-inline-start: 0;

    margin-inline-end: var(--sp2); /* Extra right margins in case of aligning next to lists. */



    /**

     * Chromium and Webkit do not yet support flow relative logical properties,

     * such as float: inline-end. However, PostCSS Logical does not compile this

     * value, so we accommodate by not using these.

     *

     * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values

     * @see https://github.com/csstools/postcss-plugins/issues/632

     */

    &:dir(rtl) {

      float: right;

    }

  }

}

core/themes/olivero/css/components/field.css

+14 −1
Original line number Diff line number Diff line
@@ -48,7 +48,20 @@ 


.field--label-inline .field__label,

.field--label-inline .field__items {

  float: inline-start;

  float: left; /* LTR */



  /**

   * Chromium and Webkit do not yet support flow relative logical properties,

   * such as float: inline-end. However, PostCSS Logical does not compile this

   * value, so we accommodate by not using these.

   *

   * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values

   * @see https://github.com/csstools/postcss-plugins/issues/632

   */

}



[dir="rtl"] .field--label-inline .field__label,[dir="rtl"]  .field--label-inline .field__items {

    float: right;

  }



.field--label-inline .field__label,