elm-css - npm Package Compare versions

Comparing version 0.5.1 to 0.6.0

elm-css.js

@@ -16,2 +16,3 @@ #!/usr/bin/env node
   .option('-r, --root [projectDir]', '(optional) root directory of the project', process.cwd())
+  .option('-e, --pathToMake [pathToMake]', '(optional) path to elm-make')
   .action(function(src) {
@@ -33,3 +34,4 @@ sourcePath = src;
   program.module,
-  program.port
+  program.port,
+  program.pathToMake
 ).then(function (results) {
@@ -36,0 +38,0 @@ console.log(chalk.green('Successfully generated output! The following css files were created: '));

elm-package.json

 {
-    "version": "3.1.1",
+    "version": "5.0.0",
     "summary": "CSS Preprocessor for Elm",
@@ -4,0 +4,0 @@ "repository": "https://github.com/rtfeldman/elm-css.git",

examples/elm-package.json

@@ -12,3 +12,3 @@ {
     "dependencies": {
-        "elm-lang/core": "4.0.0 <= v <= 4.0.0",
+        "elm-lang/core": "4.0.0 <= v <= 5.0.0",
         "elm-lang/html": "1.0.0 <= v < 2.0.0",
@@ -18,3 +18,3 @@ "rtfeldman/elm-css-helpers": "2.0.0 <= v < 3.0.0",
     },
-    "elm-version": "0.17.0 <= v <= 0.17.0"
+    "elm-version": "0.17.0 <= v <= 0.18.0"
 }

index.js

@@ -36,3 +36,3 @@ var fs = require("fs");
 // elmModuleName is optional, and is by default inferred based on the filename.
-module.exports = function(projectDir, stylesheetsPath, outputDir, stylesheetsModule, stylesheetsPort) {
+module.exports = function(projectDir, stylesheetsPath, outputDir, stylesheetsModule, stylesheetsPort, pathToMake) {
 
@@ -49,3 +49,4 @@ var originalWorkingDir = process.cwd();
         stylesheetsModule || "Stylesheets",
-        stylesheetsPort || "files"
+        stylesheetsPort || "files",
+        pathToMake
       );
@@ -75,10 +76,10 @@ })
 
-function generateCssFiles(stylesheetsPath, emitterDest, outputDir, stylesheetsModule, stylesheetsPort) {
-  return emit(stylesheetsPath, emitterDest, stylesheetsModule, stylesheetsPort)
+function generateCssFiles(stylesheetsPath, emitterDest, outputDir, stylesheetsModule, stylesheetsPort, pathToMake) {
+  return emit(stylesheetsPath, emitterDest, stylesheetsModule, stylesheetsPort, pathToMake)
     .then(writeResults(outputDir));
 }
 
-function emit(src, dest, stylesheetsModule, stylesheetsPort) {
+function emit(src, dest, stylesheetsModule, stylesheetsPort, pathToMake) {
     // Compile the temporary file.
-  return compileEmitter(src, {output: dest, yes: true})
+  return compileEmitter(src, {output: dest, yes: true, pathToMake: pathToMake})
     .then(extractCssResults(dest, stylesheetsModule, stylesheetsPort));
@@ -85,0 +86,0 @@ }

package.json

 {
   "name": "elm-css",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Elm-based CSS Preprocessor",
@@ -10,6 +10,6 @@ "main": "index.js",
   "directories": {
-    "test": "test"
+    "test": "tests"
   },
   "scripts": {
-    "test": "cd test && elm-test TestRunner.elm && mocha *.js"
+    "test": "elm-test && cd tests && mocha *.js"
   },
@@ -16,0 +16,0 @@ "repository": {

readme-example/elm-package.json

@@ -12,3 +12,3 @@ {
     "dependencies": {
-        "elm-lang/core": "4.0.0 <= v <= 4.0.0",
+        "elm-lang/core": "4.0.0 <= v <= 5.0.0",
         "elm-lang/html": "1.0.0 <= v < 2.0.0",
@@ -18,3 +18,3 @@ "rtfeldman/elm-css-helpers": "2.0.0 <= v < 3.0.0",
     },
-    "elm-version": "0.17.0 <= v <= 0.17.0"
+    "elm-version": "0.17.0 <= v <= 0.18.0"
 }

README.md

 # elm-css [![Version](https://img.shields.io/npm/v/elm-css.svg)](https://www.npmjs.com/package/elm-css) [![Travis build Status](https://travis-ci.org/rtfeldman/elm-css.svg?branch=master)](http://travis-ci.org/rtfeldman/elm-css) [![AppVeyor build status](https://ci.appveyor.com/api/projects/status/0j7x0mpggmtu6mms/branch/master?svg=true)](https://ci.appveyor.com/project/rtfeldman/elm-css/branch/master)
 
-A CSS preprocessor where you write [Elm](http://elm-lang.org) code and get .css files. Inspired by the excellent [Sass](http://sass-lang.com/), [Stylus](http://stylus-lang.com/), and [CSS Modules](http://glenmaddern.com/articles/css-modules).
+`elm-css` lets you define CSS in Elm, like so:
 
-(This is a BETA release, so please be careful! The [documentation](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest/) in particular
-is very much a work in progress.)
-
-Try it out! (make sure you already have [elm](http://elm-lang.org) installed, e.g. with `npm install -g elm`)
-
-```
-$ npm install -g elm-css
-$ git clone https://github.com/rtfeldman/elm-css.git
-$ cd elm-css/examples
-$ elm-css src/Stylesheets.elm
-$ less homepage.css
-```
-
-Isn't it a pain when you want to rename a CSS class or ID, but can't be sure that the rename wouldn't break things?
-Or when it turns out the reason something wasn't displaying as expected was that you had a typo in the class name?
-How about when you load multiple stylesheets onto the same page and some of the
-class names overlap?
-
-Wouldn't it be sweet if those problems went away?
-
-`elm-css` lets you:
-
-1. Write Elm code and get out a .css file
-2. Share code between your render logic and your CSS stylesheets (including any inline styles, which you can also write in elm-css), so you can easily keep identifier names and URLs synchronized
-3. Use union types instead of strings for class names, IDs, and animation names, so typos will result in compile errors instead of bugs
-4. Automatically namespace all your classes, ids, and animation names to avoid name conflicts between stylesheets.
-5. Assemble your stylesheets by writing normal Elm code, so you have access to your full suite of programming tools. `elm-css` doesn't need a special notion of "parameterized mixins" because you can already write arbitrary Elm functions...and not just to parameterize mixins, but to parameterize anything!
-
-
-### Examples
-
-There are a few examples to check out!
-
-- [json-to-elm](https://github.com/eeue56/json-to-elm) which can see be seen live [here](https://noredink.github.io/json-to-elm)
-- the examples folder contains a working project with a readme
-- the example below:
-
-
-Here's how to use `elm-css` in your projects:
-
-#### Generating CSS
-
-You will need to install both the node module and the Elm library:
-
-    npm install -g elm-css
-    elm package install rtfeldman/elm-css
-
-Then define CSS in Elm:
-
 ```elm
@@ -102,8 +53,43 @@ module MyCss exposing (..)
 
-The above is vanilla Elm code. `NavBar` and `Page` are backed by union types, so
-if they get out of sync with your view code, you'll get a nice build error.
-`$`, `#`, `~`, and the like are custom operators.
+*Note:* `(.)` defines a class selector and `(#)` defines an ID selector.
 
-To generate CSS, you'll need a special module with a port for elm-css to access:
+Here's what you can do with this code:
 
+* You can *generate a `.css` file from it.*
+* You can *use it to generate type-checked inline styles.*
+* You can *share `NavBar` and `Page`* with your Elm view code, so your classes and IDs can never get out of sync due to a typo or refactor.
+* You can *move this code into your view file* and have your styles live side-by-side with your view functions themselves.
+
+`elm-css` works hard to prevent invalid styles from being generated; for example,
+if you write `color "blah"` or `margin (rgb 1 2 3)`, you'll get a type mismatch. If you write `(rgb 3000 0 -3)` you'll get a build-time validation error (RGB values must be between 0 and 255) if you try to compile it to a stylesheet.
+
+`elm-css` draws inspiration from the excellent [Sass](http://sass-lang.com/), [Stylus](http://stylus-lang.com/), and [CSS Modules](http://glenmaddern.com/articles/css-modules). It includes popular features like:
+
+* [Mixins](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Css#mixin)
+* [namespaces](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Css-Namespace#namespace)
+* [nested media queries](https://davidwalsh.name/write-media-queries-sass) (and nested selectors in general, like how [Sass](http://sass-lang.com/) does them)
+
+There are two popular approaches to use it.
+
+#### Approach 1: Inline Styles
+
+One way to use elm-css is for inline styles, using the `asPairs` function:
+
+    styles =
+        Css.asPairs >> Html.Attributes.style
+
+    button [ styles [ position absolute, left (px 5) ] ]
+        [ text "Whee!" ]
+
+#### Approach 2: Generating CSS files
+
+You can also use elm-css as a CSS preprocessor which generates separate .css files.
+
+To do this, you will need to install both the node module and the Elm library:
+
+    npm install -g elm-css
+    elm package install rtfeldman/elm-css
+
+Then you'll need a special module with a port for `elm-css` to access:
+
 ```elm
@@ -168,4 +154,24 @@ port module Stylesheets exposing (..)
 
-#### Coupling elm-css and Elm code
+Try it out! (make sure you already have [elm](http://elm-lang.org) installed, e.g. with `npm install -g elm`)
 
+```
+$ npm install -g elm-css
+$ git clone https://github.com/rtfeldman/elm-css.git
+$ cd elm-css/examples
+$ elm-css src/Stylesheets.elm
+$ less homepage.css
+```
+
+### Examples
+
+There are a few examples to check out!
+
+- [json-to-elm](https://github.com/eeue56/json-to-elm) which can see be seen live [here](https://noredink.github.io/json-to-elm)
+- the [examples](https://github.com/rtfeldman/elm-css/tree/master/examples) folder, which contains a working project with a README
+- the example above
+
+#### Using elm-css with Elm view code
+
+Here's how to use `elm-css` in your projects:
+
 In your Elm code, use the same union types to represent classes and ids. Then they can't get out of sync with your CSS. To do this, you'll need special versions the of `id`, `class`, and `classList` functions from `elm-html`.
@@ -194,3 +200,3 @@
         [ Html.div [ class [ MyCss.NavBar ] ] [ Html.text "this has the NavBar class" ]
-        , Html.div [ id [ MyCss.Page ] ] [ Html.text "this has the Page id" ]
+        , Html.div [ id MyCss.Page ] [ Html.text "this has the Page id" ]
         ]
@@ -200,15 +206,12 @@
 
-#### Inline elm-css
 
-You can also use elm-css for inline styles with the `asPairs` function, like so:
-
-    styles =
-        Css.asPairs >> Html.Attributes.style
-
-    button [ styles [ position absolute, left (px 5) ] ]
-        [ text "Whee!" ]
-
 ## Releases
 | Version | Notes |
 | ------- | ----- |
+| [**5.0.0**](https://github.com/rtfeldman/elm-css/tree/5.0.0) | Have `compile` accept multiple files, add more keywords.
+| [**4.0.2**](https://github.com/rtfeldman/elm-css/tree/4.0.2) | Fix for [#140](https://github.com/rtfeldman/elm-css/issues/140)
+| [**4.0.1**](https://github.com/rtfeldman/elm-css/tree/4.0.1) | Fix for [#136](https://github.com/rtfeldman/elm-css/issues/136)
+| [**4.0.0**](https://github.com/rtfeldman/elm-css/tree/4.0.0) | Fix multiple pseudo-selectors, add cursor properties.
+| [**3.1.2**](https://github.com/rtfeldman/elm-css/tree/3.1.2) | Fix extraneous space in pseudo-element output
+| [**3.1.1**](https://github.com/rtfeldman/elm-css/tree/3.1.1) | Fix missing pseudo-element implementation
 | [**3.1.0**](https://github.com/rtfeldman/elm-css/tree/3.1.0) | Fix bug where namespace was getting applied to ID selectors, add letterSpacing, h5, h6
@@ -215,0 +218,0 @@ | [**3.0.0**](https://github.com/rtfeldman/elm-css/tree/3.0.0) | Upgrade for Elm 0.17

Tutorial.md

@@ -42,3 +42,3 @@ # Tutorial
   , (.) MenuItem
-      [ fontFamily [ "Georga", "serif" ]
+      [ fontFamilies [ "Georga", "serif" ]
       , fontWeight bold
@@ -182,3 +182,3 @@ ]
 
-You can also use `with` to add classes and IDs. For example:
+You can also use `withClass` to add classes. For example:
 
@@ -190,11 +190,6 @@ ```elm
 
-      , with ((.) Large)
+      , withClass Large
           [ fontSize (px 24)
           , padding (px 30)
           ]
-
-      , with ((#) SignUp)
-          [ fontWeight bold
-          , hex "aaffbb"
-          ]
       ]
@@ -201,0 +196,0 @@ ]

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4144682

increased by0.52%

Number of package files

48

increased by2.13%

Lines of code

310

increased by11.51%

Number of lines in readme file

218

increased by1.4%

No dependency changes