Browse Source

don't import styles into JS by default

Jordan Sexton 4 years ago
parent
commit
f556c2e485

+ 3 - 1
packages/starter/material-ui-starter/src/App.tsx

@@ -2,9 +2,11 @@ import { createTheme, ThemeProvider } from '@material-ui/core';
 import { deepPurple } from '@material-ui/core/colors';
 import { deepPurple } from '@material-ui/core/colors';
 import { SnackbarProvider } from 'notistack';
 import { SnackbarProvider } from 'notistack';
 import React, { FC } from 'react';
 import React, { FC } from 'react';
-import './App.css';
 import Wallet from './Wallet';
 import Wallet from './Wallet';
 
 
+// Use require instead of import, and order matters
+require('./App.css');
+
 const theme = createTheme({
 const theme = createTheme({
     palette: {
     palette: {
         type: 'dark',
         type: 'dark',

+ 3 - 1
packages/starter/material-ui-starter/src/index.tsx

@@ -1,9 +1,11 @@
 import React, { StrictMode } from 'react';
 import React, { StrictMode } from 'react';
 import ReactDOM from 'react-dom';
 import ReactDOM from 'react-dom';
 import App from './App';
 import App from './App';
-import './index.css';
 import reportWebVitals from './reportWebVitals';
 import reportWebVitals from './reportWebVitals';
 
 
+// Use require instead of import, and order matters
+require('./index.css');
+
 ReactDOM.render(
 ReactDOM.render(
     <StrictMode>
     <StrictMode>
         <App />
         <App />

+ 3 - 1
packages/starter/nextjs-starter/pages/_app.tsx

@@ -1,7 +1,9 @@
 import type { AppProps } from 'next/app';
 import type { AppProps } from 'next/app';
 import dynamic from 'next/dynamic';
 import dynamic from 'next/dynamic';
 import { ReactElement } from 'react';
 import { ReactElement } from 'react';
-import '../styles/globals.css';
+
+// Use require instead of import, and order matters
+require('../styles/globals.css');
 
 
 const WalletConnectionProvider = dynamic(() => import('../components/WalletConnectionProvider'), {
 const WalletConnectionProvider = dynamic(() => import('../components/WalletConnectionProvider'), {
     ssr: false,
     ssr: false,

+ 3 - 1
packages/starter/react-ui-starter/src/Notification.tsx

@@ -1,5 +1,7 @@
 import React, { FC } from 'react';
 import React, { FC } from 'react';
-import './notification.css';
+
+// Use require instead of import, and order matters
+require('./notification.css');
 
 
 export interface NotificationProps {
 export interface NotificationProps {
     message: string;
     message: string;

+ 4 - 1
packages/starter/react-ui-starter/src/index.tsx

@@ -1,8 +1,11 @@
 import React, { StrictMode } from 'react';
 import React, { StrictMode } from 'react';
 import ReactDOM from 'react-dom';
 import ReactDOM from 'react-dom';
-import './index.css';
 import Wallet from './Wallet';
 import Wallet from './Wallet';
 
 
+// Use require instead of import, and order matters
+require('@solana/wallet-adapter-react-ui/styles.css');
+require('./index.css');
+
 ReactDOM.render(
 ReactDOM.render(
     <StrictMode>
     <StrictMode>
         <Wallet />
         <Wallet />

+ 3 - 2
packages/ui/ant-design/package.json

@@ -10,14 +10,15 @@
     "files": [
     "files": [
         "lib",
         "lib",
         "src",
         "src",
-        "LICENSE"
+        "LICENSE",
+        "styles.css"
     ],
     ],
     "publishConfig": {
     "publishConfig": {
         "access": "public"
         "access": "public"
     },
     },
     "scripts": {
     "scripts": {
         "clean": "shx rm -rf lib/*",
         "clean": "shx rm -rf lib/*",
-        "build": "yarn clean && tsc && shx cp -f src/styles.less lib/"
+        "build": "yarn clean && tsc"
     },
     },
     "peerDependencies": {
     "peerDependencies": {
         "@ant-design/icons": "^4.6.3",
         "@ant-design/icons": "^4.6.3",

+ 0 - 2
packages/ui/ant-design/src/index.ts

@@ -1,5 +1,3 @@
-import './styles.less';
-
 export * from './useWalletModal';
 export * from './useWalletModal';
 export * from './WalletConnectButton';
 export * from './WalletConnectButton';
 export * from './WalletModal';
 export * from './WalletModal';

+ 0 - 0
packages/ui/ant-design/src/styles.less → packages/ui/ant-design/styles.css


+ 3 - 2
packages/ui/react-ui/package.json

@@ -10,14 +10,15 @@
     "files": [
     "files": [
         "lib",
         "lib",
         "src",
         "src",
-        "LICENSE"
+        "LICENSE",
+        "styles.css"
     ],
     ],
     "publishConfig": {
     "publishConfig": {
         "access": "public"
         "access": "public"
     },
     },
     "scripts": {
     "scripts": {
         "clean": "shx rm -rf lib/*",
         "clean": "shx rm -rf lib/*",
-        "build": "yarn clean && tsc && shx cp -f src/styles.css lib/"
+        "build": "yarn clean && tsc"
     },
     },
     "peerDependencies": {
     "peerDependencies": {
         "@solana/wallet-adapter-base": "^0.6.0",
         "@solana/wallet-adapter-base": "^0.6.0",

+ 0 - 1
packages/ui/react-ui/src/WalletModalProvider.tsx

@@ -1,5 +1,4 @@
 import React, { FC, useState } from 'react';
 import React, { FC, useState } from 'react';
-import './styles.css';
 import { WalletModalContext } from './useWalletModal';
 import { WalletModalContext } from './useWalletModal';
 import { WalletModal, WalletModalProps } from './WalletModal';
 import { WalletModal, WalletModalProps } from './WalletModal';
 
 

+ 0 - 0
packages/ui/react-ui/src/styles.css → packages/ui/react-ui/styles.css