There's an @extend spec proposal in the works by @tabatkins. I'm not sure what the status is, but it's the best documented @extend implementation I've seen so far. It might be neat to support it rather than creating yet another implementation. Thanks!

example

.error {
  color: red;
  border: thick dotted red;
}

.serious-error {
  @extend .error;
  font-weight: bold;
}

links

• @extend spec proposal
• @extend discussion

  "eslintConfig": {
    "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module"
    },
    "env": {
      "es6": true
    },
    "extends": "eslint:recommended"
  },

replace with

  "eslintConfig": {
    "parserOptions": {
      "sourceType": "module"
    },
    "env": {
      "es6": true
    },
    "extends": "eslint:recommended"
  },

1. Will be better for performance to process only two properties (animation, animation-frame) instead of all.
2. Splitting in separate module will let to remove some stuff from local-by-default and this plugins and just use new module without ugly _colon_local stuff.

/cc @sullenor @geelen

Ref madyankin/postcss-modules#50

Ref css-modules/css-modules#75

Using private _autoprefixerDisabled property is very dangerous. Good code should not be based on private API.

/cc @geelen

This module throws some very hard-to-decipher error messages, such as:

composition is only allowed when selector is single :local class name not in ":local(.input):local(.thin-size)"
or
composition is only allowed when selector is single :local class name not in XXX, YYY is weird

I think there are some commas missing, which make all of this very hard to understand. I mean, I get the 'general' idea, but what am I (as a developer) supposed to do about it? and what does the "... is weird" mean?

Also, https://github.com/css-modules/postcss-modules-scope/blob/42708f1298fa0e7515d5006d7c00d1f07cef9e9e/src/index.js#L23 says in the comment that "// 'id' is not possible, because you can't compose ids". I think that's a better error message for that case than the current one.

Hello,
Can you explain whether or not all of this is handled before JS has fired if one is trying to achieve diff-less server-side rendering? It's been brought to my attention that screen flickering could be an issue if you're not concerned only for client side generation. Can you speak to that please? Thank you.

It looks like the ability to compose a global class landed in d476194, but it's not currently documented anywhere. Is this intended to be a public feature? It's super useful for interop with third-party libraries.

Using the replaceDeclarations feature of postcss-nested-ancestors you can reference parent selectors of nested blocks not only in your selectors themselves, but also in your declarations. For example:

.cell {
  padding: .5em;

  &--id {
    composes: ^&; /* replaced with `composes: .cell;` */
    font-weight: 500;
  }

  &--value {
    composes: ^&; /* replaced with `composes: .cell;` */
    font-style: italic;
  }
}

This would enable pretty straight forward BEM-ish composition, where the user only needs to add a modifier class (.cell--id) and the base class (.cell) gets applied automatically.

However, the replacement composes declaration is invalid, since the class name is prefixed with a dot.

Build Error (CSSModules) in foo.css:27:5
postcss-modules-scope: referenced class name ".cell" in composes not found

I could write a postcss plugin that removes the leading dots automatically or adds an unclass(^&) function or something like that, but this seems like a rather simple change that could be made in this plugin, possibly behind a flag.

Currently child selectors aren't picked up properly. Take this input file for example:

.simple {
  color: red;
}

.simple h1 {
  color: blue;
}

It yields:

._child_selectors__simple {
  color: red;
}

:local(.simple) h1 {
  color: blue;
}

When I'd expect the result to be:

._child_selectors__simple {
  color: red;
}

._child_selectors__simple h1 {
  color: blue;
}

Hopefully I'll get a chance to send through a PR sometime soon but if not here's a heads up :) Thanks!

Need a nice default (BEM-ish), but also the ability to override this somehow. It could be used for minification/obfuscation at this level (although alternatively a separate obfuscator could run over the generated CSS as a final step.

.global,:local(.exportMe) { } is a right pain. What if you use extends: in there? It makes no sense for .global.

Gonna stick with just grepping the selector for :local(.something) and doing that until PostCSS gets its proper CSS selector parser.

Ref css-modules/css-modules#41

The ISC license explicitly requires to attach the full license text to the code or any distribution. Without this the license isn't fulfilled by the project itself and thus invalid.

The npm package as it’s published and distributed, do not comply with this, as it doesn’t contain the license file. Effectively, without the full license text they are proprietary code and cannot be used by anyone who needs to comply with the licenses.

Can you please publish a patch with it?

In both documentation and in the code.

Scoped css, a wonderful idea.

Someone have the same way to make scoped css work (https://github.com/maxguzenski/react-easy-style), but not good to generate class names when running.
Now css modules fix this, we can make the class names as static strings before running.

Could we add an option to make the unique string shorter and un-readable ?
maybe used in production

css-modules/icss#12

Tested with most recent version today.

If you define both a class and keyframes with the same name, it is impossible to distinguish them. This is problematic for my use case, as I am able to remove unused classes but not keyframes.

This will require a major version bump, as it will affect users on the 4.x path using any 4.x plugins.

css-modules/postcss-modules-extract-imports#138

Adds composition files to webpack via this.addDependency() (postcss-loader) enabling watch mode for them

.compose {
   composes: x from './path/to/file.css';
}

postcss([ compose() ]).process(css, options)
  .then((result) => {
      result.messages // [ { type: 'dependency', file: 'path/to/file' } , ...]
  })

You should set children by append() or any other inset methods (of course, except push()).

Here we have same problem as with push(): PostCSS will not fix issues for you as result it is easy to broke AST.

In result we have issue in other PostCSS plugins like this: cssnano/cssnano#163 (comment)