sheetify
sheetify copied to clipboard
stackcss
Reusing css file puts duplicate styles in <head>
I have a few components that are similar and I'd like to share styles between rather than copying & pasting the styles into each component. So I put the shared styles into a .css file and imported them into each component via sf('path/to/styles.css'). Fortunately sheetify seems to know it's the same file so it uses the same class name for both components. But it still puts the contents of the .css file into the <head><style> tag twice:
Is that expected behaviour? Is there a better way to accomplish what I'm trying to do? The only other thing I can think of is to put the css on the parent element, but that feels like unnecessary coupling. Or use insert-css to just add css like olden times.
I think this would be an optimization; when using extract-css it might make sense to dedupe classes for stuff like this. Does that make sense?
maybe we can do something like this in the output:
require('sheetify/insert')('css text', 'hash of css text')
and not insert duplicate hashes (could the prefix be used that way?). that would be for dev, everything would still be duplicated in js so it doesn't save on size there. css-extract could check the hash and discard anything it has already extracted for prod.
What I was thinking is to solve this in the pipeline instead — apply a transform that understands cascade, and makes sure that selectors are merged. If for whatever reason duplicate code is encountered, it'll automatically be deduped.
The reason why I never quite got into this, is because tachyons (and
friends such as http://gr8.style) don't conflict. And usually styles are
fine for me b/c using components dedupes them. Would still be cool to have
tho.
Does this make sense?
On Fri, Oct 20, 2017 at 9:33 PM Renée Kooi [email protected] wrote:
maybe we can do something like this in the output:
require('sheetify/insert')('css text', 'hash of css text')
and not insert duplicate hashes (could the prefix be used that way?). that would be for dev. css-extract could check the hash and discard anything it has already extracted for prod.
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/stackcss/sheetify/issues/99#issuecomment-338302391, or mute the thread https://github.com/notifications/unsubscribe-auth/ACWlel2n7OU1Bp5Rg0vKF0oaJgcsKThiks5suPWZgaJpZM4KQ6DM .