question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Prettier shouldn't convert exported variable names to lowercase in scss

See original GitHub issue

Prettier 1.11.1 Playground link

--parser scss

Input:

:export {
  myColor: red;
}

Output:

:export {
  mycolor: red;
}

Expected behavior: Exported variable names shouldn’t be lowercased (or changed in any way). We’re using css-modules with webpack and the scss variables are required by jsx files as

import { myColor } from './component.scss';

Changing the name of the exported variable will break the import in the jsx file.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:14 (9 by maintainers)

github_iconTop GitHub Comments

3reactions
dfdeagle47commented, Mar 6, 2018

We have some variables that must be shared between the scss file and the jsx file. I guess our use case is pretty specific, and it might not affect a lot of people, but I think prettier should only be concerned with formatting and shouldn’t make changes that might break the code.

1reaction
duailibecommented, May 17, 2018

@thedamon You can try the playground (https://prettier.io/playground) which uses the latest release (1.12.1) to see if the issue still affects you.

Read more comments on GitHub >

github_iconTop Results From Across the Web

SASS convert a named color to lowercase
I tried to get a color name from a SCSS map, convert this color to lowercase and use it to generate a class...
Read more >
Prettier 1.19: Long awaited Vue option, TypeScript 3.7 and ...
This release adds the long awaited --vue-indent-script-and-style option, support for TypeScript 3.7 and some cutting edge JavaScript syntax.
Read more >
Sass Guidelines
Regarding variables, functions and mixins, we stick to something very CSS-y: lowercase hyphen-delimited, and above all meaningful. $vertical-rhythm-baseline: 1.
Read more >
Convert string to Title Case with JavaScript
Since css doesn't modify the source content, the effect is that the lowercase rule is removed (leaving the source content in all caps)...
Read more >
Storing the information you need — Variables - MDN Web Docs
An aside on variable naming rules ... You can call a variable pretty much anything you like, but there are limitations. Generally, you...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found