cssinjs / styled-jss Goto Github PK
View Code? Open in Web Editor NEWStyled Components on top of JSS.
Home Page: http://cssinjs.org/styled-jss
License: MIT License
Styled Components on top of JSS.
Home Page: http://cssinjs.org/styled-jss
License: MIT License
Extend preset plugin doesn't seem to be working.
export const button = {
display: `inline-block`,
fontSize: `1.2em`
};
export const primary = {
extend: 'button',
color: `white`
};
And usage:
import styled from 'styled-jss';
const Button = styled('button')(button);
export const PrimaryButton = styled('button')(primary);
So we can use template literals when needed:
styled('div')(`
color: red;
`)
Moving discussion from react-jss
..... I've been using both react-jss
and styled-jss
in the same app. This has worked fine until upgrading to the most recent versions of jss
, react-jss
, and styled-jss
. Everything works fine during development but when I bundle my app with NODE_ENV=production
I end of with duplicate className conflicts.
After some investigation I concluded that styled-jss
does not honor anything in context put there by react-jss
's JssProvider
. Most of my styled-jss
use is in a separate, sharable package. styled-jss
does not declare react-jss
as a dependency so I"m not sure this is technically a bug. However, my expectation was that they'd work together -- especially since they both target react apps. More importantly.... for the benefit of the jss
ecosystem... and getting stuff to "just work" I wonder if styled-jss
should honor what JssProvider
puts there and I guess make react-jss
and dependency?
I'm going to explore a "custom JSS" setup and try to share a className generator between the 2... but this seems like a lot of friction for 2 packages that I would expect to work well together. Curious what your thoughts are ?
@kof mentioned "Initially they were not meant to be be used together, but I think in theory they should do so if they turn out to be complementary. I think we are not aware right now of complementarity." They're a different approach to styling your app. I tend to use styled-jss
for structural components (flexbox layouts and stuff like that) and react-jss
for more component centric styling. It's arguable whether that's complimentary or not... but I'm struggling to understand why they wouldn't be designed to work well together so it's up to the end-user to decide when to use which. Since they're part of the same cssinjs
org and both target React apps my expectation was that they'd work together.
Basic requirements:
Current state:
README:
const jss = createJss()
Probably other places (did not explored the source code deeply yet).
Example of bug in tuchk4/css-in-js-app#7 (comment)
If component have displayName
like this hoc(Component)
JSS can't insert rule into css
Warning: [JSS] Can not insert an unsupported rule
.withStyles(Typography)-6-0-1 {
flex: 1;
}
I want to dynamic import "styled-jss" and able to do that so styled-jss become a chunk and only loaded when one of my styled components loaded. For simple case, it works (see sandbox link below)
Expected behavior:
+Component selector should work.
+Style should cached somehow.
The bug:
+Component selector doens't work:
+Similar classes generated multiple times:
Codesandbox:
https://codesandbox.io/s/styled-jss-playground-9f5j0?file=/index.js
Versions (please complete the following information):__
Maybe the way i wrapped components is incorrect, if so, could you point me the way so i can fix it.
Is this possible with styled-jss
?
const AuthorName = styled('div')({...})
const Avatar = styled('img')({...})
const Message = styled('div')({
[`&:not(:first-child) ${AuthorName}`]: {
display: 'none'
},
[`&:not(:last-child) ${Avatar}`]: {
visibility: 'hidden'
}
})
As this api adds styled primitives similar to styled-components, people often expect it to work with template string literals as well, we should add an example how to use them all together.
Either support innerRef or the new forwardRef API.
As of now, styled-jss can not be used in combination with a library like react-beautiful-dnd.
We need to implement injectStyled
that acts like injectSheet
from react-jss
, but provides sharable scope with styled components.
For example:
import Styled, { injectStyled } from 'styled-jss'
const styled = Styled({
root: {
margin: 10,
'& $baseButton': {
fontSize: 15,
},
},
baseButton: {
padding: 10
}
})
const NormalButton = styled('button', {
composes: '$baseButton',
border: [1, 'solid', 'grey'],
color: 'black'
})
const MyComponent = ({classes}) => (
<div className={classes.root}>
{/* this would have font-size: 15 then */}
<NormalButton />
</div>
)
const MyStyledComponent = injectSheet(styled)(MyComponent)
There is one for glamorous https://www.npmjs.com/package/babel-plugin-glamorous-displayname
I think we should create a new one and make it configurable.
Should this work?
import React from 'react';
import styled from 'styled-jss';
import styles from 'my-styles';
const Input = styled('input')(styles.input);
export const TextInput = () => (
<Input type='text' />
);
When I provide a literal style object, media queries are considered.
const ResponsiveOk = styled("div")({
color: "green",
"@media screen and (min-width: 400px)": {
color: "red"
}
});
If I use a theme callback instead, media queries do not work anymore:
const ResponsiveNotOk = styled("div")(({ theme }) => ({
color: "green",
"@media screen and (min-width: 400px)": {
color: "red"
}
}));
Demo: https://codesandbox.io/s/m9v69xvo3x
Resize the output window above/below 400 pixel to see the difference: the top row switches between red and green, the bottom row doesn't.
Am I missing something conceptually here or is this supposed to work?
Please direct me elsewhere for this question if this is not an appropriate place... I've used react-jss for a while and it's great (good job to you all !!). I just discovered styled-jss in the process of evaluating styled-components and styled-jsx. styled-jss seems like an excellent alternative to styled-components for the jss ecosystem. What I'm trying to understand is when to use react-jss vs styled-jss and any differences/gotchas that I should be aware of. When authoring a component I completely understand the difference.... but is it OK/recommended to use both together? react-jss auto attaches/detaches where styled-jss appears to inject one big stylesheet during bootstrap... If I'm writing a shared component library is there anything I should be aware of using one vs the other.... My desire is probably to use both together and that appears to work fine.. but I'm curious if there are any "best practices" or "recommendations" on how best to think about using them and when to use one vs. the other.
Is there a way to define properties on styled jss components like styled-components does?
demo: https://codesandbox.io/s/async-sky-5xyhv
body doesn't have a lightblue background as expected
import React from "react";
import ReactDOM from "react-dom";
import styled from 'styled-jss';
function App(props) {
return (
<div {...props}>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
const StyledApp = styled(App)({
border: '1px solid red',
'@global': {
body: {
backgroundColor: 'lightblue'
}
}
})
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);
styled-jss: 2.2.3
Lets add or even replace the current interface with the currying one:
const Button = styled('div')({
color: 'red'
})
The nice thing about it is:
const div = styled('div')
const Button = div({
color: 'red'
})
const AnotherButton = div({
color: 'green'
})
@iamstarkov has been working on a unified styling solution https://github.com/iamstarkov/theming and styled-jss needs to integrate it
Main issue cssinjs/jss#488
This package is dependent on is-react-prop
which isn't (currently) compatible with React 16. Do you have plans to remediate this? Is there a timeframe for this?
As documented in the readme, you are able to compose style-objects or style-functions by passing additional arguments to styled
.
However, if you pass a style-function then any function rules in the base styles will not be respected
see example:
https://codesandbox.io/embed/jss-composable-styles-bug-rt1on
When we use styled-jss inside a library/package, should we install them as peerDependencies or regular dependencies?
Is there something to watch out for, regarding multiple instances or versions conflict when a library use styled-jss as well as the consumer?
We can provide babel plugin with prejss under the hood, that would transform
const Button = styled.button`
color: red;
`
to
const Button = styled('button', {color: 'red'})
for better performance
It does not change color on hover:
const Button = styled('button')({
fontSize: 12,
'&:hover': {
color: props => props.color
}
})
const App = () => (
<div>
<Button color="red">Button</Button>
</div>
)
This caused because styled-jss
adds rules dynamically, see cssinjs/jss#500
Is it a normal behavior?
Any pointers on using this in a typescript project? Anyone using this library with an internal type file?
Something breaks https://www.webpackbin.com/bins/-Kx3KaoLH8CXa9LMHIOY
There is a package "is-observable" which I use in JSS to identify an observable object.
It works:
const MyComp = styled('div')({
border: [2, 'solid', 'white'],
});
This does not work:
const MyComp = styled('div')({
border: ({ children }) => !children && [2, 'solid', 'white'],
});
Works:
const MyComp = styled('div')({
border: ({ children }) => !children && ['2px', 'solid', 'white'].join(' '),
});
Consider this example:
const C1 = ({ children }) => <div>{children}</div>;
const C2 = styled(C1)({});
const C3 = styled(C2)({});
const App = () => <C3>Test</C3>
That is, styled element C3 extends styled element C2 which by itself extends component C1.
This causes a wrong DOM element to be rendered (notice the c1 tag):
<c1 class="C1-2-0-1">Test</c1>
If I replace C1 with a styled element by itself (const C1 = styled('div')({...})
), the generated DOM is correct.
Can u add something like 'css' prop in glamorous? I think it might be useful when u want specify just a margin.
<MyStyledComponent css={{ marginBottom: 8 }}/>
Styled-JSS should be able to remove the isObservable check, because jss now removes observables from style object, subscribes to it and sets the value directly.
Is there a way to display the component name as the class name for easier debugging?
Styled components has this functionality with their babel plugin: https://styled-components.com/docs/tooling#better-debugging
Is there a babel plugin for styled JSS that does the same thing or is there any other method to accomplish this?
For example see glamorous https://glamorous.rocks/api/
Not exactly the same issue as #62 , so I created a new issue.
I am also having difficulty with getting SSR to work with styled-jss. Using createStyled
, I create a new styled
using an existing jss instance. Though the styles render client-side, they aren't making it into the registry, and therefore not getting injected into the critical CSS. Is the jss instance supposed to handle the insertion of styles into the registry? Or this is something styled-jss is supposed to handle that hasn't been implemented yet?
Is it possible / would you accept a pull request that could accomplish something of the following:
const CaseOne = {
color: red
};
const CaseTwo = {
color: blue
};
const MyStyledComponent = styled('button')(
props => props.caseOne ? CaseOne : CaseTwo
);
I know currently you can set CSS properties individually based on props, but the library doesn't support replacing the whole styled object based on props.
This is a trivial example case, but I've had a number of use cases using this library where the styled objects were so different that I'd rather just swap them in and out as a whole.
I've also had a few cases where the styled objects are coming from different node modules and it's not sensible to override them one by one; I also don't want to know what the styled object looks like because it's coming from a different node module.
They changed composition to use .extend. I think styled(StyledButton) means now a different thing over there.
Expected:
const Title = styled("h1")(p => ({
background: "blue"
}));
const Title2 = styled(Title)({
background: "green"
});
Expected:
Title2 is green
Resulted:
Title2 is blue, because it has 2 class names and one of them loses the specificity war.
Repro:
https://codesandbox.io/s/styled-jss-playground-repro-mo3c8
Do styled-jss support keyframes animations and what is the syntax? Unfortunately i wasn't able to get it work using example from here
Is this possible to add jss plugins without re-exporting whole styled-jss
module?
Why do this not work :-) ? I am used to do so in other styled component libs :-) ?
I couldn't find anything about server-rendering support for styled-jss
. There is the react-jss
package but even when using JssProvider
from react-jss
it doesn't work. I keep getting a mismatch of classes between the server and the client every time I refresh.
Will there be any server-rendering support for styled-jss
?
I made a sample repo here: https://github.com/stoikerty/styled-jss-ssr-example
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.