[WIP] Proposition: 2.0.x release

[CupOfTea696]

--csstyle 2

So over the last couple of days I've been working on a 2.0 version of csstyle. This isn't finished yet, just showing of the changes I've made and a starting point for a discussion around the 2.0 release.

Tasks

• [x] SASS version
• [x] SASS tests
• [x] Location refactoring
• [x] Travis CI
• [ ] PostCSS version
• [ ] PostCSS tests
• [ ] Site (via gh-pages?)
• [ ] Advanced docs
• [ ] LESS version (optional)

  Changes

• Automatic symbol escaping.
• Changed some default symbols:
  • Part symbol is now / by default. Considering changing this to . so it has more of a javascript chaining style.
  • Default root id is now app. Considering changing the variable name to csstyle-app-id.
• Un-deprecated and refactored locations.
• Completely rewrote how csstyle works internally. This fixed some advanced nesting issues and I think it just a better approach. This also means nesting parts inside hover states work as expected without having to use the &:hover & trick.
• Settings can be changed at runtime.
• Added reset-csstyle mixin to reset symbol settings to default.
• Added component, option, part, tweak and location helper functions, to create the respective class / partial class from a name.
• Added new Feature: Policies. More info below.
• Rewrote tests to use grunt / mochacli
• Added .travis.yml for Travis CI runner.

  New feature

  Policies

CSStyle introduces Policies, which is essentially a convenient way to apply "rules" to classes. This is very useful to share a set rules between different components etc. A policy is essentially a placeholder class that has no use on its own.

Example:

// defining the policy
@include add-policy(margin) {
    &:first-child {
        margin-top: 0;
    }

    &:last-child {
        margin-bottom: 0;
    }
}

// alternative way of defining a policy
@include policy(add, margin) {
  &:first-child {
      margin-top: 0;
  }

  &:last-child {
      margin-bottom: 0;
  }
}

// Applying a policy:
@include component(header) {
  margin: 64px 0;
  @include policy(margin);
}

@include component(footer) {
  margin: 64px 0;
  @include policy(margin);
}

Renders to:

.header:first-child, .footer:first-child {
  margin-top: 0;
}

.header:last-child, .footer:last-child {
  margin-bottom: 0;
}

.header {
  margin: 64px 0;
}

.footer {
  margin: 64px 0;
}

---

Notes: I un-deprecated locations, but this is up for discussion. I would love to see them back however. I mostly used them on the body tag to modify styles based on page / certain "states" (like @home,@mobileand@has-admin-bar`). This should be the recommended use for locations.

Locations now don't use an ID anymore (see #30). They now only override components, parts and tweaks. They behave in virtually the same way, except that locations will always be the parent selector, even if they are nested inside components.

[geddski]

wow thanks for all your work @CupOfTea696! I'll review over the weekend.

[CupOfTea696]

No worries, I use this a lot both at my job and for personal projects so :)

[geddski]

@CupOfTea696 same here :)

One thing I've been thinking about lately: having a postcss version and sass version (and there's a PR for a stylus version too) makes the project really hard to contribute to. I have both sass and postcss projects though, so I'm wondering if maybe there's a way to have a single postcss version that would work in both. What do you think?

[geddski]

one way we could accomplish that would be to make csstyle a webpack loader rather than a postcss/scss plugin...

[CupOfTea696]

Well having different versions does allow users to integrate it more easily in their existing workflow, whatever that workflow may be. Some people use GUI apps to compile their sass etc...

[CupOfTea696]

@geddski Doesn't postcss have a sass compiler though?

[CupOfTea696]

Added new feature: Policies. Explanation in OP.

[geddski]

@CupOfTea696 I'm thinking it may be time for me to hand csstyle over to a new owner. You interested? From what I can tell, you'd take care of it and move it in a great direction. Let me know.

[CupOfTea696]

Yeah, I'd be up for taking over the project :)

[geddski]

cool DM me on twitter @geddski and we'll get the transfer going.