Re: [csswg-drafts] [css-shadow-parts] consider moving part-mapping to style rules

Hey, we are developing a pre-processor called [Stylable](https://stylable.io), which extends the idea of scoping stylesheets with the ability to expose a "style API" for inner parts & states. Providing a static language server that provides completions and warnings for this kind of style API.

This topic is interesting to me, because although Stylable currently implements scoping by namespacing the output CSS in build time, it could potentially provide the same developer experience for styling Web-Components. and hopefully output CSS that is more similar to the source CSS.

So currently Stylable treats any CSS class as a potential custom pseudo-element (similar to `::part()`):
```css
/* btn.st.css */
.label { color:red; }
```
```css
/* panel.st.css */
:import {
    -st-from: './btn.st.css';
    -st-default: Btn
}
.okBtn {
    -st-extends: Btn; /* give okBtn a Btn interface */
}
.okBtn::label { color:green; } /* access the label */
```
> Notice: Stylable source file contain custom syntax that is transpiled away (like `:import`, `-st-extends` and the access to the custom pseudo-element `::label`).

Which will be transpiled into:
```css
.btn__label { color:red; }
.panel__okBtn .btn__label { color:green; }
```

If css shadow parts will allow defining parts through CSS definition, it would help tools such as Stylable to provide tooling to enhance web components authoring. For example we could output the previous CSS for web components (with the `.some-class { @outer-name(some-part) }` suggestion):

```css
/* btn.st.css */
.label { @outer-name(label) }
```
```css
/* panel.st.css */
.okBtn::part(label) { color:green; }
```


-- 
GitHub Notification of comment by idoros
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2904#issuecomment-404119913 using your GitHub account

Received on Wednesday, 11 July 2018 10:20:08 UTC