iOS: using @import in CSS file crashes appstore or device builds

jfalcone commented 2 years ago

I have searched and made sure there are no existing issues for the issue I am filing

[X] I have searched the existing issues

Description

This was incredibly obscure. We have an app which takes content from a website and then presents the content in webviews. This app is 10 years old and has been updated every year to SDK 9 until the pandemic. This year we started work on this app again and we ran it successfully with SDK 10 and 11 on emulators. But when we tried to build for appstore or device, the build crashed with [ERROR] Build failed. Reason: Unknown. during the phase of the build where it is copying assets. It was through trial and error that we discovered that an @import statement in a css file was causing this.

Expected Behavior

successful appstore or device build

Actual behavior

Crashes build.

[INFO]  Creating debugger and profiler plists
[DEBUG] Skipping /Users/jrf/Studio/test/build/iphone/build/Products/Debug-iphoneos/test.app/debugger.plist
[DEBUG] Skipping /Users/jrf/Studio/test/build/iphone/build/Products/Debug-iphoneos/test.app/profiler.plist
[INFO]  Analyzing Resources directory
[INFO]  Analyzing module files
[INFO]  Analyzing CommonJS modules
[INFO]  Analyzing localized launch images
[DEBUG] Copying CSS files
[TRACE] process-css: Setting initial task state to "created"
[TRACE] process-css: Starting task
[TRACE] process-css: Changing task state from "created" to "running"
[INFO]  Processing JavaScript files
[TRACE] process-js: Setting initial task state to "created"
[TRACE] process-js: Starting task
[TRACE] process-js: Changing task state from "created" to "running"
[INFO]  Writing app properties
[DEBUG] Writing /Users/jrf/Studio/test/build/iphone/assets/_app_props__json
[DEBUG] Writing ENV variables
[DEBUG] Writing /Users/jrf/Studio/test/build/iphone/assets/_env__json
[INFO]  Creating asset catalog
[TRACE] process-css: No incremental data, do full task run
[TRACE] process-js: No incremental data, do full task run
Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
[DEBUG] process-js: Copying and minifying /Users/jrf/Library/Application Support/Titanium/mobilesdk/osx/11.0.0.GA/common/Resources/ios/ti.kernel.js => /Users/jrf/Studio/test/build/iphone/assets/ti_kernel_js
[DEBUG] process-js: Copying and minifying /Users/jrf/Library/Application Support/Titanium/mobilesdk/osx/11.0.0.GA/common/Resources/ios/ti.main.js => /Users/jrf/Studio/test/build/iphone/assets/ti_main_js
[DEBUG] process-js: Copying and minifying /Users/jrf/Studio/test/Resources/app.js => /Users/jrf/Studio/test/build/iphone/assets/app_js
[DEBUG] process-js: Copying and minifying /Users/jrf/Studio/test/Resources/oldapp.js => /Users/jrf/Studio/test/build/iphone/assets/oldapp_js
[DEBUG] process-js: Copying and minifying /Users/jrf/Studio/test/Resources/platformInfo.js => /Users/jrf/Studio/test/build/iphone/assets/platformInfo_js
[DEBUG] process-js: Copying and minifying /Users/jrf/Studio/test/Resources/underscore.js => /Users/jrf/Studio/test/build/iphone/assets/underscore_js
[DEBUG] Writing /Users/jrf/Studio/test/build/iphone/Assets.xcassets/Contents.json
[ERROR] Build failed. Reason: Unknown

Reproducible sample

Just include any css file with an @import statement in any app. It's not the code - it's the presence of the css file that crashes the build. Emulator builds work; only appstore and device builds are affected.

Steps to reproduce

Create a css file with just one line (for example): @import 'w3.css';

Include this file in Resources anywhere.

The included file 'w3.css' does not have to be present - it fails either way.

Try to build for iOS device or appstore using SDK 10 or 11. Note that this did work in SDK 9.

Build fails.

Platform

iOS

SDK version you are using

10 or 11

Alloy version you are using

N/A

ewanharris commented 2 years ago

I'm guessing there's some bad handling on the CSS task that's not raising the error.

The processImport: false setting added in #7141 looks to have been removed in v4 of clean-css in favour of a new setting, so now the @import statement is being processed and erroring for some reason, when w3.css doesn't exist it's most likely because well.. it doesn't exist, I'm not sure what the error you're receiving is when it does exist.

@jfalcone if you try opening up your SDK and replace the css minify call with the below, what is the error that is logged when processing that file?

try {
    const output = await css.minify(source);
    return fs.writeFile(info.dest, output.styles);
} catch (error) {
    console.log(error);
    process.exit(1);
}

I'm wondering if it's able to not find the w3.css file even if it "exists" because clean-css doesn't know where to look? i.e. clean-css is looking in your apps top level directory and not Resources/whatever.

If you change processImport: false to inline: 'none' does that fix the issue and your app still function as expected? inline: 'none' appears to be the replacement for processImport: false

jfalcone commented 2 years ago

Thanks for the suggestions...

jfalcone commented 2 years ago

Well played... it was indeed looking to import from the top level directory instead of Resources.

I installed the try...catch and when w3.css was in the Resources directory, the error was [ 'Ignoring local @import of "w3.css" as resource is missing.' ] and when I put w3.css in the top level directory, the build was successful.

Obviously, it would be nice to get that error message instead of having the build die with Reason: Unknown!

ewanharris commented 2 years ago

I'm guessing that's why the SDK sets processImports: false then. If you try the second suggestion of setting inline: 'none' does that work and your app still function as expected?

That should keep the behaviour of clean-css not processing any imports I believe

ewanharris commented 2 years ago

@jfalcone, have you had anytime to try the fix I mentioned above to see if it resolves the issue completely and correctly?

jfalcone commented 2 years ago

Sorry - I have a workaround in place that is actually a better solution (the original CSS came from another developer) and a very tight deadline so just been focusing on getting the product out. Maybe next week.

tidev / titanium-sdk