Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

export classes (include :global) #258

Closed
DragorWW opened this issue Apr 13, 2016 · 11 comments · Fixed by #1069
Closed

export classes (include :global) #258

DragorWW opened this issue Apr 13, 2016 · 11 comments · Fixed by #1069

Comments

@DragorWW
Copy link

if not use css-module, how to get class from file ?

//style.css
.block {width:1 00%;}
.block_mod {color: red;}
//index.es6
import slyle form './style.css';
//style = [
//  'block',
//  'block_mod'
//];
@psimyn
Copy link

psimyn commented Apr 18, 2016

not sure that you can if not using css modules. Using modules you can print the key names (NB: this also seems to print IDs as well as styles.)

// style.css
.block:local {width:1 00%;}
.block_mod:local {color: red;}
// index.es6
import style form './style.css';
console.log(Object.keys(style));
// prints:
// [ 'block', 'block_mod' ];

What are you trying to do?

@DragorWW
Copy link
Author

@psimyn in my project server side rendering html and i can't use css module on server.
But i want check class in js by css;

expamle

//style.css
.block {width:100%;}
.block_size_big {color: red;}
//index.es6
import slyle form './style.css';

var classList = new ClassList(style);

classList.mod('size','big'); // ok
classList.mod('size','normal'); // error this mod not found in styles

@psimyn
Copy link

psimyn commented Apr 19, 2016

You could do that by checking for each of them. Not sure what classList.mod is, so slightly different example:

// index.es6
import style form './style.css';

var classesYouNeed = ['block_size--big', 'block_size--normal'];

classesYouNeed.forEach(className => {
  if (!styles[className]) throw new Error(className + ' not found in styles');
})

@DragorWW
Copy link
Author

main idea write class names only css and check by this my code. And do not modify the css using :local

@psimyn
Copy link

psimyn commented Apr 19, 2016

you don't need :local if you have modules enabled in webpack.config. Should be able to check the same way I mentioned.

Does this help?

@ciceropablo
Copy link

@DragorWW, how do you resolve this? Are you using CSS Modules option or another thing?

@alexander-akait
Copy link
Member

Sorry for delay, feel free to PR, it is feature

@alexander-akait
Copy link
Member

Done in upstream css-modules/postcss-modules-scope#21

@alexander-akait
Copy link
Member

Need update schema for that

@david-zw-liu
Copy link

Need update schema for that

Hi @evilebottnawi @DragorWW

Shall I create PR directly or create a new issue to describe?

@alexander-akait
Copy link
Member

Feel free to send a PR directly

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants