Use nested selector for deeper components as one of the package updates broke the behavior somewhere.
Github Actions had the following error when building frontend assets:
Run yarn run production
yarn run v1.22.19
$ npx mix --production
node:internal/crypto/hash:71
this[kHandle] = new _Hash(algorithm, xofLen);
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at BulkUpdateDecorator.hashFactory (/home/runner/work/statamic-responsive-images/statamic-responsive-images/node_modules/webpack/lib/util/createHash.js:1[4](https://github.com/spatie/statamic-responsive-images/actions/runs/4966684397/jobs/8888254957#step:5:5)4:18)
at BulkUpdateDecorator.digest (/home/runner/work/statamic-responsive-images/statamic-responsive-images/node_modules/webpack/lib/util/createHash.js:79:21)
at NormalModule._initBuildHash (/home/runner/work/statamic-responsive-images/statamic-responsive-images/node_modules/webpack/lib/NormalModule.js:7[5](https://github.com/spatie/statamic-responsive-images/actions/runs/4966684397/jobs/8888254957#step:5:6)7:53)
at /home/runner/work/statamic-responsive-images/statamic-responsive-images/node_modules/webpack/lib/NormalModule.js:795:10
at processResult (/home/runner/work/statamic-responsive-images/statamic-responsive-images/node_modules/webpack/lib/NormalModule.js:[6](https://github.com/spatie/statamic-responsive-images/actions/runs/4966684397/jobs/8888254957#step:5:7)05:12)
at /home/runner/work/statamic-responsive-images/statamic-responsive-images/node_modules/webpack/lib/NormalModule.js:692:5
at /home/runner/work/statamic-responsive-images/statamic-responsive-images/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /home/runner/work/statamic-responsive-images/statamic-responsive-images/node_modules/loader-runner/lib/LoaderRunner.js:251:1[8](https://github.com/spatie/statamic-responsive-images/actions/runs/4966684397/jobs/8888254957#step:5:9)
at context.callback (/home/runner/work/statamic-responsive-images/statamic-responsive-images/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at /home/runner/work/statamic-responsive-images/statamic-responsive-images/node_modules/babel-loader/lib/index.js:5[9](https://github.com/spatie/statamic-responsive-images/actions/runs/4966684397/jobs/8888254957#step:5:10):[10](https://github.com/spatie/statamic-responsive-images/actions/runs/4966684397/jobs/8888254957#step:5:11)3 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
Node.js v18.[16](https://github.com/spatie/statamic-responsive-images/actions/runs/4966684397/jobs/8888254957#step:5:17).0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Process completed with exit code 1.
yarn upgrade seem to have resolved it. The other solution was to downgrade Node to 16, but that is just.. lame.
I also had to adjust Vue component selectors to get the styles working again for deep component styles.
Use nested selector for deeper components as one of the package updates broke the behavior somewhere.
Github Actions had the following error when building frontend assets:
yarn upgrade
seem to have resolved it. The other solution was to downgrade Node to 16, but that is just.. lame.I also had to adjust Vue component selectors to get the styles working again for deep component styles.