mleg/sass-variable-parser

Webpack sass to JS variables loader (also a parser for Node.js)

sass-variable-parser's Issues

Webpack config setting resolve.alias can not work

• I'm submitting a ...
  [x] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  webpack config setting resolve.alias seem can not work with this plugin.

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)
  First of all, sorry that I can not provide a test sample case. But I'll try draft out the problem I faced and how I workaround it. Here is snippet of my webpack config:

    ...
    , resolve: {
        modules: [__baseModulePath]
        , extensions: ['.js', '.jsx']
        , alias: {
                ...
                , 'jquery-spellchecker': path.resolve(__dirname, './vendor/jquery.spellchecker.js')
                ...
            }
    }
    ...
    , resolveLoader: {
        modules: [ __baseModulePath ]
    }
    , module: {
        ...
        , rules: [
            ...
            , {
                test: /\.s[ac]ss$/
                , issuer: {
                    exclude: /styles\/_variables\.js$/
                }
                , use: ExtractTextPlugin.extract({
                    fallback:  __baseModulePath + "style-loader"
                    , use:  __baseModulePath+"css-loader!"+__baseModulePath + "sass-loader"
                })
            }
            , {
                test: /\.css$/
                , use: ExtractTextPlugin.extract({
                    fallback:  __baseModulePath + "style-loader"
                    , use:  __baseModulePath + "css-loader"
                })
            }
            , {
                test: /sass\/_variables\.scss$/
                , issuer: {
                    test: /styles\/_variables\.js$/
                }
                // NOTE.1: options.cwd is needed to avoid this loader some how
                // reset resolve.alias.
                , use: { loader: 'sass-variable-parser', options: { cwd: "" } }
            }
            ...
        ]
    }

where __dirname is <path-to-my-app>/web and __baseModulePath is <module-path>/npm/lib/node_modules/ and note the NOTE.1 which is my hack to solve this problem. Some where in my application I have a file call <path-to-my-app>/web/app/components/v5/Spellcheck.js which has one of this import (using alias):

...
import 'jquery-spellchecker';
...

Without options.cwd = '', error below will appear:

ERROR in ./app/components/v5/Spellchecker.js
Module not found: Error: Can't resolve '../../../sass/vendor/jquery.spellchecker.js' in '<path-to-my-app>/web/app/components/v5'
resolve '../../../sass/vendor/jquery.spellchecker.js' in '<path-to-my-app>/web/app/components/v5'
  using description file: <path-to-my-app>/web/package.json (relative path: ./app/components/v5)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: <path-to-my-app>/web/package.json (relative path: ./app/components/v5)
    using description file: <path-to-my-app>/web/package.json (relative path: ./sass/vendor/jquery.spellchecker.js)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        <path-to-my-app>/web/sass/vendor/jquery.spellchecker.js doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        <path-to-my-app>/web/sass/vendor/jquery.spellchecker.js.js doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        <path-to-my-app>/web/sass/vendor/jquery.spellchecker.js.jsx doesn't exist
      as directory
        <path-to-my-app>/web/sass/vendor/jquery.spellchecker.js doesn't exist
[<path-to-my-app>/web/sass/vendor/jquery.spellchecker.js]
[<path-to-my-app>/web/sass/vendor/jquery.spellchecker.js.js]
[<path-to-my-app>/web/sass/vendor/jquery.spellchecker.js.jsx]
[<path-to-my-app>/web/sass/vendor/jquery.spellchecker.js]
 @ ./app/components/v5/Spellchecker.js 10:0-53
 @ ./app/components/v5/ReplyToolbar.js
 @ ./app/views/v5/errandCtnrs.js
 @ ./app/containers/app.js
 @ ./app/workflowv5App.js

May be there is some bug that cause this?

TypeScript-Modules using `sass-variable-parser` won't build

• I'm submitting a ...
  [x] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [ ] question about how to use this project

• Summary
  This module depends on webpack as it is imported in the index.ts-file.
  Even though webpack has only been added to the devDependencies-list which causes all TypeScript-modules which depend on this module, sass-variable-parser to fail when building with following error:

node_modules/sass-variable-parser/build/main/index.d.ts:1:24 - error TS2307: Cannot find module 'webpack'.

1 import { loader } from 'webpack';
                         ~~~~~~~~~

Please add webpack to the normal dependencies to fix this issue.

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

Multiline maps are not parsed

• I'm submitting a ...
  [x] bug report

• Summary

When parsing multiline maps, like the one below, I get unclosed parenthesis error:

$map: (
    key1: val
) !default;

Stack trace:

[17:23:53] Error: unclosed parenthesis
    at Object.module.exports.renderSync (D:\work\kendo-themes\node_modules\node-sass\lib\index.js:441:16)
    at Object.renderValuesToCSS [as default] (D:\work\kendo-themes\node_modules\sass-variable-parser\build\main\lib\render-values-to-css.js:35:10)
    at parseVariables (D:\work\kendo-themes\node_modules\sass-variable-parser\build\main\lib\parse-variables.js:50:47)
    at D:\work\kendo-themes\gulpfile.js:130:23
    at taskWrapper (D:\work\kendo-themes\node_modules\undertaker\lib\set-task.js:13:15)
    at bound (domain.js:402:14)
    at runBound (domain.js:415:12)
    at asyncRunner (D:\work\kendo-themes\node_modules\async-done\index.js:55:18)
    at process._tickCallback (internal/process/next_tick.js:61:11)

Seeing the error originates in node-sass, I am assuming that the variables are parsed per line.

How to use this loader through webpack config file?

• I'm submitting a ...
  [ ] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository
  [x] question about how to use this project

• Summary
  Is there a sample how to use this loader through webpack.config.js file? I successfully used it to get my js variables from scss file through inline loader. But I got empty variables when I put it inside webpack.config.js.

my webpack.config.js is more of less like below:

...
            , {
                test: /.s[ac]ss$/
                // , issuer: {
                //     exclude: /styles\/_variables\.js$/
                // }
                , use: ExtractTextPlugin.extract({
                    fallback:  "style-loader"
                    , use: "css-loader!sass-loader"
                })
            }
            , {
                test: /sass\/_variables\.scss$/
                , issuer: {
                    test: /styles\/_variables\.js$/
                }
                , enforce: 'pre'
                , use: {
                    loader: 'sass-variable-parser'
                }
            }
            , {
                test: /.css$/
                , use: ExtractTextPlugin.extract({
                    fallback: "style-loader"
                    , use: "css-loader"
                })
            }
...

It seem to me extract-text-webpack-plugin removed the result? I try move it before or after extract-text-webpack-plugin also no luck. Changing the enforce flag didn't seem help either. The reason I write it at config file because eslint complaint about it https://github.com/benmosher/eslint-plugin-import/blob/v2.20.1/docs/rules/no-webpack-loader-syntax.md.

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. StackOverflow, personal fork, etc.)

Request - output to file

This library is super useful!

I'm wrapping it to output ES modules and JSON from a SASS variables file:

https://gist.github.com/alexkrolick/68894477eba26add2949e68d4ca5e5a9

Would you consider adding file output to the parser?