https://github.com/farism/gulp-elm-css
A gulp plugin wrapping elm-css
https://github.com/farism/gulp-elm-css
Last synced: about 2 months ago
JSON representation
A gulp plugin wrapping elm-css
- Host: GitHub
- URL: https://github.com/farism/gulp-elm-css
- Owner: farism
- License: mit
- Created: 2017-08-20T16:07:38.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-08-29T02:49:48.000Z (almost 9 years ago)
- Last Synced: 2025-10-20T13:16:34.133Z (8 months ago)
- Language: JavaScript
- Size: 42 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# gulp-elm-css [](https://circleci.com/gh/farism/gulp-elm-css/tree/master)
Given an `*.elm` file, it will use [`elm-css`](https://github.com/rtfeldman/elm-css) to generate `*.css` files. A vinyl object will be emitted for each `*.css` file that is generated.
#### Usage
```js
const elmCss = require('gulp-elm-css')
gulp.src('Css.elm')
.pipe(elmCss({ module: 'Css.elm' }))
```
#### Options
```js
options = {
cwd: process.cwd() // (optional) the root directory of your elm project
module: 'Stylesheets' // (optional) name of stylesheets module
output: '' // (optional) the tmp path to output css files to
port: 'files' // (optional) name of the port from which to read CSS results
}
```
#### Example
on the elm side
```elm
-- HomeCss.elm
module HomeCss exposing (..)
import Css exposing (..)
import Css.Namespace exposing (namespace)
type CssIds
= Home
css =
(stylesheet << namespace "home")
[ id Home
[ backgroundColor (hex "000000")
, color (hex "FFFFFF")
]
]
```
```elm
-- MyStyles.elm
port module MyStyles exposing (..)
import Css.File exposing (CssFileStructure, CssCompilerProgram)
import AboutCss
import HomeCss
import SharedCss
port files : CssFileStructure -> Cmd msg
fileStructure : CssFileStructure
fileStructure =
Css.File.toFileStructure
[ ( "shared.css", Css.File.compile [ SharedCss.css ] )
, ( "home.css", Css.File.compile [ HomeCss.css ] )
, ( "about.css", Css.File.compile [ AboutCss.css ] )
]
main : CssCompilerProgram
main =
Css.File.compiler files fileStructure
```
on the gulp side
```js
const elmCss = require('gulp-elm-css')
gulp.task('compile-css', () => {
return gulp.src('MyStyles.elm')
.pipe(elmCss({ module: 'MyStyles '}))
.pipe(cssnano())
.pipe(gulp.dest('build'))
})
```