Semantic-ui: Start PostCSS porting?

[tunnckoCore]

As mentioned here https://github.com/Semantic-Org/Semantic-UI/issues/2093 i noticed that semantic-ui "uses a very minimal amount of LESSlike syntax" sooo i guess it would be easy or?

[jlukic]

The complete feature list we need for SUI is

• Variables that support math, and can receive as values other variables
• @import with variables allowed in paths.
• Color functions: Lighten, Darken, Saturate

Would be nice but could be coded around

• A function that adds units to a value like unit() (used in one location)
• Simple math functions like round()

---

Its important to note that the CSS variable spec isn't adequate.

It doesn't allow you to declare variables as containing the values of other variables. i.e $foo= $baz + $bar;. You also can't build strings or add units to variables. (See example #11 in spec)

// doesnt work
.foo {
  --gap: 20;
  margin-top: var(--gap)px;
}

http://dev.w3.org/csswg/css-variables/#using-variables

I'm not sure if there's a PostCSS plugin that supports a different variable syntax like LESS or SCSS but it would be necessary.

[tunnckoCore]

sounds good and is very minimal amount really.

Its important to note that the CSS variable spec isn't adequate.

yea, lol :sake:

I'm not sure if there's a PostCSS plugin that supports a different variable syntax like LESS or SCSS but it would be necessary.

yea they have 2 plugins

• https://github.com/postcss/postcss-custom-properties - see fixture and expected
• https://github.com/postcss/postcss-simple-vars - which really are simple and are SASS-like

but you also use cssnano and cssnext which are awesome future tools on top of postcss.

Im sure using postcss the codebase would become drastically lower.

[timkelty]

postcss-map is another option for variables: https://github.com/pascalduez/postcss-map

[shinzui]

is anyone actively working on this?

[timkelty]

I'm curious too - I'm open to start work on it.

[tunnckoCore]

I think this also will help http://npm.im/precss :) or http://npm.im/opalcss

[DaSchTour]

Maybe we should create a list of people willing to work on Semantic UI SCSS version.
Then we should define the basic parameters for the migration and start working!
We just need to get a repo we all could work on.

[jlukic]

SCSS doesnt support variables in imports. https://github.com/sass/sass/issues/739#issuecomment-73984809

There's no reasonable way to do theming without that.

[DaSchTour]

I'm sure I can find a great way to do theming without that. Why don't we just try to find a way just because the way theming is done with LESS doesn't work the same way in SCSS?
Maybe we can find a better way by using SCSS. Maybe we could even improve theming my using Mixin override? I'm sure we can figure out a way!

[shinzui]

Wouldn't be wasteful at this point to do a SCSS port? Pre-processors like Sass and Less are inferior to post-processors. IMHO, it would be better to spend the effort on a PostCSS port.

[tunnckoCore]

That's what I'm asking, too. haha. And the issue is for postcss port.

[jlukic]

Agree on PostCSS as the way forward

[ghost]

I started a discussion on the forums to help facilitate conversation. My vote is to move to Sass. It may not be the shiniest, but it's well established and many designers already know how to use it.

http://forums.semantic-ui.com/t/a-practical-argument-for-using-sass/92

[DaSchTour]

I don't want to create an account in the forum, as I don't think that this project has a great future. But the most important point for me why one should use SASS and make extensive use of the possibilities, it that one can create real modules. Just take a look on what Foundation has build. Every component is a mixin that can be override in whole or in parts, that parameters can be added to and so on. You can reuse components to create them for different contextes. Prefix them and make them behave different on the prefix you give them.
If you would design semantic ui from scratch, there would be only a single occurence of .ui in the SCSS.
I hate looking on the current state of semantic ui and always thinking Don't repeat yourself, Don't repeat yourself, Don't repeat yourself.

[nblackburn]

@DaSchTour You could variable references to ui in LESS so it's rather a moot point.

[ShaggyDude]

+1 on PostCSS.

[ghost]

For component-based development it seems the best way forward is a modularized CSS approach, which can be used alongside PostCSS, even if the approach isn't _ready for the majors quite yet_.

[sunnysingh]

I think it would make a lot of sense to use http://cssnext.io/ which transpiles upcoming features of CSS, thus I can see a lot more people having this setup as part of their PostCSS plugins. Granted, there are two things missing: complex variables and imports. Imports can be handled with postcss-import. There are multiple plugins for variables (postcss-simple-vars) but I think it'd be a good idea to conform to the CSS spec and use :root { } custom properties. I'm not familiar with the SUI codebase but from the top it looks like variables are simply used for customization.

There would also be multiple ways of going about handling PostCSS support. You can compile everything except for custom properties (variables) so that those can be handled on the user end to allow for customization. Or just keep to a specific set of features (cssnext and imports) so that users wouldn't have to setup a crazy amount of plugins.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[tunnckoCore]

Any process?