Skip to content

Commit f2b29fe

Browse files
kittenkitten
authored
Merge pull request #399 from FormidableLabs/fix/no-css-files
Remove all CSS files
2 parents e28ece5 + cb10a1e commit f2b29fe

21 files changed

+389
-394
lines changed

‎README.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,6 @@ We can start with this project's sample at [`one-page.html`](./one-page.html). I
125125
<link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700" rel="stylesheet" type="text/css">
126126
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">
127127
<link href="https://unpkg.com/normalize.css@7/normalize.css" rel="stylesheet" type="text/css">
128-
<link href="https://unpkg.com/spectacle/lib/themes/default/index.css" rel="stylesheet" type="text/css">
129128
</head>
130129
<body>
131130
<div id="root"></div>

‎example/src/index.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import createTheme from '../../src/themes/default';
1313
import Interactive from '../assets/interactive';
1414

1515
require('normalize.css');
16-
require('../../src/themes/default/index.css');
1716

1817
const images = {
1918
city: require('../assets/city.jpg'),

‎one-page.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700" rel="stylesheet" type="text/css">
88
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">
99
<link href="https://unpkg.com/normalize.css@7/normalize.css" rel="stylesheet" type="text/css">
10-
<link href="https://unpkg.com/spectacle@^4/lib/themes/default/index.css" rel="stylesheet" type="text/css">
1110
</head>
1211
<body>
1312
<div id="root"></div>

‎src/components/__snapshots__/code-pane.test.js.snap‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,20 @@ exports[`<CodePane /> should render correctly. 1`] = `
1818
theme="dark"
1919
>
2020
<Styled(div)
21-
className="react-live react-live-dark "
21+
className=""
2222
styles={
2323
Array [
24-
undefined,
24+
Object {},
2525
Object {},
2626
undefined,
2727
]
2828
}
2929
>
3030
<div
31-
className="react-live react-live-dark css-0"
31+
className="css-0"
3232
>
3333
<Styled(Editor)
34+
className="language-prism"
3435
code="
3536
const myButton = (
3637
<CustomButton
@@ -46,10 +47,11 @@ exports[`<CodePane /> should render correctly. 1`] = `
4647
onClick={[Function]}
4748
onKeyDown={[Function]}
4849
onKeyUp={[Function]}
49-
styles={undefined}
50+
prismTheme="dark;"
51+
syntaxStyles={Object {}}
5052
>
5153
<Editor
52-
className="css-0"
54+
className="language-prism css-1i53um3"
5355
code="
5456
const myButton = (
5557
<CustomButton
@@ -65,10 +67,11 @@ exports[`<CodePane /> should render correctly. 1`] = `
6567
onClick={[Function]}
6668
onKeyDown={[Function]}
6769
onKeyUp={[Function]}
68-
styles={undefined}
70+
prismTheme="dark;"
71+
syntaxStyles={Object {}}
6972
>
7073
<pre
71-
className="prism-code css-0"
74+
className="prism-code language-prism css-1i53um3"
7275
contentEditable={false}
7376
dangerouslySetInnerHTML={
7477
Object {
@@ -87,9 +90,10 @@ exports[`<CodePane /> should render correctly. 1`] = `
8790
onClick={undefined}
8891
onKeyDown={undefined}
8992
onKeyUp={undefined}
93+
prismTheme="dark;"
9094
spellCheck="false"
9195
style={undefined}
92-
styles={undefined}
96+
syntaxStyles={Object {}}
9397
/>
9498
</Editor>
9599
</Styled(Editor)>

‎src/components/__snapshots__/component-playground.test.js.snap‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
44
<div
5-
class="react-live react-live-dark css-o32omv"
5+
class="react-live css-o32omv"
66
scope="[object Object]"
77
>
88
<div
@@ -66,9 +66,11 @@ exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
6666
class="css-1fc71w4"
6767
>
6868
<pre
69-
class="prism-code css-egp0ia"
69+
class="prism-code language-prism css-1y25kh4"
7070
contenteditable="true"
71+
prismtheme="dark;"
7172
spellcheck="false"
73+
syntaxstyles="[object Object]"
7274
>
7375
<span
7476
class="token comment"
@@ -543,7 +545,7 @@ exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
543545
544546
exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
545547
<div
546-
class="react-live react-live-light css-o32omv"
548+
class="react-live css-o32omv"
547549
scope="[object Object]"
548550
>
549551
<div
@@ -607,9 +609,11 @@ exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
607609
class="css-1fc71w4"
608610
>
609611
<pre
610-
class="prism-code css-egp0ia"
612+
class="prism-code language-prism css-x6ttwb"
611613
contenteditable="true"
614+
prismtheme="light;"
612615
spellcheck="false"
616+
syntaxstyles="[object Object]"
613617
>
614618
<span
615619
class="token comment"
@@ -1084,7 +1088,7 @@ exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
10841088
10851089
exports[`<ComponentPlayground /> Should render with a custom background color 1`] = `
10861090
<div
1087-
class="react-live react-live-light css-o32omv"
1091+
class="react-live css-o32omv"
10881092
scope="[object Object]"
10891093
>
10901094
<div
@@ -1148,9 +1152,11 @@ exports[`<ComponentPlayground /> Should render with a custom background color 1`
11481152
class="css-1fc71w4"
11491153
>
11501154
<pre
1151-
class="prism-code css-egp0ia"
1155+
class="prism-code language-prism css-x6ttwb"
11521156
contenteditable="true"
1157+
prismtheme="light;"
11531158
spellcheck="false"
1159+
syntaxstyles="[object Object]"
11541160
>
11551161
<span
11561162
class="token comment"
@@ -1625,7 +1631,7 @@ exports[`<ComponentPlayground /> Should render with a custom background color 1`
16251631
16261632
exports[`<ComponentPlayground /> Should render with a custom code block 1`] = `
16271633
<div
1628-
class="react-live react-live-light css-o32omv"
1634+
class="react-live css-o32omv"
16291635
scope="[object Object]"
16301636
>
16311637
<div
@@ -1683,9 +1689,11 @@ exports[`<ComponentPlayground /> Should render with a custom code block 1`] = `
16831689
class="css-1fc71w4"
16841690
>
16851691
<pre
1686-
class="prism-code css-egp0ia"
1692+
class="prism-code language-prism css-x6ttwb"
16871693
contenteditable="true"
1694+
prismtheme="light;"
16881695
spellcheck="false"
1696+
syntaxstyles="[object Object]"
16891697
>
16901698
<span
16911699
class="token keyword"

‎src/components/__snapshots__/manager.test.js.snap‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -183,27 +183,27 @@ exports[`<Manager /> should render correctly. 1`] = `
183183
Array [
184184
undefined,
185185
Object {
186-
"animation": "pacmanTopFramesBis 0.12s linear 10 alternate both",
186+
"animation": "animation-vwhb3c 0.12s linear 10 alternate both",
187187
},
188188
]
189189
}
190190
>
191191
<div
192-
className="css-13kse6y"
192+
className="css-1la23zo"
193193
/>
194194
</Styled(div)>
195195
<Styled(div)
196196
styles={
197197
Array [
198198
undefined,
199199
Object {
200-
"animation": "pacmanBottomFramesBis 0.12s linear 10 alternate both",
200+
"animation": "animation-1p18wsg 0.12s linear 10 alternate both",
201201
},
202202
]
203203
}
204204
>
205205
<div
206-
className="css-9ev9ib"
206+
className="css-1yi33k2"
207207
/>
208208
</Styled(div)>
209209
</div>
@@ -814,27 +814,27 @@ exports[`<Manager /> should render with slideset slides 1`] = `
814814
Array [
815815
undefined,
816816
Object {
817-
"animation": "pacmanTopFrames 0.12s linear 10 alternate both",
817+
"animation": "animation-v6s9vi 0.12s linear 10 alternate both",
818818
},
819819
]
820820
}
821821
>
822822
<div
823-
className="css-1cs01s8"
823+
className="css-172vklz"
824824
/>
825825
</Styled(div)>
826826
<Styled(div)
827827
styles={
828828
Array [
829829
undefined,
830830
Object {
831-
"animation": "pacmanBottomFrames 0.12s linear 10 alternate both",
831+
"animation": "animation-9hbgqx 0.12s linear 10 alternate both",
832832
},
833833
]
834834
}
835835
>
836836
<div
837-
className="css-7iidye"
837+
className="css-5id854"
838838
/>
839839
</Styled(div)>
840840
</div>

‎src/components/__snapshots__/progress.test.js.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,27 +42,27 @@ exports[`<Progress /> should render PacMan correctly 1`] = `
4242
Array [
4343
undefined,
4444
Object {
45-
"animation": "pacmanTopFramesBis 0.12s linear 10 alternate both",
45+
"animation": "animation-vwhb3c 0.12s linear 10 alternate both",
4646
},
4747
]
4848
}
4949
>
5050
<div
51-
className="css-13kse6y"
51+
className="css-1la23zo"
5252
/>
5353
</Styled(div)>
5454
<Styled(div)
5555
styles={
5656
Array [
5757
undefined,
5858
Object {
59-
"animation": "pacmanBottomFramesBis 0.12s linear 10 alternate both",
59+
"animation": "animation-1p18wsg 0.12s linear 10 alternate both",
6060
},
6161
]
6262
}
6363
>
6464
<div
65-
className="css-9ev9ib"
65+
className="css-1yi33k2"
6666
/>
6767
</Styled(div)>
6868
</div>

‎src/components/__snapshots__/slide.test.js.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ exports[`<Slide /> should render correctly with transitions. 1`] = `
4444
}
4545
>
4646
<div
47-
className="spectacle-slide css-1kmub7p"
47+
className="spectacle-slide css-1w0uyvd"
4848
style={
4949
Object {
5050
"transform": " translate3d(-100%, 0, 0) rotateY(-90deg)",
@@ -130,7 +130,7 @@ exports[`<Slide /> should render correctly without transitions. 1`] = `
130130
}
131131
>
132132
<div
133-
className="spectacle-slide css-1kmub7p"
133+
className="spectacle-slide css-1w0uyvd"
134134
style={
135135
Object {
136136
"transform": " translate3d(0px, 0px, 0px)",

‎src/components/code-pane.js‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,13 @@ import '../utils/prism-import';
77
import { Editor } from 'react-live';
88

99
const StyledWrapper = styled.div(props => props.styles);
10-
const StyledEditor = styled(Editor)(props => props.styles);
10+
const StyledEditor = styled(Editor)`
11+
&& {
12+
${props => props.syntaxStyles}
13+
}
14+
15+
${props => props.prismTheme}
16+
`;
1117

1218
export default class CodePane extends Component {
1319
handleEditorEvent(evt) {
@@ -17,28 +23,24 @@ export default class CodePane extends Component {
1723
render() {
1824
const useDarkTheme = this.props.theme === 'dark';
1925

20-
if (useDarkTheme) {
21-
require('../themes/default/prism.dark.css');
22-
} else {
23-
require('../themes/default/prism.light.css');
24-
}
25-
2626
const wrapperStyles = [
27-
this.context.styles.components.codePane.wrapper,
27+
this.context.styles.components.codePane,
2828
getStyles.call(this),
2929
this.props.style
3030
];
3131

3232
return (
3333
<StyledWrapper
34-
className={`react-live react-live-${useDarkTheme ? 'dark' : 'light'} ${this.props.className}`}
34+
className={this.props.className}
3535
styles={wrapperStyles}
3636
>
3737
<StyledEditor
38+
className="language-prism"
3839
code={this.props.source}
3940
language={this.props.lang}
4041
contentEditable={this.props.contentEditable}
41-
styles={this.context.styles.components.codePane.editor}
42+
syntaxStyles={this.context.styles.components.syntax}
43+
prismTheme={this.context.styles.prism[useDarkTheme ? 'dark' : 'light']}
4244
onKeyDown={this.handleEditorEvent}
4345
onKeyUp={this.handleEditorEvent}
4446
onClick={this.handleEditorEvent}

‎src/components/code-pane.test.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ import CodePane from './code-pane';
44

55
describe('<CodePane />', () => {
66
test('should render correctly.', () => {
7-
const context = { styles: { components: { codePane: { pre: {} } } } };
7+
const context = { styles: {
8+
components: { codePane: {}, syntax: {} },
9+
prism: { light: 'light;', dark: 'dark;' }
10+
} };
811
const source = `
912
const myButton = (
1013
<CustomButton

0 commit comments

Comments
 (0)