search

tauri-apps / tauri

Build smaller, faster, and more secure desktop and mobile applications with a web frontend.
https://tauri.app
Apache License 2.0
83.52k stars 2.51k forks source link

[bug] Styles don't get bundled #3427

Closed Verzach3 closed 2 years ago

Verzach3 commented 2 years ago

Describe the bug

when i run tauri dev the styles work normally, but when i do tauri build the styles are not added to the bundle

With tauri dev

image

With tauri build

image

Reproduction

  1. Create new project with create-tauri-app, select Typescript
  2. Add @fluentui/react with yarn add @fluentui/react
  3. Add a button from fluentui, i added PrimaryButton and DefaultButton
  4. run cargo tauri dev and the styles load
  5. run cargo tauri build and the components appear without styles

Expected behavior

No response

Platform and versions

Operating System - Windows, version 10.0.22000 X64
Webview2 - 98.0.1108.43
Visual Studio Build Tools:
   - Visual Studio Build Tools 2019

Node.js environment
  Node.js - 16.14.0
  @tauri-apps/cli - 1.0.0-rc.0
  @tauri-apps/api - 1.0.0-rc.0

Global packages
  npm - 8.3.1
  pnpm - Not installed
  yarn - 1.22.17

Rust environment
  rustc - 1.58.1
  cargo - 1.58.0

Rust environment
  rustup - 1.24.3
  rustc - 1.58.1
  cargo - 1.58.0
  toolchain - stable-x86_64-pc-windows-msvc

App directory structure
/.git
/build
/node_modules
/public
/src
/src-tauri

App
  tauri.rs - 1.0.0-rc.1
  build-type - bundle
  CSP - default-src 'self'
  distDir - ../build
  devPath - http://localhost:3000/
  framework - React

Note: It says Windows 10 but is Windows 11

Stack trace

No response

Additional context

No response

kt215 commented 2 years ago

I have the same exact issue with angular.

nothingismagick commented 2 years ago

Can one of you share your tauri.conf file?

kt215 commented 2 years ago

In my case it's the default config created by npx create-tauri-app:

{
  "package": {
    "productName": "ngtest2",
    "version": "0.1.0"
  },
  "build": {
    "distDir": "../dist/ngtest2",
    "devPath": "http://localhost:4200",
    "beforeDevCommand": "npm run start",
    "beforeBuildCommand": "npm run build"
  },
  "tauri": {
    "bundle": {
      "active": true,
      "targets": "all",
      "identifier": "com.tauri.dev",
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/128x128@2x.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ],
      "resources": [],
      "externalBin": [],
      "copyright": "",
      "category": "DeveloperTool",
      "shortDescription": "",
      "longDescription": "",
      "deb": {
        "depends": [],
        "useBootstrapper": false
      },
      "macOS": {
        "frameworks": [],
        "minimumSystemVersion": "",
        "useBootstrapper": false,
        "exceptionDomain": "",
        "signingIdentity": null,
        "providerShortName": null,
        "entitlements": null
      },
      "windows": {
        "certificateThumbprint": null,
        "digestAlgorithm": "sha256",
        "timestampUrl": ""
      }
    },
    "updater": {
      "active": false
    },
    "allowlist": {
      "all": true
    },
    "windows": [
      {
        "title": "Angular Test 2",
        "width": 800,
        "height": 600,
        "resizable": true,
        "fullscreen": false
      }
    ],
    "security": {
      "csp": "default-src 'self'"
    }
  }
}
Verzach3 commented 2 years ago

This is mine

{
  "package": {
    "productName": "raffle-manager-tauri-react",
    "version": "0.1.0"
  },
  "build": {
    "distDir": "../build",
    "devPath": "http://localhost:3000",
    "beforeDevCommand": "yarn start",
    "beforeBuildCommand": "yarn build"
  },
  "tauri": {
    "bundle": {
      "active": true,
      "targets": "all",
      "identifier": "com.gaer.rafflemanager",
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/128x128@2x.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ],
      "resources": ["external/assets/"],
      "externalBin": [
        "external/binaries/raffle-editor",
        "external/binaries/list-dir"
      ],
      "copyright": "",
      "category": "DeveloperTool",
      "shortDescription": "",
      "longDescription": "",
      "deb": {
        "depends": [],
        "useBootstrapper": false
      },
      "macOS": {
        "frameworks": [],
        "minimumSystemVersion": "",
        "useBootstrapper": false,
        "exceptionDomain": "",
        "signingIdentity": null,
        "providerShortName": null,
        "entitlements": null
      },
      "windows": {
        "certificateThumbprint": null,
        "digestAlgorithm": "sha256",
        "timestampUrl": ""
      }
    },
    "updater": {
      "active": false
    },
    "allowlist": {
      "all": true,
      "shell": {
        "all": true,
        "execute": true,
        "open": false,
        "scope": [
          {
            "name": "external/binaries/raffle-editor",
            "cmd": "raffle-editor",
            "sidecar": true,
            "args": true
          }
        ],
        "sidecar": true
      }
    },
    "windows": [
      {
        "title": "Raffle Manager",
        "width": 800,
        "height": 600,
        "resizable": true,
        "fullscreen": false
      }
    ],
    "security": {
      "csp": "default-src 'self' "
    }
  }
}
nothingismagick commented 2 years ago

Are there any warnings in the log during tauri build

nothingismagick commented 2 years ago

And does this happen if you run tauri build --debug? If it does, then please check the console tab under sources and let us know what you find there

lucasfernog commented 2 years ago

The styles should exist on the distDir folder. Maybe angular is not configured to do so, and it stays on the public directory? i'm not at home right now but i can check this tomorrow.

kt215 commented 2 years ago

tauri build and angular worked just fine with the last beta version (8?). No warning with tauri build or tauri build --debug. It only works correctly with latest using tauri dev: image

kt215 commented 2 years ago

With tauri build and AppImage on Linux Mint. It shows a "blank" page, then scroll down and you see this: image

lucasfernog commented 2 years ago

Did you guys check the console for errors? it might also be a CSP error, so you can try setting the csp to null on tauri.conf.json

kt215 commented 2 years ago

Setting csp: null appears to have fixed it for me.

Verzach3 commented 2 years ago

I have the same behavior as kt215, there are no warnings and it only works with tauri dev, by the way setting csp to null solves the problem, does leaving csp to null have any inconvenience?

lucasfernog commented 2 years ago

The content security policy is a nice security feature but it needs configuration from your side, like allowing accessing remote fonts and stylesheets, so that might be the issue here. For now I'll change the default template to disable CSP so new users don't need to face this, but our documentation still encourage you to implement CSP for your app as that secures you from untrusted content loading.

dolsem commented 2 years ago

@lucasfernog I am using the @suid/material library and I'm having the same issue with my styles. My CSP is set to "default-src 'self'; img-src 'self' asset: https://asset.localhost". I checked the network tab in development and both XHR and CSS tabs are empty. If I set CSP to null though, it works. Any idea what could be wrong?

lucasfernog commented 2 years ago

@dolsem I can take a look if you can share a repo to reproduce it.

dolsem commented 2 years ago

@lucasfernog Please check https://github.com/dolsem/tauri-suid-test

lucasfernog commented 2 years ago

Suid has dynamic styles, I'll see if there's a way around it.

lucasfernog commented 2 years ago

@dolsem not much we can do here since @suid/material dynamically adds style tags so you'd need to disable the style-src modification from Tauri https://tauri.studio/v1/api/config#securityconfig.dangerousdisableassetcspmodification

jsanta commented 1 year ago

Might be resurrecting a zombie here. I recently faced the same problem. Happens that my Angular build inlined the critical styles. Inlined styles are "nonced" by Tauri build (by the way tauri dev is not affected by this behavior).

Solved it by setting the production build setting on my angular project to:

"production": {
     // other settings
      "optimization": {
        "scripts": true,
        "styles": {
          "minify": true,
          "inlineCritical": false
        },
        "fonts": false
      }
    }

More on this here: https://0xdbe.github.io/AngularSecurity-DisableInlineCriticalCSS/

Followed Angular's recommendation on a minimal CSP setting, and adjusted it to my needs to something like:

default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; object-src 'none'; require-trusted-types-for 'script';

Would be nice to have a Tauri setting in order to be able to dynamically configure an allowed nonce, acording to the TAURI_SCRIPT_NONCE and TAURI_STYLE_NONCE . Didn't find if it's possible to override Tauri's generated values, or place a placeholder in the configuration in order to allow the generated on compilation nonce values.

franciscop commented 3 months ago

To add my own because it took a bit of debugging, I could fix styled-components not being properly bundled by changing from this:

// Does NOT work
"csp": "default-src 'self'; img-src 'self' asset: https://asset.localhost"

to this:

// Works
"csp": "default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' asset: https://asset.localhost"

Note that I had already set the assets before since my app is reading arbitrary local files, so I could not set it to csp: null nor other values. Adding the style-src 'self' 'unsafe-inline'; bit seemed to do the trick though!