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.2.0 to 0.3.0

src/Css/Elements.elm

2

elm-package.json

@@ -9,3 +9,3 @@ {

],
"exposed-modules": ["Css", "Css.File"],
"exposed-modules": ["Css", "Css.Elements", "Css.File"],
"dependencies": {

@@ -12,0 +12,0 @@ "elm-lang/core": "2.0.0 <= v < 4.0.0"

{
"name": "elm-css",
"version": "0.2.0",
"version": "0.3.0",
"description": "Elm-based CSS Preprocessor",

@@ -5,0 +5,0 @@ "main": "index.js",

# 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) tools.
Try it out! (make sure you already have [elm](http://elm-lang.org) installed, e.g. with `npm install -g elm`)

@@ -20,11 +22,10 @@

`elm-css` is a CSS preprocessor where you write Elm code and get out `.css` stylesheets.
`elm-css` lets you:
It lets you:
1. Write Elm code and get out a .css file
2. Share code between your render logic and your CSS stylesheets, 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!
1. Share code between your render logic and your CSS stylesheets, so you can easily keep names synchronized
2. Use union types instead of strings for class names and IDs, so typos will result in compile errors instead of bugs
3. Assemble your stylesheets by writing normal Elm code, so you have access to your full suite of programming logic tools instead of the limited set that typical preprocessors ship with.
4. Automatically namespace all your classes to avoid name conflicts between stylesheets.
Here's an example:

@@ -40,3 +41,3 @@

. Hidden
! display none
~ ((display none) |> important)

@@ -77,7 +78,7 @@ # Page

.dreamwriter_Hidden {
.dreamwriterHidden {
display: none !important;
}
#Page {
#dreamwriterPage {
background-color: rgb(200, 128, 64);

@@ -92,3 +93,3 @@ color: #CCFFFF;

ul.dreamwriter_NavBar {
ul.dreamwriterNavBar {
margin: 0;

@@ -98,3 +99,3 @@ padding: 0;

ul.dreamwriter_NavBar > li {
ul.dreamwriterNavBar > li {
display: inline-block;

@@ -101,0 +102,0 @@ color: #ccffaa;

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