Any news on latest release?

[rvt]

Hey,

I tried the 3.0.0-rc-something version, but still got some issues with parcel and dart.

Any news on a stable release?

Cheers, and thanks

[ggedde]

Hi @rvt,
Been working on it more lately, and hoping to have it by the new year.
Can you expand on what issues you had with parcel and dart?

Thanks,

[ggedde]

Hi @rvt,
Can you expand on the issues you were having. I am curious if it relates to the new @use rule. I am using this in V3 as @import is expected to be deprecated soon. @use does have a different implementation then @import and can be a bit confusing at the start. I don't have the documentation updated yet to properly explain how to use it.

Or is your issue related to something else?

Thanks,

[rvt]

Hey @ggedde,

I am using your project here : https://github.com/rvt/OpenAce/tree/initial/src/SystemGUI

For the moment I copied your css like this : https://github.com/rvt/OpenAce/blob/initial/src/SystemGUI/src/css/styles.scss#L8

But when I replace it with @use "@ggedde/spry-css/spry"; to import from nodemodules I got a lot of errors for both the 2.z.x version and the 3.x.x version.

If you cannot repeat it, I will create two branches showing what is happening

[ggedde]

@rvt,
Congrats on OpenAce, looks like an awesome project.

You should only use @use if you are going to include SpryCSS with sass. This allows you to override the variables and only include the components you need and not the ones you don't. Keep in mind that in order to override the variables you will need to wrap the variables with a @forward rule and add with to it. Shown below.
(This is where @use gets complicated and will most likely take time for devs to adapt, including myself :)

If you are going to import everything via 'css' then it might still be better to use @import, but you won't be able to change any of the variables before you import it.

Here is an example of how include SpryCSS v3 via @use and override its variables globally:

• Make sure to update your node_modules path accordingly.
• While the below is a good place to start some of the modules and components are changing in v3 so do expect to be making some changes once v3 is official.

_custom_variables.scss

@forward '../node_modules/@ggedde/spry-css/variables' with (

    $breakpoints: (
        md: 40em,
        lg: 74em,
    ),

    $gaps: (
        default: .75em, // required
        md: 1.5em,
        lg: 1.75em,
    ),
};

_custom_styles.scss

.section {
  margin-top: 0.8em;
}

input::placeholder {
  color: #c0c0c0;
}

styles.scss

// Include and Override Variables
@use 'custom_variables';

// Get Partials and exclude used
@use '../node_modules/@ggedde/spry-css/reset';
@use '../node_modules/@ggedde/spry-css/typography';
@use '../node_modules/@ggedde/spry-css/outline';
@use '../node_modules/@ggedde/spry-css/lists';
@use '../node_modules/@ggedde/spry-css/ui';
@use '../node_modules/@ggedde/spry-css/alert';
@use '../node_modules/@ggedde/spry-css/badge';
@use '../node_modules/@ggedde/spry-css/button';
@use '../node_modules/@ggedde/spry-css/toolbar';
@use '../node_modules/@ggedde/spry-css/cards';
@use '../node_modules/@ggedde/spry-css/forms';
@use '../node_modules/@ggedde/spry-css/tables';
// @use '../node_modules/@ggedde/spry-css/tooltips';
// @use '../node_modules/@ggedde/spry-css/sliders';
@use '../node_modules/@ggedde/spry-css/grid';
// @use '../node_modules/@ggedde/spry-css/tabs';
@use '../node_modules/@ggedde/spry-css/navs';
@use '../node_modules/@ggedde/spry-css/toggles';
@use '../node_modules/@ggedde/spry-css/modals';
@use '../node_modules/@ggedde/spry-css/comfort';
@use '../node_modules/@ggedde/spry-css/spacing';
@use '../node_modules/@ggedde/spry-css/borders';
@use '../node_modules/@ggedde/spry-css/icons';
@use '../node_modules/@ggedde/spry-css/utilities';
@use '../node_modules/@ggedde/spry-css/dark';
@use '../node_modules/@ggedde/spry-css/light';
@use '../node_modules/@ggedde/spry-css/colors';
@use '../node_modules/@ggedde/spry-css/loader';

// Include custom CSS
@use 'custom_styles';

Let me if this works or if you are still having issues.
Thanks,

[rvt]

hey,

thanks for looking into this

I have tried it but still getting the same/similar errors as I got before when trying sass.

Unfortunately when it comes to css/javascript and build tools I know next to nothing... For all I know it can be a sass thing, node thing, parcel thing or anything in between.... :(

Server running at http://localhost:1234
⠋ Building styles.scss...
DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

More info: https://sass-lang.com/d/legacy-js-api

DEPRECATION WARNING: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.get instead.

More info and automated migrator: https://sass-lang.com/d/import

   ╷
76 │     --gapx: #{map-get($gaps, 'default')};
   │               ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/@ggedde/spry-css/_variables.scss 76:15  @forward
    src/css/_custom_variables.scss 1:1                   @use
    src/css/styles.scss 2:1                              root stylesheet
⠴ Building styles.scss...
DEPRECATION WARNING: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.get instead.

More info and automated migrator: https://sass-lang.com/d/import

   ╷
77 │     --gapy: #{map-get($gaps, 'default')};
   │               ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/@ggedde/spry-css/_variables.scss 77:15  @forward
    src/css/_custom_variables.scss 1:1                   @use
    src/css/styles.scss 2:1                              root stylesheet

DEPRECATION WARNING: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.get instead.

More info and automated migrator: https://sass-lang.com/d/import

   ╷
81 │             --gapx: #{map-get($gaps, $breakpoint)};
   │                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/@ggedde/spry-css/_variables.scss 81:23  @forward
    src/css/_custom_variables.scss 1:1                   @use
    src/css/styles.scss 2:1                              root stylesheet

DEPRECATION WARNING: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.get instead.

More info and automated migrator: https://sass-lang.com/d/import

   ╷
82 │             --gapy: #{map-get($gaps, $breakpoint)};
   │                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/@ggedde/spry-css/_variables.scss 82:23  @forward
    src/css/_custom_variables.scss 1:1                   @use
    src/css/styles.scss 2:1                              root stylesheet

DEPRECATION WARNING: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

    ╷
80  │ ┌         @media screen and (min-width: $breakpoint_width) {
81  │ │             --gapx: #{map-get($gaps, $breakpoint)};
82  │ │             --gapy: #{map-get($gaps, $breakpoint)};
83  │ │         }
    │ └─── nested rule
... │
85  │       --ease: cubic-bezier(.25, .8, .25, 1);
    │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    node_modules/@ggedde/spry-css/_variables.scss 85:5  @forward
    src/css/_custom_variables.scss 1:1                  @use
    src/css/styles.scss 2:1                             root stylesheet

DEPRECATION WARNING: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

    ╷
80  │ ┌         @media screen and (min-width: $breakpoint_width) {
81  │ │             --gapx: #{map-get($gaps, $breakpoint)};
82  │ │             --gapy: #{map-get($gaps, $breakpoint)};
83  │ │         }
    │ └─── nested rule
... │
85  │       --ease: cubic-bezier(.25, .8, .25, 1);
    │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    node_modules/@ggedde/spry-css/_variables.scss 85:5  @forward
    src/css/_custom_variables.scss 1:1                  @use
    src/css/styles.scss 2:1                             root stylesheet

DEPRECATION WARNING: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.get instead.

More info and automated migrator: https://sass-lang.com/d/import

   ╷
11 │     --gapx        : #{map-get($gaps, 'default')};
   │                       ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/@ggedde/spry-css/_grid.scss 11:20  @use
    src/css/styles.scss 19:1                        root stylesheet

DEPRECATION WARNING: red() is deprecated. Suggestion:

color.channel($color, "red", $space: rgb)

More info: https://sass-lang.com/d/color-functions

   ╷
32 │             --#{$color_name}-rgb: #{red(map-get($color_value, 'dark')), green(map-get($color_value, 'dark')), blue(map-get($color_value, 'dark'))};
   │                                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/@ggedde/spry-css/_dark.scss 32:28  @use
    src/css/styles.scss 29:1                        root stylesheet

DEPRECATION WARNING: green() is deprecated. Suggestion:

color.channel($color, "green", $space: rgb)

More info: https://sass-lang.com/d/color-functions

   ╷
32 │             --#{$color_name}-rgb: #{red(map-get($color_value, 'dark')), green(map-get($color_value, 'dark')), blue(map-get($color_value, 'dark'))};
   │                                                                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/@ggedde/spry-css/_dark.scss 32:64  @use
    src/css/styles.scss 29:1                        root stylesheet

DEPRECATION WARNING: blue() is deprecated. Suggestion:

color.channel($color, "blue", $space: rgb)

More info: https://sass-lang.com/d/color-functions

   ╷
32 │             --#{$color_name}-rgb: #{red(map-get($color_value, 'dark')), green(map-get($color_value, 'dark')), blue(map-get($color_value, 'dark'))};
   │                                                                                                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/@ggedde/spry-css/_dark.scss 32:102  @use
    src/css/styles.scss 29:1                         root stylesheet

DEPRECATION WARNING: lightness() is deprecated. Suggestion:

color.channel($color, "lightness", $space: hsl)

More info: https://sass-lang.com/d/color-functions

   ╷
75 │                 @if (lightness(map-get($color_value, 'dark')) > 70) {
   │                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/@ggedde/spry-css/_dark.scss 75:10  @use
    src/css/styles.scss 29:1                        root stylesheet

DEPRECATION WARNING: red() is deprecated. Suggestion:

color.channel($color, "red", $space: rgb)

More info: https://sass-lang.com/d/color-functions

   ╷
27 │             --#{$color_name}-rgb: #{red(map-get($color_value, 'light')), green(map-get($color_value, 'light')), blue(map-get($color_value, 'light'))};
   │                                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
    node_modules/@ggedde/spry-css/_light.scss 27:28  @use
    src/css/styles.scss 30:1                         root stylesheet

DEPRECATION WARNING: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

    ╷
22  │ ┌     .bg-theme {
23  │ │         background-color: rgb(var(--bg-color-rgb), var(--bg-alpha));
24  │ │     }
    │ └─── nested rule
... │
31  │               --#{$color_name}    : #{map-get($color_value, 'dark')};
    │               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    node_modules/@ggedde/spry-css/_dark.scss 31:4  @use
    src/css/styles.scss 29:1                       root stylesheet

DEPRECATION WARNING: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

    ╷
22  │ ┌     .bg-theme {
23  │ │         background-color: rgb(var(--bg-color-rgb), var(--bg-alpha));
24  │ │     }
    │ └─── nested rule
... │
32  │               --#{$color_name}-rgb: #{red(map-get($color_value, 'dark')), green(map-get($color_value, 'dark')), blue(map-get($color_value, 'dark'))};
    │               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    node_modules/@ggedde/spry-css/_dark.scss 32:4  @use
    src/css/styles.scss 29:1                       root stylesheet

DEPRECATION WARNING: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

    ╷
22  │ ┌     .bg-theme {
23  │ │         background-color: rgb(var(--bg-color-rgb), var(--bg-alpha));
24  │ │     }
    │ └─── nested rule
... │
31  │               --#{$color_name}    : #{map-get($color_value, 'dark')};
    │               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ declaration
    ╵
    node_modules/@ggedde/spry-css/_dark.scss 31:4  @use
    src/css/styles.scss 29:1                       root stylesheet

Server running at http://localhost:1234
🚨 Build failed.

Error: The expression evaluated to a falsy value:

  (0, _assert().default)(bundleGraph instanceof _BundleGraph.default)


  AssertionError [ERR_ASSERTION]: The expression evaluated to a falsy value:
  
    (0, _assert().default)(bundleGraph instanceof _BundleGraph.default)
  
      at Object.runPackage (/opt/source/OpenAce/src/SystemGUI/node_modules/parcel/node_modules/@parcel/core/lib/worker.js:143:25)
      at Child.handleRequest (/opt/source/OpenAce/src/SystemGUI/node_modules/@parcel/workers/lib/child.js:203:34)
      at Child.messageListener (/opt/source/OpenAce/src/SystemGUI/node_modules/@parcel/workers/lib/child.js:94:19)
      at ThreadsChild.onMessage (/opt/source/OpenAce/src/SystemGUI/node_modules/@parcel/workers/lib/child.js:67:12)
      at ThreadsChild.handleMessage (/opt/source/OpenAce/src/SystemGUI/node_modules/@parcel/workers/lib/threads/ThreadsChild.js:42:10)
      at MessagePort.<anonymous> (/opt/source/OpenAce/src/SystemGUI/node_modules/@parcel/workers/lib/threads/ThreadsChild.js:38:61)
      at [nodejs.internal.kHybridDispatch] (node:internal/event_target:810:20)
      at exports.emitMessage (node:internal/per_context/messageport:23:28)

I have updated the project , only change I made was to set the correct path and the closing } change to ) in _custom_variables.scss

[ggedde]

Hi @rvt,
Thanks, this info was helpful.

Looks like the issue is not part of SpryCSS. Yes, there are Depreciation warnings, but those are just warnings and not errors. Those got added with sass 1.8. You can ignore those with the --quiet or the --quiet-deps flags added to your sass compiler. With parcel you might need to do that with a .sassrc file. However, I tried that and it doesn't seem to ignore all warnings and there is a open issue with sass on that sass/dart-sass#2418.

I did comment out all the css in styles.scss and run build and still get a segmentation fault error even without any css being compiled:

build
> rm -rf dist && rm -rf .parcel-cache && parcel build src/*.* --no-source-maps --config .parcelrcrelease && cp captive/* dist/

(node:45050) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
⠦ Building styles.scss...
sh: line 1: 45050 Segmentation fault: 11  parcel build src/*.* --no-source-maps --config .parcelrcrelease

So it seems the error might be coming from something else. Maybe the deprecation warning about punycode. Not sure what that is. I would assume that parcel should be able to compile and ignore deprecation warnings, but maybe it sees them as an issue and throws the Segmentation fault.

With that said I will look into updating SpryCSS to work with sass 1.8 and remove the deprecation warnings, but I can't give an eta on that now.

Let me know if there is anything else I can do to help you with this.
Thanks,

[rvt]

Hey,

I will fool around with it a bit more, and if everything fails.. I will just do a hardcode import of the CSS...

thanks fo rthe help! I am glad you could reproduce it, I am not crazy :D

[ggedde]

Sounds good, I am closing this for now, but if feel free to add another issue.