stevenschobert/metalsmith-sass

Sass plugin for Metalsmith.

metalsmith-sass's Issues

Multimatch filtering to source files

Hello,

Is it possible to add a filtering mechanism, so it can be determined which files to be processed to css and which files should be left out as-is?

Thanks for this plugin!

Sass partials are not supported

Hi Steven,

The other open question you have (the issue #1 ) is actually about a bug you have in your way of using libsass, not in libsass itself. Basically, you're trying to pass every *.scss file to libsass to try and compile it, while ignoring partials (http://sass-lang.com/guide).
The fix is simple though - just replace:

isSassFile = function isSassFile(filename) {
   return (/.*\.scss/).test(filename);
},

with

isSassFile = function isSassFile(filename) {
   return (/^[^_]*\.scss/).test(filename);
},

metalsmith-sass does not compile

Hi,

I use metalsmith-sass together with metalsmith-watch for a very simple static site generator.

When I start the server all Sass files are compiled correctly. However, this is not the case once the server is running (watching): changes to a Sass partial (e.g. _variables.scss), that is included with @import into main.scss do not lead to a compilation of main.scss – this means that the stylesheets effectively are not updated.

That’s what I get:

[metalsmith-watch] - Updating 1 file...
[metalsmith-watch] ✔︎ 0 file reloaded

I can reproduce this issue on several machines with OS X/macOS (including v10.12.4) and all node versions (including v6.5.0). I use [email protected], [email protected] and [email protected].

Any help would be highly appreciated!

@imported sass files are taken straight from the src rather than the metalsmith pipeline

Hi, it seems to me that metalsmith-sass is reading @imported files straight from the source file rather than that found in the metalsmith pipeline.

In my project, I need to use absolute paths to my font files from my scss because I'm serving straight from the filesystem. To do this I'm using a handlebars expression that points to the root of the build folder. A simplified version of my project with additional test code looks like this.

// src/style/main.scss

@import "fonts/fonts";

.test::after {
  content: '{{testmessage}}';
}

// src/style/fonts/_fonts.scss

@font-face {
  font-family: 'Noto Sans';
  src: url('{{dist}}/fonts/NotoSansCJKjp-Regular.otf');
}

// build.js
import fs from 'fs';
import path from 'path';
import sass from 'metalsmith-sass';
import Handlebars from 'handlebars';
import Metalsmith from 'metalsmith';

Metalsmith(__dirname)
  .destination('./dist')
  .use((files, metalsmith, done) => {
    files['style\\main.scss'].contents = new Buffer(
      Handlebars.compile(files['style\\main.scss'].contents.toString())({testmessage: 'for some reason i want to dynamically insert things into my sass'})
    );
    files['style\\fonts\\_fonts.scss'].contents = new Buffer(
      Handlebars.compile(files['style\\fonts\\_fonts.scss'].contents.toString())({dist: path.join(__dirname, './dist')})
    );
    done();
  })
  .use(sass())
  .build(function(err) {
    if (err) {
      console.log(err);
    }
  });

This outputs something like

// dist/main.css

@font-face {
  font-family: 'Noto Sans';
  src: url('{{dist}}/style/fonts/NotoSansCJKjp-Regular.otf');
}

.test::after {
  content: '{{for some reason i want to dynamically insert things into my sass}}';
}

Capturing and logging the files in the metalsmith pipeline shows both main.scss and fonts.scss having been templated properly, with {{dist}} having been replaced with the path to the project build folder, but the output written to the dist folder seems to show that only the main file has been taken from the pipeline but the @imported file has been pulled from the source.

It would be really awesome and make much more sense with metalsmith to ensure that the files from the metalsmith pipeline are used rather than those from the source directories. It does seem that this would be hard to implement without modifying node-sass since it always reads from the disk for @imports.

For now I'll just have to put all of my font declarations in my main sass file.

@functions @for loop error

I've used the following in a previous sass file and it works

@function makelongshadow($color, $len) {
  $val: 0px 0px $color;
  @for $i from 1 through $len {
    $val: #{$val}, #{$i}px #{$i}px #{$color};
  }
  @return $val;
}

However, in trying to use it in metalsmith.json build via CLI I get

Metalsmith · [metalsmith-sass] Error: error parsing interpolated value

is your script unable to parse the @function?

Sass Overwriting Autoprefixer, or vice versa

I'm having trouble with processing scss and autoprefixer. If I compile sass first, autoprefixer will remove sourcemaps. If I prefix first, Metalsmith-Sass will overwrite prefixes. Any ideas?

Note: I'm not sure yet if this is a question for you or Metalsmith-Autoprefixer. But thanks for the help!

Error: no mixin named -assert-ascending in Bootstarp -4

I am getting the below error while migrating from Bootstrap 3 to 4. Kindly help.

Error: [metalsmith-sass] Error: no mixin named -assert-ascending -> C:/Users/Administrator/Documents/GitHub/common-template/node_modules/bootstrap/scss/_variables.scss:203:10

---

The mixin exists already inside functions.

@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins";

node-sass 2.01 works with node 0.12, metalsmith-sass install still fails

Looks like the underlying problem with node-sass behind
#16
has been fixed (node-sass is no longer in beta, now at 2.01), so it should be possible to update the plugin to work under node 0.12.

isSassFile() should return true for filename with underscore in the middle

Is there a '.' missing in the regexp for checking a file is sass or not?
i.e. /^[^_]*\.scss/ should be /^[^_].*\.scss/
I am not quite sure about the naming convention of SASS file, but I think file with underscore in the middle of the file name should be processed normally.

CLI tries to compile .html files

Hi,
Thank you for this plugin, looks to be a nice way to support sass in metalsmith projects.

I am experimenting and using the cli with a barebones project appears to cause an exeption:

Error: [metalsmith-sass] Error: Invalid CSS after "": expected 1 selector or at-rule, was "<!DOCTYPE html>" -> /Users/dmarr/src/metalsmith-project/src/setting-up-your-awesome-website/scss/styles.scss:1:1
    at Object.callback (/Users/dmarr/src/metalsmith-project/node_modules/metalsmith-sass/lib/index.js:69:23)
    at options.error (/Users/dmarr/src/metalsmith-project/node_modules/node-sass/lib/index.js:280:32)

This is using the command metalsmith within the following repo: https://github.com/marr/metalsmith-project. There is a build.js script which uses the JS api and the exception does not occur with that method. Is there something I'm missing in metalsmith.json which would cause the CLI to throw the exception above?

Thanks

scss files in subfolders do not output

if i have this file structure:

/
- _src
-- scss
--- main.scss
--- pages
---- home.scss

and these settings:

outputStyle: 'compressed',
outputDir: './css',
sourceMap: true,
sourceMapContents: true,
includePaths: ['./_src/scss'],
files: ['./_src/scss/**/*.scss']

anything under the ./_src/scss/pages subdirectory does not get created. The process seems to try to create a ./css/home.css file but actually never writes the file.

I'll provide more info later (just running late right now)

metalsmith.dir changed

metalsmith.dir is empty now (1.0.1)

   var basePath = path.join(metalsmith.dir, metalsmith._src);

throw path error
okey with:

   var basePath = path.join(metalsmith._directory, metalsmith._source);;

And I think it's right to make option like "sourceDir" for files not in "./src" or other source directory

Modifying a partial file does not trigger a re-compile

I have a _partial.scss file imported in my main app.scss file. Modifying and saving _partial.scss does not trigger the SCSS to be re-compiled, but saving app.scss does.

Peg the node-sass version

node-sass to a certain version.

Invalid top-level expression

This is not a problem with this plugin, but I'm posting this in case someone else runs into this issue.

Compilation failed for me with

Metalsmith · [metalsmith-sass] Error: invalid top-level expression -> /Users/veritas/www/hannahsstudio.com/src/styles/style.scss:1:1

I thought the issue was with the SASS file or with this plugin. I finally looked at the plugin source code and saw that the data option was set to the file contents. It turns out all my files were being processed by the layouts plugin, so the data option had a bunch of HTML templating inside it. I just had to set the patterns option in the layouts plugin to only process markdown files.

This might be a good note to put in the documentation.

Sass files gets included in compiled build

I'm using CLI version of Metalsmith. When compiling with the metalsmith command, my *.scssfiles gets included next to their *.css counterparts in the front end styles directory.

Is this the default behavior, and if so, how can it be changed?

FYI. Here's my metalsmith.json:

{
  "source": "./_source",
  "destination": "./_build",
  "clean": true,
  "metadata": {
    "title": "Project Name",
    "description": "A description about Project Name"
  },
  "plugins": {
    "metalsmith-ignore": ["_drafts/*", "_content/index.md"],
    "metalsmith-drafts": {},
    "metalsmith-markdown": {},
    "metalsmith-permalinks": {
      "pattern": ":collection/:title"
    },
    "metalsmith-collections": {
      "projects": {
        "pattern": "_source/projects/**/*.md",
        "sortBy": "date",
        "reverse": true
      }
    },
    "metalsmith-tags": {
      "handle": "tags",
      "path": "tags",
      "template": "_templates/tag.hbs",
      "sortBy": "date",
      "reverse": true
    },
    "metalsmith-templates": {
      "directory": "_templates",
      "engine": "handlebars",
      "partials": {
        "header": "partials/header",
        "footer": "partials/footer"
      }
    },
    "metalsmith-sass": {
      "outputStyle": "expanded",
      "outputDir": "assets/styles/",
      "imagePath": "_source/assets/images/"
    },
    "metalsmith-navigation": {},
    "metalsmith-assets": {
      "source": "_source/assets",
      "destination": "./assets"
    }
  }
}

all scss files are processed, even the not used ones

I'm having a strange behaviour with metalsmith-sass: all scss files are processed, even the not used ones.

I'm using the following configuration:

    .use(sass({
      file: './src/scss/app.scss',
      includePaths : [
        './node_modules/boostrap/scss',
        './src/vendor/highlight.js/styles/' // all highlight.js scss files
      ],
      outputDir: 'css/', // this changes the output dir to "build/css/" instead of "build/scss/"
      outputStyle: 'compressed',
      sourceMap: true,
      sourceMapContents: true // this will embed all the sass contents in sourcemaps
    }))

My ./src/scss/app.scss file is importing the needed scss files.

I'm expecting a unique file to be built into the css directory: app.css.

I'm having this app.css compiled file. But I'm also having all highlight.js sccs files compiled into css. I do not need these files as I'm importing only one theme and this theme file is already included into my app.css file.

I found an issue about that problem: #22 (even if that issue is the opposite problem) and I find that the solution is a bit strange:

Ahh I see what you mean now! Yeah, setting the outputDir option forces all files to be put in the destination folder, regardless of where they came from. Let me see what I can do to make option a little more flexible!

Just wanted to let you know that I just pushed out v1.1, that lets you use a function in the outputDir instead of just a string.

Why do I have to use a function to avoid having all the scss file compiled as I'm using a file parameter to tell sass to process only this file (and imported scss files).

By the way, the file parameter is not documented. Is it normal?

In the documentation, I don't the link between this file parameter, the outputDir function and the way sass processes files.

If one can explain that to me, and possibly clarify the documentation, it would be great!

Doesn't seem to play nice with `gulp-metalsmith`

First, thanks for building a much-needed libSass wrapper for metalsmith.

Unfortunately, I am having an issue getting it set up.

I haven't had an opportunity to dig in, but gulp-metalsmith seems to work with every other plugin I have tried.

With metalsmith-sass, there is an error:

Message:
    Arguments to path.join must be strings
Stack:
TypeError: Arguments to path.join must be strings
    at Object.posix.join (path.js:488:13)
    at compileSass (/Users/justin/workspace/gh-release-manager/node_modules/metalsmith-sass/lib/index.js:121:33)
    at Ware.<anonymous> (/Users/justin/workspace/gh-release-manager/node_modules/wrap-fn/index.js:45:19)
    at next (/Users/justin/workspace/gh-release-manager/node_modules/ware/lib/index.js:85:20)
    at Ware.run (/Users/justin/workspace/gh-release-manager/node_modules/ware/lib/index.js:88:3)
    at Object.run (/Users/justin/workspace/gh-release-manager/node_modules/gulp-metalsmith/lib/metalsmith.js:25:36)

This appears to be the context (lib/index.js:111):

/**
 * Looks up different key names on `metalsmith` to support
 * old versions (< v1) of Metalsmith. At some point, I will remove
 * support for < v1 and remove the key lookups
 */
var directory = metalsmith.dir || metalsmith._directory,
    source = metalsmith._src || metalsmith._source,
    basePath = path.join(directory, source);

Both directory and source end up being null. Any help would be greatly appreciated.

Node 12+ is Unsupported

metalsmith-sass uses node-sass": "^4.11.0:

metalsmith-sass/package.json

Line 32 in dc23109

"node-sass": "^4.11.0"

But 4.12+ is required for Node 12: https://github.com/sass/node-sass/blob/fbc9ff5abc72d9bc22a3b0bc9fa902fc46c980f7/README.md

This wasn't a problem for me until the active Node LTS changed from v10 to v12 on Oct 21: https://nodejs.org/en/about/releases/

Output errors?

When SASS building fails, it just outputs:

> metalsmith
  Metalsmith · undefined

We do return the error, should Metalsmith do a better job of error reporting?

This plugin should not use metalsmit's files dictionary to discover sass files

Hi,
I think you misused the metalsmith's files dictionary by using it to find sass files. In my opinion this dictionary should consist only of files that will provide content (like posts for a blog site) and not for any other files.

Here is my current directory structure:

----assets
|   ----images
|          ...
|   ----fonts
|          ...
|           
----content
|   |   index.md
|   ----articles
|   |      article.md
|   ----styles
|           main.scss
|           _fonts.scss
|           
----templates
    |   index.hbt
    |   layout.hbt
    |   page.hbt
    |   post.hbt

As you can see in order to scss files be compiled by metalsmith-sass they need to exist in metalsmith source folder. But, on the other hand things like templates and binary files (images and fonts in my case) should not be placed in source (here: content) directory because they should not be compiled within metalsmith content pipeline.
For example metalsmith-templates "stringifies" content of all files under source directory and if I put images there they will get broken during this process.

Having styles in content source directory seems messy. I probably will provide an PR for this in a couple days.

Support for sass syntax and extension.

It should transparently handle the .sass file extension.

Respect node-sass file option

It seems even if i set up a file option as per the node-sass documentation.

    "metalsmith-sass": {
      "file": "./src/styles/main.scss",
      "outputDir": "css/",
      "includePaths": [
        "./node_modules/bootstrap-sass/assets/stylesheets/"
      ],
      "outputStyle": "expanded"
    }

I would expect only 'main.scss' to get processed, instead i get a css file for each sass file (components, partials etc ) in my build...

Importing bulma results in an error

Importing bulma with:
@import "bulma/sass/utilities/_all.sass"

Results in an error:
Error: media query expression must begin with '('

Compiling my scss with sass cli tool works fine. Am I doing something wrong?

npm install metalsmith-sass failed with node v0.12

I got ELIFECYCLE error when installing a dependency, node-sass.
Maybe it's needed to update dependent node-sass version.

My environments:
OS: Mac OS X 10.10
node: 0.12

FYI, install is done well when I switched to node 0.10.

You want to keep the structure when you specify the output directory

I have build the directory.

• /src
  • /common
    • /sass
      • common.scss
      • /ex
        • ex.scss
  • /products
    • /sass
      • index.scss

I will request

• /src
  • /common
    • /css
      • common.css
      • /ex
        • ex.css
  • /products
    • /css
      • index.css

but, it is not possible to specify the outputDir.
I want to replace the sass directory to css directory.

how do it?

Lots of "Unbound Variable" Errors

Hi Steven,
Thanks for creating this. Just getting my fee wet with Metalsmith so I'm sure it's something I'm doing wrong, but I'm wondering if you've every seen a situation where metalsmith-sass is throwing a lot of errors like this one below where variables are not recognized as already being declared (they have, in a variables file).

error: unbound variable $base-border-color

I'm using a set up I took from another site of mine (which works fine there, on Jekyll) using Bourbon/Neat/Bitters.

I would expect that metalsmith-sass respect the order of imports from my screen.scss files and the respective imports from partials, but it's not, apparently. I've moved files around thinking it was my directory structure, but nothing helps.

I put them up in a repo if that helps, though I realize the problem is not likely your plugin, but thought I'd start here. Most of the references I've seen to this error are people not naming their partials correctly, but that doesn't seem to be the case. https://github.com/budparr/testmetalsmith/tree/master/src/assets/css

If you have any insights at all, that'd be great. Thanks,
Bud

output is a .sass file containing HTML

hi,

maybe I don't fully get metalsmith yet, but metalsmith-sass is the first big problem I ran into.

with the following folder structure

.
├── src
│   ├── styles.sass
│   ├── index.md
│   └── posts
│       ├── ...

and this code:

var vars = {
    path: {
        source: 'src',
        destination: 'build'
    }
};

Metalsmith(__dirname)
    .source(vars.path.source)
    .destination(vars.path.destination)

    .use(sass({
        // outputStyle: 'expanded',
        // outputDir: 'css',
        // sourceMap: true,
        // sourceMapContents: true,
        indentedSyntax: true
    }))

    // [...] more stuff

    .build();

everything is output into the specified build dir, as it should — except instead of a .css file, I get this:

.
├── build
│   ├── styles.sass
│   ├── ...

styles.sass:

<!DOCTYPE html><html><head><meta charset="utf-8"><title>title - title</title></head><body><h1>title</h1><time></time>body
    font-size: 12px<p><a href="/tags/[object Object],[object Object]">[object Object],[object Object]</a><br><a href="/tags/[object Object]">[object Object]</a><br><a href="/tags/[object Object]">[object Object]</a><br></p></body></html>

looks like a template is being applied to the sass code, but I can't figure out why. — any ideas what's going wrong here?

thanks a lot in advance.

outputStyle default should match node-sass

node-sass's default outputStyle is nested.

node-sass is deprecated

As per node-sass README (https://github.com/sass/node-sass), the package is deprecated, with the recommendation to switch to Dart Sass package ( https://www.npmjs.com/package/sass).

Prefixing

Hello,

I was just wondering how I would go about auto-prefixing my sass on compile?

Is there a built in method or another node module that is compatible with this one?

Thanks, Harry.

Absolute content paths are not supported correctly

If you attempt to use metalsmith-sass with content path being absolute instead of relative it'll concat the paths and result in something akin to C:\Projects\MetalsmithProject\C:\Projects\MetalmisthProject\Content which will break any and all imports.

A solution is to just use metalsmith._src/metalsmith._source as-is if it is detected to be absolute.

Specify input in Metalsmith's JS api

Hello,
thanks for the great plugin!

I apologise if my question comes from my ignorance, but i haven't been able to specify an input file name for the »main« .scss file using metalsmith's javascript api. Specifically, i would like to keep my source and styles folders at the same level (and not have to put the former under the latter). Here is a snippet from my build.js:

.use(sass({
    file: 'styles/bootstrap/scss/bootstrap.scss',
    outputDir: 'css/',
    sourceMap: true,
    sourceMapContents: true
}))

I am asking this because i have the impression that the methalsmith.json supports it and it is also mentioned in the node-sass docs.

Thanks a lot in advance for any clarification on the matter!

Cheers,
dimitar