Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add a test for nested styles #639

Merged
merged 1 commit into from
Aug 16, 2022
Merged

add a test for nested styles #639

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4326,6 +4326,74 @@ export default class NestedShow {
"
`;

exports[`Angular nestedStyles 1`] = `
"import { Component } from \\"@angular/core\\";

@Component({
selector: \\"nested-styles\\",
template: \`
<div class=\\"div\\">Hello world</div>
\`,
styles: [
\`
.div {
display: flex;
foo: var(--bar);
}
@media (max-width: env(--mobile)) {
.div {
display: block;
}
}
.div:hover {
display: flex;
}
.div .nested-selector {
display: grid;
}
\`,
],
})
export default class NestedStyles {}
"
`;

exports[`Angular nestedStyles 2`] = `
"import { Component } from \\"@angular/core\\";
import { CommonModule } from \\"@angular/common\\";

@Component({
standalone: true,
imports: [CommonModule],

selector: \\"nested-styles\\",
template: \`
<div class=\\"div\\">Hello world</div>
\`,
styles: [
\`
.div {
display: flex;
foo: var(--bar);
}
@media (max-width: env(--mobile)) {
.div {
display: block;
}
}
.div:hover {
display: flex;
}
.div .nested-selector {
display: grid;
}
\`,
],
})
export default class NestedStyles {}
"
`;

exports[`Angular onInit & onMount 1`] = `
"import { Component } from \\"@angular/core\\";

Expand Down
22 changes: 22 additions & 0 deletions packages/core/src/__tests__/__snapshots__/html.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3405,6 +3405,28 @@ exports[`Html nestedShow 1`] = `
"
`;

exports[`Html nestedStyles 1`] = `
"<div class=\\"div\\">Hello world</div>
<style>
.div {
display: flex;
foo: var(--bar);
}
@media (max-width: env(--mobile)) {
.div {
display: block;
}
}
.div:hover {
display: flex;
}
.div .nested-selector {
display: grid;
}
</style>
"
`;

exports[`Html onInit & onMount 1`] = `
"<div></div>
<script>
Expand Down
22 changes: 22 additions & 0 deletions packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -492,6 +492,28 @@ exports[`Liquid nestedShow 1`] = `
"
`;

exports[`Liquid nestedStyles 1`] = `
"<div class=\\"div\\">Hello world</div>
<style>
.div {
display: flex;
foo: var(--bar);
}
@media (max-width: env(--mobile)) {
.div {
display: block;
}
}
.div:hover {
display: flex;
}
.div .nested-selector {
display: grid;
}
</style>
"
`;

exports[`Liquid onInit & onMount 1`] = `
"<div></div>
"
Expand Down
34 changes: 34 additions & 0 deletions packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2113,6 +2113,40 @@ export default class NestedShow extends LitElement {
"
`;

exports[`Lit nestedStyles 1`] = `
"import { LitElement, html, css } from \\"lit\\";
import { customElement, property, state } from \\"lit/decorators.js\\";

@customElement(\\"nested-styles\\")
export default class NestedStyles extends LitElement {
static styles = css\`
.div {
display: flex;
foo: var(--bar);
}
@media (max-width: env(--mobile)) {
.div {
display: block;
}
}
.div:hover {
display: flex;
}
.div .nested-selector {
display: grid;
}
\`;

render() {
return html\`
<div>Hello world</div>

\`;
}
}
"
`;

exports[`Lit onInit & onMount 1`] = `
"import { LitElement, html, css } from \\"lit\\";
import { customElement, property, state } from \\"lit/decorators.js\\";
Expand Down
23 changes: 23 additions & 0 deletions packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1464,6 +1464,29 @@ exports[`Marko nestedShow 1`] = `
<else><div>else-condition-A</div></else>"
`;

exports[`Marko nestedStyles 1`] = `
"class {}

style {
.div {
display: flex;
foo: var(--bar);
}
@media (max-width: env(--mobile)) {
.div {
display: block;
}
}
.div:hover {
display: flex;
}
.div .nested-selector {
display: grid;
}
}
<div class=\\"div\\">Hello world</div>"
`;

exports[`Marko onInit & onMount 1`] = `
"class {
onMount() {
Expand Down
18 changes: 18 additions & 0 deletions packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2844,6 +2844,24 @@ export default NestedShow;
"
`;

exports[`qwik nestedStyles 1`] = `
"// GENERATED BY MITOSIS

import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
export const NestedStyles = component$((props) => {
useStylesScoped$(STYLES);
return <div class=\\"div-NestedStyles\\">Hello world</div>;
});
export default NestedStyles;
export const STYLES = \`.div-NestedStyles {
display: flex;
foo: var(--bar); }@media (max-width: env(--mobile)) { .div-NestedStyles {
display: block; } }.div-NestedStyles:hover {
display: flex; }.div-NestedStyles .nested-selector {
display: grid; }\`;
"
`;

exports[`qwik onInit & onMount 1`] = `
"// GENERATED BY MITOSIS

Expand Down
23 changes: 23 additions & 0 deletions packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1861,6 +1861,29 @@ export default function NestedShow(props: Props) {
"
`;

exports[`React Native nestedStyles 1`] = `
"import * as React from \\"react\\";
import { View, StyleSheet, Image, Text } from \\"react-native\\";

export default function NestedStyles(props) {
return (
<View style={styles.view1}>
<Text>Hello world</Text>
</View>
);
}

const styles = StyleSheet.create({
view1: {
display: \\"flex\\",
foo: \\"var(--bar)\\",
\\"&:hover\\": { display: \\"flex\\" },
\\".nested-selector\\": { display: \\"grid\\" },
},
});
"
`;

exports[`React Native onInit & onMount 1`] = `
"import * as React from \\"react\\";
import { View, StyleSheet, Image, Text } from \\"react-native\\";
Expand Down
61 changes: 61 additions & 0 deletions packages/core/src/__tests__/__snapshots__/react.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1946,6 +1946,37 @@ export default function NestedShow(props: Props) {
"
`;

exports[`Preact nestedStyles 1`] = `
"/** @jsx h */
import { h, Fragment } from \\"preact\\";

export default function NestedStyles(props) {
return (
<Fragment>
<div className=\\"div\\">Hello world</div>
<style jsx>{\`
.div {
display: flex;
foo: var(--bar);
}
@media (max-width: env(--mobile)) {
.div {
display: block;
}
}
.div:hover {
display: flex;
}
.div .nested-selector {
display: grid;
}
\`}</style>
</Fragment>
);
}
"
`;

exports[`Preact onInit & onMount 1`] = `
"/** @jsx h */
import { h, Fragment } from \\"preact\\";
Expand Down Expand Up @@ -4193,6 +4224,36 @@ export default function NestedShow(props: Props) {
"
`;

exports[`React nestedStyles 1`] = `
"import * as React from \\"react\\";

export default function NestedStyles(props) {
return (
<>
<div className=\\"div\\">Hello world</div>
<style jsx>{\`
.div {
display: flex;
foo: var(--bar);
}
@media (max-width: env(--mobile)) {
.div {
display: block;
}
}
.div:hover {
display: flex;
}
.div .nested-selector {
display: grid;
}
\`}</style>
</>
);
}
"
`;

exports[`React onInit & onMount 1`] = `
"import * as React from \\"react\\";
import { useEffect } from \\"react\\";
Expand Down
Loading