Configuration problem

[jonashartwig]

Hi,

I am not quite sure on how to explain this issue. I put up some rules:

files:
  include: '**/*.s+(a|c)ss'
# Rule Configuration
rules:
  brace-style:
    - 1
    -
      style: "1tbs"
      allow-single-line: false
  class-name-format:
    - 2
    - allow-leading-underscore: false
  empty-line-between-blocks:
    - 2
    - include: true
    - allow-single-line-rulesets: false
  extends-before-mixins: 2
  extends-before-declarations: 2
  force-attribute-nesting: 2
  force-element-nesting: 2
  force-pseudo-nesting: 2
  placeholder-in-extend: 2
  mixins-before-declarations:
    - 2
    -
      exclude:
        - breakpoint
        - mq
  no-duplicate-properties: 2
  one-declaration-per-line: 2
  space-before-bang: 1
  space-after-bang:
    - 1
    -
      include: false
  space-after-colon: 1
  no-warn: 1
  no-debug: 1
  no-ids: 2
  no-important: 1
  space-after-comma: 1
  space-around-operator: 1
  space-before-colon: 1
  space-between-parens: 1
  trailing-semicolon: 2
  hex-notation:
    - 2
    -
      style: uppercase
  indentation:
    - 1
    -
      size: 4
  property-sort-order:
    - 1
    -
      order:
        - display
        - margin
      ignore-custom-properties: true
  variable-for-property:
    - 2
    -
      properties:
        - margin
        - content

and i plugged that stuff into my webpack config:

module.exports = {
    name: 'client',
    target: 'web',
    devtool: 'inline-source-map',
    resolve: {
        root: utils_paths.source(),
        extensions: ['', '.js', '.jsx', '.json']
    },
    entry: {
        app: ['main.js', 'webpack-hot-middleware/client'],
        vendor: [
            'history',
            'react',
            'react-redux',
            'react-router',
            'react-router-redux',
            'redux'
        ]
    },
    output: {
        filename: '[name].[hash].js',
        path: 'dist'
    },

    module: {
        preLoaders: [{
            test: /\.jsx?$/,
            loader: 'eslint',
            exclude: /node_modules/
        }],
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    cacheDirectory: true,
                    plugins: ['transform-runtime'],
                    presets: ['es2015', 'react', 'stage-0'],
                    env: {
                        development: {
                            plugins: [
                                ['react-transform', {
                                    transforms: [{
                                        transform: 'react-transform-hmr',
                                        imports: ['react'],
                                        locals: ['module']
                                    }, {
                                        transform: 'react-transform-catch-errors',
                                        imports: ['react', 'redbox-react']
                                    }]
                                }]
                            ]
                        },
                        production: {
                            plugins: [
                                'transform-react-remove-prop-types',
                                'transform-react-constant-elements'
                            ]
                        }
                    }
                }
            },
            {
                test: /\.json$/,
                loader: 'json'
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract('style', 'css?sourceMap&-minimize!postcss!sass?sourceMap')
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                loaders: ExtractTextPlugin.extract('style', 'css?sourceMap&-minimize!postcss')
            },
        ]
    },
    plugins: [
        new NpmInstallPlugin({
            saveDev: true
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('development')
            },
            '__BASENAME__': JSON.stringify('')
        }),
        new HtmlWebpackPlugin({
            template: 'index.html',
            hash: false,
            filename: 'index.html',
            inject: 'body',
            minify: {
                collapseWhitespace: true
            }
        }),
        new sassLintPlugin({
            configFile: '.sass-lint.yml',
            failOnError: true
        }),
        new ExtractTextPlugin('[name].[contenthash].css', {
            allChunks: true
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor']
        })
    ],
    eslint: {
        configFile: '.eslintrc'
    },
    sassLoader: {
        includePaths: [utils_paths.source()]
    },
    postcss: [
        cssnano({
            autoprefixer: {
                add: true,
                remove: true,
                browsers: ['last 2 versions']
            },
            discardComments: {
                removeAll: true
            },
            safe: true,
            sourcemap: true
        })
    ],
    stats: {
        children: false
    }
};

and i have some css which is incorrect according to the rules:

.container{margin: 0}

which is imported in one of my React components:

import '../styles/main.scss';

Unfortunately, no matter what i do and try, I see any kind of output of the scss linter. I can force errors during loading if i mess up the config file. So that one is loaded.

Any ideas?

Jonas

[ssolders]

+1

[jackmarketon]

@jonashartwig making sure I understand, you are not seeing any output from the plugin?

[jonashartwig]

Yes, I don not see any warnings, errors. No information in general about anything regarding the plugin.

[jackmarketon]

@jonashartwig Oh, okay so I think I know what is going wrong. You don't have a context set with webpack OR with the sasslint plugin, if you set the context (see readme) it should work.

[jonashartwig]

Hi, thank you for the reply. I am not quite understanding what this context is supposed to be. I assume it is the folder where all my scss files are?

If so thing is they are spread across lots of folders.

EDIT: After reading lots of other posts i conclude it should be like this: context: require.context("/", false, "*/.scss") However i get this error: TypeError: require.context is not a function

Regards

[jackmarketon]

Well we already have a glob setup for **/*.s[a|c]ss so the end of that isn't needed.

If your webpack config is at the root of your repo, try setting the context option to ./, if it's not at the root, do a path so it goes to the root: ./../../ or something.

[ssolders]

So we're still struggling with this. Tried to make it as basic as possible in my webpack.conf. Want it to break on both errors and warnings though to clearly see when/if it works.

var sassLintPlugin = require('sasslint-webpack-plugin');
module.exports = {
  loaders: [
      {
         test: /\.scss$/,
         exclude: /node_modules/,
         loader: ExtractTextPlugin.extract('style', 'css?sourceMap&-minimize!postcss!sass?sourceMap')
      }
  ]
  plugins: [
      new sassLintPlugin({
          failOnWarning: false,
          failOnError: false
      })
   ],
}

Moved my .sass-lint-yml to the same folder as my webpack.config (takes that file as default if no conf-file is specified in the plugin according to docs).

/build
  - webpack.dev.config.js
  - .sass-lint.yml

/src/styles
   - main.scss

Cleaned my .sass-lint-yml to only contain some basic rules + a scope of which files to use (only scss). Throw error when using id + trailing semicolons.

files:
  include: '**/*.scss'
rules:
  no-ids: 2
  trailing-semicolon: 2

When I edit my main.scss file, adding an id-selector and not using semicolons it triggers a re-compile but no errors are thrown.

I've tried setting a context as u mentioned above, but no cigarr.

[jackmarketon]

@ssolders I apologize, I'm not quite sure what is going wrong. I had a few bug fixes (but they should be unrelated) currently in this PR: https://github.com/alleyinteractive/sasslint-webpack-plugin/pull/6 which if you pull in that commit after uninstalling the current version, I'd be curious if that might fix it.

I also don't use the files: config in my .sass-lint.yml as the plugin handles all of that via the glob.

I'll try and replicate your issue this week and see if I can't get it to occur (and then fix it).