hey all, I'm using react-jss with typescript and I am struggling with an issue where I cannot define multiple font-faces, I get this error:
TS2322: Type '{ fontFamily: string; fontWeight: number; src: string; }[]' is not assignable to type 'string | JssStyle | Func<string | JssStyle | null | undefined>'.
Type '{ fontFamily: string; fontWeight: number; src: string; }[]' is not assignable to type 'JssStyle'.
Index signature is missing in type '{ fontFamily: string; fontWeight: number; src: string; }[]'.The problem seems to be that I cannot declare the @font-face rule as an array. Without using an array it's fine:
const useStyles = createUseStyles({
'@font-face': {
fontFamily: 'Milo',
fontWeight: 300,
src: [
'url(./assets/fonts/MiloOT-Light.woff) format("woff")',
'url(./assets/fonts/MiloOT-Light.woff2) format("woff2")',
],
},
});but if I use the array syntax (cause I want to define multiple fontWeights), it goes wrong:
'@font-face': [
{
fontFamily: 'Milo',
fontWeight: 300,
src: [
'url(https://stylabilla-static-assets.usabilla.com/assets/fonts/MiloOT-Light.woff) format("woff")',
'url(https://stylabilla-static-assets.usabilla.com/assets/fonts/MiloOT-Light.woff2) format("woff2")',
],
},
],JssStyle[]?
Hi! I was thinking about contributing to the project but I'm running into issues just building it. I'm getting this error when trying the build:
(plugin size-snapshot) Error: ModuleNotFoundError: Module not found: Error: Can't resolve './Jss.js' in '/'I tried removing the size-snapshot plugin from rollup, but it runs into import errors a little further into the build. Does this sound familiar to anyone or is this something weird? I'm on windows if that makes a difference.
Just starting with react-jss and after installing and importing into my component using
import { createUseStyles } from 'react-jss' I'm getting this warning export 'getDynamicStyles' was not found in 'jss'Which leads to the error
Object(...) is not a function in my storybook.Anyone knows what might be the issue?
1 reply
listStyleCheck: {
listStyle: 'none',
'li:before': {
content: '✔'
}
},
1 reply
jss-plugin-expand to be able to write rules like padding: [5, 0, 0, 6]. But for some reason, it compiles to padding: 5px, 0, 0, 6px which is invalid syntax. Can someone here help me? Do I need to setup something special?
const styles = {
copy: {
background: 'black'
},
'copy-2': {
background: 'black'
},
}
root: {
// animation: "$ripple 1.2s infinite ease-in-out",
animation: (props: StatusBadgeProps) => {
if (props.status === "online") return "$ripple 1.2s infinite ease-in-out";
else return "";
},
}Hi! Can I use pseudo elements (::before, ::after) in CSS-in-JS ?
yes you can
when use function throw not link issue:
Warning: [JSS] Rule is not linked. Missing sheet option "link: true".
Hi there,
I'm trying figure out a way of getting CSP to work with JSS on a statically hosted site.
Adding Nonce
The official solutions to this is to inject a nonce at request time, but we don't have that ability do that as the assets are currently served as static files via AWS Amplify. We could possibly change this to use AWS Cloudfront directly and insert a Lambda@Edge to add the nonce, but would prefer not to if it's at all possible to do another way as the site is already up and running in Amplify
Adding Hashes
I have tried manually adding hashes to my CSP allowed styles list, but the hashes change too regularly for this to work at all.
Extracting to Files
I've seen that there is an old extract-jss-webpack-plugin that looks like it works for Webpack 2 which made me wonder: is there is any way of extracting the JSS to CSS files at build time using Webpack 4? Or is it possible to do something at compile time using server-side rendering to at least insert all the script tags into the page?
