Skip to content

Commit 4396c35

Browse files
vardhanapoorvvardhanapoorv
committed
Get CSS to load without postcss
1 parent 4b6f634 commit 4396c35

File tree

8 files changed

+157
-139
lines changed

8 files changed

+157
-139
lines changed

‎packages/graphql-playground-electron/.babelrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"@babel/preset-env", "@babel/preset-react"
44
],
55
"plugins": [
6-
// "styled-jsx-postcss/babel",
6+
"styled-jsx-postcss/babel",
77
"@babel/plugin-proposal-object-rest-spread",
88
"babel-plugin-styled-components"
99
]

‎packages/graphql-playground-electron/package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,8 @@
116116
"regenerator-runtime": "^0.13.7",
117117
"reselect": "^3.0.1",
118118
"semver": "^5.5.0",
119-
"styled-jsx-postcss": "^0.2.0",
119+
"styled-jsx": "2.2.6",
120+
"styled-jsx-postcss": "git+https://github.com/timsuchanek/styled-jsx-postcss#build3",
120121
"sweetalert2": "^7.21.0",
121122
"validator": "^9.2.0"
122123
},
@@ -127,7 +128,7 @@
127128
"@babel/plugin-proposal-json-strings": "^7.0.0",
128129
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
129130
"@babel/plugin-syntax-import-meta": "^7.0.0",
130-
"@babel/plugin-transform-runtime": "^7.11.5",
131+
"@babel/plugin-transform-runtime": "^7.12.0",
131132
"@babel/preset-env": "^7.0.0",
132133
"@babel/preset-react": "^7.0.0",
133134
"@types/classnames": "2.2.3",

‎packages/graphql-playground-electron/src/renderer/components/App.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,8 @@ class App extends React.Component<ReduxProps, State> {
115115
platformToken,
116116
loading: false,
117117
}
118-
;(global as any).a = this
119-
;(global as any).r = remote
118+
; (global as any).a = this
119+
; (global as any).r = remote
120120
}
121121

122122
fileAdded = event => {
@@ -581,7 +581,12 @@ class App extends React.Component<ReduxProps, State> {
581581
const { theme, endpoint, platformToken, configString, config } = this.state
582582

583583
return (
584-
<div className={cx('root', theme, { noConfig: !configString })}>
584+
<div
585+
className={
586+
'flex flexColumn bgDarkestBlue overflowHidden ' +
587+
cx('root', theme, { noConfig: !configString })
588+
}
589+
>
585590
<style jsx={true} global={true}>{`
586591
.app-content .left-content {
587592
letter-spacing: 0.5px;

‎packages/graphql-playground-electron/src/renderer/components/InitialView/InitialView.tsx

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -179,26 +179,31 @@ class InitialView extends React.Component<Props & StateFromProps, State> {
179179
onRequestClose={this.handleRequestClose}
180180
style={modalStyle}
181181
>
182-
<div className="initial-view-content">
182+
<div className="initial-view-content bgWhite flex flexRow">
183183
{history.size > 0 ? (
184-
<div className="initial-view-recent">
185-
<div className="initial-view-recent-header">RECENT</div>
186-
<div className="initial-view-recent-list">
184+
<div className="initial-view-recent br bBlack10 overflowHidden flex flexColumn">
185+
<div className="initial-view-recent-header pv10 ph20 bgBlack07 black50 bb bBlack10">
186+
RECENT
187+
</div>
188+
<div className="initial-view-recent-list flex1">
187189
{Object.keys(items)
188190
.reverse()
189-
.map(key => {
191+
.map((key) => {
190192
const data = items[key]
191193
const name = data.folderName || data.endpoint || data.path
192194
return (
193195
<div
194-
className="list-item"
196+
className="list-item pv10 ph20 bb bBlack10 pointer"
195197
// tslint:disable-next-line
196198
onClick={() => this.handleClickHistory(data)}
197199
>
198-
<div className="list-item-name" title={name}>
200+
<div
201+
className="list-item-name f20 black70 fw6 mb6 toe overflowHidden nowrap"
202+
title={name}
203+
>
199204
{name}
200205
</div>
201-
<div className="list-item-date">
206+
<div className="list-item-date f12 black40 flex">
202207
<Icon
203208
src={
204209
data.type === 'local'
@@ -220,21 +225,26 @@ class InitialView extends React.Component<Props & StateFromProps, State> {
220225
</div>
221226
</div>
222227
) : (
223-
<div className="initial-view-recent">
224-
<div className="initial-view-recent-header">EXAMPLES</div>
225-
<div className="initial-view-recent-list">
226-
{examples.map(example => (
228+
<div className="initial-view-recent br bBlack10 overflowHidden flex flexColumn">
229+
<div className="initial-view-recent-header pv10 ph20 bgBlack07 black50 bb bBlack10">
230+
EXAMPLES
231+
</div>
232+
<div className="initial-view-recent-list flex1">
233+
{examples.map((example) => (
227234
<div
228235
key={example.endpoint}
229-
className="list-item"
236+
className="list-item pv10 ph20 bb bBlack10 pointer"
230237
onClick={() =>
231238
this.props.onSelectEndpoint(example.endpoint)
232239
}
233240
>
234-
<div className="list-item-name" title={example.endpoint}>
241+
<div
242+
className="list-item-name f20 black70 fw6 mb6 toe overflowHidden nowrap"
243+
title={example.endpoint}
244+
>
235245
{example.name}
236246
</div>
237-
<div className="list-item-date">
247+
<div className="list-item-date f12 black40 flex">
238248
<Icon
239249
src={require('graphcool-styles/icons/fill/world.svg')}
240250
color={$v.gray40}
@@ -248,42 +258,49 @@ class InitialView extends React.Component<Props & StateFromProps, State> {
248258
</div>
249259
</div>
250260
)}
251-
<div className="initial-view-workspace">
252-
<h1 className="title">New Workspace</h1>
253-
<p className="description">
261+
<div className="initial-view-workspace flex1 tc pv20">
262+
<h1 className="title flex1 tc pv20">New Workspace</h1>
263+
<p className="description maAuto black50 mt16">
254264
Either load a local repository with a .graphqlconfig file, or
255265
just open a HTTP endpoint
256266
</p>
257-
<div className="toggle">
267+
<div className="toggle justifyCenter flex">
258268
<Toggle
259269
choices={choicesMode}
260270
activeChoice={selectedMode}
261271
onChange={this.handleChangeMode}
262272
/>
263273
</div>
264274
{selectedMode === 'url endpoint' && (
265-
<form className="container-input" onSubmit={this.handleSubmit}>
275+
<form
276+
className="container-input ph10 pv6 mh38 mt20 darkBlue40 ba bBlack10 br2 flex f14"
277+
onSubmit={this.handleSubmit}
278+
>
266279
<input
267-
className="input"
280+
className="input darkBlue60 w100 f14"
268281
placeholder="Enter endpoint url..."
269282
value={endpoint}
270283
onChange={this.handleChangeEndpoint}
271284
/>
272-
<button>OPEN</button>
285+
<button className="white br2 pv6 ph10 pointer f14 fw6">
286+
OPEN
287+
</button>
273288
</form>
274289
)}
275290
{selectedMode === 'local' && (
276291
<div
277-
className="container-input"
292+
className="container-input ph10 pv6 mh38 mt20 darkBlue40 ba bBlack10 br2 flex f14"
278293
onClick={this.handleClickLocal}
279294
>
280295
<input
281-
className="input"
296+
className="input darkBlue60 w100 f14"
282297
placeholder="Select a folder..."
283298
value={endpoint}
284299
onChange={this.handleChangeEndpoint}
285300
/>
286-
<button>OPEN</button>
301+
<button className="white br2 pv6 ph10 pointer f14 fw6">
302+
OPEN
303+
</button>
287304
</div>
288305
)}
289306
</div>

‎packages/graphql-playground-electron/src/renderer/components/InitialView/Toggle.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export interface ToggleProps {
1010
/* tslint:disable */
1111
const Toggle = ({ choices, onChange, activeChoice }: ToggleProps) => {
1212
return (
13-
<div className="toggle">
13+
<div className="toggle flex">
1414
<style jsx={true}>{`
1515
.toggle {
1616
@p: .flex;
@@ -29,7 +29,12 @@ const Toggle = ({ choices, onChange, activeChoice }: ToggleProps) => {
2929
`}</style>
3030
{choices.map((choice, i) => (
3131
<div
32-
className={cn('choice', { active: choice === activeChoice })}
32+
className={
33+
'f14 ttu br2 mr6 fw6 darkBlue40 pointer ' +
34+
cn('choice', {
35+
'active darkBlue50 bgDarkBlue10': choice === activeChoice,
36+
})
37+
}
3338
key={choice}
3439
onClick={() => onChange(choice, i)}
3540
>

‎packages/graphql-playground-electron/tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"compilerOptions": {
33
"removeComments": true,
44
"module": "commonjs",
5-
"jsx": "preserve",
5+
"jsx": "react",
66
"sourceMap": true,
77
"target": "esnext",
88
"moduleResolution": "node",

‎packages/graphql-playground-electron/webpack.config.build.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,10 +84,6 @@ module.exports = {
8484
test: /.*\.(png|gif)$/,
8585
loader: 'file-loader',
8686
},
87-
{
88-
test: /\.html$/,
89-
loader: 'html-loader',
90-
},
9187
],
9288
},
9389
plugins: [

0 commit comments

Comments
 (0)