Error: compound selectors may no longer be extended is encountered when building the themes

Issue

  • When creating the bare-bone theme without any customization, the build is encountered with the below error:
    [14:26:26] 'build:compile-css' errored after 4.9 s
    [14:26:26] Error in plugin "sass"
    Message:
        build/_css/compat/components/_dropdowns.scss
    Error: compound selectors may no longer be extended.
    Consider `@extend .dropdown-item, .disabled` instead.
    See http://bit.ly/ExtendCompound for details.
    
       ╷
    34 │         @extend .dropdown-item.disabled;
       │                 ^^^^^^^^^^^^^^^^^^^^^^^
       ╵
      build/_css/compat/components/_dropdowns.scss 34:11  root stylesheet
    Details:
        formatted: Error: compound selectors may no longer be extended.
    Consider `@extend .dropdown-item, .disabled` instead.
    See http://bit.ly/ExtendCompound for details.
    
       ╷
    34 │         @extend .dropdown-item.disabled;
       │                 ^^^^^^^^^^^^^^^^^^^^^^^
       ╵
      build/_css/compat/components/_dropdowns.scss 34:11  root stylesheet
        line: 34
        column: 11
        file: /Users/jordi/Downloads/Liferay/test1-theme/build/_css/compat/components/_dropdowns.scss
        status: 1
        messageFormatted: build/_css/compat/components/_dropdowns.scss
    Error: compound selectors may no longer be extended.
    Consider `@extend .dropdown-item, .disabled` instead.
    See http://bit.ly/ExtendCompound for details.
    
       ╷
    34 │         @extend .dropdown-item.disabled;
       │                 ^^^^^^^^^^^^^^^^^^^^^^^
       ╵
      build/_css/compat/components/_dropdowns.scss 34:11  root stylesheet
        messageOriginal: compound selectors may no longer be extended.
    Consider `@extend .dropdown-item, .disabled` instead.
    See http://bit.ly/ExtendCompound for details.
    
       ╷
    34 │         @extend .dropdown-item.disabled;
       │                 ^^^^^^^^^^^^^^^^^^^^^^^
       ╵
      build/_css/compat/components/_dropdowns.scss 34:11  root stylesheet
        relativePath: build/_css/compat/components/_dropdowns.scss
        domainEmitter: [object Object]
        domainThrown: false
    
    [14:26:26] 'build' errored after 5.96 s

Environment

  • Liferay DXP 7.3
  • node -v 14.17.0
  • npm -v 6.14.13

Resolution

  • The js-themes-toolkit switched the pre-processor from Libsass to Dart Sass. And, Dart Sass has introduced some breaking changes that cause builds of older themes to fail.
  • To build the themes, disable the Dart Sass in the configuration file to keep going to use the current basic tooling. 
    package.json:
    	"liferayTheme": {
    		"sassOptions": {
    			"dartSass": false
    		},
    		//...
    	},

Additional Information

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 0 de 0