From 33fff03e9f78a4abc6b66b640959f0477873dc84 Mon Sep 17 00:00:00 2001
From: Paul Murray <plmrry@gmail.com>
Date: Wed, 9 Dec 2020 17:16:50 -0500
Subject: [PATCH 1/6] Create 0000-style-directives.md

---
 text/0000-style-directives.md | 125 ++++++++++++++++++++++++++++++++++
 1 file changed, 125 insertions(+)
 create mode 100644 text/0000-style-directives.md

diff --git a/text/0000-style-directives.md b/text/0000-style-directives.md
new file mode 100644
index 0000000..d7905e1
--- /dev/null
+++ b/text/0000-style-directives.md
@@ -0,0 +1,125 @@
+- Start Date: 2020-12-09
+- RFC PR: (leave this empty)
+- Svelte Issue: (leave this empty)
+
+# Style Directives
+
+## Summary
+
+Add a `style:` directive, e.g. `<div style:position="absolute" />`
+
+## Motivation
+
+Currently, when inline style attributes need to be set based on multiple variables, the construction of a style attribute string is left to the developer.
+
+Constructing these attribute strings can become somewhat clumsy.
+
+For [example](https://github.com/mhkeller/layercake/blob/master/src/LayerCake.svelte#L297-L301):
+
+```svelte
+<div
+  style="
+    position:{position};
+    {position === 'absolute' ? 'top:0;right:0;bottom:0;left:0;' : ''}
+    {pointerEvents === false ? 'pointer-events:none;' : ''}
+  "
+/>
+```
+
+It would be useful — and often less error-prone — to be able to set multiple inline styles without having to construct the attribute string:
+
+```svelte
+<div
+  style:position="absolute"
+  style:pointer-events={pointerEvents}
+  style:left="{left}px"
+/>
+```
+
+## Detailed design
+
+Style directives would take the form `style:property="value"` where `property` is a CSS property and `value` is a CSS property value.
+
+### Shorthand
+
+A shorthand form could also exist when a variable name and CSS property name match:
+
+```svelte
+<script>
+  const left = "234px";
+</script>
+<div style:left />
+```
+
+### Conflicting Styles
+
+One question surrounding this approach how to combine style directives with style attribures that have conflicting properties.
+
+Consider the example:
+
+```svelte
+<div style="position: absolute; left: 40px;" style:left="50px" />
+```
+
+What would be the value of this element's `left` property?
+
+It seems there are three options available:
+
+1. Conflicting CSS properties in style directives are not allowed, and a compiler error is thrown.
+2. The style attribute takes precedence.
+3. The style directive takes precedence.
+
+The third option seems like the most reasonable, and most closely matches the behavior of the `class:` directive.
+
+For example, class directives take precedence over class attribute strings:
+
+```svelte
+<div class="foo bar" class:bar={false}>
+  My class is "foo" and not "foo bar"
+</div>
+```
+
+### CSS Variables
+
+These directives could also contain CSS variables:
+
+```svelte
+<div style:--border-color="saddleBrown" />
+```
+
+## How we teach this
+
+This is pretty similar to the `class:` directive, except that a CSS value is used instead of a boolean.
+
+## Drawbacks
+
+As with any feature, this would add some complexity to the codebase, and add a bit of learning curve, although the impact seems minimal.
+
+We may want to discourage the construction of complex inline styles based on variables, and encourage the use of CSS variables instead. 
+Of course, dynamic CSS variables would also need to be passed into a style attribute. 
+
+## Alternatives
+
+React uses a style object:
+
+```jsx
+<div style={{ marginLeft: "30px" }} />
+```
+
+We could instead mimic React and allow this sort of object to be passed to an element's `style` attribute.
+
+## Unresolved questions
+
+### Camel Case Property Names?
+
+We could also allow for the use of camel case property names. 
+
+This would make using variable names that match CSS properties a bit easier:
+
+```svelte
+<script>
+  const marginLeft = "20px";
+</script>
+<div style:marginLeft />
+```
+

From 132a125674f9052a02c892b1c23572f6c3a6c38a Mon Sep 17 00:00:00 2001
From: Paul Murray <plmrry@gmail.com>
Date: Wed, 9 Dec 2020 17:20:18 -0500
Subject: [PATCH 2/6] Update 0000-style-directives.md

---
 text/0000-style-directives.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/text/0000-style-directives.md b/text/0000-style-directives.md
index d7905e1..95c1bea 100644
--- a/text/0000-style-directives.md
+++ b/text/0000-style-directives.md
@@ -6,7 +6,11 @@
 
 ## Summary
 
-Add a `style:` directive, e.g. `<div style:position="absolute" />`
+Add a `style:` directive:
+
+```svelte
+<div style:position="absolute" style:left="67px" />
+```
 
 ## Motivation
 

From 6812c80818443af507c32c43a6ea03acb5d1d861 Mon Sep 17 00:00:00 2001
From: Paul Murray <plmrry@gmail.com>
Date: Wed, 9 Dec 2020 17:21:25 -0500
Subject: [PATCH 3/6] Update 0000-style-directives.md

---
 text/0000-style-directives.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/text/0000-style-directives.md b/text/0000-style-directives.md
index 95c1bea..8b77157 100644
--- a/text/0000-style-directives.md
+++ b/text/0000-style-directives.md
@@ -2,7 +2,7 @@
 - RFC PR: (leave this empty)
 - Svelte Issue: (leave this empty)
 
-# Style Directives
+# Style Directive
 
 ## Summary
 

From bb75e72b856b8e3331c9c080dd3fcac684552cd6 Mon Sep 17 00:00:00 2001
From: Paul Murray <plmrry@gmail.com>
Date: Wed, 9 Dec 2020 17:32:57 -0500
Subject: [PATCH 4/6] Update 0000-style-directives.md

---
 text/0000-style-directives.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/text/0000-style-directives.md b/text/0000-style-directives.md
index 8b77157..c236b7e 100644
--- a/text/0000-style-directives.md
+++ b/text/0000-style-directives.md
@@ -18,13 +18,13 @@ Currently, when inline style attributes need to be set based on multiple variabl
 
 Constructing these attribute strings can become somewhat clumsy.
 
-For [example](https://github.com/mhkeller/layercake/blob/master/src/LayerCake.svelte#L297-L301):
+For example:
 
 ```svelte
 <div
   style="
-    position:{position};
-    {position === 'absolute' ? 'top:0;right:0;bottom:0;left:0;' : ''}
+    position: {position};
+    {position === 'absolute' ? 'top: 20px;' : ''}
     {pointerEvents === false ? 'pointer-events:none;' : ''}
   "
 />
@@ -35,8 +35,8 @@ It would be useful — and often less error-prone — to be able to set multiple
 ```svelte
 <div
   style:position="absolute"
-  style:pointer-events={pointerEvents}
-  style:left="{left}px"
+  style:top={position === "absolute" && "20px"}
+  style:pointer-events={pointerEvents ? "all" : "none"}
 />
 ```
 

From 8dbc444fe0c7d870c4378cf72a2b9b7c03db7bb5 Mon Sep 17 00:00:00 2001
From: Paul Murray <plmrry@gmail.com>
Date: Wed, 9 Dec 2020 17:34:25 -0500
Subject: [PATCH 5/6] Update 0000-style-directives.md

---
 text/0000-style-directives.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/text/0000-style-directives.md b/text/0000-style-directives.md
index c236b7e..e1e7700 100644
--- a/text/0000-style-directives.md
+++ b/text/0000-style-directives.md
@@ -36,7 +36,7 @@ It would be useful — and often less error-prone — to be able to set multiple
 <div
   style:position="absolute"
   style:top={position === "absolute" && "20px"}
-  style:pointer-events={pointerEvents ? "all" : "none"}
+  style:pointer-events={pointerEvents ? null : "none"}
 />
 ```
 

From af0127206331a98409b59dfea8ff10ec09cc790d Mon Sep 17 00:00:00 2001
From: Paul Murray <plmrry@gmail.com>
Date: Wed, 9 Dec 2020 17:36:06 -0500
Subject: [PATCH 6/6] Update 0000-style-directives.md

---
 text/0000-style-directives.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/text/0000-style-directives.md b/text/0000-style-directives.md
index e1e7700..13fb879 100644
--- a/text/0000-style-directives.md
+++ b/text/0000-style-directives.md
@@ -35,7 +35,7 @@ It would be useful — and often less error-prone — to be able to set multiple
 ```svelte
 <div
   style:position="absolute"
-  style:top={position === "absolute" && "20px"}
+  style:top={position === "absolute" ? "20px" : null}
   style:pointer-events={pointerEvents ? null : "none"}
 />
 ```