ambethia / emmet-jsx-css-modules

Atom package to extend Emmet's JSX expansions to use CSS modules.

emmet-jsx-css-modules package

Atom package to extend Emmet's JSX expansions to use CSS modules.

For example: .foo will now expand to <div className={style.foo}></div> instead of <div className="foo"></div>.

TODO

• Allow the style variable name to be customized via Atom's preferences.

emmet-jsx-css-modules's Issues

How to use?

Hey,

I installed this and emmet plugin, and when I create the emmet it creates the default and no the CSS modules.

how do I enable this?

Failed to activate the emmet-jsx-css-modules package-2

This is win10
TypeError: Path must be a string. Received undefined
at assertPath (path.js:7:11)
at Object.resolve (path.js:184:7)
at Object.activate (file:///C:/Users/admin/.atom/packages/emmet-jsx-css-modules/lib/emmet-jsx-css-modules.js:13:28)
at Package.module.exports.Package.activateNow (C:\Users\admin\AppData\Local\atom\app-1.15.0\resources\app.asar\src\package.js:218:19)
at C:\Users\admin\AppData\Local\atom\app-1.15.0\resources\app.asar\src\package.js:190:32
at Package.module.exports.Package.measure (C:\Users\admin\AppData\Local\atom\app-1.15.0\resources\app.asar\src\package.js:96:15)
at C:\Users\admin\AppData\Local\atom\app-1.15.0\resources\app.asar\src\package.js:183:26
at Package.module.exports.Package.activate (C:\Users\admin\AppData\Local\atom\app-1.15.0\resources\app.asar\src\package.js:180:34)
at PackageManager.module.exports.PackageManager.activatePackage (C:\Users\admin\AppData\Local\atom\app-1.15.0\resources\app.asar\src\package-manager.js:550:34)
at C:\Users\admin\AppData\Local\atom\app-1.15.0\resources\app.asar\src\package-manager.js:531:29
at Config.module.exports.Config.transactAsync (C:\Users\admin\AppData\Local\atom\app-1.15.0\resources\app.asar\src\config.js:337:18)
at PackageManager.module.exports.PackageManager.activatePackages (C:\Users\admin\AppData\Local\atom\app-1.15.0\resources\app.asar\src\package-manager.js:526:19)
at PackageManager.module.exports.PackageManager.activate (C:\Users\admin\AppData\Local\atom\app-1.15.0\resources\app.asar\src\package-manager.js:508:46)
at C:\Users\admin\AppData\Local\atom\app-1.15.0\resources\app.asar\src\atom-environment.js:812:28

how to disable this package ?

Hi. sometimes i don't need this, can i disabled it ?
i've tried to disable and remove this tool, but it don't revert to original version of emmet for jsx like className="beautiful"

I can not install any package

[Enter steps to reproduce:]

1. ...
2. ...

Atom: 1.55.0 x64
Electron: 6.1.12
OS: Unknown Windows version
Thrown From: emmet-jsx-css-modules package 1.0.0

Stack Trace

Failed to activate the emmet-jsx-css-modules package

At path is not defined

ReferenceError: path is not defined
    at Object.activate (/packages/emmet-jsx-css-modules/lib/emmet-jsx-css-modules.js:13:23)
    at Package.activateNow (~/AppData/Local/atom/app-1.55.0/resources/app/static/<embedded>:11:3497376)
    at ~/AppData/Local/atom/app-1.55.0/resources/app/static/<embedded>:11:3496788
    at Package.measure (~/AppData/Local/atom/app-1.55.0/resources/app/static/<embedded>:11:3494366)
    at ~/AppData/Local/atom/app-1.55.0/resources/app/static/<embedded>:11:3496648
    at new Promise (<anonymous>)
    at Package.activate (~/AppData/Local/atom/app-1.55.0/resources/app/static/<embedded>:11:3496591)
    at PackageManager.activatePackage (~/AppData/Local/atom/app-1.55.0/resources/app/static/<embedded>:11:383646)
    at ~/AppData/Local/atom/app-1.55.0/resources/app/static/<embedded>:11:383262
    at Config.transactAsync (~/AppData/Local/atom/app-1.55.0/resources/app/static/<embedded>:11:332808)
    at PackageManager.activatePackages (~/AppData/Local/atom/app-1.55.0/resources/app/static/<embedded>:11:383212)
    at PackageManager.activate (~/AppData/Local/atom/app-1.55.0/resources/app/static/<embedded>:11:382762)
    at ~/AppData/Local/atom/app-1.55.0/resources/app/static/<embedded>:1:758818
    at async Promise.all (index 0)
    at AtomEnvironment.startEditorWindow (~/AppData/Local/atom/app-1.55.0/resources/app/static/<embedded>:1:759303)

Commands

Non-Core Packages

emmet undefined 
emmet-jsx-css-modules 1.0.0 
emmet-jsx-props 1.4.0 

Wrong expansion depending on order of attributes

When using the module for trivial expansions, it works correctly.
E.g: p#foo.bar expands to

<p id="foo" className={style.bar}></p>

When used for not-so-trivial expansions, the property closing breaks.
Examples:
p.bar#foo expands to

<p className={style.bar" id="foo}></p>

p#foo.bar[name=bas] expands to

<p id="foo" className={style.bar" name="bas}></p>

how to use this package？

how to use this package？why i can’t used?

Failed to activate the emmet-jsx-css-modules package

[Enter steps to reproduce below:]

1. ...
2. ...

Atom Version: 1.9.0-beta2
System: Mac OS X 10.11.6
Thrown From: emmet-jsx-css-modules package, v0.2.0

Stack Trace

Failed to activate the emmet-jsx-css-modules package

At path.resolve is not a function

TypeError: path.resolve is not a function
    at Object.activate (/Users/lucas/.atom/packages/emmet-jsx-css-modules/lib/emmet-jsx-css-modules.js:7:28)
    at Package.module.exports.Package.activateNow (/Applications/Atom Beta.app/Contents/Resources/app.asar/src/package.js:183:20)
    at /Applications/Atom Beta.app/Contents/Resources/app.asar/src/package.js:156:32
    at Package.module.exports.Package.measure (/Applications/Atom Beta.app/Contents/Resources/app.asar/src/package.js:92:15)
    at /Applications/Atom Beta.app/Contents/Resources/app.asar/src/package.js:149:26
    at Package.module.exports.Package.activate (/Applications/Atom Beta.app/Contents/Resources/app.asar/src/package.js:146:34)
    at PackageManager.module.exports.PackageManager.activatePackage (/Applications/Atom Beta.app/Contents/Resources/app.asar/src/package-manager.js:538:21)
    at /Applications/Atom Beta.app/Contents/Resources/app.asar/node_modules/settings-view/lib/package-manager.js:452:29
    at exit (/Applications/Atom Beta.app/Contents/Resources/app.asar/node_modules/settings-view/lib/package-manager.js:73:16)
    at triggerExitCallback (/Applications/Atom Beta.app/Contents/Resources/app.asar/src/buffered-process.js:215:47)
    at /Applications/Atom Beta.app/Contents/Resources/app.asar/src/buffered-process.js:222:18
    at Socket.<anonymous> (/Applications/Atom Beta.app/Contents/Resources/app.asar/src/buffered-process.js:100:18)
    at emitOne (events.js:95:20)
    at Socket.emit (events.js:182:7)
    at Pipe._onclose (net.js:477:12)

Commands

  2x -2:55.7.0 core:save (atom-text-editor.editor.is-focused)
     -1:54.9.0 snippets:next-tab-stop (atom-text-editor.editor.is-focused)
     -1:54.9.0 snippets:expand (atom-text-editor.editor.is-focused)
     -1:54.9.0 editor:indent (atom-text-editor.editor.is-focused)
     -1:54.7.0 snippets:next-tab-stop (atom-text-editor.editor.is-focused)
     -1:54.7.0 snippets:expand (atom-text-editor.editor.is-focused)
     -1:54.7.0 editor:indent (atom-text-editor.editor.is-focused)
     -1:54.2.0 core:backspace (atom-text-editor.editor.is-focused)
     -1:37.7.0 snippets:next-tab-stop (atom-text-editor.editor.is-focused)
     -1:37.7.0 snippets:expand (atom-text-editor.editor.is-focused)
     -1:37.7.0 editor:indent (atom-text-editor.editor.is-focused)
  2x -1:37 core:backspace (atom-text-editor.editor.is-focused)
     -1:34.8.0 core:save (atom-text-editor.editor.is-focused)
     -1:01.1.0 settings-view:open (atom-text-editor.editor.is-focused)
 10x -0:58.7.0 core:backspace (atom-text-editor.editor.mini.is-focused)
  2x -0:54.8.0 core:confirm (atom-text-editor.editor.mini.is-focused)

Config

{
  "core": {
    "themes": [
      "seti-ui",
      "seti-syntax"
    ]
  }
}

Installed Packages

# User
advanced-open-file, v0.16.3 (active)
atom-beautify, v0.29.9 (active)
emmet, v2.4.3 (active)
emmet-jsx-css-modules, v0.2.0 (inactive)
markdown-image-helper, v1.0.4 (active)
markdown-themeable-pdf, v1.1.1 (active)
pdf-view, v0.50.0 (active)
pigments, v0.30.0 (active)
seti-syntax, v1.0.1 (active)
seti-ui, v1.3.1 (active)
tidy-markdown, v3.0.1 (active)
yeti-syntax, v0.1.2 (inactive)
yeti-ui, v0.1.6 (inactive)
atom-dark-syntax, v0.27.0 (inactive)
atom-dark-ui, v0.51.0 (inactive)
atom-light-syntax, v0.28.0 (inactive)
atom-light-ui, v0.43.0 (inactive)
base16-tomorrow-dark-theme, v1.1.0 (inactive)
base16-tomorrow-light-theme, v1.1.1 (inactive)
one-dark-ui, v1.3.2 (inactive)
one-light-ui, v1.3.2 (inactive)
one-dark-syntax, v1.2.0 (inactive)
one-light-syntax, v1.2.0 (inactive)
solarized-dark-syntax, v1.0.2 (inactive)
solarized-light-syntax, v1.0.2 (inactive)
about, v1.5.2 (active)
archive-view, v0.61.1 (active)
autocomplete-atom-api, v0.10.0 (active)
autocomplete-css, v0.11.1 (active)
autocomplete-html, v0.7.2 (active)
autocomplete-plus, v2.31.0 (active)
autocomplete-snippets, v1.11.0 (active)
autoflow, v0.27.0 (inactive)
autosave, v0.23.1 (active)
background-tips, v0.26.0 (active)
bookmarks, v0.41.0 (active)
bracket-matcher, v0.82.1 (active)
command-palette, v0.38.0 (active)
deprecation-cop, v0.54.1 (active)
dev-live-reload, v0.47.0 (active)
encoding-selector, v0.22.0 (active)
exception-reporting, v0.38.1 (active)
fuzzy-finder, v1.3.0 (active)
git-diff, v1.1.0 (active)
find-and-replace, v0.198.0 (inactive)
go-to-line, v0.31.0 (inactive)
grammar-selector, v0.48.1 (active)
image-view, v0.58.0 (active)
incompatible-packages, v0.26.1 (active)
keybinding-resolver, v0.35.0 (active)
line-ending-selector, v0.5.0 (active)
link, v0.31.1 (inactive)
markdown-preview, v0.158.0 (active)
metrics, v0.53.1 (active)
notifications, v0.64.1 (active)
open-on-github, v1.2.0 (inactive)
package-generator, v1.0.0 (inactive)
settings-view, v0.238.0 (active)
snippets, v1.0.2 (active)
spell-check, v0.67.1 (active)
status-bar, v1.4.0 (active)
styleguide, v0.46.0 (active)
symbols-view, v0.113.0 (inactive)
tabs, v0.98.0 (active)
timecop, v0.33.1 (active)
tree-view, v0.208.0 (active)
update-package-dependencies, v0.10.0 (active)
welcome, v0.34.0 (active)
whitespace, v0.32.2 (active)
wrap-guide, v0.38.1 (active)
language-c, v0.52.1 (active)
language-clojure, v0.21.0 (active)
language-coffee-script, v0.47.0 (active)
language-csharp, v0.12.1 (active)
language-css, v0.36.2 (active)
language-gfm, v0.86.0 (active)
language-git, v0.13.0 (active)
language-go, v0.42.0 (active)
language-html, v0.44.1 (active)
language-hyperlink, v0.16.0 (active)
language-java, v0.22.0 (active)
language-javascript, v0.119.0 (active)
language-json, v0.18.0 (active)
language-less, v0.29.3 (active)
language-make, v0.22.2 (active)
language-mustache, v0.13.0 (active)
language-objective-c, v0.15.1 (active)
language-perl, v0.35.0 (active)
language-php, v0.37.0 (active)
language-property-list, v0.8.0 (active)
language-python, v0.45.0 (active)
language-ruby, v0.68.5 (active)
language-ruby-on-rails, v0.25.0 (active)
language-sass, v0.52.0 (active)
language-shellscript, v0.22.3 (active)
language-source, v0.9.0 (active)
language-sql, v0.21.1 (active)
language-text, v0.7.1 (active)
language-todo, v0.28.0 (active)
language-toml, v0.18.0 (active)
language-xml, v0.34.8 (active)
language-yaml, v0.26.0 (active)

# Dev
No dev packages

Works only one level deep

Seems only to work one level deep.

ul.list>li.item*4

turns into

<ul className={style.list}>
          <li className='item'></li>
          <li className='item'></li>
          <li className='item'></li>
          <li className='item'></li>
</ul>

RegEx doesn't check for single quotes

If you have a custom syntax config in emmet for double quotes to single quotes the regex check doesn't replace it like you would expect.

This should fix it I believe:

/className="(.*?)"/

to

/className=[",'](.*?)[",']/