TheComputerM/svelte-materialify

Unable to remove typography styles

hanscl opened this issue · 5 comments

hanscl commented

Hi,

According to the docs (https://svelte-materialify.vercel.app/components/material-app/) I should use <MaterialAppMin> to avoid using the provided typography styles.

However, this does not work for me. The button remains in all UPPERCASE and the letterspacing is also still larger than normal. Here is the svelte HTML mark-up:

<MaterialAppMin theme="light"> <Button depressed class="primary-color">Test</Button> </MaterialAppMin>

Upon inspection of the button in Chrome I see that the letter-spacing and text-transform classes are still being applied.

.s-btn .s-btn__content { display: flex; align-items: center; flex: 1 0 auto; color: inherit; justify-content: inherit; line-height: normal; position: relative; font-size: inherit; font-weight: 500; letter-spacing: 0.0892857143em; text-transform: uppercase; }

Florian-Schoenherr commented

The Button has these font-styles per specification.
What we mean by "typography-styles" is default styles for h1-5.
So <MaterialApp><h1>Test</h1></MaterialApp> and <MaterialAppMin><h1>Test</h1></MaterialAppMin> is different.

I think someone asked before if the Button could have different text styles, where we answered that wrapping it and providing custom css there might be a solution.

bato3 commented

There seems to be some misunderstanding. No typography isn't mean no formatting. It means:

  • No fonts
  • No styles for p, h_n_, kbd, ...
  • No .elevation, .rounded, .mb-0, ... classes
  • No display / flex / grid helpers

MaterialAppMin imports:

  • breakpoints
  • resret.css
  • colors

But all syles are imported from .../Button/Button.scss, and you can simply modify it in .../Button/_variables.scss

BUT... I don't know how to Rollup work with unused imports, and why they included unused css code...

If you want really minified css you must use this type imports:

  //nottice, for `MaterialAppMin` we must import Svelte component. 
  import  MaterialAppMin  from 'svelte-materialify/src/components/MaterialApp/MaterialAppMin.svelte';
  //this import loads Typography css
  // import { MaterialAppMin } from 'svelte-materialify/src/components/MaterialApp';
  import  AppBar  from 'svelte-materialify/src/components/AppBar';
  import  Button  from 'svelte-materialify/src/components/Button';
  import  Icon  from 'svelte-materialify/src/components/Icon';
  • 👍2
hanscl commented

Thanks for the explanations. Much appreciated

V-ed commented

How convenient to find this issue now, I should've made one myself :)

image

Vite uses Rollup internally, so the problem happens with Vite too.

I have a feeling it has to do with the master export file, but I can't be so sure, especially since such exports patterns are common to the node ecosystem...

I wanted to reach the Vite team but after sending my question to the vite discord server and getting no response, I didn't have time to open an issue / discussion to their repo yet, but I don't think it's on Vite's side, but rather Rollup to fix this if you are not using Vite.

Welp, subscribing to keep up if you find anything useful or such fix!

(in the meantime, you could import the components using the full path, those don't seem to trip up Rollup's bundle stage :

import MaterialAppMin from "svelte-materialify/src/components/MaterialApp/MaterialAppMin.svelte";
import Button from "svelte-materialify/src/components/Button/Button.svelte";

if that helps in any way currently, although you lose Typerscript's types)

*Edit : just saw that bato3 already mentionned this fix too, ah well, I guess I confirmed that this fix is the way to go currently!

V-ed commented

Well, if you are using Typescript, you may realize that using @bato3's technique or mine's above to import components with minimized build prevents you from using the types of these components

Until this configuration is fixed / svelterial comes out, you can use this (non-exhaustive) typedef file to at least get some typings back :

Put this into a svelte-materialify.d.ts file and don't forget to include it in your tsconfig 
// -----------------
//    Components
// -----------------

declare module 'svelte-materialify/src/components/Alert/Alert.svelte' {
	export { Alert as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/AppBar/AppBar.svelte' {
	export { AppBar as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Avatar/Avatar.svelte' {
	export { Avatar as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Badge/Badge.svelte' {
	export { Badge as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Breadcrumbs/Breadcrumbs.svelte' {
	export { Breadcrumbs as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Button/Button.svelte' {
	export { Button as default } from 'svelte-materialify';
}
// declare module 'svelte-materialify/src/components/ButtonGroup/ButtonGroup.svelte' {
// 	export { ButtonGroup as default } from 'svelte-materialify';
// }
declare module 'svelte-materialify/src/components/Card/Card.svelte' {
	export { Card as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Card/CardActions.svelte' {
	export { CardActions as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Card/CardSubtitle.svelte' {
	export { CardSubtitle as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Card/CardText.svelte' {
	export { CardText as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Card/CardTitle.svelte' {
	export { CardTitle as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Checkbox/Checkbox.svelte' {
	export { Checkbox as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Chip/Chip.svelte' {
	export { Chip as default } from 'svelte-materialify';
}
// declare module 'svelte-materialify/src/components/DataTable/DataTable.svelte' {
// 	export { DataTable as default } from 'svelte-materialify';
// }
// declare module 'svelte-materialify/src/components/DataTable/DataTableBody.svelte' {
// 	export { DataTableBody as default } from 'svelte-materialify';
// }
// declare module 'svelte-materialify/src/components/DataTable/DataTableCell.svelte' {
// 	export { DataTableCell as default } from 'svelte-materialify';
// }
// declare module 'svelte-materialify/src/components/DataTable/DataTableHead.svelte' {
// 	export { DataTableHead as default } from 'svelte-materialify';
// }
declare module 'svelte-materialify/src/components/Dialog/Dialog.svelte' {
	export { Dialog as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Divider/Divider.svelte' {
	export { Divider as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/ExpansionPanels/ExpansionPanel.svelte' {
	export { ExpansionPanel as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/ExpansionPanels/ExpansionPanels.svelte' {
	export { ExpansionPanels as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Footer/Footer.svelte' {
	export { Footer as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Grid/Col.svelte' {
	export { Col as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Grid/Container.svelte' {
	export { Container as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Grid/Row.svelte' {
	export { Row as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Icon/Icon.svelte' {
	export { Icon as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Input/Input.svelte' {
	export { Input as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/ItemGroup/ItemGroup.svelte' {
	export { ItemGroup as default } from 'svelte-materialify';
}
// declare module 'svelte-materialify/src/components/Lazy/Lazy.svelte' {
// 	export { Lazy as default } from 'svelte-materialify';
// }
declare module 'svelte-materialify/src/components/List/List.svelte' {
	export { List as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/List/ListGroup.svelte' {
	export { ListGroup as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/List/ListItem.svelte' {
	export { ListItem as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/List/ListItemGroup.svelte' {
	export { ListItemGroup as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/MaterialApp/MaterialApp.svelte' {
	export { MaterialApp as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/MaterialApp/MaterialAppMin.svelte' {
	export { MaterialAppMin as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Menu/Menu.svelte' {
	export { Menu as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/NavigationDrawer/NavigationDrawer.svelte' {
	export { NavigationDrawer as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Overlay/Overlay.svelte' {
	export { Overlay as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/ProgressCircular/ProgressCircular.svelte' {
	export { ProgressCircular as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/ProgressLinear/ProgressLinear.svelte' {
	export { ProgressLinear as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Radio/Radio.svelte' {
	export { Radio as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Select/Select.svelte' {
	export { Select as default } from 'svelte-materialify';
}
// declare module 'svelte-materialify/src/components/SlideGroup/SlideGroup.svelte' {
// 	export { SlideGroup as default } from 'svelte-materialify';
// }
// declare module 'svelte-materialify/src/components/SlideGroup/SlideItem.svelte' {
// 	export { SlideItem as default } from 'svelte-materialify';
// }
declare module 'svelte-materialify/src/components/Slider/Slider.svelte' {
	export { Slider as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Snackbar/Snackbar.svelte' {
	export { Snackbar as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Subheader/Subheader.svelte' {
	export { Subheader as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Switch/Switch.svelte' {
	export { Switch as default } from 'svelte-materialify';
}
// declare module 'svelte-materialify/src/components/Table/Table.svelte' {
// 	export { Table as default } from 'svelte-materialify';
// }
declare module 'svelte-materialify/src/components/Tabs/Tab.svelte' {
	export { Tab as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Tabs/TabContent.svelte' {
	export { TabContent as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Tabs/Tabs.svelte' {
	export { Tabs as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Textarea/Textarea.svelte' {
	export { Textarea as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/TextField/TextField.svelte' {
	export { TextField as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/components/Tooltip/Tooltip.svelte' {
	export { Tooltip as default } from 'svelte-materialify';
}
// declare module 'svelte-materialify/src/components/VirtualList/VirtualList.svelte' {
// 	export { VirtualList as default } from 'svelte-materialify';
// }
// declare module 'svelte-materialify/src/components/Window/Window.svelte' {
// 	export { Window as default } from 'svelte-materialify';
// }
// declare module 'svelte-materialify/src/components/Window/WindowItem.svelte' {
// 	export { WindowItem as default } from 'svelte-materialify';
// }

// -----------------
//      Actions
// -----------------

declare module 'svelte-materialify/src/actions/ClickOutside' {
	export { ClickOutside as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/actions/Intersect' {
	export { Intersect as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/actions/Jump' {
	export { Jump as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/actions/Ripple' {
	export { Ripple as default } from 'svelte-materialify';
}
declare module 'svelte-materialify/src/actions/Touch' {
	export { Touch as default } from 'svelte-materialify';
}

// -----------------
//   Random Utils
// -----------------

declare module 'svelte-materialify/src/utils/breakpoints' {
	export const breakpoints = {
		xs,
		sm,
		md,
		lg,
		xl,
	};

	export default {} as {
		'xs-only': string;
		'sm-only': string;
		'sm-and-down': string;
		'sm-and-up': string;
		'md-only': string;
		'md-and-down': string;
		'md-and-up': string;
		'lg-only': string;
		'lg-and-down': string;
		'lg-and-up': string;
		'xl-only': string;
	};
}

edit 23/06/2021 : updated few wrong paths and added all non-implemented types into comments for quick uncommenting

edit 23/06/2021 2 : added breakpoints utils to types def so no more typescript errors when trying to use js breakpoints

  • 🚀1