Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug: Fonts do not work with useCssVariables. #191

Closed
Rodielm opened this issue Oct 7, 2022 · 1 comment · Fixed by #194
Closed

Bug: Fonts do not work with useCssVariables. #191

Rodielm opened this issue Oct 7, 2022 · 1 comment · Fixed by #194
Assignees
@jmjuanes
Labels
documentation Documentation related issues urgent Issues that must be resolved ASAP

Comments

@Rodielm
Copy link
Contributor

Rodielm commented Oct 7, 2022 •
edited
Loading

Describe the issue

It seems that using useCssVariables fonts do not work.

To reproduce

Add Roboto, Montserrat fonts to the index.html 

<html lang="en" data-color-mode="dark">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&family=Roboto:wght@400;500;800&display=swap"
    rel="stylesheet">
    <link rel="stylesheet" href="/siimple-beta.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + React</title>
</head>
<body>...</body
</html>

Use this config

import ice from '@siimple/preset-ice'
import dark from '@siimple/preset-dark'

export default {
  useColorModes: true,
  useCssVariables: true,
  useColorModesMediaQuery: false,
  useRootStyles: true,
  useBorderBox: true,
  prefix: '',
  ...ice,
  colors: {
    ...ice.colors,
  },
  colorModes: {
    dark: { ...dark.colors },
  },
  fonts: {
    body: ['Roboto', 'sans-serif'],
    heading: ['Montserrat', 'sans-serif'],
    code: ['monospace'],
  },
}

Run this command: npx siimple -c ./siimple.config.js -o ./siimple.css

Screenshots

No response

What browser(s) are you seeing the problem on?

Chrome

What version of siimple are you using?

4.3.0

Additional context

No response
@Rodielm Rodielm added the under-investigation Issues that are currently under investigation label Oct 7, 2022
@jmjuanes
Copy link
Owner

Hi @Rodielm. This seems that is a typo in the configuration example, fonts should be specified as a single string and not as an array. This should work:

export default {
    fonts: {
        body: "'Roboto',sans-serif",
        heading: "'Montserrat',sans-serif",
        code: "monospace",
    },
    // ...other configuration
};

You can try it on this playground.

@jmjuanes jmjuanes self-assigned this Oct 11, 2022
@jmjuanes jmjuanes added urgent Issues that must be resolved ASAP documentation Documentation related issues and removed under-investigation Issues that are currently under investigation labels Oct 11, 2022
@jmjuanes jmjuanes mentioned this issue Oct 11, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jmjuanes jmjuanes

Labels
documentation Documentation related issues urgent Issues that must be resolved ASAP
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

docs: fix typo in fonts configuration example jmjuanes/siimple
2 participants
@jmjuanes @Rodielm