Design component style/css missing when -Datlassian.dev.mode=false

Atlassian Ecosystem Design
1

Following along with setting up to use the Atlassian Design React Components [1], I have created a Jira Plugin that uses components such as the Drawer [2]. It works fine when testing with ‘atlas-run -Datlassian.dev.mode=true’, but when running with ‘-Datlassian.dev.mode=false’, it seems there is an issue with the style/css of the component.

For example, the Drawer opens but it is missing style such as on the close button and putting components inside of the Drawer are also missing their style. Looking in the browser development console, when dev=true and it works, this style class ‘css-1t6wxle’ is defined in page, but when dev=false, ‘css-1t6wxle’ is missing. It appears that emotion is being used for the style but for some reason when dev=false something is not working correctly and there are no errors showing up in the console.

The plugin jar is identical when run in dev=false/dev=true, so there is no difference in the compiled javascript at least in the plugin jar.

The test app shows React Version: 16.14.0 at runtime, which [1] has you use, though I’ve noticed the changelog mentions some components now using version 18.

Any ideas as to what the difference could be between dev=false/true such that it would not be adding the components’ style into the page?

[1] Develop - Get started - Atlassian Design System
[2] https://atlassian.design/components/drawer/examples

2

The big difference between dev=false/dev=true that might impact styling is web resource minification. When dev mode is enabled, minification is disabled.

You can set compressResources to false in your plugin pom.xml in order to make sure that web resources included in your app are not minified.

...
            <plugin>
                <groupId>com.atlassian.maven.plugins</groupId>
                <artifactId>jira-maven-plugin</artifactId>
...
                <configuration>
...
                    <compressResources>false</compressResources>
...
                </configuration>
            </plugin>
...

See also https://developer.atlassian.com/server/framework/atlassian-sdk/amps-build-configuration-reference/#compressresources

2 Likes
3

Thanks that fixed the issue. I think the issue is it runs npm build which runs webpack to compile the react components into javascript and then the jira-maven-plugin is also running something similar and compressing is losing something. Setting compressResources = false fixes it and perhaps there is something in the config missing where the jira-maven-plugin just runs the webpack once.