Closed javag97 closed 2 years ago
@javag97 Hey there! Would love the help if you are able and am open to ideas of how to best implement. I have not started work on the feature yet though it has been on the roadmap for a while.
Some initial thoughts:
Let me know your thoughts and if you would be interested in working on this feature via a PR.
I wonder if this could tie in with running custom plugins (#31). For example, here's how I build out the @font-face
rules for Google Fonts within a tailwind project:
// tailwind.config.js
const plugin = require('tailwindcss/plugin');
module.exports = {
theme: {
fontFamily: {
sans: ['Roboto Condensed'],
},
},
plugins: [
plugin(({ addBase }) => {
const customFonts = [
{
'@font-face': {
fontFamily: 'Roboto Condensed',
fontWeight: '300',
fontStyle: 'italic',
fontDisplay: 'swap',
src: 'url(https://fonts.gstatic.com/s/robotocondensed/v19/ieVg2ZhZI2eCN5jzbjEETS9weq8-19eDpCEobdNZUSdy4Q.woff2) format(\'woff\')',
unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
},
},
{
'@font-face': {
fontFamily: 'Roboto Condensed',
fontWeight: '300',
fontStyle: 'normal',
fontDisplay: 'swap',
src: 'url(https://fonts.gstatic.com/s/robotocondensed/v19/ieVi2ZhZI2eCN5jzbjEETS9weq8-33mZGCQYb9lecyU.woff2) format(\'woff\')',
unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
},
},
];
return addBase(customFonts);
}),
],
};
I would definitely support this addition.
Started working on this, the canvas section component was simple enough but font loading is giving me all kinds of problems. Seems like loading fonts after vue loads is an issue. Any other ideas besides generating a combined index.css
file?
@acharlop Do you have a draft PR I can look at? What approach did you take? Looking back at https://github.com/rogden/tailwind-config-viewer/issues/43#issuecomment-814403968 I was hoping to take a css file URI such as the one Google Fonts provides via a config property and dynamically inject a <link rel="stylesheet" href="URI_OF FONT_CSS_FILE.css">
into the head in the mount callback of Canvas.vue (https://github.com/rogden/tailwind-config-viewer/blob/master/src/components/Canvas/Canvas.vue#L119).
After some sleep I realized I was using a class to apply font styles instead of directly. That did the trick. Should have a PR for you later today
Added in https://github.com/rogden/tailwind-config-viewer/releases/tag/v1.7.0
Thanks @acharlop !
Creating an issue for this work to be done. Is there a timeline for this? It may be possible for others(including myself) to take on this work, but I wanted to see if the maintainer here had any thoughts