Comments (21)
while I could do that, I wouldn't encourage it, you might run into css precedence issues (ah browser quirks). better you'd use merge
, and then pull the id out of that idFor(merge(orange, black))
from glamor.
alright, I'll get to this later today, will ping here when I got something. Thank you so much for the feedback! I'm happy you're trying my lib, and I appreciate your issues :)
from glamor.
good q, I don't have a strong answer for this right now, not too familiar with shadow dom etc. I'll read up; do you have any links I could read?
from glamor.
Safari has a good writeup of the v1 API being released in Safari 10 and Chrome 53: https://webkit.org/blog/4096/introducing-shadow-dom-api/. A good cheat sheet is http://robdodson.me/shadow-dom-css-cheat-sheet/.
Basically, you must create a <style> tag in your shadow root in order to style elements within it. The only things that cross the shadow boundary are inherited things like font-family and the like.
from glamor.
would a cssFor(rule)
helper, um, help? so you could merge()
the rules you want, take the literal css, and then do as you please. because of the way we hash rules etc, it shouldn't cause issues if it's also in main document head.
from glamor.
That could possibly work. What would an expanded API look like for it?
from glamor.
something like this, let's say -
import { cssFor, attribsFor, style } from 'glamor';
const div = document.createElement('div');
let orange = style({ backgroundColor: 'orange' })
let black = style({ backgroundColor: 'black' })
div.attachShadow({ open: true });
div.shadowRoot.innerHTML = `
<style>${cssFor(orange, black)}</style>
<div ${attribsFor(orange)}>
<span ${attribsFor(black)}>in shadow root</span>
</div>
`;
edit - replaced idFor
with attribsFor
from glamor.
That would be awesome.
from glamor.
Would be nice if idFor()
could accept multiple arguments and return an object so it'd work with {...idFor(orange, black)}
.
EDIT
Or if it's passed a string, return a string. If it's passed an array, return your standard object that style()
or merge()
would.
So:
idFor(orange);
idFor([orange, black]);
from glamor.
That sounds good.
from glamor.
just fixed the previous dep issue, will be on this tonight, sorry for the delay!
from glamor.
No need to apologise. Thanks for the update!
from glamor.
Alright then. So I got in 2 helpers named cssFor
and attribsFor
for the above, and have pubbed a new version (2.2.2). (idFor
returns just the id, while you'll need a whole data-attribute, hence attribsFor
). specifically, the code from my previous example above 'works' (I edited it to reflect the name change). some notes -
- not heavily tested, and the internal implementation is pretty naive for now
- haven't documented this in the readme, will do once we nail the api
- attribsFor accepts n rules, and will spit out n attribs; nb: it doesn't merge it into one rule.
a quick output example
import { attribsFor, cssFor, style, merge } from './src/index'
let red = style({ color: 'red' })
let blue = style({ color: 'blue' })
let merged = merge(red, blue)
console.log(cssFor(red, blue, merged))
/*
[data-css-16y7vsu]{ color:red; }
[data-css-po2wuq]{ color:blue; }
[data-css-9kt9a5]{ color:blue; }
*/
console.log(attribsFor(red, blue, merged))
/*
data-css-16y7vsu="" data-css-po2wuq="" data-css-9kt9a5="`16y7vsu + `po2wuq"
*/
let me know feedback, bugs etc, and I'll iterate on this.
(we could start with a better name for attribsFor
ugh :P)
from glamor.
Naming is the hardest problem in programming :). I generally abbr attributes as attrs
. You could also use props
, but that'd probably be somewhat more obtuse because they're really attributes.
I'll bump my version and have a play. Thanks again for being so responsive and for all your great work thus far!
I'll leave this open for now, but feel free to close.
from glamor.
I see the changes in your src
but I think you may have forgotten to run npm run build
before publishing? All I see in lib/
and umd/
is idFor()
which I'm guessing already existed.
If you just do npm publish
, is it worth making npm run build
a prepublish
script?
from glamor.
pubbed 2.2.3, and will add a prepublish script. sorry and thank you for debugging :( :(
from glamor.
added, fixed.
from glamor.
Epic! I've been using this feature and it's working great, so far.
from glamor.
oh yay, finally :) I'll rename attribsFor
to attribs
(or something else) later today and post an update here.
from glamor.
FWIW, I reckon if you're keeping the For
suffix on the rest of the utilities, then it might make sense to keep it? No strong opinion, though.
from glamor.
I'm open to suggestions for idFor, cssFor as well. But... I must say, the more I type it, the nicer it looks (to me). Might just be desensitized. Will defer taking a decision on this specific bit to later.
from glamor.
Related Issues (20)
- css.global doesn't support hover?
- Font Face Multiple Font Support HOT 1
- Promote css prop with react usage
- Deleting rules from the stylesheet
- Calling css({'data-css-nil': ''}) throws unexpected error HOT 1
- glamor-skeleton help
- psudeo element: scrollbar is not working
- Server-side rendering styles from a third-party library
- Values for the non-standard properties being set as numbers becomes as string with `px` concatenated in output HOT 4
- When NODE_ENV=production hydratation is broken
- Missing .d.ts for "glamor/server" HOT 1
- Outdated index.d.ts published HOT 1
- babel 7 support
- how to use -webkit-line-clamp HOT 1
- How to change src when the img hover ?
- Speedy mode is harmful for some production use cases (f.e. server-side rendering, prerendering, especially when glamor used in the library, etc)
- Generate inline style attribute text. HOT 3
- FBJS library causing vulnerability HOT 1
- className did not match
- update to a maintained `through`?
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 glamor.