File Not Found error when using postcss for sass compilation in Ember addon

[adc-mhaugen]

Hi, thanks for this addon.

I'm trying to use this addon for sass compilation instead of ember-cli-sass. I have it working in a simple project. Now I'm trying to get it working in a simple addon.

I have an addon.scss in the addon/styles and an app.scss in the tests/dummy/app/styles. I also have the following postCssOptions block in both the index.js and ember-cli-build.js:

        postcssOptions: {
            compile: {
                extension: 'scss',
                enabled: true,
                parser: require('postcss-scss'),
                plugins: [
                    {
                        module: require('@csstools/postcss-sass')
                    }
                ]
            },
            filter: {
                enabled: false
            }
        }

If I try to serve the dummy app I get the following error:

Build Error (PostcssCompiler)

File to read not found or unreadable: /Users/markhaugen/Code/proj/f-sass/sass-addon/tmp/postcss_compiler-input_base_path-OOj6IiXF.tmp/app/styles/app.scss#sass


Stack Trace and Error Report: /var/folders/6x/nxm5z03d58v31b94qy10n1rc0000gp/T/error.dump.ecb0e9e92bff17a4ada2f2ac0e4758e8.log

I looked in the log and it doesn't have much other than file not found. If I look at that location there is an app.scss file there (though it doesn't have the hash sass bit). Do you know what I'm missing?

Thanks!

[jeffjewiss]

Hi, thanks for reporting this!

I'll need to look into this a bit further.

My initial guess is that ember-cli works a bit differently when importing addon styles, since the output paths in ember-cli-build.js aren't used.

Could you please try removing extension: 'scss', from your config and renaming addon.scss to addon.css and see if it picks up that file? If this works it should still use postcss to parse the styles with the sass parser, it will just be using the wrong file extension. This is just a hunch though and may not work.

Alternatively, is it possible to share your addon? Is it open source?

[adc-mhaugen]

Thanks for your quick response.

I pushed a simple addon to https://github.com/adc-mhaugen/sass-addon to demonstrate what I'm seeing. I tried removing the extension: 'scss', from config in both ember-cli-build.js and index.js, and changed all scss files to css, but I see the same error.

[jeffjewiss]

Thanks for setting that up. I'll take a look at the repo, likely this week, but I'm not sure when I'll have time to go through it properly yet.

Supporting the '.scss' extension and the instructions for parsing Sass are fairly new so there are likely some cases I haven't figured out.

[adc-mhaugen]

Thanks, let me know if there is anything I can help with.

[al3xnag]

Maybe, using ember-component-css is the reason (https://github.com/adc-mhaugen/sass-addon/blob/ddad5b2d754c4b3f8b38908f728f059e5f914e53/package.json#L23)?

[jeffjewiss]

@adc-mhaugen were you able to get this working with your addon or are you still seeing the same issue? Thanks!

[jeffjewiss]

Closing due to inactivity. Please let me know if this is still an issue and it can be reopened.

[davearel]

FYI.

This is an issue for me as well.

It's certainly related to ember-component-css inside of an addon as well as the main app, and likely via the use of sass— but not sure if its ember-cli-postcss related at all.

[jeffjewiss]

@davearel thanks for reporting this.

Are you able to share your application or its setup? I'd like to try and figure out if this is related to ember-cli-postcss, but haven't run into this issue myself.

[vlascik]

Same issue, same setup with e-component-css. Reproduction above demonstrates this problem:

git clone https://github.com/adc-mhaugen/sass-addon
cd sass-addon
npm install
ember serve

[jeffjewiss]

I'll reopen this and try to look into it. While I can confirm that the linked repo doesn't build, the config doesn't match what ember-component-css expects. With some changes the addon builds, however the pod-styles aren't available to the dummy app.

I'm not sure when I'll have time to properly look into this as I don't use ember-component-css.

[Windvis]

I think we also have this problem altough the situation is different. We are switching from ember-cli-sass to ember-cli-postcss. I followed the example in the guides and during builds we get similar errors.

In our case the problem is importing addon style files:

@import "ember-power-calendar";

That code assumes the addon's style file is merged into the app/styles folder so a local import can be used. For some reason it doesn't work with ember-cli-postcss though, the file is not there when the compiler runs. After some more testing it seems that not every addon has this problem, but I don't see any difference in the addon's configuration that could explain that.

Any idea what could be the cause of this? Any pointers on how I can start debugging this?

We don't use ember-component-css so I think it is unrelated.

[jeffjewiss]

Hey @Windvis, I found with a recent update to ember-cli it changed how the tmp directories work. I've had to add { path: ['node_modules'] } to the options of postcss-import to get imports working for CSS from node modules. Could this be related to your issue?

Otherwise, could you please share your postcss options from your ember-cli-build.js and I'll take a look.

Thanks

[NullVoxPopuli]

I have this issue as well,

Build Error (PostcssCompiler)

File not found: /src/ui/styles/app.css
in any of the following include paths:
  /tmp/broccoli-5148oUnW20R0Ywy0/out-425-broccoli_merge_trees


Stack Trace and Error Report: /tmp/error.dump.266d871b3631fec2345773534efdbcfb.log

    postcssOptions: {
      extension: 'scss',
      enabled: true,
      parser: require('postcss-scss'),
      filter: {
        // omitting, so others don't copy this by mistake
        ],
      },
    },

repo: https://github.com/NullVoxPopuli/emberclear/tree/purgecss/packages/frontend (purgecss branch)

[Windvis]

@jeffjewiss Sorry, it might not have been obvious. We are still using sass. So we are @importing things with Sass.

This is our config:

    postcssOptions: {
      compile: {
        extension: 'scss',
        enabled: true,
        parser: require('postcss-scss'),
        plugins: [
          {
            module: require('@csstools/postcss-sass'),
            options: {
              includePaths: [
                'node_modules',
              ],
            },
          },
        ],
      },
      filter: {
        enabled: true,
        plugins: [
          {
            module: require('autoprefixer'),
          },
        ],
      },
    },

I tested some more, and it looks like not all addon styles have this problem.

This works:

// app.scss
@import "ember-power-select"; // Full addon file path: app/styles/ember-power-select.scss

This doesn't:

// app.scss
@import "our-private-addon"; // Full addon file path: app/styles/our-private-addon.scss

Maybe we are missing something in our own addon which prevents the file from being merged into the app folder, but it works with ember-cli-sass so I don't think that is the case.

Directly importing from node_modules/our-private-addon/app/styles/our-private-addon.scss does work. So I think it might be related with the merging of the addon app folder into our own app folder.

Any idea what could be causing this / how I could debug this?

[NullVoxPopuli]

I changed my config to:

    postcssOptions: {
      compile: {
        extension: 'scss',
        enabled: true,
        parser: require('postcss-scss'),
        plugins: [
          {
            module: require('@csstools/postcss-sass'),
            options: {
              includePaths: [
                'node_modules/tachyons-sass',
              ],
            },
          },
        ],
        filter: {
          plugins: [
            {
              module: purgecss,
              options: {
                content: ['./src/**/*.hbs', './src/**/.js', './src/**/.ts'],
              },
            },
          ],
        },
      },
    },

and I now have this:

Build Error (PostcssCompiler) in /tmp/broccoli-30134ipEr3GniejQv/out-422-funnel_module_unification_src/src/ui/styles/app.scss#sass:21:9

File to import not found or unreadable


Stack Trace and Error Report: /tmp/error.dump.29fffd553b775ceca8c33dff887c56c6.log

Thanks @Windvis for helping out with my config on Discord :) (in the above comment, it's wrong / incorrect / I missed some things from the readme)

[NullVoxPopuli]

ok, so with my updated config:

    postcssOptions: {
      compile: {
        extension: 'scss',
        enabled: true,
        parser: require('postcss-scss'),
        plugins: [
          {
            module: require('@csstools/postcss-sass'),
            options: {
              includePaths: [
                'node_modules/bulma',
              ],
            },
          },
        ],
        filter: {
          enabled: true,
          plugins: [
            {
              module: purgecss,
              options: {
                content: ['./src/**/*.hbs', './src/**/.js', './src/**/.ts'],
              },
            },
          ],
        },
      },
    },

and updated scss import:

// @import 'node_modules/bulma/bulma';
@import 'bulma';

I get the error:

Build Error (PostcssCompiler) in /home/lprestonsegoiii/Development/NullVoxPopuli/emberclear/packages/frontend/node_modules/bulma/bulma.sass:1:9

Invalid CSS after "@charset": expected 1 selector or at-rule, was '"utf-8"'

so, this seems like a parser issue?

[greyhwndz]

I also have the same problem with ember-modal-dialog. app/styles/app.css

@import "tailwindcss/base";
@import "custom-base";
@import "tailwindcss/components";
@import "custom-components";
@import "tailwindcss/utilities";
@import "custom-utilities";
@import "tailwindcss/screens";
@import "ember-modal-dialog/ember-modal-structure";
@import "ember-modal-dialog/ember-modal-appearance";

I tried avoiding installing ember-cli-sass coz it was creating trouble. Error message:

Build Error (PostcssCompiler)

Failed to find 'ember-modal-dialog/ember-modal-structure'
  in [
    C:\Users\USER\AppData\Local\Temp\broccoli-4144WwGz8mTTRu33\out-361-broccoli_merge_trees_full_application\app\styles,
        D:\@@@\@gilbertc77\tailwind-ui\node_modules
  ]

Is this related to this problem? Can I possibly use postcss-sass with the following config?:

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        plugins: [{
            module: require('postcss-import'),
            options: {
              path: ['node_modules']
            }
          },
          require("tailwindcss")("./config/tailwind.config.js")
        ]
      },
      filter: {
        enabled: false,
        plugins: [{
          module: purgecss,
          options: {
            content: ['./app/**/*.hbs', './app/**/*.js']
          }
        }]
      }
    }
  });
  return app.toTree();
};

[Windvis]

@greyhwndz I think you are trying to import sass files without configuring PostCSS to understand that. I think it will work if you configure ember-cli-postcss like this. You won't need postcss-import anymore either if you use sass.

[greyhwndz]

@Windvis I have it working with ember-modal-dialog master where it did away with scss and used css only and using:

          {
            module: require('postcss-import'),
            options: {
              path: ['node_modules']
            }
          }

[lougreenwood]

@Windvis / @jeffjewiss - in the example of how to address the problem, what does the node_modules/tachyons-sass represent? I don't know what tachyons-sass is and how what I should substitute it with paths in my own projects.

[jeffjewiss]

@lougreenwood tachyons-sass is a CSS library that you could choose to import into your project, similar to if you wanted to include something like Bootstrap. If you want to import it using Sass imports you need to add it to the includePaths so that node-sass knows where to find it. Hope that helps clear that up a little.