Support for @use?

[Rob Dodson]

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.

[Andy Bell]

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.

[Rob Dodson]

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.

[Scott Rod]

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?

[Rob Dodson]

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

[Andy Bell]

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

[Binyamin Aron Green]

@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.

[solution-loisir]

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).

[Michael Andrewartha]

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!

• Core mixins seem to ignore new variables in config.scss. Creating duplicate mixins in my project with different names/namespaces seems to get around the issue, but wouldn't recommend!
• Using $color-keys with css-vars seems to create duplicate empty :root variables e.g.
  :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.

[Rustie]

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. :)

[Radu Micu]

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();