[question] use with react in 1.3?

[dagatsoin]

Hello Nathan. I am actually building a stack with Meteor 1.3 and React and I would like to use Modules CSS. I tried to install your plugin but without success because I think I did not delete the ecmascript package of the beta (which is newer than the 1.2 one)

I first thought to use https://www.npmjs.com/package/react-css-modules but I felt on your plugin and wanted to give it a try.

What are your planing for Meteor 1.3 ?

[akanix42]

@dagatsoin, I've created a new version of the plugin for Meteor 1.3. I've published it as a beta build since Meteor 1.3 has yet to be released. You can find instructions here and a demo app here.

[dagatsoin]

@nathantreid awesome! You are like superman coming at time! I am taking a look right now.

[dagatsoin]

I have a problem when replacing ecmascript by your package. I can't use React anymore. For information I started from your demo app then added React and React-Dom via NPM.

[akanix42]

Ah, I neglected to register the JSX extension. I'll get that updated and ensure that React is working in the demo app.

[akanix42]

React support is enabled in nathantreid:css-modules@1.0.0-beta.2; check out the latest version of the demo app for a quick start (a React example is now included).

[dagatsoin]

thx @nathantreid I am trying the demo but nothing is displayed. I have no error message. I did juste:

$ git fetch
$ npm install
$ meteor

Does it work for you?

[dagatsoin]

Ok demo works with a fresh install. Weird.

[dagatsoin]

@nathantreid I don't manage to make it work in my app.

Case 1: In the entry point JSX I have: import * as ley from './wizar-guide.mss' and it throw me: Uncaught Error: Cannot find module './wizar-guide.mss'

Case 2: And in a children component JSX I have: import * as styles from './map.mss' and my render function draws this element: <span className={styles.primary} onClick={this.mapShow.bind(this)} >Show</span> But the output does not content class=... and the import * as styles from './map.mss' is not babelized as it is in our example.

It is like cssModules packages is not imported. EDIT: yes it is

Here is my package.json

{
...
  "dependencies": {
    "es6-promise": "^3.0.2",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-komposer": "^1.2.1",
    "react-redux": "^4.0.6",
    "react-router": "^2.0.0-rc5",
    "redux": "^3.0.6",
    "redux-logger": "^2.4.0",
    "redux-simple-router": "^2.0.4",
    "redux-thunk": "^1.0.3"
  },
  "devDependencies": {
    "postcss-modules-extract-imports": "^1.0.0",
    "postcss-modules-local-by-default": "^1.0.0",
    "postcss-modules-scope": "^1.0.0",
    "postcss-modules-values": "^1.1.1",
    "postcss-nested": "^1.0.0",
    "postcss-simple-vars": "^1.1.0"
  },
  "cssModules": {
    "plugins": {
      "postcss-simple-vars": {},
      "postcss-modules-values": {},
      "postcss-nested": {},
      "postcss-modules-local-by-default": {},
      "postcss-modules-extract-imports": {},
      "postcss-modules-scope": {}
    }
  }
}

my .meteor/packages

# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

meteor-base             # Packages every Meteor app needs to have
mobile-experience       # Packages for a great mobile UX
mongo                   # The database Meteor supports right now
blaze-html-templates    # Compile .html files into Meteor Blaze views
session                 # Client-side reactive dictionary for your app
jquery                  # Helpful client-side library
tracker                 # Meteor's client-side reactive programming library

standard-minifiers      # JS/CSS minifiers run for production mode
es5-shim                # ECMAScript 5 compatibility for older browsers.

insecure                # Allow all DB writes from clients (for prototyping)
timbrandin:fetch
nathantreid:css-modules@1.0.0-beta.2

[dagatsoin]

It appears that import * as styles from './map.mss'is not valid but import * as styles from './map.mss'; is valid. The semicolon make the import been correctly babelized.

[dagatsoin]

Very strange. I simplify the case with two identical components:

/*main.jsx*/
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './Test.jsx';
import { Map } from './Map.jsx';

Meteor.startup(function () {
  console.log('render')
  ReactDOM.render(<App />, document.getElementById("render-target"));
});

/*Test.jsx*/
import React from 'react';
import { Meteor } from 'meteor/meteor';
import * as styles from './test.mss';

export class App extends React.Component {
  render() {
    return (
      <div className={styles.texte}>
        <h1>React Example!</h1>
        <div>
          <button>Click Me</button>
        </div>
        <h3>BITS</h3>
      </div>
    )
  }
}

/*Map.jsx*/
import React from 'react';
import { Meteor } from 'meteor/meteor';
import * as styles from './test.mss';

export class Map extends React.Component {
  render() {
    return (
      <div className={styles.texte}>
        <h1>React Example!</h1>
        <div>
          <button>Click Me</button>
        </div>
        <h3>BITS</h3>
      </div>
    )
  }
}

/*test.css*/
.texte{
  color:blueviolet;
}

And this threw me error: Uncaught ReferenceError: CssModules is not defined ONLY for the Map component. If I strip the import of import of the map component, all works well.

[akanix42]

I've fixed the import issue - you can use it with or without a semicolon. This is in nathantreid:css-modules@1.0.0-beta.3. FYI, you can write the import as either "import styles ..." or "import * as styles ...". I just used "* as styles" in my examples.

Now on to the big issue.. looks like this one comes down to changes in Meteor's JavaScript bundling in 1.3. The plugin is restricted to outputting the CssModules js file on the mss file that will be loaded soonest. If you have a JSX file with a lower alphabetical name, it will load first.

I'll have to see if there's a way around this; in the meantime a workaround is to create an empty placeholder.mss in client/lib. That should ensure the CssModules variable gets loaded before your code.

[akanix42]

I've figured out how to do it properly in Meteor 1.3, it's actually quite a bit nicer! I should have a new release out for it tomorrow.

[dagatsoin]

Nice to hear! Thx you:)

Envoyé de mon iPhone

Le 4 févr. 2016 à 05:18, nathantreid notifications@github.com a écrit :

I've figured out how to do it properly in Meteor 1.3, it's actually quite a bit nicer! I should have a new release out for it tomorrow.

— Reply to this email directly or view it on GitHub.

[dagatsoin]

Do you think it is possible to use sass files with https://github.com/postcss/postcss-scss ? My goal is too use React Toolbox which use Scss files. Since React Toolbox used css modules, I think it is the only reliable way to use Materiial Design UI implementation in Meteor. (I have also tried material-ui react components they sticks on inline-style-only and it is not customizable at all.)

So I don't know the effort to configure scss files import with postcc but Meteor could finally benefit to a complete UI pack with React Toolbox. Something which really miss right now.

If you give me a good starter point (some doc links) to test plugins compatibility I can give it a try tomorrow.

[akanix42]

nathantreid:css-modules@1.0.0-beta.5 handles imports properly. I've switched over to using the modules system for imports, so I'm letting Meteor handle the JS/JSX compilation again - you'll need to run

meteor add ecmascript

Also the import * as styles syntax is no longer correct. The "styles" property is exported as both default and "styles"; so you can use either of the following:

import styles from './styles.mss';
import { styles } from './styles.mss'

[akanix42]

The postcss-scss plugin is only for applying postcss transformations to scss files. It won't compile it, so any sass-specific syntax (like mixins, which React Toolbox uses) won't be applied.

I'll give it some more thought, but since Meteor doesn't have a way to chain build plugins, I think these are your 2 main options:

1. create a fork of my plugin that handles .scss instead of .mss files and parses the scss before handing it off to the css modules parser
2. parse the scss outside of Meteor (for example using Gulp) and output it as .mss files so that my plugin can take it from there

Looks like React-Toolbox expect the scss files to be available without the extension (they are importing './style' instead of './style.scss') so that would also need adjusted in the build plugin.

[dagatsoin]

ok, after diving into your code, postcss concept and meteor build. I begin to believe that putting effort on sass will not be efficient for my project.

So I think I will rewrite the React Toolbox component after component when I need them and use your package with PostCSS to build my workflow.

Also I wonder why using the JS Api of PostCSS in your package instead the Meteor PostCSS package? (https://github.com/juliancwirko/meteor-postcss/tree/meteor-1.3-in-progress#usage) Because we can"t chain package? Just curious.

[akanix42]

juliancwirko:postcss is an awesome package, but it has a different use case; it is meant to be a CSS post-processor, whereas my package is intended as a compiler for CSS modules. That means I have to wrap the PostCSS processing inside of some code that extracts the module information and makes it available to JavaScript, whereas Julian's plugin runs during the CSS minification/bundling step after all compilation is complete. It is not possible for my plugin to call out to his, although they could be used in the same project as his would run after mine; his would run on all CSS files that were produced during compilation, whether from .mss, .scss, .less, or just standard .css files.

[dagatsoin]

Ok, make sense.

During my code exploration I saw archMatching: 'web' Does it mean it is not usable with Cordova? I could not test yes because a bug prevents Meteor beta.1.3.8 to compile for Cordova.

[akanix42]

That makes it not run on the server; it will run on both "web" architectures (browser and cordova). https://meteor-guide.readthedocs.org/en/latest/packages/#architectures

[mmintel]

@dagatsoin I was facing the exact same problem like you and encountered every single bug you also got. Did you find a solution until now?

[dagatsoin]

@mmintel no I didn't. I think we should wait until Meteor get hits the 1.3.1 release which comes with .meteorignore and (maybe) easier runtime files import. For my part, I switched on webpack:webpack which do the job at the cost of adding new layer in my production pipeline.

[akanix42]

@dagatsoin, @mmintel: My just-released latest beta (nathantreid:css-modules@1.0.0-beta.9) adds support for react toolbox / SASS compilation. As long as you're not on a Mac, you can use it now through Atmosphere (Meteor's OS X build machines have been uncooperative for the past hour or so, so Mac users currently have to clone the repository).

I've put up a Meteor version of React Toolbox's example app; the README also contains instructions on how to integrate React Toolbox into an app of your own.

I'll close this issue once I'm able to publish the beta for OS X.

[ramijarrar]

@nathantreid Were you able to publish this to OS X, or is the recommendation still to clone the repository?

[akanix42]

@ramijarrar Unfortunately, i'm still unable to publish for OS X, so cloning the repository is the only way to go. I have an open issue with Meteor (meteor/meteor#6567) but there has been no activity on the issue so far.

[akanix42]

1.0.1 just published for OS X, so i'm closing this now.