remove need for styled-jsx construct (github#28749)

* remove need for styled-jsx construct

* remove line that might not be needed

Author: peterbe

Dockerfile

@@ -51,7 +51,6 @@ COPY content/index.md ./content/index.md
 
 COPY next.config.js ./next.config.js
 COPY tsconfig.json ./tsconfig.json
-COPY next-env.d.ts ./next-env.d.ts
 
 RUN npm run build
 

components/ui/TruncateLines/TruncateLines.module.scss

@@ -0,0 +1,7 @@
+.truncated {
+  // Note that `-webkit-line-clamp` gets set by the component JSX
+  // manually with a `style` attribute.
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}

components/ui/TruncateLines/TruncateLines.tsx

@@ -1,6 +1,8 @@
 import React, { ReactNode } from 'react'
 import cx from 'classnames'
 
+import styles from './TruncateLines.module.scss'
+
 export type TruncateLinesPropsT = {
   as?: keyof JSX.IntrinsicElements
   maxLines: number
@@ -11,16 +13,8 @@ export type TruncateLinesPropsT = {
 export const TruncateLines = (props: TruncateLinesPropsT) => {
   const { maxLines, className, children, as: Component = 'div' } = props
   return (
-    <Component className={cx('root', className)}>
+    <Component className={cx(styles.truncated, className)} style={{ WebkitLineClamp: maxLines }}>
       {children}
-      <style jsx>{`
-        .root {
-          display: -webkit-box;
-          -webkit-line-clamp: ${maxLines};
-          -webkit-box-orient: vertical;
-          overflow: hidden;
-        }
-      `}</style>
     </Component>
   )
 }

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited