Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-150429

Styled Theme _liferay_custom.scss uses @extend without the !optional flag

Details

    Description

      https://github.com/liferay/liferay-portal/blob/89ea6114c45e45c60cc945726f5c26108b3e7669/modules/apps/frontend-theme/frontend-theme-styled/src/main/resources/META-INF/resources/_styled/css/_liferay_custom.scss#L9

      The `@extend` directive causes custom themes to error if `clay/components/_alerts.scss` isn't imported. The `!optional` flag makes extend do nothing if the selector doesn't exist. See https://sass-lang.com/documentation/at-rules/extend#mandatory-and-optional-extends.

       

      How to test:

      1) In classic theme create `css/clay/_components.scss`

      2) Copy paste https://github.com/liferay/clay/blob/5ce984402f1d42d53da225b4c75b14746c5139dd/packages/clay-css/src/scss/_components.scss into that file and comment out line 26 (`@import 'components/_alerts';`)

      3) Deploy

      4) It should Error: The target selector was not found.

      Attachments

        Activity

          People

            team-frontend-infrastructure Product Team Frontend Infrastructure
            patrick.yeo Patrick Yeo
            Kiyoshi Lee Kiyoshi Lee
            Patrick Yeo Patrick Yeo
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved:
              27 weeks ago

              Packages

                Version Package
                7.4.3.19 CE GA19
                Master