Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

elm-css

Package Overview
Dependencies
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

elm-css - npm Package Compare versions

Comparing version 0.7.0-beta10 to 0.7.0-beta11

examples/html-styled/assets/backdrop.jpg

7

CHANGELOG.md
## Releases
| Version | Notes |
| ------- | ----- |
| [**14.0.0** (unreleased)](https://github.com/rtfeldman/elm-css/tree/14.0.0) | Remove `asPairs`, `Css.Namespace`, and arithmetic operators. Don't report warnings, just emit CSS. Make `Property` opaque and more efficient. Fix `withMedia` nesting bug. (#352) Fix bug in `borderBottomWidth` functions. (#380)
| [**13.1.1**](https://github.com/rtfeldman/elm-css/tree/13.1.1) | Fix `AngleOrDirection` bug (#356)
| [**13.1.0**](https://github.com/rtfeldman/elm-css/tree/13.1.0) | Add program, programWithFlags, and beginnerProgram to Html.Styled. (#381)
| [**13.0.1**](https://github.com/rtfeldman/elm-css/tree/13.0.1) | Remove extraneous Debug.log
| [**13.0.0**](https://github.com/rtfeldman/elm-css/tree/13.0.0) | Disallow using multiple `css` attributes in same element, to fix #337. Fix Html.Styled.Lazy (#348). Add Svg.Styled (#339). Improve docs for Css.Foreign (#353).
| [**12.0.1**](https://github.com/rtfeldman/elm-css/tree/12.0.1) | Add deprecation warning to upgrade to 13.0.0 for critical bugfixes
| [**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 +12,0 @@ | [**8.0.0**](https://github.com/rtfeldman/elm-css/tree/8.0.0) | Switch from `(#)` and `(.)` to `class` and `id`

25

elm-package.json
{
"version": "11.2.0",
"summary": "CSS Preprocessor for Elm",
"version": "13.1.0",
"summary": "Typed CSS in Elm.",
"repository": "https://github.com/rtfeldman/elm-css.git",

@@ -11,9 +11,22 @@ "license": "BSD-3-Clause",

"Css",
"Css.Transitions",
"Css.Media",
"Css.Foreign",
"Css.Colors",
"Css.Elements",
"Css.Media",
"Css.File",
"Css.Namespace"
"Html.Styled",
"Html.Styled.Attributes",
"Html.Styled.Events",
"Html.Styled.Keyed",
"Html.Styled.Lazy",
"Svg.Styled",
"Svg.Styled.Attributes",
"Svg.Styled.Events",
"Svg.Styled.Keyed",
"Svg.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 +33,0 @@ "elm-lang/virtual-dom": "2.0.0 <= v < 3.0.0",

@@ -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"

@@ -54,7 +54,13 @@ //@flow

if (!fs.existsSync(generatedElmStuff)) {
fs.symlinkSync(
path.join(cssSourceDir, "elm-stuff"),
generatedElmStuff,
"junction" // Only affects Windows, but necessary for this to work there. See https://github.com/gulpjs/vinyl-fs/issues/210
);
try {
fs.symlinkSync(
path.join(cssSourceDir, "elm-stuff"),
generatedElmStuff,
"junction" // Only affects Windows, but necessary for this to work there. See https://github.com/gulpjs/vinyl-fs/issues/210
);
} catch (err) {
// This will blow up on macOS because !fs.existsSync(generatedElmStuff)
// fails on macOS for symlinks. Ignore it; if it legit fails, that's
// fine; this doesn't *need* to be symlinked. It's just a performance optimization.
}
}

@@ -81,3 +87,7 @@

return findExposedValues(
["Css.File.UniqueClass", "Css.File.UniqueSvgClass", "Css.Snippet"],
[
"DEPRECATED.Css.File.UniqueClass",
"DEPRECATED.Css.File.UniqueSvgClass",
"Css.Foreign.Snippet"
],
readElmiPath,

@@ -84,0 +94,0 @@ generatedDir,

@@ -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 @@ );

@@ -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 @@ }

@@ -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 = [

{
"name": "elm-css",
"version": "0.7.0-beta11",
"description": "Elm-based CSS Preprocessor",
"main": "index.js",
"bin": {
"elm-css": "./js/cli.js"
},
"directories": {
"test": "tests"
},
"scripts": {
"test": "elm-test",
"format": "elm-format --elm-version=0.18 src tests examples readme-example"
},
"repository": {
"type": "git",
"url": "git+https://github.com/rtfeldman/elm-css.git"
},
"keywords": [
"elm",
"css",
"sass",
"less",
"preprocessor"
],
"author": "Richard Feldman <richard.t.feldman@gmail.com>",
"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,34 +46,10 @@ "binstall": "1.2.0",

},
"deprecated": false,
"description": "Elm-based CSS Preprocessor",
"devDependencies": {
"chai": "3.4.1",
"mocha": "2.3.4"
"elm-format": "^0.7.0-exp",
"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"
}
}

@@ -14,4 +14,6 @@ {

"elm-lang/html": "2.0.0 <= v < 3.0.0",
"elm-lang/virtual-dom": "2.0.0 <= v < 3.0.0",
"rtfeldman/elm-css-helpers": "2.0.1 <= v < 3.0.0",
"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 +20,0 @@ },

@@ -1,5 +0,3 @@

[![Logo](https://raw.githubusercontent.com/rtfeldman/elm-css/c78bacb4420696b8d22d9429616a21c7ab20def3/assets/logo.png)](http://package.elm-lang.org/packages/rtfeldman/elm-css/latest)
# elm-css
# 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)
`elm-css` lets you define CSS in Elm. (For an Elm styling system that is a

@@ -11,220 +9,112 @@ complete departure from CSS, check out [style-elements](http://package.elm-lang.org/packages/mdgriffith/style-elements/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)
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)

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc