Open robdodson opened 4 years ago
Yeh I’m not really sure on this one as this is super new Sass stuff. Definitely worth exploring though!
I think this would be useful to pull in separate elements of gorko, which would be cool as heck.
yeah based on this (https://github.com/sass/sass/blob/master/accepted/module-system.md#timeline) it looks like Oct 1, 2022, the sass folks will drop support for @import
.
Not a huge deal if folks don't rev their sass version but feels a little scary to start a new project using @import
if you know that countdown is happening.
On the other hand, should you switch all @import
statements to @use
then incorporate Gorko within a current node-sass project today which doesn't run the Dart flavor of Sass, wouldn't that end up breaking your project? Or am I misunderstanding?
On the other hand, should you switch all @import statements to @use then incorporate Gorko within a current node-sass project today which doesn't run the Dart flavor of Sass, wouldn't that end up breaking your project?
It would, yeah. I think this would have to be a breaking change for something like a gorko v2
Yeh that would certainly be a large change. We’re still in < v1, but @use
is very new and I'm not sure the slower flavours, like LibSass are up to date with canonical, Dart Sass yet
@hankchizljaw Bumping, since LibSass is now deprecated, the original date of 1 October 2022 is getting closer, and the Sass team is having trouble getting people to migrate.
Hi there, when I read this, I thought gorko couldn't be used with Sass module system, but it can even though it's using @import
internally. Here's the setup I use in a recent project (fully inspired by this excellent article):
_gorko.scss
// The base variables and maps have to be declared before gorko is @used.
$gorko-base-size: 1rem;
$gorko-size-scale: (
'300': $gorko-base-size * 0.8,
'400': $gorko-base-size,
'500': $gorko-base-size * 1.25,
'600': $gorko-base-size * 1.6,
'700': $gorko-base-size * 2,
'900': $gorko-base-size * 3
);
$gorko-colors: (
'dark': #1a1a1a,
'light': #f3f3f3
);
@use "../node_modules/gorko/gorko" with (
// Use $gorko-config in the `with` map to configure gorko.
$gorko-config: (
// Inserts your config parameters here.
)
);
// Forward gorko so it ca be used elsewhere.
@forward "../node_modules/gorko/gorko";
Gorko's functions and mixins can now be used as so:
_global.scss
@use "gorko";
body {
line-height: 1.5;
overflow-x: hidden;
padding-bottom: gorko.get-size("600");
font-size: gorko.get-size("400");
}
And include the generated utility classes in the entry point:
index.scss
@use "../node_modules/modern-css-reset/dist/reset";
@use "gorko";
@use "global";
@use "utilities/flow";
@use "blocks/header";
I suppose that gorko will eventually need to refactor to remove any soon to be deprecated features, but it can be used with Sass module system right now! I take the occasion to thank @hankchizljaw and team for publishing such amazing library and tools (modern-css-reset, CUBE CSS).
Howdy! I've followed the example that solution-loisir posted above and have had some gotchas so just posting my finding for anyone who is interested!
:root { --color-text: ; --color-bg: ; --color-bg-glare: ; }
Annoying but Chrome ignores them so not a show stopper. I don't know if I'd use this on a live site, but it's been interesting trying to play around with gorko and dart.
Hi, I think I have worked out how to get gorko to work with sass modules so that it uses @use and @forward internally. I've sent a pull request. :)
Another example to use it as is:
// This is a config file you build with all its required config maps.
@use 'config';
// Next: pull in gorko for design token and custom property generation
@use '../../node_modules/gorko/gorko' with (
// Disable util class generator because we'll render them at the end
$generate-utility-classes: false,
$gorko-config: config.$gorko-config
);
body {
font-size: gorko.get-size('size-1');
}
// Render gorko utilities
@include gorko.generate-utility-classes();
I'm not super familiar with sass but I did see that
@use
is now the recommended way to pull in modules. However it seems to break Gorko 😞I'm not sure how big of a change it would be to make a version of Gorko that works with
@use
but I wanted to file a feature request in case it's possible.