Comments (10)
That's done: https://docs.tss-react.dev/detecting-unused-classes
@hoangbn Thank you for suggesting it.
from tss-react.
Hi @hoangbn,
I will have a look to see if the eslint plugin can be easily adapted.
The GlobalStyle
exposed by tss-react
is a wrapper around the one of @emotion/react
from tss-react.
Honestly, I don't know.
I wonder who would know? It would be beneficial not to export constructs unneededly (yagni).
from tss-react.
There is a package to detect unused styles with @mui/styles: https://github.com/jens-ox/eslint-plugin-material-ui-unused-classes. Can we have one adjusted to tss-react?
Also, unrelated question: does GlobalStyles in this package differ from one exported from @mui/material?
It's finally coming! https://github.com/garronej/eslint-plugin-tss-unused-classes
There is still some bugs to fix and some docs to write, I will publish it officially by monday.
from tss-react.
There is a package to detect unused styles with @mui/styles: https://github.com/jens-ox/eslint-plugin-material-ui-unused-classes. Can we have one adjusted to tss-react?
This is actually a good idea. I put in in my roadmap.
Also, unrelated question: does GlobalStyles in this package differ from one exported from @mui/material?
I forget to link the doc: https://github.com/garronej/tss-react/blob/main/README.md#globalstyles-
from tss-react.
Is there any reason I would use this GlobalStyles as opposed to one exported from @mui/material? Their version is also a wrapper around one in @emotion/react, but they do some additional things.
from tss-react.
Honestly, I don't know.
I do know
from tss-react.
Honestly, I don't know.
I wonder who would know? It would be beneficial not to export constructs unneededly (yagni).
from tss-react.
tss-react
is not a plugin for MUI. It is a styling solution that is compatible with MUI.
It is important that tss-react
provide a way to define global style.
With the <GlobalStyles/>
from MUI unlike with the <GlobalStyles/>
from tss-react
you can either pass a CSS object or a function that receive the theme and return a CSSObject like:
import GlobalStyles from "@mui/material/GlobalStyles";
const node = (
<GlobalStyle
styles={theme=> ({
"body": { "backgroundColor": theme.palette.... }
})}
/>
);
I plan to update tss-react
to make it work the same way.
I don't see what it brings to the table, we can simply do:
import { GlobalStyles } from "tss-react";
import { useStyles } from "tss-react/mui";
function MyComponent() {
const { theme } = useStyles();
return (
<>
<GlobalStyles
styles={{
"body": {
"backgroundColor": theme.palette.background.default,
},
".foo": {
"color": "cyan"
},
}}
/>
<h1 className="foo">This text will be cyan</h1>
</>
);
}
from tss-react.
Honestly, I don't know.
I wonder who would know? It would be beneficial not to export constructs unneededly (yagni).
tss-react is not a plugin for MUI. It is a styling solution that is compatible with MUI.
It is important that tss-react provide a way to define global style.
from tss-react.
Related Issues (20)
- How to opt out of RTL transformation? HOT 3
- <GlobalStyles /> don't work properly with next.js app folder HOT 7
- cannot Import multiple makeStyles HOT 1
- Use eslint rule to detect unused classed with imports HOT 2
- React 16.10.0 failed to install @ mui/material HOT 1
- How to use with css and styled apis. HOT 1
- yarn install with pnp mode complains about missing dependency @mui/material HOT 3
- NextJS/MUI/TSS - Cannot read properties of undefined (reading 'classes') HOT 3
- Hard reload after any file change HOT 2
- TssCacheProvider is not working when used with emotion cache and mui 5 HOT 6
- Using with Shadowed Web Components HOT 3
- Next.js: Applying augmentDocumentWithEmotionCache to document breaks AMP pages HOT 2
- The right way typing props when using withStyles HOT 3
- Invalid type for withStyles HOT 4
- Mantine integration
- Using `@import` rule within `<GlobalStyles />` component HOT 8
- `GlobalStyles` create multiple <style data-emotion="css-global">...<style> HOT 1
- Cannot read properties of undefined (reading 'length') in useGuaranteedMemo HOT 3
- MUI V5: Performance issues HOT 4
- Prop `className` did not match. HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tss-react.