Skip to content

dmapper/babel-plugin-cssta-stylename

Repository files navigation

babel-plugin-cssta-stylename

Create cssta custom components out of a standalone css file.

Idea

  • Use styleName attribute to get the styles for a particular class from the css file.
  • Attributes in CSS are written using regular syntax (without @). @ gets added during the compilation. The reason to get rid of @ in css is because of the poor syntax highlighting. Also in future it makes sense to make removal of css-only attributes optional in cssta. And instead let them flow through into the underlying component.
  • Other than that, pretty much all the functionality and syntax of cssta should stay the same.

To see an example check the __tests__/__fixtures__ folder.

Installation

# babel-plugin-cssta has to be a regular dependency
# because it's being used in runtime
npm i --save babel-plugin-cssta
npm i --save-dev babel-plugin-cssta-stylename

Specify babel plugins in the following order and before any other plugins you might already have:

[
  ["babel-plugin-cssta-stylename", {
    "classAttribute": "styleName",
    "addCssHash": false,
    "extensions": [".css", ".styl"],
    "wrapInMemo": false
  }],
  "babel-plugin-cssta"
]

Options

  • classAttribute - what attribute to use for the class name. Default: "styleName".
  • addCssHash - automatically add comment with unique hash on the css import line of the .js/.jsx file with the same name and in the same directory as the css file. Useful to have it development to force trigger hot-reloading of components when changing only the css file. Default: false
  • extensions - which style imports to parse. Besides regular css, stylus preprocessor is also supported.
  • wrapInMemo - whether to wrap created styled components into React.memo(). Wrapping seems to be breaking HMR on Webpack for some reason. Default: false

Test

yarn test

License

MIT

(c) Pavel Zhukov - cray0000

About

Transform css imports into cssta template components

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published