Skip to content

Rename core plugins to closer mirror CSS properties and modules #656

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 18 commits into from
Feb 18, 2019

Conversation

adamwathan
Copy link
Member

@adamwathan adamwathan commented Feb 14, 2019

Note: This PR is only about changing the name of the core plugins themselves, not the classes generated by the core plugins. Even though the leading plugin will be renamed to lineHeight, the classes it generates will still be .leading-{modifier}.

As part of 1.0 I want to make the core plugin names more consistent and guessable. After way too much deliberation I've decided it makes the most sense to stick with singular names, and match the CSS property (or module name) where possible.

For example, fonts will change to fontFamily, backgroundColors will change to backgroundColor, svgStroke will change to stroke, etc.

Certain core plugins will continue to be responsible for multiple CSS properties, and those plugins will be named after the parent CSS module when possible. For example, the flexbox plugin will still be responsible for align-items, justify-content, flex-direction, etc., and in the future a grid or gridLayout plugin would likely be responsible for many of the CSS grid properties.

Other core plugins may be split into multiple plugins in order to give them better names, like we may split textStyle into separate textTransform, textDecoration, fontStyle, and fontSmoothing plugins (although we may not.)

This is one of the biggest breaking changes for 1.0 but I think it's better than being stuck with a bunch of inconsistent names forever. This break will only affect your actual config file, and won't require making any changes in your actual HTML.

To Do:

  • Change backgroundColors to backgroundColor
  • Change borderColors to borderColor
  • Change borderWidths to borderWidth
  • Change fonts to fontFamily
  • Change fontWeights to fontWeight
  • Change leading to lineHeight
  • Change lists to listStyle
  • Change shadows to boxShadow
  • Change svgFill to fill
  • Change svgStroke to stroke
  • Change textColors to color or textColor
  • Change textSizes to fontSize
  • Change textStyle to textTransform, textDecoration, fontStyle, and fontSmoothing
  • Change tracking to letterSpacing

@vitorfield vitorfield marked this pull request as ready for review February 14, 2019 19:59
@benface
Copy link
Contributor

benface commented Feb 14, 2019

  • Change lists to listStyle

Are you also planning on adding list style type utilities by any chance? :)

@adamwathan
Copy link
Member Author

Are you also planning on adding list style type utilities by any chance? :)

Yeah I think I want to trash the whole list-reset class and just provide list style utilities instead.

@adamwathan
Copy link
Member Author

Reverted the changes to leading and tracking for now, still unsure what to do there but it seemed really unintuitive to change tracking values in a key called letterSpacing. Maybe it's fine but I kinda think calling the plugins leading and tracking is fine too.

Going to open a separate issue to discuss potential new names for the leading and tracking classes, having a hard time deciding what to do there.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants