diff --git a/src/compiler/transformers/add-static-style.ts b/src/compiler/transformers/add-static-style.ts
index 9d637f0f8fc..4c8d26ba2a8 100644
--- a/src/compiler/transformers/add-static-style.ts
+++ b/src/compiler/transformers/add-static-style.ts
@@ -74,19 +74,18 @@ const getMultipleModeStyle = (
   const styleModes: ts.ObjectLiteralElementLike[] = [];
 
   styles.forEach((style) => {
+    /**
+     * the order of these if statements must match with
+     * - {@link src/compiler/transformers/component-native/native-static-style.ts#addSingleStyleGetter}
+     * - {@link src/compiler/transformers/component-native/native-static-style.ts#addMultipleModeStyleGetter}
+     * - {@link src/compiler/transformers/add-static-style.ts#getMultipleModeStyle}
+     */
     if (typeof style.styleStr === 'string') {
       // inline the style string
       // static get style() { return { ios: "string" }; }
       const styleLiteral = createStyleLiteral(cmp, style, commentOriginalSelector);
       const propStr = ts.factory.createPropertyAssignment(style.modeName, styleLiteral);
       styleModes.push(propStr);
-    } else if (typeof style.styleIdentifier === 'string') {
-      // direct import already written in the source code
-      // import myTagIosStyle from './import-path.css';
-      // static get style() { return { ios: myTagIosStyle }; }
-      const styleIdentifier = ts.factory.createIdentifier(style.styleIdentifier);
-      const propIdentifier = ts.factory.createPropertyAssignment(style.modeName, styleIdentifier);
-      styleModes.push(propIdentifier);
     } else if (Array.isArray(style.externalStyles) && style.externalStyles.length > 0) {
       // import generated from @Component() styleUrls option
       // import myTagIosStyle from './import-path.css';
@@ -94,6 +93,13 @@ const getMultipleModeStyle = (
       const styleUrlIdentifier = createStyleIdentifier(cmp, style);
       const propUrlIdentifier = ts.factory.createPropertyAssignment(style.modeName, styleUrlIdentifier);
       styleModes.push(propUrlIdentifier);
+    } else if (typeof style.styleIdentifier === 'string') {
+      // direct import already written in the source code
+      // import myTagIosStyle from './import-path.css';
+      // static get style() { return { ios: myTagIosStyle }; }
+      const styleIdentifier = ts.factory.createIdentifier(style.styleIdentifier);
+      const propIdentifier = ts.factory.createPropertyAssignment(style.modeName, styleIdentifier);
+      styleModes.push(propIdentifier);
     }
   });
 
@@ -101,6 +107,12 @@ const getMultipleModeStyle = (
 };
 
 const getSingleStyle = (cmp: d.ComponentCompilerMeta, style: d.StyleCompiler, commentOriginalSelector: boolean) => {
+  /**
+   * the order of these if statements must match with
+   * - {@link src/compiler/transformers/component-native/native-static-style.ts#addSingleStyleGetter}
+   * - {@link src/compiler/transformers/component-native/native-static-style.ts#addMultipleModeStyleGetter}
+   * - {@link src/compiler/transformers/add-static-style.ts#getSingleStyle}
+   */
   if (typeof style.styleStr === 'string') {
     // inline the style string
     // static get style() { return "string"; }
diff --git a/src/compiler/transformers/component-native/native-static-style.ts b/src/compiler/transformers/component-native/native-static-style.ts
index 2071f73b660..4a89232f6a3 100644
--- a/src/compiler/transformers/component-native/native-static-style.ts
+++ b/src/compiler/transformers/component-native/native-static-style.ts
@@ -27,19 +27,18 @@ const addMultipleModeStyleGetter = (
   const styleModes: ts.ObjectLiteralElementLike[] = [];
 
   styles.forEach((style) => {
+    /**
+     * the order of these if statements must match with
+     * - {@link src/compiler/transformers/component-native/native-static-style.ts#addSingleStyleGetter}
+     * - {@link src/compiler/transformers/add-static-style.ts#getSingleStyle}
+     * - {@link src/compiler/transformers/add-static-style.ts#getMultipleModeStyle}
+     */
     if (typeof style.styleStr === 'string') {
       // inline the style string
       // static get style() { return { "ios": "string" }; }
       const styleLiteral = createStyleLiteral(cmp, style);
       const propStr = ts.factory.createPropertyAssignment(style.modeName, styleLiteral);
       styleModes.push(propStr);
-    } else if (typeof style.styleIdentifier === 'string') {
-      // direct import already written in the source code
-      // import myTagIosStyle from './import-path.css';
-      // static get style() { return { "ios": myTagIosStyle }; }
-      const styleIdentifier = ts.factory.createIdentifier(style.styleIdentifier);
-      const propIdentifier = ts.factory.createPropertyAssignment(style.modeName, styleIdentifier);
-      styleModes.push(propIdentifier);
     } else if (Array.isArray(style.externalStyles) && style.externalStyles.length > 0) {
       // import generated from @Component() styleUrls option
       // import myTagIosStyle from './import-path.css';
@@ -47,6 +46,13 @@ const addMultipleModeStyleGetter = (
       const styleUrlIdentifier = createStyleIdentifier(cmp, style);
       const propUrlIdentifier = ts.factory.createPropertyAssignment(style.modeName, styleUrlIdentifier);
       styleModes.push(propUrlIdentifier);
+    } else if (typeof style.styleIdentifier === 'string') {
+      // direct import already written in the source code
+      // import myTagIosStyle from './import-path.css';
+      // static get style() { return { "ios": myTagIosStyle }; }
+      const styleIdentifier = ts.factory.createIdentifier(style.styleIdentifier);
+      const propIdentifier = ts.factory.createPropertyAssignment(style.modeName, styleIdentifier);
+      styleModes.push(propIdentifier);
     }
   });
 
@@ -60,23 +66,29 @@ const addSingleStyleGetter = (
   cmp: d.ComponentCompilerMeta,
   style: d.StyleCompiler,
 ) => {
+  /**
+   * the order of these if statements must match with
+   * - {@link src/compiler/transformers/component-native/native-static-style.ts#addMultipleModeStyleGetter}
+   * - {@link src/compiler/transformers/add-static-style.ts#getSingleStyle}
+   * - {@link src/compiler/transformers/add-static-style.ts#getMultipleModeStyle}
+   */
   if (typeof style.styleStr === 'string') {
     // inline the style string
     // static get style() { return "string"; }
     const styleLiteral = createStyleLiteral(cmp, style);
     classMembers.push(createStaticGetter('style', styleLiteral));
-  } else if (typeof style.styleIdentifier === 'string') {
-    // direct import already written in the source code
-    // import myTagStyle from './import-path.css';
-    // static get style() { return myTagStyle; }
-    const styleIdentifier = ts.factory.createIdentifier(style.styleIdentifier);
-    classMembers.push(createStaticGetter('style', styleIdentifier));
   } else if (Array.isArray(style.externalStyles) && style.externalStyles.length > 0) {
     // import generated from @Component() styleUrls option
     // import myTagStyle from './import-path.css';
     // static get style() { return myTagStyle; }
     const styleUrlIdentifier = createStyleIdentifier(cmp, style);
     classMembers.push(createStaticGetter('style', styleUrlIdentifier));
+  } else if (typeof style.styleIdentifier === 'string') {
+    // direct import already written in the source code
+    // import myTagStyle from './import-path.css';
+    // static get style() { return myTagStyle; }
+    const styleIdentifier = ts.factory.createIdentifier(style.styleIdentifier);
+    classMembers.push(createStaticGetter('style', styleIdentifier));
   }
 };
 
diff --git a/src/compiler/transformers/test/native-component.spec.ts b/src/compiler/transformers/test/native-component.spec.ts
index 9c04bddffa1..b1a62944a05 100644
--- a/src/compiler/transformers/test/native-component.spec.ts
+++ b/src/compiler/transformers/test/native-component.spec.ts
@@ -166,4 +166,47 @@ describe('nativeComponentTransform', () => {
       );
     });
   });
+
+  describe('static style property', () => {
+    it.each([
+      [`styleUrl: 'cmp-a.css'`, `import CmpAStyle0 from './cmp-a.css?tag=cmp-a';`, `CmpAStyle0`],
+      [
+        `styleUrls: ['cmp-a.css', 'cmp-b.css', 'cmp-a.css']`,
+        `import CmpAStyle0 from './cmp-b.css?tag=cmp-a';
+         import CmpAStyle1 from './cmp-a.css?tag=cmp-a';`,
+        `CmpAStyle0 + CmpAStyle1`,
+      ],
+      [
+        `styleUrls: { ios: 'cmp-a.ios.css', md: 'cmp-a.md.css' }`,
+        `import CmpAIosStyle0 from './cmp-a.ios.css?tag=cmp-a&mode=ios';
+        import CmpAMdStyle0 from './cmp-a.md.css?tag=cmp-a&mode=md';`,
+        `{ ios: CmpAIosStyle0, md: CmpAMdStyle0 }`,
+      ],
+    ])('adds a static style property when %s', async (styleConfig, expectedImport, expectedStyleReturn) => {
+      const code = `
+        @Component({
+          tag: 'cmp-a',
+          ${styleConfig}
+        }
+        export class CmpA {}
+      `;
+      const transformer = nativeComponentTransform(compilerCtx, transformOpts);
+      const transpiledModule = transpileModule(code, null, compilerCtx, [], [transformer]);
+
+      expect(await formatCode(transpiledModule.outputText)).toContain(
+        await formatCode(`import { defineCustomElement as __stencil_defineCustomElement, HTMLElement } from '@stencil/core';
+          ${expectedImport}
+          const CmpA = class extends HTMLElement {
+            constructor() {
+              super();
+              this.__registerHost();
+            }
+            static get style() {
+              return ${expectedStyleReturn};
+            }
+          };
+        `),
+      );
+    });
+  });
 });