Sfumato is a lean, modern, utility-based CSS framework generation utility (like Tailwind CSS) with Dart Sass and relative UI scaling built-in (Windows, macOS, Linux, .NET 8.0, x64, Arm64, Apple Silicon).
License: Other
When trying to use the basis-0 class defined in tailwind here: https://tailwindcss.com/docs/flex-basis, the style is not applied.
Currently running sfumato v5.0.66
While editing and changing Razor partials/views and applying changes in Rider, I notice that my changes are not being applied only to find that the watcher had crashed with this exception:
Project file changes detected at 19:04:40.668
⏵ Updated .\Views\Partials\_PlatformHeader.cshtml at 19:04:40.668
Project file changes detected at 19:04:40.669
⏵ Updated .\Views\Partials\_PlatformHeader.cshtml at 19:04:40.669
Project file changes detected at 19:04:40.669
⏵ Updated .\Views\Partials\_PlatformHeader.cshtml at 19:04:40.669
Project file changes detected at 19:04:40.669
⏵ Updated .\Views\Partials\_PlatformHeader.cshtml at 19:04:40.669
⏵ Generated .\wwwroot\stylesheets\application.css (28.3kb, +base, +120 utilities) in 0.060s
Completed build of 1 CSS file (28.3kb) in 0.061s
Watching; Press ESC to Exit
Unhandled exception. System.ArgumentException: The index is equal to or greater than the length of the array, or the number of elements in the dictionary is greater than the available space from index to the end of the destination array.
at System.Collections.Concurrent.ConcurrentDictionary`2.System.Collections.Generic.ICollection<System.Collections.Generic.KeyValuePair<TKey,TValue>>.CopyTo(KeyValuePair`2[] array, Int32 index)
at System.Collections.Generic.EnumerableHelpers.ToArray[T](IEnumerable`1 source, Int32& length)
at System.Linq.Buffer`1..ctor(IEnumerable`1 source)
at System.Linq.OrderedEnumerable`1.GetEnumerator()+MoveNext()
at Argentini.Sfumato.Program.Main(String[] args) in /Users/magic/Developer/Argentini.Sfumato/Argentini.Sfumato/Program.cs:line 195
at Argentini.Sfumato.Program.<Main>(String[] args)
I am still not able to pinpoint exactly what causes this issue or how to reliably reproduce the issue. I would imagine it is caused when the .NET process is using the file on save.
While trying to position elements in the center of a container using fixed or absolute, fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 does not give the desired outcome.
-translate-x-1/2 -translate-y-1/2 are not parsed as negative values and so translate(var(--sf-translate-x), var(--sf-translate-y)) is computed as translate(50%, 50%) instead of the desired translate(-50%, -50%).
Furthermore, when trying to use translate-x-[-50%] translate-y-[-50%], only the translate-x-[-50%] is applied.
Recently I was working on finding a way to use Sfumato for Lit components (using the shadow DOM). I wanted to be able to use Sfumato for styling (mainly the utility classes). I got it working and decided that it would be nice if I could use one yarn dev command to start both the Vite dev server and Sfumato watch in paralell. https://www.npmjs.com/package/concurrently
When trying to do this, Sfumato throws an exception and exits:
PS C:\Users\...\Folder> yarn watch
[0] ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[0] Sfumato: The lean, modern, utility-based SCSS/CSS framework generation tool
[0] Version 5.0.70 for Windows (.NET 8.0.6/X64) / Dart Sass 1.76.0 / 16,483 Utility Classes
[0] ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[0] Theme Mode : CSS Classes
[0] Transpile : Expanded
[0] Project Path : C:\Users\...\Folder
[0] Watch Path(s) : .\src\**\*.[scss,ts]
[0] ⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻
[0] Started build at 12:46:50.203
[0] ⏵ Identified 8 utilities used by 4 project files in 0.029s
[0] ⏵ Generated .\src\styles\sfumato.global.css (12.6kb, +base, +8 utilities) in 0.077s
[0] Completed build of 1 CSS file (12.6kb) in 0.116s
[0]
[0] Started watching for changes at 12:46:50.320
[0]
[0] Unhandled exception. System.InvalidOperationException: Cannot see if a key has been pressed when either application does not have a console or when console input has been redirected from a file. Try Console.In.Peek.
[0] at System.Console.get_KeyAvailable()
[0] at Argentini.Sfumato.Program.Main(String[] args) in /Users/magic/Developer/Argentini.Sfumato/Argentini.Sfumato/Program.cs:line 205
[0] at Argentini.Sfumato.Program.<Main>(String[] args)I am guessing this is because concurrently does not handle the stdin stream to the process. When the sfumato watcher tries to read from the stdin stream, it throws this exception.
This same issue can be replicated by executing @() | sfumato watch in PowerShell (equivalent to </dev/null in Linux).
PS C:\Users\...\Folder> @() | sfumato watch
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Sfumato: The lean, modern, utility-based SCSS/CSS framework generation tool
Version 5.0.70 for Windows (.NET 8.0.6/X64) / Dart Sass 1.76.0 / 16,483 Utility Classes
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Theme Mode : CSS Classes
Transpile : Expanded
Project Path : C:\Users\...\Folder
Watch Path(s) : .\src\**\*.[scss,ts]
⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻⎻
Started build at 12:50:57.929
⏵ Identified 8 utilities used by 4 project files in 0.026s
⏵ Generated .\src\styles\sfumato.global.css (12.6kb, +base, +8 utilities) in 0.063s
Completed build of 1 CSS file (12.6kb) in 0.099s
Started watching for changes at 12:50:58.029
Unhandled exception. System.InvalidOperationException: Cannot see if a key has been pressed when either application does not have a console or when console input has been redirected from a file. Try Console.In.Peek.
at System.Console.get_KeyAvailable()
at Argentini.Sfumato.Program.Main(String[] args) in /Users/magic/Developer/Argentini.Sfumato/Argentini.Sfumato/Program.cs:line 205
at Argentini.Sfumato.Program.<Main>(String[] args)When I use a negative margin like in tailwind: -ml-px does not seem to work.
Docs: https://tailwindcss.com/docs/margin#using-negative-values
Using something like -m-[10px] also does not work.
In the main scss file, not having a new line under @sfumato utilities prevents sfumato from resolving class styles.
This does not work:
@sfumato base;
@sfumato utilities;This does work:
@sfumato base;
@sfumato utilities;
In the first example, not having a new line under the utilities line will not resolve classes and the @sfumato utilities; text will be appended to the css output file.
When using the shrink and shrink-0 classes documented in tailwind here: https://tailwindcss.com/docs/flex-shrink#dont-shrink
Sfumato does not seem to add any classes for these styles to the css.
When using the basis-full class. The scss file fails to compile.
Example:
<div class="basis-full md:basis-1/2 lg:basis-1/3 " ...>...</div>
Causes this issue:
After removing basis-full, the sheet compiles again.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 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.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
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.