elm-css - npm Package Compare versions

Comparing version 0.7.0-beta10 to 0.7.0-beta2

CHANGELOG.md

 ## Releases
 | Version | Notes |
 | ------- | ----- |
+| [**12.0.0**](https://github.com/rtfeldman/elm-css/tree/12.0.0) | Add Html.Styled, move Css.Elements and others into Css.Foreign, move Css.stylesheet into Css.File, rename `text` to `text_`, deprecate Css.Namespace (immediately) and Css.File (eventually)
 | [**8.1.0**](https://github.com/rtfeldman/elm-css/tree/8.1.0) | Expose some types, fix mixing bugs
@@ -5,0 +6,0 @@ | [**8.0.0**](https://github.com/rtfeldman/elm-css/tree/8.0.0) | Switch from `(#)` and `(.)` to `class` and `id`

elm-package.json

 {
-    "version": "11.2.0",
+    "version": "12.0.0",
     "summary": "CSS Preprocessor for Elm",
@@ -12,8 +12,15 @@ "repository": "https://github.com/rtfeldman/elm-css.git",
         "Css.Colors",
-        "Css.Elements",
+        "Css.Foreign",
         "Css.Media",
-        "Css.File",
-        "Css.Namespace"
+        "Html.Styled",
+        "Html.Styled.Attributes",
+        "Html.Styled.Events",
+        "Html.Styled.Keyed",
+        "Html.Styled.Lazy",
+        "DEPRECATED.Css",
+        "DEPRECATED.Css.File",
+        "DEPRECATED.Css.Namespace"
     ],
     "dependencies": {
+        "Skinney/murmur3": "2.0.4 <= v < 3.0.0",
         "elm-lang/core": "5.0.0 <= v < 6.0.0",
@@ -20,0 +27,0 @@ "elm-lang/virtual-dom": "2.0.0 <= v < 3.0.0",

examples/generated-classes/css/elm-package.json

@@ -7,7 +7,10 @@ {
     "source-directories": [
-        ".", "../../../src"
+        ".",
+        "../../../src"
     ],
     "exposed-modules": [],
     "dependencies": {
+        "Skinney/murmur3": "2.0.4 <= v < 3.0.0",
         "elm-lang/core": "5.0.0 <= v < 6.0.0",
+        "elm-lang/virtual-dom": "2.0.4 <= v < 3.0.0",
         "rtfeldman/elm-css-util": "1.0.2 <= v < 2.0.0",
@@ -14,0 +17,0 @@ "rtfeldman/hex": "1.0.0 <= v < 2.0.0"

index.js

@@ -80,3 +80,7 @@ //@flow
     return findExposedValues(
-      ["Css.File.UniqueClass", "Css.File.UniqueSvgClass", "Css.Snippet"],
+      [
+        "DEPRECATED.Css.File.UniqueClass",
+        "DEPRECATED.Css.File.UniqueSvgClass",
+        "Css.Foreign.Snippet"
+      ],
       readElmiPath,
@@ -83,0 +87,0 @@ generatedDir,

js/generate-class-modules.js

@@ -28,3 +28,3 @@ // @flow
   const functionCall = isSvg
-    ? 'Html.Attributes.attribute "class"'
+    ? 'Html.attribute "class"'
     : "Html.Attributes.class";
@@ -45,3 +45,3 @@
 function isUniqueSvgClass(signature) {
-  return signature === "Css.File.UniqueSvgClass";
+  return signature === "DEPRECATED.Css.File.UniqueSvgClass";
 }
@@ -53,3 +53,3 @@
       return (
-        value.signature === "Css.File.UniqueClass" ||
+        value.signature === "DEPRECATED.Css.File.UniqueClass" ||
         isUniqueSvgClass(value.signature)
@@ -56,0 +56,0 @@ );

js/generate-main.js

@@ -33,3 +33,9 @@ //@flow
 function generateMain(modules /*: Array<ModuleDeclaration> */) {
-  const otherModules = ["Css", "Css.File", "Platform", "Json.Decode"]; // Json.Decode is needed to avoid a bug in Elm 0.18 where port modules need it to be imported; may be able to remove that import in 0.19
+  const otherModules = [
+    "Css",
+    "Css.Foreign",
+    "DEPRECATED.Css.File",
+    "Platform",
+    "Json.Decode"
+  ]; // Json.Decode is needed to avoid a bug in Elm 0.18 where port modules need it to be imported; may be able to remove that import in 0.19
   const imports = otherModules
@@ -43,5 +49,5 @@ .concat(_.map(modules, "name"))
   const fileStructure =
-    "fileStructure : () -> Css.File.CssFileStructure\n" +
+    "fileStructure : () -> DEPRECATED.Css.File.CssFileStructure\n" +
     "fileStructure _ =\n" +
-    "    Css.File.toFileStructure\n        [ " +
+    "    DEPRECATED.Css.File.toFileStructure\n        [ " +
     modules.map(generateModule).join("\n        , ") +
@@ -51,4 +57,4 @@ "\n        ]";
   const end =
-    "port files : Css.File.CssFileStructure -> Cmd msg\n\n\n" +
-    "compiler : (Css.File.CssFileStructure -> Cmd Never) -> (() -> Css.File.CssFileStructure) -> Program () () Never\n" +
+    "port files : DEPRECATED.Css.File.CssFileStructure -> Cmd msg\n\n\n" +
+    "compiler : (DEPRECATED.Css.File.CssFileStructure -> Cmd Never) -> (() -> DEPRECATED.Css.File.CssFileStructure) -> Program () () Never\n" +
     "compiler filesPort getStructure =\n" +
@@ -63,3 +69,3 @@ // Note: This must take flags so that `getStructure` is not evaluated on
     "        }\n\n\n" +
-    "classToSnippet : String -> a -> Css.Snippet\n" +
+    "classToSnippet : String -> a -> Css.Foreign.Snippet\n" +
     "classToSnippet str class =\n" +
@@ -78,6 +84,6 @@ "    classToSnippet str class\n\n\n" + // This is just to make type-checking pass. We'll splice in a useful implementation after emitting.
     switch (value.signature) {
-      case "Css.Snippet":
+      case "Css.Foreign.Snippet":
         return modul.name + "." + value.name;
-      case "Css.File.UniqueClass":
-      case "Css.File.UniqueSvgClass":
+      case "DEPRECATED.Css.File.UniqueClass":
+      case "DEPRECATED.Css.File.UniqueSvgClass":
         const className = classNameForValue(modul.name, value.name);
@@ -93,3 +99,7 @@
 
-  return "Css.File.compile [ Css.stylesheet [ " + entries.join(", ") + " ] ]";
+  return (
+    "DEPRECATED.Css.File.compile [ DEPRECATED.Css.File.stylesheet [ " +
+    entries.join(", ") +
+    " ] ]"
+  );
 }
@@ -99,3 +109,3 @@
   const filename = modul.name.replace(".", path.sep) + ".css";
-  // ("homepage.css", Css.File.compile[Homepage.css])
+  // ("homepage.css", DEPRECATED.Css.File.compile[Homepage.css])
   return '( "' + filename + '", ' + generateStylesheet(modul) + " )";
@@ -102,0 +112,0 @@ }

js/hack-main.js

@@ -22,3 +22,3 @@ //@flow
         namespacer +
-        "Main$classToSnippet = F2(function(className, styles) { return A2(_rtfeldman$elm_css$Css$class, className, styles._0); });";
+        "Main$classToSnippet = F2(function(className, styles) { return A2(_rtfeldman$elm_css$Css_Foreign$class, className, styles._0); });";
 
@@ -25,0 +25,0 @@ const newMain = [

package.json

 {
+  "name": "elm-css",
+  "version": "0.7.0-beta2",
+  "description": "Elm-based CSS Preprocessor",
+  "main": "index.js",
   "bin": {
     "elm-css": "./js/cli.js"
   },
+  "directories": {
+    "test": "tests"
+  },
+  "scripts": {
+    "test": "elm-test && cd tests && mocha *.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rtfeldman/elm-css.git"
+  },
+  "keywords": [
+    "elm",
+    "css",
+    "sass",
+    "less",
+    "preprocessor"
+  ],
+  "author": "Richard Feldman <[e-mail]>",
+  "license": "BSD-3-Clause",
   "bugs": {
     "url": "https://github.com/rtfeldman/elm-css/issues"
   },
-  "bundleDependencies": false,
+  "homepage": "https://github.com/rtfeldman/elm-css#readme",
   "dependencies": {
@@ -22,4 +45,2 @@ "binstall": "1.2.0",
   },
-  "deprecated": false,
-  "description": "Elm-based CSS Preprocessor",
   "devDependencies": {
@@ -29,28 +50,6 @@ "chai": "3.4.1",
   },
-  "directories": {
-    "test": "tests"
-  },
   "engineStrict": true,
   "engines": {
     "node": ">=4.0.0"
-  },
-  "homepage": "https://github.com/rtfeldman/elm-css#readme",
-  "keywords": [
-    "elm",
-    "css",
-    "sass",
-    "less",
-    "preprocessor"
-  ],
-  "license": "BSD-3-Clause",
-  "main": "index.js",
-  "name": "elm-css",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/rtfeldman/elm-css.git"
-  },
-  "scripts": {
-    "test": "elm-test && cd tests && mocha *.js"
-  },
-  "version": "0.7.0-beta10"
+  }
 }

readme-example/elm-package.json

@@ -16,2 +16,3 @@ {
         "rtfeldman/elm-css-util": "1.0.2 <= v < 2.0.0",
+        "Skinney/murmur3": "2.0.4 <= v < 3.0.0",
         "rtfeldman/hex": "1.0.0 <= v < 2.0.0"
@@ -18,0 +19,0 @@ },

README.md

@@ -11,220 +11,112 @@ [![Logo](https://raw.githubusercontent.com/rtfeldman/elm-css/c78bacb4420696b8d22d9429616a21c7ab20def3/assets/logo.png)](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest)
 ```elm
-module MyCss exposing (..)
+module MyCss exposing (main)
 
 import Css exposing (..)
-import Css.Elements exposing (body, li)
-import Css.Namespace exposing (namespace)
+import Html
+import Html.Styled exposing (..)
+import Html.Styled.Attributes exposing (css, href, src, styled)
+import Html.Styled.Events exposing (onClick)
 
 
-type CssClasses
-    = NavBar
-
-
-type CssIds
-    = Page
-
-
-css =
-    (stylesheet << namespace "dreamwriter")
-    [ body
-        [ overflowX auto
-        , minWidth (px 1280)
-        ]
-    , id Page
-        [ backgroundColor (rgb 200 128 64)
-        , color (hex "CCFFFF")
-        , width (pct 100)
-        , height (pct 100)
-        , boxSizing borderBox
-        , padding (px 8)
-        , margin zero
-        ]
-    , class NavBar
-        [ margin zero
-        , padding zero
-        , children
-            [ li
-                [ (display inlineBlock) |> important
-                , color primaryAccentColor
+{-| A logo image, with inline styles that change on hover.
+-}
+logo : Html msg
+logo =
+    img
+        [ src "logo.png"
+        , css
+            [ display inlineBlock
+            , padding (px 20)
+            , border3 (px 5) solid (rgb 120 120 120)
+            , hover
+                [ borderColor theme.primary
+                , borderRadius (px 10)
                 ]
             ]
         ]
-    ]
+        []
 
 
-primaryAccentColor =
-    hex "ccffaa"
-```
+{-| A plain old record holding a couple of theme colors.
+-}
+theme : { secondary : Color, primary : Color }
+theme =
+    { primary = hex "55af6a"
+    , secondary = rgb 250 240 230
+    }
 
-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.
+{-| A reusable button which has some styles pre-applied to it.
+-}
+btn : List (Attribute msg) -> List (Html msg) -> Html msg
+btn =
+    styled button
+        [ margin (px 12)
+        , color (rgb 250 250 250)
+        , hover
+            [ backgroundColor theme.primary
+            , textDecoration underline
+            ]
+        ]
 
-`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:
+{-| A reusable style. Css.batch combines multiple styles into one, much
+like mixins in CSS preprocessors.
+-}
+paragraphFont : Style
+paragraphFont =
+    Css.batch
+        [ fontFamilies [ "Palatino Linotype", "Georgia", "serif" ]
+        , fontSize (px 16)
+        , fontWeight normal
+        ]
 
-* [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 using it; you can use either or combine both of these, depending on your needs and preferences.
+{-| Css.property lets you define custom properties, using strings as their values.
+-}
+legacyBorderRadius : String -> Style
+legacyBorderRadius amount =
+    Css.batch
+        [ property "-moz-border-radius" amount
+        , property "-webkit-border-top-left-radius" amount
+        , property "-webkit-border-top-right-radius" amount
+        , property "-webkit-border-bottom-right-radius" amount
+        , property "-webkit-border-bottom-left-radius" amount
+        , property "border-radius" amount
+        ]
 
-#### Approach 1: Inline Styles
 
-One way to use `elm-css` is for inline styles, using the `asPairs` function:
+view : Model -> Html Msg
+view model =
+    nav []
+        [ img [ src "assets/backdrop.jpg", css [ width (pct 100) ] ] []
+        , btn [ onClick DoSomething ] [ text "Click me!" ]
+        ]
 
-```elm
-styles =
-    Css.asPairs >> Html.Attributes.style
 
-button [ styles [ position absolute, left (px 5) ] ]
-    [ text "Whee!" ]
-```
-
-This approach is the simplest way to get started with `elm-css`. One advantage of inline styles is that these can be dynamically changed at runtime; a limitation is that CSS pseudo-classes and pseudo-elements cannot be used with inline styles.
-
-#### 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
-port module Stylesheets exposing (..)
-
-import Css.File exposing (CssFileStructure, CssCompilerProgram)
-import MyCss
-
-
-port files : CssFileStructure -> Cmd msg
-
-
-fileStructure : CssFileStructure
-fileStructure =
-    Css.File.toFileStructure
-        [ ( "index.css", Css.File.compile [ MyCss.css ] ) ]
-
-
-main : CssCompilerProgram
+main : Program Never Model Msg
 main =
-    Css.File.compiler files fileStructure
+    Html.beginnerProgram
+        { view = view >> toUnstyled
+        , update = update
+        , model = initialModel
+        }
 ```
 
-Run `elm-css` on the file containing this `Stylesheets` module.
-Then include that css file in your web page.
+See [the `Css` module documentation](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Css) for an explanation of how this code works.
 
-The above `elm-css` stylesheet compiles to the following .css file:
+`elm-css` draws inspiration from the excellent [Sass](http://sass-lang.com/), [Stylus](http://stylus-lang.com/), [CSS Modules](http://glenmaddern.com/articles/css-modules), and [styled-components](https://www.styled-components.com) libraries. It includes features like:
 
-```css
-body {
-    overflow-x: auto;
-    min-width: 1280px;
-}
+- [locally scoped CSS](https://medium.com/seek-blog/the-end-of-global-css-90d2a4a06284)
+- [mixins](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest/Css#batch)
+- [nested media queries](https://davidwalsh.name/write-media-queries-sass) (as well as pseudo-classes like `:hover` and pseudo-elements like `::after`)
 
-#dreamwriterPage {
-    background-color: rgb(200, 128, 64);
-    color: #CCFFFF;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    padding: 8px;
-    margin: 0;
-}
-
-.dreamwriterNavBar {
-    margin: 0;
-    padding: 0;
-}
-
-.dreamwriterNavBar > li {
-    display: inline-block !important;
-    color: #ccffaa;
-}
-```
-
-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
-```
-
-A gentle introduction to some of the features of `elm-css` is also available in
-[the tutorial](Tutorial.md).
-
 ### Examples
 
-There are a few examples to check out!
+- A [reusable datepicker](https://github.com/abadi199/datetimepicker) built by Abadi Kurniawan
+- The [website](https://noredink.github.io/json-to-elm) for [json-to-elm](https://github.com/eeue56/json-to-elm)
+- This project's [examples](https://github.com/rtfeldman/elm-css/tree/master/examples) folder
 
-- [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`.
-
-Install the handy package that combines `elm-html` and `elm-css`:
-
-     elm package install rtfeldman/elm-css-helpers
-
-The `Elm.CssHelpers.withNamespace` returns a record full of handy functions. Use that, and then construct Html using classes and ids defined in your union types. For example:
-
-```elm
-module MyView exposing (..)
-
-
-import Html.CssHelpers
-import MyCss
-
-
-{ id, class, classList } =
-    Html.CssHelpers.withNamespace "dreamwriter"
-
-
-view =
-    Html.div []
-        [ Html.div [ class [ MyCss.NavBar ] ] [ Html.text "this has the NavBar class" ]
-        , Html.div [ id MyCss.Page ] [ Html.text "this has the Page id" ]
-        ]
-
-```
-
-#### Missing CSS properties
-
-`elm-css` is still in development. Not all CSS properties have been added yet.
-If you run into this problem, `elm-css` includes the `property` function. It takes
-two `Strings`; the property key, and its value.
-
-**e.g.**
-
-We want `z-index`, but suppose `elm-css` did not implement it. We would define it ourselves:
-
-```elm
-import Css exposing (..)
-
-zIndex : Int -> Mixin
-zIndex i =
-    property "z-index" <| toString i
-```
-
-Now `zIndex 9999` is available to use inside our `Stylesheet`.
-
 ## Related Projects
 
-* [Elm CSS Normalize](https://github.com/scottcorgan/elm-css-normalize)
+- [Elm CSS Normalize](https://github.com/scottcorgan/elm-css-normalize)

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

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

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

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9002656

increased by121.83%

Number of package files

90

increased by52.54%

Lines of code

1109

increased by9.69%

Number of low maintenance alerts

1

decreased by-50%

Worsened metrics

Number of lines in readme file

122

decreased by-46.96%

Number of low supply chain risk alerts

13

increased by18.18%

No dependency changes