https://github.com/reubn/dragonfruit
Syntactic Sugar Over Namespaced CSS
https://github.com/reubn/dragonfruit
css css-modules hacktoberfest javascript webpack webpack-loader
Last synced: 23 days ago
JSON representation
Syntactic Sugar Over Namespaced CSS
- Host: GitHub
- URL: https://github.com/reubn/dragonfruit
- Owner: reubn
- Created: 2015-11-09T11:42:28.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2022-04-20T09:04:26.000Z (almost 4 years ago)
- Last Synced: 2025-02-17T10:37:55.045Z (11 months ago)
- Topics: css, css-modules, hacktoberfest, javascript, webpack, webpack-loader
- Language: JavaScript
- Homepage: https://github.com/reubn/dragonfruit
- Size: 11.7 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# dragonfruit [](https://travis-ci.org/reubn/dragonfruit) [](https://www.npmjs.com/package/dragonfruit) [](https://github.com/reubn/dragonfruit/blob/master/package.json) [](https://github.com/reubn/dragonfruit/blob/master/package.json)
Webpack Loader for Syntactic Sugar Over Namespaced CSS
# Installation
`npm install dragonfruit --save-dev`
## e.g.
### CSS
```css
.datepicker
{
display: block;
color: black;
}
```
### JS
```javascript
var React = require("react");
var styles = require("./datepicker.css");
module.exports = React.createClass({
render: function() {
return
// This ^^ will contain a random namespaced hash that corresponds with the css class ".datepicker"
}
});
```
### __Would Be Transformed To__
```css
.kg64jk3l
{
display: block;
color: black;
}
```
```javascript
var React = require("react");
var styles = require("./datepicker.css");
module.exports = React.createClass({
render: function() {
return
}
});
```
# Usage
In your `webpack.config.js`:
```javascript
module.exports = {
...
module: {
loaders: [
{test: /\.css$/, loader: "dragonfruit!style!css?modules=true"}
]
}
...
};
```
From API:
Any Strings, Objects, Functions, Arrays, Nested Arrays, etc. of `classNames`
## e.g.
```javascript
var styles = require("./datepicker.css");
styles("day") -> "hr486_eio"
styles(["day"]) -> "hr486_eio"
styles([["day"]]) -> "hr486_eio"
styles({"day":true}) -> "hr486_eio"
styles(function(classNamesAvailable){return "day"}) -> "hr486_eio"
styles(function(classNamesAvailable){return [{"day":true}]}) -> "hr486_eio"
styles("day week") -> "hr486_eio iooi676_5hj"
styles("day", "week") -> "hr486_eio iooi676_5hj"
styles(["day", "week"]) -> "hr486_eio iooi676_5hj"
styles([["day",[[, "week"]]]]) -> "hr486_eio iooi676_5hj"
styles({"day":true, "week":true, month:false}) -> "hr486_eio iooi676_5hj"
styles(function(classNamesAvailable){return ["day", {"week": true, month:false}]}) -> "hr486_eio iooi676_5hj"
```