liferay / liferay-js-themes-toolkit

MIT License
26 stars 28 forks source link

Error: It's not clear which file to import for '@import "custom"' #265

Closed john-co closed 3 years ago

john-co commented 5 years ago

Steps to reproduce:

  1. npm install -g generator-liferay-themes@v8.0.3
  2. yo liferay-theme:import on 6.2 theme (zoe-health)
  3. gulp upgrade
  4. answer yes or no to ? Do you want to rename custom.css to _custom.scss?
  5. gulp deploy

Assert error thrown:

[11:16:36] Using gulpfile ~/zoe-healthcare-theme/gulpfile.js
[11:16:36] Starting 'upgrade'...
[11:16:36] Starting 'upgrade:create-backup-files'...
[11:16:36] Finished 'upgrade:create-backup-files' after 77 ms
[11:16:36] Starting 'upgrade:black-list'...
[11:16:36] Finished 'upgrade:black-list' after 4.26 ms
[11:16:36] Starting 'upgrade:replace-compass'...
[11:16:36] Finished 'upgrade:replace-compass' after 4.47 ms
[11:16:36] Starting 'upgrade:convert-bootstrap'...
Wrote file: src/css/custom.css
[11:16:36] Finished 'upgrade:convert-bootstrap' after 43 ms
[11:16:36] Starting 'upgrade:config'...
[11:16:36] Finished 'upgrade:config' after 3.09 ms
[11:16:36] Starting 'upgrade:rename-core-files'...
? Do you want to rename custom.css to _custom.scss? Yes
[11:16:50] Finished 'upgrade:rename-core-files' after 14 s
[11:16:50] Starting 'upgrade:create-css-diff'...
[11:16:50] Finished 'upgrade:create-css-diff' after 27 ms
[11:16:50] Starting 'upgrade:dependencies'...
npm WARN zoe-healthcare-theme@1.0.0 No description
npm WARN zoe-healthcare-theme@1.0.0 No repository field.
npm WARN zoe-healthcare-theme@1.0.0 No license field.

audited 8584 packages in 3.803s
found 52 vulnerabilities (17 low, 14 moderate, 21 high)
  run `npm audit fix` to fix them, or `npm audit` for details
[11:16:54] Finished 'upgrade:dependencies' after 4.4 s
[11:16:54] Starting 'upgrade:create-deprecated-mixins'...
[11:16:54] Finished 'upgrade:create-deprecated-mixins' after 7.25 ms
[11:16:54] Starting 'upgrade:ftl-templates'...
[11:16:54] Finished 'upgrade:ftl-templates' after 5.93 ms
[11:16:54] Starting 'upgrade:vm-templates'...
[11:16:54] Finished 'upgrade:vm-templates' after 4.38 ms
[11:16:54] Starting 'upgrade:log-changes'...

----------------------------------------------------------------
 Bootstrap Upgrade (2 to 3)
----------------------------------------------------------------

| Because Liferay Portal 7.0 uses Bootstrap 3, the default box model has been changed to box-sizing: border-box. So if you were using width or height, and padding together on an element, you may need to make changes, or those elements may have unexpected sizes.

File: src/css/custom.css
    Line 13: Padding no longer affects width or height, you may need to change your rule (lines 13-19)
    Line 113: Padding no longer affects width or height, you may need to change your rule (lines 113-165)
    Line 152: Padding no longer affects width or height, you may need to change your rule (lines 152-159)
    Line 367: Padding no longer affects width or height, you may need to change your rule (lines 367-404)
    Line 369: You would change width from "650px" to "690px"

----------------------------------------------------------------
 Liferay Upgrade (6.2 to 7)
----------------------------------------------------------------

File: init_custom.vm
    Warning: Support for Velocity (.vm) format is deprecated, consider migrating to FreeMarker (.ftl) format. See: https://bit.ly/2uSXySe
File: portal_normal.vm
    Warning: Support for Velocity (.vm) format is deprecated, consider migrating to FreeMarker (.ftl) format. See: https://bit.ly/2uSXySe
    Warning: #dockbar() is deprecated, replace with #control_menu() for new admin controls.
    Warning: not all admin controls will be visible without #control_menu()
[11:16:54] Finished 'upgrade:log-changes' after 239 μs
[11:16:54] Finished 'upgrade' after 18 s
john-co@john-co:~/zoe-healthcare-theme$ gulp deploy
[11:16:57] Using gulpfile ~/zoe-healthcare-theme/gulpfile.js
[11:16:57] Starting 'deploy'...
[11:16:57] Starting 'build'...
[11:16:57] Starting 'build:clean'...
[11:16:57] Finished 'build:clean' after 4.12 ms
[11:16:57] Starting 'build:base'...
[11:16:58] Finished 'build:base' after 399 ms
[11:16:58] Starting 'build:src'...
[11:16:58] Finished 'build:src' after 23 ms
[11:16:58] Starting 'build:web-inf'...
[11:16:58] Finished 'build:web-inf' after 10 ms
[11:16:58] Starting 'build:liferay-look-and-feel'...
[11:16:58] Finished 'build:liferay-look-and-feel' after 9.05 ms
[11:16:58] Starting 'build:hook'...
[11:16:58] Finished 'build:hook' after 7.09 ms
[11:16:58] Starting 'build:themelets'...
[11:16:58] Starting 'build:themelet-src'...
[11:16:58] Finished 'build:themelet-src' after 655 μs
[11:16:58] Starting 'build:themelet-css-inject'...
[11:16:58] Starting 'build:themelet-js-inject'...
[11:16:58] gulp-inject Nothing to inject into _custom.scss.
[11:16:58] gulp-inject Nothing to inject into portal_normal.vm.
[11:16:58] Finished 'build:themelet-css-inject' after 22 ms
[11:16:58] Finished 'build:themelet-js-inject' after 6.47 ms
[11:16:58] Finished 'build:themelets' after 24 ms
[11:16:58] Starting 'build:rename-css-dir'...
[11:16:58] Finished 'build:rename-css-dir' after 145 μs
[11:16:58] Starting 'build:compile-css'...
[11:16:58] Starting 'build:compile-lib-sass'...
[11:16:58] Plumber found unhandled error:
 Error in plugin 'gulp-sass'
Message:
    build/_css/main.scss
Error: It's not clear which file to import for '@import "custom"'.
       Candidates:
         _custom.scss
         custom.css
       Please delete or rename all but one of these files.
        on line 19 of build/_css/main.scss
>> @import "custom";
   ^

Details:
    status: 1
    file: /home/john-co/zoe-healthcare-theme/build/_css/main.scss
    line: 19
    column: 1
    formatted: Error: It's not clear which file to import for '@import "custom"'.
       Candidates:
         _custom.scss
         custom.css
       Please delete or rename all but one of these files.
        on line 19 of build/_css/main.scss
>> @import "custom";
   ^

    messageFormatted: build/_css/main.scss
Error: It's not clear which file to import for '@import "custom"'.
       Candidates:
         _custom.scss
         custom.css
       Please delete or rename all but one of these files.
        on line 19 of build/_css/main.scss
>> @import "custom";
   ^

    messageOriginal: It's not clear which file to import for '@import "custom"'.
Candidates:
  _custom.scss
  custom.css
Please delete or rename all but one of these files.

    relativePath: build/_css/main.scss
[11:16:58] Finished 'build:compile-lib-sass' after 563 ms
[11:16:58] Finished 'build:compile-css' after 564 ms
[11:16:58] Starting 'build:fix-url-functions'...
[11:16:58] Finished 'build:fix-url-functions' after 28 ms
[11:16:58] Starting 'build:move-compiled-css'...
[11:16:58] Finished 'build:move-compiled-css' after 105 ms
[11:16:58] Starting 'build:remove-old-css-dir'...
[11:16:59] Finished 'build:remove-old-css-dir' after 33 ms
[11:16:59] Starting 'build:fix-at-directives'...
[11:16:59] Finished 'build:fix-at-directives' after 7.56 ms
[11:16:59] Starting 'build:r2'...
[11:16:59] Plumber found unhandled error:
 Error: property missing ':' near line 13:14
[11:16:59] Finished 'build:r2' after 68 ms
[11:16:59] Starting 'build:war'...
[11:16:59] Starting 'plugin:version'...
[11:16:59] Finished 'plugin:version' after 896 μs
[11:16:59] Starting 'plugin:war'...
[11:16:59] Finished 'plugin:war' after 495 ms
[11:16:59] Finished 'build:war' after 497 ms
[11:16:59] Finished 'build' after 1.78 s
[11:16:59] Starting 'deploy:war'...
[11:16:59] Starting 'plugin:deploy'...
[11:16:59] Deploying to /home/john-co/Liferay/public/master-bundles/deploy
[11:16:59] Finished 'plugin:deploy' after 5.83 ms
[11:16:59] Finished 'deploy:war' after 6.11 ms
[11:16:59] Finished 'deploy' after 1.79 s
john-co commented 5 years ago

Errors thrown on liferay portal console when deployed: https://gist.github.com/john-co/5eff609fc295098141d92c38156d6e94

zhangyan0701 commented 5 years ago

Same error also occurs when run 'gulp build'.

wincent commented 5 years ago

Unfortunately this looks very specific to the theme so I can't repro this with the 6.2 theme that I've been testing with (manzanita-theme). Can you give me a pointer on where to get a hold of the zoe-health theme?

FWIW, I also run into errors with manzanita-theme, but they are different (for example, it is trying to locate mixins like "aui/alloy-font-awesome/scss/mixins-alloy" that it doesn't have). I think this whole thing is going to be very sensitive when dealing with very old themes. I am suspicious of one bit of the code that is supposedly doing these renames (ie. the ones that the "Do you want to rename custom.css to _custom.scs" prompt — and similar — are asking about), so I'll look into that, which may help, but I don't know if it will fix the issue.

john-co commented 5 years ago

@wincent Thanks for looking into it! For some additional info: I don't remember that question (rename custom.css to _custom.scs) ever being asked during gulp deploy until the recent update in v8.0.2. It didn't show up in gulp deploy when I went through the test plan last summer. So my hunch is also leaning towards that as a good trail to find a fix.

john-co commented 5 years ago

@wincent scratch my last comment, it did ask for that prompt last summer when I tested it. (rename custom.css to _custom.scs).

wincent commented 5 years ago

Ok, I believe that #268 which I just pushed fixes this. I used the "zoe-healthcare-theme" from https://github.com/liferay/liferay-plugins/tree/6.2.x/themes/zoe-healthcare-theme and I answered "yes" at the prompt to rename "custom.css" to "_custom.scss". After that, gulp build works fine. I don't know if gulp deploy works as I don't have a 7.0 instance handy (need to figure out how to install and run older versions), but I believe it is very likely to work.

wincent commented 5 years ago

FWIW, I downloaded the latest 7.0 CE and gulp deploy works, sort of. That is, no error messages on the gulp side, no error messages in the tomcat server log (apart from these which indicate success).

You can't see the theme in the instance though, and if you connect with the gogo shell (telnet localhost 11311) you will see it as installed but you can't start it:

! lb zoe
START LEVEL 20
   ID|State      |Level|Name
  555|Installed  |   10|zoe-healthcare-theme (1.0.0)
osgi> start 555
org.osgi.framework.BundleException: Could not resolve module: zoe-healthcare-theme [555]
  Unresolved requirement: Import-Package: com.swabunga.spell.engine; resolution:="optional"
  Unresolved requirement: Import-Package: com.swabunga.spell.event; resolution:="optional"
  Unresolved requirement: Import-Package: net.fortuna.ical4j.model; resolution:="optional"
  Unresolved requirement: Import-Package: net.fortuna.ical4j.model.property; resolution:="optional"
  Unresolved requirement: Import-Package: org.apache.axis.tools.ant.wsdl; resolution:="optional"
  Unresolved requirement: Import-Package: org.apache.bsf; resolution:="optional"
  Unresolved requirement: Import-Package: org.apache.poi.hssf.usermodel; resolution:="optional"
  Unresolved requirement: Import-Package: org.apache.poi.ss.usermodel; resolution:="optional"
  Unresolved requirement: Import-Package: org.apache.portals.bridges.common; resolution:="optional"
  Unresolved requirement: Import-Package: org.apache.portals.bridges.struts; resolution:="optional"
  Unresolved requirement: Require-Bundle: resources-importer-web; bundle-version="1.0.0"

@jbalsas thinks that is caused by this commit in the portal that bumped the resources importer to 2.0.0. The commit dates back to November 2017, but it's possible that it still hadn't made it into the community edition at the time you last went through the test plan.

Updating the theme's "package.json" to identify itself as "2.0.3" (to match the version claimed by the resources importer) sadly doesn't work:

g! start 555
org.osgi.framework.BundleException: Could not resolve module: zoe-healthcare-theme [555]
  Unresolved requirement: Import-Package: com.swabunga.spell.engine; resolution:="optional"
  Unresolved requirement: Import-Package: com.swabunga.spell.event; resolution:="optional"
  Unresolved requirement: Import-Package: net.fortuna.ical4j.model; resolution:="optional"
  Unresolved requirement: Import-Package: net.fortuna.ical4j.model.property; resolution:="optional"
  Unresolved requirement: Import-Package: org.apache.axis.tools.ant.wsdl; resolution:="optional"
  Unresolved requirement: Import-Package: org.apache.bsf; resolution:="optional"
  Unresolved requirement: Import-Package: org.apache.poi.hssf.usermodel; resolution:="optional"
  Unresolved requirement: Import-Package: org.apache.poi.ss.usermodel; resolution:="optional"
  Unresolved requirement: Import-Package: org.apache.portals.bridges.common; resolution:="optional"
  Unresolved requirement: Import-Package: org.apache.portals.bridges.struts; resolution:="optional"
  Unresolved requirement: Require-Bundle: resources-importer-web; bundle-version="2.0.3"

g! lb importer
START LEVEL 20
   ID|State      |Level|Name
  164|Active     |   10|Liferay Export Import Resources Importer (2.0.3)

I was able to get the theme to show up in the portal by hacking out all traces of the resources importer. That is:

diff --git a/src/WEB-INF/liferay-plugin-package.properties b/src/WEB-INF/liferay-plugin-package.properties
index 16b4fac..e204173 100644
--- a/src/WEB-INF/liferay-plugin-package.properties
+++ b/src/WEB-INF/liferay-plugin-package.properties
@@ -9,9 +9,3 @@ page-url=http://www.liferay.com
 author=Liferay, Inc.
 licenses=LGPL
 liferay-versions=7.0.0+
-
-required-deployment-contexts=\
-    resources-importer-web,\
-    web-form-portlet
-
-resources-importer-developer-mode-enabled=false

and then deleting references to "wap-template-path" that were also causing trouble:

diff --git a/src/WEB-INF/liferay-look-and-feel.xml b/src/WEB-INF/liferay-look-and-feel.xml
index e71ba9c..a79867b 100644
--- a/src/WEB-INF/liferay-look-and-feel.xml
+++ b/src/WEB-INF/liferay-look-and-feel.xml
@@ -20,12 +20,10 @@
                        <custom>
                                <layout-template id="1-2-3-columns" name="1-2-3 Columns Layout">
                                        <template-path>/layouttpl/custom/1-2-3-columns-layouttpl/1_2_3_columns.tpl</template-path>
-                                       <wap-template-path>/layouttpl/custom/1-2-3-columns-layouttpl/1_2_3_columns.tpl</wap-template-path>
                                        <thumbnail-path>/layouttpl/custom/1-2-3-columns-layouttpl/1_2_3_columns.png</thumbnail-path>
                                </layout-template>
                                <layout-template id="2-1-2-4-columns" name="2-1-2-4 Columns Layout">
                                        <template-path>/layouttpl/custom/2-1-2-4-columns-layouttpl/2_1_2_4_columns.tpl</template-path>
-                                       <wap-template-path>/layouttpl/custom/2-1-2-4-columns-layouttpl/2_1_2_4_columns.tpl</wap-template-p>
                                        <thumbnail-path>/layouttpl/custom/2-1-2-4-columns-layouttpl/2_1_2_4_columns.png</thumbnail-path>
                                </layout-template>
                        </custom>

I think, however, that in many cases these upgrades from very old 6.2 themes are going to require manual patching.

CC'ing @mtambara who made the referenced update to the resources importer as he might have some context on whether the above analysis is correct.

mtambara commented 5 years ago

@wincent The commit you're referring to was part of a ticket to restructure the exports from export-import. It shouldn't have made any changes to functionality

john-co commented 5 years ago

@wincent I get the same issue of zoe-healthcare-theme installed but not started verified through telnet 11311.

wincent commented 3 years ago

We've just migrated this project to the liferay-frontend-projects monorepo in the name of consolidation. As this issue is quite old now, I'm not going to transfer it automatically. If you consider it to be still relevant, please create a fresh issue over in the new repo.