Comments (10)
@uribalb we are working on a custom Carbon class/element extractor for purgecss
from carbon-components-svelte.
I'm glad you brought this up. Documentation on real (production) set-ups is forthcoming.
The example in the README is a "quick start" method.
For now, please refer to this boilerplate for a full SASS webpack set-up. Note that the SASS import is still not optimized per component.
from carbon-components-svelte.
@uribalb SCSS is currently the best method for optimizing CSS performance (i.e. minimizing the CSS size). Check out the Carbon guide on optimizing Sass builds.
Essentially, SCSS allows your to import the styles for individual components.
Dependencies:
node-sass
carbon-components
(version 10.21 or greater)@carbon/themes
(if using any theme besides the default white theme)
The equivalent SCSS for all.css
:
$feature-flags: (
enable-css-custom-properties: true,
grid-columns-16: true
);
@import "@carbon/themes/scss/themes";
:root {
@include carbon--theme($carbon--theme--white, true);
}
:root[theme="g10"] {
@include carbon--theme($carbon--theme--g10, true);
}
:root[theme="g90"] {
@include carbon--theme($carbon--theme--g90, true);
}
:root[theme="g100"] {
@include carbon--theme($carbon--theme--g100, true);
}
$css--font-face: true;
$css--helpers: true;
$css--body: true;
$css--use-layer: true;
$css--reset: true;
$css--default-type: true;
$css--plex: true;
@import "carbon-components/scss/globals/scss/_css--reset.scss";
@import "carbon-components/scss/globals/scss/_css--font-face.scss";
@import "carbon-components/scss/globals/scss/_css--helpers.scss";
@import "carbon-components/scss/globals/scss/_css--body.scss";
@import "carbon-components/scss/globals/grid/_grid.scss";
/* import individual components SCSS */
@import "carbon-components/scss/components/button/button";
from carbon-components-svelte.
@metonym So from what I think you mean, I made a style.scss file in my src folder, pasted all of this stuff you've written and imported that into my App.svelte
how large should my exported css be. Because theres still alot of css being generated for a single button. Can you make a "For Dummies" style guide, I'm very new to all of this css stuff and I'm having a hard time following along.
from carbon-components-svelte.
I'm currently doing this:
<script>
import { Button } from 'carbon-components-svelte';
</script>
<main>
<Button>Primary</Button>
</main>
<style lang="scss" global>
@import 'carbon-components/scss/components/button/button';
</style>
Sadly, this bundles the button CSS globally with the 'global' attribute, without it, Svelte will remove the import in build time because it doesn't know it's being used(See sveltejs/svelte-preprocess#44).
You need postcss installed.
from carbon-components-svelte.
@metonym Thanks. I think your comment should be in the docs and readme, as the official method for css optimization (for now) since svelte people tend to care a lot about these things
from carbon-components-svelte.
I've been trying to do the same with rollup and purgecss but it removes all of carbon's css
from carbon-components-svelte.
@uribalb we are working on a custom Carbon class/element extractor for purgecss
OK. Little precision: I'm using the routify 2.x template (npx @roxi/routify init --branch 2.x). It uses postcss and rollup to build the project. I do:
<style global>
@import "carbon-components-svelte/css/all.css";
</style>
in App.svelte
Would you recommend to keep using carbon normally and change the config files when the plugin is ready or is there something that I should start doing with my code to make future config easier ?
from carbon-components-svelte.
Would it be feasible for the components to import their own CSS directly, so you would only need have things such as the theme and the reset CSS in the global style?
from carbon-components-svelte.
@ion1 I've previously explored generating CSS for individual components from the source SCSS. However, even by taking out the reset styles, there is still a lot of duplicate CSS because many components import the same SCSS mixins/helpers.
Therefore, you'll still need an extra, build-step that removes unused selectors.
Currently, the best approach (recommended by the core Carbon team) is to use SCSS and import individual component styles.
from carbon-components-svelte.
Related Issues (20)
- RadioButton checked doesn't change HOT 1
- Button with icon only - always shows tooltip HOT 2
- TooltipIcon memory leak HOT 3
- TextInput v11 HOT 4
- PasswordInput v11 HOT 5
- Alphabetize prop names in documentation HOT 5
- Layer (new component) HOT 3
- Use `Button` component instead of native `button` in `HeaderGlobalAction` HOT 1
- Popover v11 HOT 5
- Support nested properties in DataTable filtering search HOT 3
- IconButton v11 HOT 1
- DataTable on:click:row is missing target and currentTarget information
- ContextMenu prevents context menu invocations outside of the target HOT 2
- TypeScript cannot find CarbonTheme type when using Theme HOT 5
- `ToastNotification` close event can fire after close due to timeout HOT 1
- Link: do not render `<p>` HOT 2
- Unable to resolve *.js imports HOT 1
- Support minCount in TextArea component HOT 1
- Clean up accessibility warnings
- DataTable sort function return type is restricted to -1, 0 or 1 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from carbon-components-svelte.