Comments (37)
The reason for a different syntax is that we need all rules to be accessible via sheet.getRule and sheet.classes.myRule ... because thats the point of named style sheets.
from jss.
FWIW, on my initial reading of the docs, I got the impression that you could use media queries with namespaces based on the first JSS syntax example.
from jss.
Whether that means the API is confusing, the readme is confusing, or I'm just generally confused due to my own issues, I don't really know.
from jss.
yep, this example was initially without using named style sheet. After I changed named style sheet to be default and changed the example, @media part of it became invalid, thats why I have removed it for now until we implement it right.
from jss.
So confusion is because of this wrong example.
from jss.
My completely uninformed assumption is that you should be able to write what basically looks like CSS and it should just work, even if you used namespaces.
from jss.
Ideally yes, but in the real world namespaces mean we need to have a common scope for them. In case of conditional group rules they kinda introduce a new scope. So we need to break CSS compatibility when using named styles in this case to have just one scope per sheet.
from jss.
shouldn't be a big issue though, because there are not much conditional group rules, its just @media and @supports which is probably not used.
from jss.
another possibility would be to allow conditional group rules per style sheet.
from jss.
So that all rules within one style sheet are within @media condition.
from jss.
this would make 100% consistency with css but will force you to write separate sheets for this. Maybe not the worst option.
from jss.
The point I seem to have missed is that you can't override a namespace like you can with a selector when doing responsive design. Is this correct?
from jss.
Correct right now. But what if we allow this? And treat all declarations within a conditional group rule as an override if such a rule exist, if not - it will be added? May be also not bad at all.
from jss.
Makes a lot of sense to me. IMO the principle of least surprise would suggest you should be able to override just like normal CSS, otherwise this is just going to trip more people up.
from jss.
I assumed that namespaces just meant that JSS would generate class names for you, but otherwise allow you to just write CSS with a JSON syntax, at-rules and all.
from jss.
there are 2 basic ideas:
- as you said - generated classes
- access to the rules from javascript
The last point could become less intuitive if we start overriding rules, but maybe its not that important there.
from jss.
In terms of implementation details: a rule can become a container rule with subrules which have conditions. But at the end it should render to css we expect.
from jss.
On the question of accessing the rules from JavaScript, maybe it would look something like this:
sheet.getRule('myName');
//returns:
{
color: 'red',
'@media screen and (min-width: 768px)': {
color: 'green'
},
'@media screen and (min-width: 1024px)': {
color: 'blue'
}
}
That would be the least surprising to me. Would that cause any issues? What are your thoughts on this API?
from jss.
this structure looks strange because @media conditional is on the same level as property names.
from jss.
getRule returns a Rule instance anyways ... I was thinking forward about getRule('...').toJSON()
from jss.
maybe toJSON should have an option for returning declarations only or with conditionals.
from jss.
I think this is the best syntax.
{
button1: {
color: 'red'
},
'@media screen and (min-width: 768px)': {
button1: {
color: 'green'
},
button2: {
color: 'blue'
}
}
}
Will try to implement something.
from jss.
Hmm another issue with this syntax is that its numeric values can't be easily constants, by nature of object properties.
from jss.
Is this actually an issue?
var SOME_CONSTANT = 768
var rules = {
button1: {
color: 'red'
}
}
rules['@media screen and (min-width: '+ SOME_CONSTANT+'px)'] = {
button1: {
color: 'green'
},
button2: {
color: 'blue'
}
}
from jss.
I can definitely see that becoming a bit annoying.
However, I still really appreciate the fact that it's a totally guessable format. If asked to use JSON to define CSS + media queries, I'm sure most people would produce something similar.
Plus you could easily build some helpers to generate this format for you, if you feel the need.
from jss.
Also, I think that it should be possible to extend rules with an @-rule in it.
What about this:
var mixin = {
'@media (min-width: 480px)': {
display: 'block'
}
}
var rule = {
extend: mixin
background: '#ccc'
}
Would be achievable? It's something that has more to do with extend plugin, or it's better to discuss it here?
from jss.
@Zimok lets talk about it separately after we have a good working @media solution.
from jss.
@kof yes, it makes sense
By the way, talking about @-selector rules, I believe in this case a special prop keyword, like condition
, would not be that weird, even if it's something completely unknown in css world – but, otherwise, what would be the benefit of using a pre-processor, if we can't keep things small and DRY?
Plus it would make the code more readable and smaller, avoiding repetitions (compare it to the alternative solution where you have to repeat the name of the rule every time within an @-rule).
I'd definitely prefer a special keyword against an over-nested, repeating structure, but that's a matter of personal style.
Eventually, I think we should also find a solution for using @-rules with named stylesheets.
from jss.
@kof How things going with this?
I would really appreciate @media support in such form
(your second proposal for API looks prettier for me btw.)
I know with 'jss' we can create several stylesheets with different media queries.
jss.createStyleSheet({_rules1_}, {media:'_query1_'}}).attach()
jss.createStyleSheet({_rules2_}, {media:'_query2_'}}).attach()
But I'm using 'react-jss' and we can create component with one stylesheet only, right?
useSheet(ReactComponent, {_rules_}, {media:'_query_'})
from jss.
I am on it now, should be ready next week.
from jss.
its finally landed, please try it out, would love your feedback
from jss.
@kof Great! JSS works as expected.
But I have a question regarding to 'react-jss'.
I have following jss definition:
css: {
externalRule: {
'border': '1px solid red'
},
'@media print': {
externalRule: {
'border': '5px dashed black'
},
subRule: {
'font-weight': 'bold'
}
}
}
And in this.props.sheet.classes
I got:
{externalRule: "jss-0-2", @media print: undefined}
My expectation is:
{externalRule: "jss-0-2", subRule: "jss-x-x"}
I.e. do not have @media and do have subRule there.
I guess this happens because 'react-jss' do not know about subrules yet.
What do you think? Should I forward this to 'react-jss' repo as an issue?
from jss.
thanks for the report,
- removed @media from classes map
- subrules from @media are designed as overwrites, if you want to access it via classes, define it in the main object
from jss.
@kof yep, do not see @media
in classes
anymore.
Subrules overwrite behavior is not something obvious imho, but I do not see cases where it is going to be a blocking issue, though user always can add empty subrule at the top level to get it work...
Thanks!
from jss.
Yep, lets see if someone will stumble over it.
from jss.
closing for now, if something comes up feel free to reopen.
from jss.
Look whats possible with ES6
const WIDTH = 700
{
button: {
color: 'red'
},
[ `@media screen and (min-width: ${WIDTH}px)`]: {
button: {
color: 'green'
}
}
}
from jss.
Related Issues (20)
- JSS Dynamic Rules are not removed on re-render V10.0.9
- export 'useInsertionEffect' (imported as 'useInsertionEffect') was not found in 'react' HOT 3
- Dynamic values don't work when using arrow functions HOT 7
- [cli] stdout is not a tty HOT 1
- get error msg in Micro-frontend environment: Cannot read properties of null (reading 'cssRules') HOT 3
- Support @container query HOT 9
- dynamic css issue under a certain condition since version 10.9.1-alpha.1 HOT 2
- Support @layer property HOT 2
- Re-rendering root node breaks dynamic styles HOT 10
- Docs are not able to load github's markdown files
- Bug with react-jss compilation: "Warning: [JSS] Rule is not linked. Missing sheet option "link: true"."
- TypeError: Cannot read properties of null (reading 'deleteRule')
- JSS for Preact
- React strict mode forces dynamic rules to be added twice which breaks hydration
- Code Execution Error after Applying Content Security Policy (CSP)
- Style block un-renders when any param used - since v10.0 HOT 1
- `react-jss` dynamic rules memory leak in strict mode
- StyleSheet.replaceRule does not replace media query rules
- How should i assign a counters() to the content property?
- Add specific id or data-tag to the style element injected in head?
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 jss.