Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

Working with state classes

未关闭
  • 哪里不对？
#273 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
5/5
预计耗时
一周以上
新手友好度
25/100
Issue 类型
功能
描述清晰度
基本清楚
活跃度
停滞
技术栈
babel, css, javascript
领域
frontend, tooling

调研方向

该 issue 提到了 styleName 的使用和嵌套 CSS 选择器，但没有指出 repository 文件或测试。首先定位 styleName 转换入口点以及现有的选择器解析测试；当可以忽略 is- 和 u- 等带前缀的状态类，同时嵌套的 menu__item/menu__icon 选择器能够按所示方式解析时，即视为完成。

由索引模型根据 Issue 内容生成。

描述

We are using this library in 2 of our projects and works really well.
But one of the practices that we usually use are "State classes" like http://smacss.com/book/type-state

for example if we have

<div styleName="menu__item"></div>

this element can sometimes have this class

<div styleName="menu__item is-active"></div>

To try to style things like this we had to use multiple modules and have a CSS like:

.menu__item {
  color: red;
}

.is-active {
  color: blue;
}

ideally we would like to use

.menu__item {
  color: red;

  &.is-active {
    color: blue;
  }
}

But ok we can more or less work, the problem is when you have something inside menu__item

<div styleName="menu__item is-active">
  <i styleName="menu__icon"></i>
</div>

In that case we cannot do that:

.menu__item {
  color: red;
}

.is-active {
  color: blue;

  .menu__icon {
    color: yellow;
  }
}

or ideally:

.menu {
  &__item {
    color: red;
    
    &.is-active {
      color: blue;
     }
  }

  &__item.is-active &__icon {
    color: yellow; 
  }
}

Are you planning some feature to "disable" selectors that start with a prefix?
For example, for us can be useful to ignore "is-", "u-", etc...

主要语言
JavaScript
星标
2k
派生
159
30 天内没有已合并 PR

环境准备

这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

gajus/babel-plugin-react-css-modules 的其他 Issue

查看 gajus/babel-plugin-react-css-modules 的全部 Issue

相似的 Issue

更多 JavaScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。