From c0e6d63b64a5c5898a3dc49729ce6c37512d40a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Isabella=20Sko=C5=99epov=C3=A1?= <isabella@skorepova.info>
Date: Sun, 26 Jan 2020 15:00:44 +0100
Subject: [PATCH] JSX everywhere
---
.babelrc.js | 13 ++++++++++++-
package-lock.json | 16 ++++++++++++++++
package.json | 1 +
theme-source/partials/base-body.tsx | 11 +++++++++--
theme-source/render-to-string.tsx | 1 +
5 files changed, 39 insertions(+), 3 deletions(-)
diff --git a/.babelrc.js b/.babelrc.js
index 189fb255..af2bc463 100644
--- a/.babelrc.js
+++ b/.babelrc.js
@@ -2,6 +2,17 @@ module.exports = {
presets: [
'@babel/preset-env',
'@babel/preset-typescript',
- '@babel/preset-react',
+ ['@babel/preset-react', { pragma: 'jsx' }],
+ ],
+ plugins: [
+ [
+ 'auto-import',
+ {
+ declarations: [
+ { default: 'React', path: 'react' },
+ { members: ['jsx'], path: '@emotion/react' },
+ ],
+ },
+ ],
],
}
diff --git a/package-lock.json b/package-lock.json
index 7a5243d2..194b0e50 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2790,6 +2790,16 @@
"resolve": "^1.12.0"
}
},
+ "babel-plugin-auto-import": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/babel-plugin-auto-import/-/babel-plugin-auto-import-1.0.5.tgz",
+ "integrity": "sha512-U/TmCczhGEU9l65yKVdKMGP0bNlWUpulFaaRMcNaVwCRSgjfnASdwZUVrHdKbVW1EV02iR0JtO6J96aTHB9NXw==",
+ "dev": true,
+ "requires": {
+ "@babel/core": "^7.2.2",
+ "logical-not": "^1.0.0"
+ }
+ },
"babel-plugin-dynamic-import-node": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.0.tgz",
@@ -6580,6 +6590,12 @@
}
}
},
+ "logical-not": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/logical-not/-/logical-not-1.0.0.tgz",
+ "integrity": "sha512-l3X5Sf25wwZkprKfrfJ2YjCcxkNnitMvuqoVPAFNz1xpAMG7B4CkdELK19hafcR8K9fcUs0K0LkzZ62U+xdHpA==",
+ "dev": true
+ },
"lolex": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/lolex/-/lolex-4.2.0.tgz",
diff --git a/package.json b/package.json
index c52892a8..7bfbe330 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
"@types/react": "^16.9.17",
"@types/react-dom": "^16.9.4",
"babel-eslint": "^10.0.3",
+ "babel-plugin-auto-import": "^1.0.5",
"eslint": "^6.6.0",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-config-prettier": "^6.5.0",
diff --git a/theme-source/partials/base-body.tsx b/theme-source/partials/base-body.tsx
index 008c8133..bde12f95 100644
--- a/theme-source/partials/base-body.tsx
+++ b/theme-source/partials/base-body.tsx
@@ -1,7 +1,14 @@
import React, { PropsWithChildren } from 'react'
import { SymbolSearch, SymbolMenu, SymbolFacebook } from './svgs'
import { Search } from './search'
-import { Html } from './html'
+import { css } from '@emotion/react'
+
+const hideOnSmallAndUp = css`
+ display: none;
+ @media (max-width: 300px) {
+ display: block;
+ }
+`
export function BaseBody({
config,
@@ -25,7 +32,7 @@ export function BaseBody({
</a>
<div style={{ zIndex: 2 }} className="brand-logo">
<a id="logo-container" href="/tag/vse/1/">
- <img className="hide-on-small-and-up" src="/theme/icon56.png" />
+ <img css={hideOnSmallAndUp} src="/theme/icon56.png" />
<img
className="hide-on-med-and-up hide-on-ultra-small"
src="/theme/logo56.png"
diff --git a/theme-source/render-to-string.tsx b/theme-source/render-to-string.tsx
index d0af140c..fd307020 100644
--- a/theme-source/render-to-string.tsx
+++ b/theme-source/render-to-string.tsx
@@ -1,3 +1,4 @@
+/** @jsx React.createElement */
import React from 'react'
import ReactDOM from 'react-dom/server'
import { CacheProvider } from '@emotion/react'
--
GitLab