Syntax

[alexisvincent]

How would we use syntax plugins, like https://github.com/postcss/postcss-scss?

[joshwnj]

@alexisvincent are you using something like webpack or browserify? There are some examples of using CSS Modules alongside other postcss plugins:

• https://github.com/css-modules/webpack-demo/blob/master/webpack.config.js#L27
• https://github.com/x-team/starting-css-modules/blob/master/02-plugins/monobrow.config.js#L28

[alexisvincent]

@joshwnj Nope, trying to use this project to fix up the JSPM loader.

[joshwnj]

@alexisvincent ah ok. Have you seen the jspm demo?

I'm not very familiar with JSPM myself but if I were looking I would start by trying to add the postcss-scss plugin to the beginning of the plugin array here: https://github.com/geelen/jspm-loader-css-modules/blob/master/index.js#L3-L9

[alexisvincent]

Yep, the issue is that scss isn't a plugin, it's a syntax, so the postcss semantics are different, the syntax gets passed in as part of the process options. However in this project we can't change the options. To resolve this I've forked and manually added the ability to pass options. Was hoping to get the conversation started around extending this project to deal with options as well.

[jessicamindel]

@alexisvincent Excited to hear that you found a workaround! I'm not using JSPM myself, but am curious as to how you were able to pass in your processOptions. I was looking to use SCSS with TypeScript in Webpack while getting around a current issue with typings-for-css-modules-loader using this article, but haven't been able to pass in syntax option.

[alexisvincent]

@jessicamindel Oh boy! This was soo long ago I can barely remember anything about it. Issues around JSPM and SystemJS were largely that all this loading had to happen in the browser, rather than serverside. I'm sorry, but I'm going to be of absolutely no use. Good luck though!

[alexisvincent]

I don't think this project has kept up to date though, so you might have more luck elsewhere.

[nathanredblur]

I think you can add some param to support scss syntax like:

css-modules-loader-core/src/index.js

Line 18 in 3d83770

.process( sourceString, { from: "/" + sourcePath } )

var postcssScss = require("postcss-scss");

export default class Core {
  constructor( plugins, syntax ) {
    this.plugins = plugins || Core.defaultPlugins
    this.syntax = syntax || postcssScss
  }

  load( sourceString, sourcePath, trace, pathFetcher ) {
    let parser = new Parser( pathFetcher, trace )

    return postcss( this.plugins.concat( [parser.plugin] ) )
      .process( sourceString, { syntax: this.syntax, from: "/" + sourcePath } )
      .then( result => {
        return { injectableSource: result.css, exportTokens: parser.exportTokens }
      } )
  }
}

tell me what is the best approach for this. the scss processor works well with css, and in case that some scss appear, we can parse it with the same syntax processor also we can allow send some custom syntax.
Or even better and forget all about send plugins or syntax and try to support the use of postcss.config.js file.