Add better examples about babel-plugin-css-modules-transform HOT 14 CLOSED

https://github.com/tone-studio/ui-patterns

Here's an example how I am using it to generate standalone modules. I'm pretty sure there's an easier way to do this.

What I'm doing:

1. `preprocessCss``
2. generateScopedName

This is the order, per definition of this plugin

"plugins": [
        ["css-modules-transform", {
          "generateScopedName": "./scripts/generate-scoped-name.js",
          "preprocessCss": "./scripts/preprocess-css.js",
          "extensions": [".css",".scss"],
          "extractCss": {
            "dir": "./lib/",
            "relativeRoot": "./src/",
            "filename": "[path]"
          }
        }]
      ]
    }

All files are then generated in the lib folder. (I adjusted the filename: See #24)

Since this plugin does not resolve dependencies I had to manually add @import statements to the css files. This also makes sure 'generateScopedName' doesn't run for every file, preventing wrong names.

After the above steps are done I run postcss-import to inline the @import statements.

I want to try to work without any extra build tool and your plugin is really helpful so far but I'm not sure if I'm over-engineering the transpile step.

from babel-plugin-css-modules-transform.

As I wrote in comment for #24 there is a bug in extractCss.filename configuration where [path] contains filename so [name] is useless. This will be fixed by #25 but I need to find a time for this.

What do you mean that this plugin does not resolve dependencies? Can you write a simple example please?

from babel-plugin-css-modules-transform.

Thx for the quick response.
What I mean is:
It does not include dependencies (by design) and it should not. This is obviously what webpack or browserify are for. But due to that, the dependencies in css files are also not included, so I had to manually add them in files.

I guess this is only an issue because of the structure I chose for that project.

It works well as it is. I was just wondering if there is a better way to make sure css files are fully resolved (include all dependencies) while the js files are simply babelified

from babel-plugin-css-modules-transform.

extractCss.filename is fixed now in 1.0.1. [path]/[name].css should work and [path] should not.

from babel-plugin-css-modules-transform.

By dependencies you mean images, etc?

from babel-plugin-css-modules-transform.

I mean required files:

• css: https://github.com/tone-studio/ui-patterns/blob/master/src/molecules/poti/index.css#L1-L2
• js : https://github.com/tone-studio/ui-patterns/blob/master/src/molecules/poti/index.js#L10-L11

Basically what extractCss does if it is a string 'combined.css' but per folder (with object notation)

from babel-plugin-css-modules-transform.

Ok I think that I understand now. Basically you want something like combined.css but for directory / entrypoint.

So for example for your molecules/poti/index.js you want index.css to contain css from poti-knob/index.css and poti-marker/index.css. Sou you have everything you need in single css file for given molecule.

Maybe we can do something like that but using some special option for extractCss so we can have 3 modes:

1. combined (global)
2. combined (for each parent their children) - NEW - this should work like 1. but will create a combined files for every child. So you will have tree where each parent node contains everything from children.
3. own css file for each javascript file importing css

from babel-plugin-css-modules-transform.

But it is tricky because babel does not follow import/require statements, it just loads all files and processes them. Webpack on the other hand follows import/require statements so it is aware about context.

from babel-plugin-css-modules-transform.

If I use postcss-import in processCss the generated names get messed up. I forgot to mention that.
So I am running that after everything is transpiled because I have to inline the imports after the names have been generated.
(I am well aware that this might not be an intended feature and fully understand if it will be rejected.)
The "2nd" (new) mode sounds perfect but it would have to support this requirement: (without the @import statements )

atoms/poti-knob/index.css

.UI\:atoms--poti-knob__knob {
  content: 'poti knob'; }

.UI\:atoms--poti-knob__indicator {
  content: 'poti knob indicator'; }

atoms/poti-marker/index.css

.UI\:atoms--poti-marker__marker {
  content: 'poti marker'; }

.UI\:atoms--poti-marker__label {
  content: 'poti marker label'; }

.UI\:atoms--poti-marker__selected {
  content: 'poti marker selected'; }

molecules/poti/index.css

@import '../../atoms/poti-marker/index.css';
@import '../../atoms/poti-knob/index.css';

.poti {/* shortened*/}

.focused {
  content: 'poti focused';
}

.knobWrapper {
  content: 'poti knobWrapper';
}

.markerIndicator {
  content: 'poti markerIndicator';
}

.UI\:atoms--poti-marker__marker {
  content: 'poti marker'; }

.UI\:atoms--poti-marker__label {
  content: 'poti marker label'; }

.UI\:atoms--poti-marker__selected {
  content: 'poti marker selected'; }

.UI\:atoms--poti-knob__knob {
  content: 'poti knob'; }

.UI\:atoms--poti-knob__indicator {
  content: 'poti knob indicator'; }

/* 
 * names above are correct (atoms--poti-knob & atoms--poti-marker)
 * names below have a different prefix (molecules--poti)
 */

.UI\:molecules--poti__poti {/* shortened*/}

.UI\:molecules--poti__focused {
  content: 'poti focused'; }

.UI\:molecules--poti__knobWrapper {
  content: 'poti knobWrapper'; }

.UI\:molecules--poti__markerIndicator {
  content: 'poti markerIndicator'; }

from babel-plugin-css-modules-transform.

Have you tried to use postcss-import as part of a prepend?

css-modules/css-modules-require-hook#58 (comment)

There is also mention about sync mode of postcss-import and it's supported by postcss-import v7.

from babel-plugin-css-modules-transform.

Because you need to resolve imports before css AST is processed.

from babel-plugin-css-modules-transform.

I've played around with various combinations. The current solution seems to work well. The only downside is having to import css files. prepend did not work for me. I might have to look into it again.

from babel-plugin-css-modules-transform.

I think we can close this issue. I don't see any simple solution for this problem and as I wrote, babel don't know about context because it does not follow imports/requires so we can't construct tree of css files.

from babel-plugin-css-modules-transform.

👍

from babel-plugin-css-modules-transform.