#Global reset styling? Untouched css?

13 messages · Page 1 of 1 (latest)

mortal tendon
#

Hi,

I am building a PoC design system in Astro and have a few questions.

Is there a way to globally load in a scss for everything without it being touched by scoped styles? I have a global.scss file. It includes colour variables and @use a _reset.scss file, and a few utilities. I want this to be visible for everything.

Issue is that this is being scoped:

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

Next, I want to grab all the scss and convert to css so that the stylesheets can be used in other projects. I don't want it to be scoped. I don't mind the scoping within the astro site but when it is build, i would a separate folder which has just pure compiled scss to vanilla css in it and also javascript (future thing).

The eventual goal is simply a static Astro site being the documentation and component showcase and then we have a separate npm package which can be generated using a different build command to detach the two. The Astro build contains what you would expect from an Astro site, the package contains plain simple css and compiled es6 compatible javascript etc.

Is this possible? Is Astro the right tool for the job?

Thanks so much in advance

covert pine
#

As for applying the styles globally you can just import your global.scss file into a BaseLayout.astro that you would use on every page

As for the scopped style you can give any <style> tag the is:global property to make it global, however I don't know how that effects the build and if it will put the styles neatly into their own folder like you want

mortal tendon
#

Thanks for ur quick reply.

I have done that, the issue is when it comes to components. The components don't use the BaseLayout so the scss doesn't exist in its eyes meaning the reset and colour variables don't apply.

Is it possible to put the scss in a separate file so we have Button.scss. Then we load that into the button component?

This would then allow the more custom build process where i grab all the scss and convert to css in a separate process and astro continues doing its happy scoping.

(It would be cool to have some kind of option to disable scoped styles in the future)

Screenshot_2024-08-05_at_20.37.20.png
covert pine
#

Is it possible to put the scss in a separate file so we have Button.scss. Then we load that into the button component?

Yes thats a fairly common pattern for web development

The components don't use the BaseLayout so the scss doesn't exist in its eyes meaning the reset and colour variables don't apply.

Is the component not on a page using the BaseLayout ?

flint coral
covert pine
#

I would think it should be affected by the styles then 🤔 but could be a lack of understanding on my part

I don't know of any offhand but if I get some time I can try creating a fresh Astro project and see what happens

What kind of button is it? (react, svelte, solid, etc)

flint coral
covert pine
#

I personally feel Astro is suited to an size of project

I think use would be more determined with what you are trying to build, for example a highly reactive user interface that is constantly updating with streamed in data, maybe Astro is not the best choice for that

#

I've never built a design system so I don't really know if Astro is the best for it or not, but I'm of the opinion Astro is best for most things (not biased at all 😅 )

flint coral
flint coral
flint coral
#

@covert pine hey, did you get a chance to have an explore as to whether it’s possible?

Thanks 😭