[bug] Styles don't get bundled

[Verzach3]

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

With tauri build

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]

I have the same exact issue with angular.

[nothingismagick]

Can one of you share your tauri.conf file?

[kt215]

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]

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]

Are there any warnings in the log during tauri build

[nothingismagick]

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]

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]

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:

[kt215]

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

[lucasfernog]

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]

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

[Verzach3]

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]

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]

@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]

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

[dolsem]

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

[lucasfernog]

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

[lucasfernog]

@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]

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]

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!