[core] Remove react-jss from all packages and files

Wurielle · Sep 20, 2021 · 4eb1b21 · 4eb1b21
1 parent 03fc657
commit 4eb1b21
Show file tree

Hide file tree

Showing 19 changed files with 15 additions and 247 deletions.
diff --git a/README.md b/README.md
@@ -25,7 +25,6 @@ Mantine is a MIT licensed open source react components and hooks library with fo
 - **Ready for production** – mantine is well tested and works in all modern browsers
 - **Developer experience** – mantine comes with more than 50 components and 15 hooks to cover you in most cases
 - **No annoying focus ring** – with new :focus-visible pseudo-class focus ring appears only when user navigates with keyboard
-- **React JSS** – take advantage of all react-jss features: automatic critical css extraction during ssr, lazy evaluation, dynamic theming and others
 - **React and Preact** – mantine works flawlessly with preact
 
 ## Licence

diff --git a/configuration/rollup/create-package-config.ts b/configuration/rollup/create-package-config.ts
@@ -95,7 +95,6 @@ export default async function createPackageConfig(config: PkgConfigInput): Promi
       react: 'React',
       dayjs: 'dayjs',
       'react-dom': 'ReactDOM',
-      'react-jss': 'reactJss',
     };
   }
 

diff --git a/docs/src/components/GettingStarted/GettingStarted.tsx b/docs/src/components/GettingStarted/GettingStarted.tsx
@@ -9,7 +9,7 @@ import useStyles from './GettingStarted.styles';
 
 export function GettingStarted() {
   const { classes } = useStyles();
-  const [dependencies, setDependencies] = useState('react-jss @mantine/hooks @mantine/core');
+  const [dependencies, setDependencies] = useState('@mantine/hooks @mantine/core');
 
   return (
     <>

diff --git a/docs/src/components/GettingStarted/Guides/guides/Installation.tsx b/docs/src/components/GettingStarted/Guides/guides/Installation.tsx
@@ -12,14 +12,14 @@ export function Installation({ dependencies }: InstallationProps) {
       <div style={{ marginTop: 15 }}>
         <Text style={{ marginBottom: 5 }}>Install with yarn</Text>
         <Prism language="bash">
-          {`yarn add ${dependencies || 'react-jss @mantine/core @mantine/hooks'}`}
+          {`yarn add ${dependencies || '@mantine/core @mantine/hooks'}`}
         </Prism>
       </div>
 
       <div style={{ marginTop: 15 }}>
         <Text style={{ marginBottom: 5 }}>Install with npm</Text>
         <Prism language="bash">
-          {`npm install ${dependencies || 'react-jss @mantine/core @mantine/hooks'}`}
+          {`npm install ${dependencies || '@mantine/core @mantine/hooks'}`}
         </Prism>
       </div>
     </>

diff --git a/docs/src/components/HomePage/Features/data.ts b/docs/src/components/HomePage/Features/data.ts
@@ -7,7 +7,6 @@ import {
   MoonIcon,
   ShuffleIcon,
   LightningBoltIcon,
-  MagicWandIcon,
 } from '@modulz/radix-icons';
 
 export default [
@@ -58,13 +57,6 @@ export default [
     description:
       'All @mantine/ scoped packages are built with TypeScript and support it by default',
   },
-  {
-    icon: MagicWandIcon,
-    color: 'lime',
-    title: 'React JSS',
-    description:
-      'Take advantage of all react-jss features: automatic critical css extraction during ssr, lazy evaluation, dynamic theming, etc.',
-  },
   {
     icon: FaceIcon,
     color: 'indigo',

diff --git a/docs/src/docs/core/getting-started.mdx b/docs/src/docs/core/getting-started.mdx
@@ -16,7 +16,7 @@ import { CoreGroups } from '../../components/IndexGroups/CoreGroups';
 
 ## Installation
 
-Package depends on [react](https://www.npmjs.com/package/react), [react-dom](https://www.npmjs.com/package/react-dom), [@mantine/hooks](https://www.npmjs.com/package/@mantine/hooks) and [react-jss](https://www.npmjs.com/package/react-jss).
+Package depends on [react](https://www.npmjs.com/package/react), [react-dom](https://www.npmjs.com/package/react-dom) and [@mantine/hooks](https://www.npmjs.com/package/@mantine/hooks).
 
 Install with npm:
 

diff --git a/docs/src/docs/others/notifications.mdx b/docs/src/docs/others/notifications.mdx
@@ -19,7 +19,7 @@ import { NotificationDemos } from '@demos/core';
 
 ## Installation
 
-Package depends on [react](https://www.npmjs.com/package/react), [react-dom](https://www.npmjs.com/package/react-dom), [@mantine/hooks](https://www.npmjs.com/package/@mantine/hooks), [@mantine/core](https://www.npmjs.com/package/@mantine/core) and [react-jss](https://www.npmjs.com/package/react-jss).
+Package depends on [react](https://www.npmjs.com/package/react), [react-dom](https://www.npmjs.com/package/react-dom), [@mantine/hooks](https://www.npmjs.com/package/@mantine/hooks) and [@mantine/core](https://www.npmjs.com/package/@mantine/core).
 
 Install with npm:
 

diff --git a/docs/src/docs/others/prism.mdx b/docs/src/docs/others/prism.mdx
@@ -19,7 +19,7 @@ import * as PrismDemos from '@demos/prism';
 
 ## Installation
 
-Package depends on [react](https://www.npmjs.com/package/react), [react-dom](https://www.npmjs.com/package/react-dom), [@mantine/hooks](https://www.npmjs.com/package/@mantine/hooks), [@mantine/core](https://www.npmjs.com/package/@mantine/core), [react-jss](https://www.npmjs.com/package/react-jss) and [prism-react-renderer](https://www.npmjs.com/package/prism-react-renderer).
+Package depends on [react](https://www.npmjs.com/package/react), [react-dom](https://www.npmjs.com/package/react-dom), [@mantine/hooks](https://www.npmjs.com/package/@mantine/hooks), [@mantine/core](https://www.npmjs.com/package/@mantine/core) and [prism-react-renderer](https://www.npmjs.com/package/prism-react-renderer).
 
 Install with npm:
 

diff --git a/docs/src/docs/theming/styles-api.mdx b/docs/src/docs/theming/styles-api.mdx
@@ -45,7 +45,7 @@ For example, if you want to add styles to slider thumb:
 <Slider styles={{ thumb: { backgroundColor: 'red' } }} />
 ```
 
-Now you can write styles for your component with [react-jss](/theming/react-jss/)
+Now you can write styles for your component with createStyles function
 or any other any other styling tools and languages:
 
 ```tsx

diff --git a/package.json b/package.json
@@ -115,7 +115,6 @@
     "react-custom-scrollbars": "^4.2.1",
     "react-feather": "^2.0.9",
     "react-flagpack": "^0.1.1",
-    "react-jss": "^10.7.1",
     "react-popper": "^2.2.5",
     "react-quill": "2.0.0-beta.4",
     "react-router-dom": "^5.2.0",

diff --git a/src/mantine-core/README.md b/src/mantine-core/README.md
@@ -25,7 +25,6 @@ Mantine is a MIT licensed open source react components and hooks library with fo
 - **Ready for production** – mantine is well tested and works in all modern browsers
 - **Developer experience** – mantine comes with more than 50 components and 15 hooks to cover you in most cases
 - **No annoying focus ring** – with new :focus-visible pseudo-class focus ring appears only when user navigates with keyboard
-- **React JSS** – take advantage of all react-jss features: automatic critical css extraction during ssr, lazy evaluation, dynamic theming and others
 - **React and Preact** – mantine works flawlessly with preact
 
 ## Installation

diff --git a/src/mantine-core/package.json b/src/mantine-core/package.json
@@ -24,7 +24,6 @@
     "clsx": "^1.1.1",
     "react-textarea-autosize": "^8.3.2",
     "@popperjs/core": "^2.9.3",
-    "react-jss": "^10.7.1",
     "react-popper": "^2.2.5"
   },
   "devDependencies": {}

diff --git a/src/mantine-core/src/components/Input/Input.story.tsx b/src/mantine-core/src/components/Input/Input.story.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useBooleanToggle } from '@mantine/hooks';
 import { storiesOf } from '@storybook/react';
-import { createUseStyles } from 'react-jss';
+import { createStyles } from '@mantine/core';
 import { MagnifyingGlassIcon } from '@modulz/radix-icons';
 import Textarea from 'react-textarea-autosize';
 import { MANTINE_SIZES } from '@mantine/styles';
@@ -22,7 +22,7 @@ function ValidInvalid() {
   );
 }
 
-const useStyles = createUseStyles({
+const useStyles = createStyles({
   input: {
     border: '2px solid red',
 

diff --git a/src/mantine-dates/package.json b/src/mantine-dates/package.json
@@ -17,7 +17,6 @@
   "dependencies": {
     "clsx": "^1.1.1",
     "@popperjs/core": "^2.9.3",
-    "react-jss": "^10.7.1",
     "react-popper": "^2.2.5"
   },
   "devDependencies": {}

diff --git a/src/mantine-notifications/package.json b/src/mantine-notifications/package.json
@@ -22,8 +22,7 @@
   },
   "dependencies": {
     "clsx": "^1.1.1",
-    "react-transition-group": "^4.4.2",
-    "react-jss": "^10.7.1"
+    "react-transition-group": "^4.4.2"
   },
   "devDependencies": {}
 }
diff --git a/src/mantine-prism/README.md b/src/mantine-prism/README.md
@@ -9,7 +9,7 @@ under the hood and support light and dark theme.
 
 ## Installation
 
-Package depends on [react](https://www.npmjs.com/package/react), [react-dom](https://www.npmjs.com/package/react-dom), [@mantine/hooks](https://www.npmjs.com/package/@mantine/hooks), [@mantine/core](https://www.npmjs.com/package/@mantine/core), [react-jss](https://www.npmjs.com/package/react-jss) and [prism-react-renderer](https://www.npmjs.com/package/prism-react-renderer).
+Package depends on [react](https://www.npmjs.com/package/react), [react-dom](https://www.npmjs.com/package/react-dom), [@mantine/hooks](https://www.npmjs.com/package/@mantine/hooks), [@mantine/core](https://www.npmjs.com/package/@mantine/core) and [prism-react-renderer](https://www.npmjs.com/package/prism-react-renderer).
 
 Install with npm:
 

diff --git a/src/mantine-prism/package.json b/src/mantine-prism/package.json
@@ -22,7 +22,6 @@
   },
   "dependencies": {
     "clsx": "^1.1.1",
-    "react-jss": "^10.7.1",
     "prism-react-renderer": "^1.2.1"
   },
   "devDependencies": {}

diff --git a/src/mantine-rte/package.json b/src/mantine-rte/package.json
@@ -23,7 +23,6 @@
   "dependencies": {
     "@modulz/radix-icons": "^4.0.0",
     "clsx": "^1.1.1",
-    "react-jss": "^10.7.1",
     "react-quill": "2.0.0-beta.4"
   },
   "devDependencies": {}