Bug 32422

Summary: Hardcoded paths in _common.scss prevent using external node_modules
Product: Koha Reporter: Tomás Cohen Arazi (tcohen) <tomascohen>
Component: Architecture, internals, and plumbingAssignee: Tomás Cohen Arazi (tcohen) <tomascohen>
Status: CLOSED FIXED QA Contact: Martin Renvoize (ashimema) <martin.renvoize>
Severity: major    
Priority: P5 - low CC: jonathan.druart, kyle, lucas, martin.renvoize, oleonard, tomascohen
Version: unspecified   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: Trivial patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
23.05.00,22.11.01
Circulation function:
Attachments: Bug 32422: Hardcoded paths in _common.scss precent using external node_modules
Bug 32422: Hardcoded paths in _common.scss precent using external node_modules
Bug 32422: Hardcoded paths in _common.scss precent using external node_modules
Bug 32422: Hardcoded paths in _common.scss precent using external node_modules

Description Tomás Cohen Arazi (tcohen) 2022-12-07 19:14:48 UTC
Whenever you try to build the OPAC view, this happens:

root@kohadevbox:koha(master)$ kshell 
kohadev-koha@kohadevbox:/kohadevbox/koha$ yarn build --view opac
yarn run v1.22.19
$ gulp build --view opac
[18:27:38] Using gulpfile /kohadevbox/koha/gulpfile.js
[18:27:38] Starting 'build'...
Error in plugin 'sass'
Message:
    koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
Error: File to import not found or unreadable: ../../../../../node_modules/bootstrap/scss/functions.
        on line 37 of koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
        from line 1 of koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>> @import "../../../../../node_modules/bootstrap/scss/functions";

   ^

[18:27:38] Finished 'build' after 36 ms
Done in 1.39s.
Comment 1 Tomás Cohen Arazi (tcohen) 2022-12-07 19:26:15 UTC
Created attachment 144487 [details] [review]
Bug 32422: Hardcoded paths in _common.scss precent using external node_modules

This patch makes:

- gulpfile.js add the parent dir's node_modules to the sass include path
- removes hardcoded paths from _common.scss

To test:
1. Have the latest KTD image (this is not KTD specific, but easier to
   test)
2. Make sure you don't have any node_modules/ dir in your koha clone
3. Run:
   $ kshell
  k$ yarn build --view opac
=> FAIL: You get:
kohadev-koha@kohadevbox:/kohadevbox/koha$ yarn build --view opac
yarn run v1.22.19
$ gulp build --view opac
[18:27:38] Using gulpfile /kohadevbox/koha/gulpfile.js
[18:27:38] Starting 'build'...
Error in plugin 'sass'
Message:
    koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
Error: File to import not found or unreadable: ../../../../../node_modules/bootstrap/scss/functions.
        on line 37 of koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
        from line 1 of koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>> @import "../../../../../node_modules/bootstrap/scss/functions";

   ^

4. Apply this patch
5. Repeat 3
=> SUCCESS: It builds!
6. Sign off :-D

Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
Comment 2 Tomás Cohen Arazi (tcohen) 2022-12-07 19:30:46 UTC
Created attachment 144488 [details] [review]
Bug 32422: Hardcoded paths in _common.scss precent using external node_modules

This patch makes:

- gulpfile.js add the parent dir's node_modules to the sass include path
- removes hardcoded paths from _common.scss

To test:
1. Have the latest KTD image (this is not KTD specific, but easier to
   test)
2. Make sure you don't have any node_modules/ dir in your koha clone
3. Run:
   $ kshell
  k$ yarn build --view opac
=> FAIL: You get:
kohadev-koha@kohadevbox:/kohadevbox/koha$ yarn build --view opac
yarn run v1.22.19
$ gulp build --view opac
[18:27:38] Using gulpfile /kohadevbox/koha/gulpfile.js
[18:27:38] Starting 'build'...
Error in plugin 'sass'
Message:
    koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
Error: File to import not found or unreadable: ../../../../../node_modules/bootstrap/scss/functions.
        on line 37 of koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
        from line 1 of koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>> @import "../../../../../node_modules/bootstrap/scss/functions";

   ^

4. Apply this patch
5. Repeat 3
=> SUCCESS: It builds!
6. Sign off :-D

Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
Comment 3 David Nind 2022-12-09 10:15:27 UTC
Created attachment 144523 [details] [review]
Bug 32422: Hardcoded paths in _common.scss precent using external node_modules

This patch makes:

- gulpfile.js add the parent dir's node_modules to the sass include path
- removes hardcoded paths from _common.scss

To test:
1. Have the latest KTD image (this is not KTD specific, but easier to
   test)
2. Make sure you don't have any node_modules/ dir in your koha clone
3. Run:
   $ kshell
  k$ yarn build --view opac
=> FAIL: You get:
kohadev-koha@kohadevbox:/kohadevbox/koha$ yarn build --view opac
yarn run v1.22.19
$ gulp build --view opac
[18:27:38] Using gulpfile /kohadevbox/koha/gulpfile.js
[18:27:38] Starting 'build'...
Error in plugin 'sass'
Message:
    koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
Error: File to import not found or unreadable: ../../../../../node_modules/bootstrap/scss/functions.
        on line 37 of koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
        from line 1 of koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>> @import "../../../../../node_modules/bootstrap/scss/functions";

   ^

4. Apply this patch
5. Repeat 3
=> SUCCESS: It builds!
6. Sign off :-D

Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

Signed-off-by: David Nind <david@davidnind.com>
Comment 4 Martin Renvoize (ashimema) 2022-12-09 15:59:40 UTC
Created attachment 144531 [details] [review]
Bug 32422: Hardcoded paths in _common.scss precent using external node_modules

This patch makes:

- gulpfile.js add the parent dir's node_modules to the sass include path
- removes hardcoded paths from _common.scss

To test:
1. Have the latest KTD image (this is not KTD specific, but easier to
   test)
2. Make sure you don't have any node_modules/ dir in your koha clone
3. Run:
   $ kshell
  k$ yarn build --view opac
=> FAIL: You get:
kohadev-koha@kohadevbox:/kohadevbox/koha$ yarn build --view opac
yarn run v1.22.19
$ gulp build --view opac
[18:27:38] Using gulpfile /kohadevbox/koha/gulpfile.js
[18:27:38] Starting 'build'...
Error in plugin 'sass'
Message:
    koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
Error: File to import not found or unreadable: ../../../../../node_modules/bootstrap/scss/functions.
        on line 37 of koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
        from line 1 of koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>> @import "../../../../../node_modules/bootstrap/scss/functions";

   ^

4. Apply this patch
5. Repeat 3
=> SUCCESS: It builds!
6. Sign off :-D

Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 5 Martin Renvoize (ashimema) 2022-12-09 16:00:36 UTC
This gets the sandboxes happy again at building css for the OPAC.. and it cleans up our css to boot.

Nice work, no regressions found.

Passing QA
Comment 6 Tomás Cohen Arazi (tcohen) 2022-12-12 15:21:29 UTC
Pushed to master for 23.05.

Nice work everyone, thanks!
Comment 7 Martin Renvoize (ashimema) 2022-12-15 13:24:14 UTC
Nice work everyone!

Pushed to 22.11.x for the next release
Comment 8 Lucas Gass (lukeg) 2023-01-19 22:40:34 UTC
This depends on Bug 32030?