Skip to content

Commit

Permalink
Fix: React Native styles merging (#1224)
Browse files Browse the repository at this point in the history 
* f

* update

* fix
  • Loading branch information
@samijaber
samijaber authored Jul 17, 2023
1 parent d47a3dd commit 44e8c53
Show file tree
Hide file tree
Showing 24 changed files with 1,436 additions and 7 deletions.
42 changes: 42 additions & 0 deletions packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2433,6 +2433,27 @@ exports[`Alpine.js > jsx > Javascript Test > styleClassAndCss 1`] = `
"
`;

exports[`Alpine.js > jsx > Javascript Test > stylePropClassAndCss 1`] = `
"<style>
.div {
display: flex;
flex-direction: column;
align-items: stretch;
}
</style>
<div
class=\\"builder-column div\\"
x-data=\\"stylePropClassAndCss()\\"
x-bind:style=\\"attributes.style\\"
></div>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Alpine.data(\\"stylePropClassAndCss\\", () => ({}));
});
</script>
"
`;

exports[`Alpine.js > jsx > Javascript Test > subComponent 1`] = `
"<Foo x-data=\\"subComponent()\\"></Foo>
<script>
Expand Down Expand Up @@ -5000,6 +5021,27 @@ exports[`Alpine.js > jsx > Typescript Test > styleClassAndCss 1`] = `
"
`;

exports[`Alpine.js > jsx > Typescript Test > stylePropClassAndCss 1`] = `
"<style>
.div {
display: flex;
flex-direction: column;
align-items: stretch;
}
</style>
<div
class=\\"builder-column div\\"
x-data=\\"stylePropClassAndCss()\\"
x-bind:style=\\"attributes.style\\"
></div>
<script>
document.addEventListener(\\"alpine:init\\", () => {
Alpine.data(\\"stylePropClassAndCss\\", () => ({}));
});
</script>
"
`;

exports[`Alpine.js > jsx > Typescript Test > subComponent 1`] = `
"<Foo x-data=\\"subComponent()\\"></Foo>
<script>
Expand Down
68 changes: 68 additions & 0 deletions packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3866,6 +3866,40 @@ export class MyComponentModule {}
"
`;

exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > stylePropClassAndCss 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component, Input } from \\"@angular/core\\";

@Component({
selector: \\"style-prop-class-and-css, StylePropClassAndCss\\",
template: \`
<div class=\\"builder-column div\\" [ngStyle]=\\"attributes.style\\"></div>
\`,
styles: [
\`
.div {
display: flex;
flex-direction: column;
align-items: stretch;
}
\`,
],
})
export class StylePropClassAndCss {
@Input() attributes: any;
}

@NgModule({
declarations: [StylePropClassAndCss],
imports: [CommonModule],
exports: [StylePropClassAndCss],
})
export class StylePropClassAndCssModule {}
"
`;

exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > subComponent 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
Expand Down Expand Up @@ -8376,6 +8410,40 @@ export class MyComponentModule {}
"
`;

exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > stylePropClassAndCss 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component, Input } from \\"@angular/core\\";

@Component({
selector: \\"style-prop-class-and-css, StylePropClassAndCss\\",
template: \`
<div class=\\"builder-column div\\" [ngStyle]=\\"attributes.style\\"></div>
\`,
styles: [
\`
.div {
display: flex;
flex-direction: column;
align-items: stretch;
}
\`,
],
})
export class StylePropClassAndCss {
@Input() attributes: any;
}

@NgModule({
declarations: [StylePropClassAndCss],
imports: [CommonModule],
exports: [StylePropClassAndCss],
})
export class StylePropClassAndCssModule {}
"
`;

exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > subComponent 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
Expand Down
70 changes: 70 additions & 0 deletions packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3952,6 +3952,41 @@ export class MyComponentModule {}
"
`;

exports[`Angular with Import Mapper Tests > jsx > Javascript Test > stylePropClassAndCss 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component, Input } from \\"@angular/core\\";

@Component({
selector: \\"style-prop-class-and-css, StylePropClassAndCss\\",
template: \`
<div class=\\"builder-column div\\" [ngStyle]=\\"attributes.style\\"></div>
\`,
styles: [
\`
.div {
display: flex;
flex-direction: column;
align-items: stretch;
}
\`,
],
})
export class StylePropClassAndCss {
@Input() attributes: any;
}

@NgModule({
declarations: [StylePropClassAndCss],
imports: [CommonModule],
exports: [StylePropClassAndCss],
bootstrap: [SomeOtherComponent],
})
export class StylePropClassAndCssModule {}
"
`;

exports[`Angular with Import Mapper Tests > jsx > Javascript Test > subComponent 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
Expand Down Expand Up @@ -8558,6 +8593,41 @@ export class MyComponentModule {}
"
`;

exports[`Angular with Import Mapper Tests > jsx > Typescript Test > stylePropClassAndCss 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component, Input } from \\"@angular/core\\";

@Component({
selector: \\"style-prop-class-and-css, StylePropClassAndCss\\",
template: \`
<div class=\\"builder-column div\\" [ngStyle]=\\"attributes.style\\"></div>
\`,
styles: [
\`
.div {
display: flex;
flex-direction: column;
align-items: stretch;
}
\`,
],
})
export class StylePropClassAndCss {
@Input() attributes: any;
}

@NgModule({
declarations: [StylePropClassAndCss],
imports: [CommonModule],
exports: [StylePropClassAndCss],
bootstrap: [SomeOtherComponent],
})
export class StylePropClassAndCssModule {}
"
`;

exports[`Angular with Import Mapper Tests > jsx > Typescript Test > subComponent 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
Expand Down
122 changes: 122 additions & 0 deletions packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7113,6 +7113,67 @@ export class MyComponent {}
"
`;

exports[`Angular > jsx > Javascript Test > stylePropClassAndCss 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component, Input } from \\"@angular/core\\";

@Component({
selector: \\"style-prop-class-and-css, StylePropClassAndCss\\",
template: \`
<div class=\\"builder-column div\\" [ngStyle]=\\"attributes.style\\"></div>
\`,
styles: [
\`
.div {
display: flex;
flex-direction: column;
align-items: stretch;
}
\`,
],
})
export class StylePropClassAndCss {
@Input() attributes: any;
}

@NgModule({
declarations: [StylePropClassAndCss],
imports: [CommonModule],
exports: [StylePropClassAndCss],
})
export class StylePropClassAndCssModule {}
"
`;

exports[`Angular > jsx > Javascript Test > stylePropClassAndCss 2`] = `
"import { Component, Input } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

@Component({
selector: \\"style-prop-class-and-css, StylePropClassAndCss\\",
template: \`
<div class=\\"builder-column div\\" [ngStyle]=\\"attributes.style\\"></div>
\`,
styles: [
\`
.div {
display: flex;
flex-direction: column;
align-items: stretch;
}
\`,
],
standalone: true,
imports: [CommonModule],
})
export class StylePropClassAndCss {
@Input() attributes: any;
}
"
`;

exports[`Angular > jsx > Javascript Test > subComponent 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
Expand Down Expand Up @@ -15455,6 +15516,67 @@ export class MyComponent {}
"
`;

exports[`Angular > jsx > Typescript Test > stylePropClassAndCss 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

import { Component, Input } from \\"@angular/core\\";

@Component({
selector: \\"style-prop-class-and-css, StylePropClassAndCss\\",
template: \`
<div class=\\"builder-column div\\" [ngStyle]=\\"attributes.style\\"></div>
\`,
styles: [
\`
.div {
display: flex;
flex-direction: column;
align-items: stretch;
}
\`,
],
})
export class StylePropClassAndCss {
@Input() attributes: any;
}

@NgModule({
declarations: [StylePropClassAndCss],
imports: [CommonModule],
exports: [StylePropClassAndCss],
})
export class StylePropClassAndCssModule {}
"
`;

exports[`Angular > jsx > Typescript Test > stylePropClassAndCss 2`] = `
"import { Component, Input } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

@Component({
selector: \\"style-prop-class-and-css, StylePropClassAndCss\\",
template: \`
<div class=\\"builder-column div\\" [ngStyle]=\\"attributes.style\\"></div>
\`,
styles: [
\`
.div {
display: flex;
flex-direction: column;
align-items: stretch;
}
\`,
],
standalone: true,
imports: [CommonModule],
})
export class StylePropClassAndCss {
@Input() attributes: any;
}
"
`;

exports[`Angular > jsx > Typescript Test > subComponent 1`] = `
"import { NgModule } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";
Expand Down
Loading

1 comment on commit 44e8c53

@vercel
Copy link

@vercel vercel bot commented on 44e8c53 Jul 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

mitosis-fiddle – ./

mitosis-fiddle-builder-io.vercel.app
mitosis-fiddle-git-main-builder-io.vercel.app
mitosis-three.vercel.app
mitosis.builder.io

Please sign in to comment.