symfonycasts / sass-bundle Goto Github PK

Here are the options that make sense to expose:

• style (in prod, you should compile the Sass files in compressed style to have a smaller CSS file). This could be a smart default in the bundle
• quietDeps (this depends on #28 to be useful)
• embedSources: whether the generated source map should embed the sources of the original Sass files, to allow the browser dev tools to display it without being able to fetch it from the server (should probably be a smart default to turn it on in dev mode)

Maybe --fatal-deprecation and --future-deprecation could also be exposed to have feature parity.

This has 2 effects:

• it simplifies the way to import third-party code like bootstrap (as they can be loaded from the load path)
• the reporting of deprecations in dart-sass has a special behavior for code loaded from load paths, recognizing it as third-party code that you might not control. This is why the quietDeps option exists for instance (exposed as --quiet-deps in the CLI)

See: SymfonyCasts/tailwind-bundle#22

Also, this option is undocumented and should be documented.

AND, if the user just does:

root_sass: 'assets/styles/foo.scss'

We should normalize that into an array for them

Hi,

As described in the docs, we should be able to configure a binary path for sass executable:

symfonycasts_sass:
    binary: 'node_modules/.bin/sass'

After searching in the code, it seems the option has completely disappeared.

I think it should this feature should be available to users.

This bundle is downloading dart-sass automatically which is perfectly ok when running on windows, macos, linux. Except for some distro's like alpine. Alpine is quite popular for people using docker because of the image size. But this comes with a different libc, which is not the version dart-sass is compiled with.

Their is no alternative download available with musl-libc. See sass/embedded-host-node#155

I'm reacting to the PR #47 (Add a note about dropping Sass in favor of native CSS) as i 100% share this vision....

But :)

I'll have a need for a year or two i guess for the only remaining sass feature i still use : import / include.

I know HTTP2 may seem to be the answer-to-everything, but with layers and scope coming, there is still imho a need for packed / ordered CSS files (and for serial CSS-splitter like me that can avoid a LOT of useless HTTP requests, even if shared in one connection).

I'd like a simple feature to "compile" (big word there) multiple CSS into one...

My guess would be that this need is a common one in the "from SASS to CSS" transition, but I'd totally understand if you think this should be in a symfonycast/css-bundle, or a simon/css-yourself one 😄

Or maybe @weaverryan this should only be a dedicated "compiler" inside AssetMapper ?

WDYT ?

I'm not able to reproduce the CI errors locally ... and it seems to me when the option PR was merged it worked.

If someone here can help me figure out what's happening and how to fix it ?

🙏

As PhpCSFixer did with the "check" command (an alias to "fix --dry-run")...

... what do you thing about a "sass:watch" command ?

Hello,

I try this new amazing bundle, but maybe I miss something.

When I create e.g a home.scss, and add <link rel="stylesheet" href="{{ asset('styles/home.scss') }}"> in my home.html.twig template
and then run
php bin/console sass:build --watch

I obtain this error message in CLI
Could not find Sass file: "/path/to/my/projetc/assets/styles/app.scss"

If I rename in app.scss it works. Is it impossible to use another file name ?
Thanks for your help

When importing bootstrap sass from vendor, like in documentation (https://symfony.com/bundles/SassBundle/current/index.html#using-bootstrap-sass), if bootstrap is older version, deprecations warnings appear on sass:build (DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.).
Setting quiet-deps:true in config/symfonycasts_sass.yaml does not work in this case.
Can we somehow set sass imported from vendor folder as dependancy?

Currently, we hardcode the version of the binary that we download. Added this as a configuration option probably makes sense. (This is also true for https://github.com/SymfonyCasts/tailwind-bundle)

Hey everybody,

I'm trying to disable the output of the link to a source map URL - I don't want to have a source map comment in my generated CSS file. My first thought was: this is easy, just set inside sass_options node source_map: false - didn't work. Ok, just set embed_source_map: false - didn't work.

Command: '/var/www/html/var/dart-sass/sass' '/var/www/html/assets/website/styles/main.scss:/var/www/html/var/sass/main.output.css' '--style=expanded' '--no-source-map' '--no-embed-source-map'

--embed-source-map isn't allowed with --no-source-map.

So, it seems that the combination of these options is not allowed - can you guys help me out and tell me how to disable it.

Thank you in advance!

Symfony version : 7.0
PHP version : 8.2
OS : Alpine 3.18 (in a Docker container)

When I try to build (or watch) sass files, I get an error.

php bin/console sass:build --watch -v

 ! [NOTE] Executing Sass (pass -v to see more details).                                                                 

  Command:
    '/var/www/html/var/dart-sass/sass' '/var/www/html/assets/styles/app.scss:/var/www/html/var/sass/app.output.css' '--watch' '--embed-source-map'

In Process.php line 429:
                                                                  
  [Symfony\Component\Process\Exception\ProcessSignaledException]  
  The process has been signaled with signal "11".                 
                                                                  

Exception trace:
  at /var/www/html/vendor/symfony/process/Process.php:429
 Symfony\Component\Process\Process->wait() at /var/www/html/vendor/symfonycasts/sass-bundle/src/Command/SassBuildCommand.php:46
 Symfonycasts\SassBundle\Command\SassBuildCommand->execute() at /var/www/html/vendor/symfony/console/Command/Command.php:279
 Symfony\Component\Console\Command\Command->run() at /var/www/html/vendor/symfony/console/Application.php:1049
 Symfony\Component\Console\Application->doRunCommand() at /var/www/html/vendor/symfony/framework-bundle/Console/Application.php:125
 Symfony\Bundle\FrameworkBundle\Console\Application->doRunCommand() at /var/www/html/vendor/symfony/console/Application.php:318
 Symfony\Component\Console\Application->doRun() at /var/www/html/vendor/symfony/framework-bundle/Console/Application.php:79
 Symfony\Bundle\FrameworkBundle\Console\Application->doRun() at /var/www/html/vendor/symfony/console/Application.php:169
 Symfony\Component\Console\Application->run() at /var/www/html/vendor/symfony/runtime/Runner/Symfony/ConsoleApplicationRunner.php:49
 Symfony\Component\Runtime\Runner\Symfony\ConsoleApplicationRunner->run() at /var/www/html/vendor/autoload_runtime.php:29
 require_once() at /var/www/html/bin/console:11

sass:build [-w|--watch]

Do you have any idea?

Hello,

I am trying to migrate from encore, and need to support some previous Bootstrap SASS modifications, so I found this library.

Problem:

• The CSS file served to the browser contains the original SCSS-content instead of the compiled CSS. The filetype is .css though.
  

Troubleshooting:

• bin/console sass:build does output compiled CSS to var/sass/admin.output.css
• var/dart-sass/sass assets/styles/admin.scss returns compiled CSS
• running bin/console sass:build and then asset-map:compile works, the browser gets loadable CSS
• there are no error messages produced by bin/console sass:build -v

The missing step is that which I underlined from the documentation below:

My environment, relevant code snippets:

1. I am running the app in Docker to reflect my prod environment. Caddy in front of PHP-FPM Symfony. In development I bind-mount everything in the project folder into the Symfony container. (NOTE: I have also run bin/console sass:build from within the container; it produces the files, but the browser still receives SCSS content that it can't parse.)

2. Since admin.scss is not the default filename, I have configured it like:

# config/asset_mapper.yaml
framework:
    asset_mapper:
        # The paths to make available to the asset mapper.
        paths:
            - assets/
symfonycasts_sass:
  root_sass:
    - 'assets/styles/app.scss'
    - 'assets/styles/admin.scss'

3. In my twig template, I "import" the SCSS file directly.

{# admin.html.twig #}
...
  {% block stylesheets %}
  <link rel="stylesheet" href="{{ asset('styles/admin.scss') }}">
  {% endblock %}
...

4. The contents of the assets/styles/admin.scss files start with

/* assets/styles/admin.scss
@import "./helper/_variables";
@import "../../vendor/twbs/bootstrap/scss/bootstrap";
@import "./components/gedmo-history";

$navbarwidth: 13rem;
$sidebarbutton: 40px;
$sidebartransition: 0.4s;

.text-grey-0 { color: $grey-0 !important; }

...

5. Output of dart-sass and contents of var/sass/admin.output.css correctly inserted the imports shown above

** My thoughts **

So the missing step (swapping the compiled CSS contents upon request) seems to be where something is going wrong (?). But looking in this repo, I am not sure how that mechanism works. If someone could point me in the right direction that would be great.

Thanks

Suppose this setup:

/* assets/styles/app.scss */
import 'tools/base';

/* assets/styles/tools/base.scss */
.splash {
  background-image: url('../../images/login-bg.png');
}

The image lives at assets/images/login-bg.png, so the relative path above is, correctly, relative to the source file. Currently, if you compile this, because the contents are all compiled into, basically, assets/styles/app.css, the relative path will now be incorrect.

Fix

I have 2 ideas to fix this:

1. rails-sass look like they have you use some special fake functions in your scss files - https://github.com/rails/sass-rails#asset-helpers (the code, I think, actually lives in https://github.com/sass/sassc-rails). I'm not entirely sure how the implementation is done, but it looks like you literally do asset-path("rails.png") in your CSS files and it's written.

Pros: looks simple to implement.
Cons: this is magic, and your editor won't like it.

2. When the final .css file is built, we can also have it output an importmap (also, it would be great to expose that importmap - or perhaps "embed" it in the .css file for simplicity if possible in dev mode). We can, in theory, use this importmap to do this logic:

A) Determine that the background-image: url('../../images/login-bg.png'); line came from assets/styles/tools/base.scss
B) Determine that this file lives one directory deeper than the source, assets/styles/app.scss.
C) Adjust the path accordingly to ../images/login-bg.png'

This might be trickier to implement - I've never parsed a sourcemap for info - but would be a completely clean solution. This is also how resolve-url-loader from Webpack works - https://github.com/bholloway/resolve-url-loader/blob/HEAD/packages/resolve-url-loader/docs/how-it-works.md#the-solution

I tried to deploy my local project to my hoster and the sass:build command is failing.

I think I'm missing something very obvious but cannot see it. As the screenshot shows it errors that the file /html/releases/19/var/dart-sass/src/dart is not found. But that file is definitely there. I even tried with different rights (755, 777, 700) but always with the same outcome.

On my local DDEV project that command runs fine inside the container.

What am I not seeing?

In SassBinary.php line 150:

[Exception]
No matching machine found for Windows platform (Machine: i586).

When the package builds, a .map file is output. But, we're not currently making it available.

Another option is to pass --embed-source-map and embed it directly in the CSS file (in dev mode only).

Hi,

Thanks for providing this bundle!

Currently we need to manually add every root sass files that we write under the symfonycasts_sass.root_sass config.

Usually non root files are prefixed with _, while root file aren't. It'd be great to have symfonycasts_sass.root_sass support regular expressions.

That way we could simply set one line there that automatically lists all root files and forget about it. It would also avoid errors when we forgot to add the entry and the unlisted scss file is then silently mapped to a css file that actually still contains sass.

This is somewhat linked to #41 which attempts to make clearer what files are being built.

It should be possible (even if it's not a super normal thing to do) to combine this bundle and https://github.com/SymfonyCasts/tailwind-bundle.

To do that, there could be a central asset-mapper-build-bundle which defines a command like assets:build. Then, this bundle and TailwindBundle could hook into that. This would allow to:

A) Compile the SASS from an app.scss file to pure CSS.
B) Then process that pure CSS through Tailwind.

Additionally, it would be GREAT if the new bundle could hook into the asset-map:compile command so that, before the files are actually compiled, the "build" pipeline were called. So, instead of needing to run assets:build and then asset-map:compile during deploy, you could just run asset-map:compile and it would trigger the assets:build system. This would likely require a new event in the core AssetMapper asset-map:compile command.