Leading _ in classnames

[Diokuz]

Im struggling with postcss because it removes leading underscore character in my classnames. For example (pseudocode):

._x {
  color: red;
}

import s from './css.css';

<div className={s._x}> // undefined, {s.x} works

So, looks like it is works like that for the last three years:

postcss/lib/parser.es6

Lines 209 to 212 in d06be72

	if ( node.prop[0] === '_' || node.prop[0] === '*' ) {
	node.raws.before += node.prop[0];
	node.prop = node.prop.slice(1);
	}

But somehow it breaks only when css-loader works. When postcss-loader works – it doesnt happen)

Why you forbid leading underscores in classNames?
Or maybe all the magic happens in node.raws.before and css-loader doesnt handle it properly?

I use React webpack@2, postcss@5.2.17 css-loader@0.28.2

css-loader issue webpack-contrib/css-loader#541

[ai]

That code in parser is only for declaration.

Are you sure, that it is PostCSS, because you show this problem on CSS Modules example, where CSS Modules can do some magic with classnames.

Can you try to check AST by postcss.parse(css)?

[michael-ciniawsky]

css-loader compiles the [style] exports (e.g to camelCase) it's not a PostCSS issue, reopen in webpack-contrib/css-loader please

[Diokuz]

postcss.parse('.src⁄x___x {\n  color: red;\n}\n:export {\n  _x: src⁄x___x;\n}\n').nodes[1]

↓↓↓

Rule {
  raws: { before: '\n', between: ' ', semicolon: true, after: '\n' },
  type: 'rule',
  nodes: 
   [ Declaration {
       raws: [Object],
       type: 'decl',
       parent: [Circular],
       source: [Object],
       prop: 'x',
       value: 'src⁄x___x' } ],
  parent: 
   Root {
     raws: { semicolon: false, after: '\n' },
     type: 'root',
     nodes: [ [Object], [Circular] ],
     source: { input: [Object], start: [Object] } },
  source: 
   { start: { line: 4, column: 1 },
     input: 
      Input {
        css: '.src⁄x___x {\n  color: red;\n}\n:export {\n  _x: src⁄x___x;\n}\n',
        id: '<input css 2>' },
     end: { line: 6, column: 1 } },
  selector: ':export' }

So, props is x

[Diokuz]

After that css-loader just do that:

exports[decl.prop] = decl.value;

https://github.com/webpack-contrib/css-loader/blob/master/lib/processCss.js#L71

and I lose _

I just trying to understant what happens in postcss) Why _ lost in prop.
I understant that it is rather css-loader problem, but I cannot figure out (inside css-loader source) what is wrong.

[Diokuz]

If I print decl:

decl Declaration {
  raws: { before: '\n  _', between: ': ' },
  type: 'decl',
...

So, should it be like

exports[decl.raws.before.trim() + decl.prop] = decl.value;

?

How to get proper classname there?

[michael-ciniawsky]

This is already ICSS (:export), does ._className { color: red; } without any plugins etc also produce this issue ?

[Diokuz]

Without :export there is no prop key.

The question is: why you remove _ from prop, and what to advise css-loader maintainers? Theirs code looks logical, and decl.raws.before.trim() + decl.prop looks wired.

[ai]

@Diokuz you ask about declaration property _x: black; it about class name ._x { }. Because in first comment you show class example, but in AST show example work property.

[TrySound]

@ai css-modules plugins first converts all to icss which is looks like this

.localClass {}

turns into

:export {
  localClass: 'globalClass--hash'
}

And then loader extracts all info from this.

[TrySound]

We can concat prefixes on extracting only in one place. Nothing wrong with it.

[Diokuz]

Well, I use postcss-loader first, and it creates :export stuff. Then I use css-loader only to create js objects, but it uses postcss for that. Here is config webpack-contrib/css-loader#541

Should postcss be able to parse ICSS, or maybe that is a problem?

[TrySound]

@Diokuz I do ICSS utilities which will be used in all loaders and behave in the same way.
https://github.com/css-modules/icss-utils
So this will be fixed.

[ai]

I will close it because it is not related to PostCSS.

PostCSS keeps _ in class. PostCSS removes leading _ from declaration properties, because it is illegal symbol there.

[michael-ciniawsky]

I do ICSS utilities which will be used in all loaders and behave in the same way.

What (ノಠ益ಠ)ノ彡┻━┻ ? 🙃 😛 :D

[TrySound]

I mean css-loader, css-modules-parser, core loader

[michael-ciniawsky]

Well, I use postcss-loader first, and it creates :export stuff.

@Diokuz That's likely the issue, you can't really use css-modules with postcss-loader yet #227

@TrySound Yup, I'm already 'stalking' all the cssm repos :D

[Diokuz]

you can't really use css-modules with postcss-loader yet #227

Haha, thats funny) Thanks anyway)

PostCSS keeps _ in class. PostCSS removes leading _ from declaration properties, because it is illegal symbol there.

@ai does postcss supports ICSS syntax?

[ai]

@Diokuz of course, CSS Modules uses PostCSS to parse CSS, so PostCSS by default support it.

[Diokuz]

@ai then I still didn't get it, why it is considered as a normal behaviour to drop leading _ in classnames inside :export?

[ai]

Nope. Normal behavior is to drop _ only in property names. If you have different wrong behavior with selectors, show it with PostCSS API example (you shown selector problem only with CSS Modules, with PostCSS you shown properties behavior which is correct).