@ciiri/styled-jsx

Full CSS support for JSX without compromises

Usage no npm install needed!

<script type="module">
  import ciiriStyledJsx from 'https://cdn.skypack.dev/@ciiri/styled-jsx';
</script>

README

@ciiri/styled-jsx

fork 自 styled-jsxapi 可参考原来的库。改动点如下:

  • scopeId 插入到属性而不是原本的 class

    <div class="orange" jsx-302262132 jsx-175175684 />
    
  • 修改底层 css 编译库 stylis@vue/component-compiler-utils,fix bug -webkit-keyframes add unexpect scope id

  • 解决 import style from 'xxx.module.scss 语法无法兼容 css-loader 问题(方案:extract-loader

  • css 语法与vue保持一致(因为换了编译库),如果用scss的话,简单使用如下:

    .App::v-deep .orange {
      color: orange;
      animation: scaleIn 3s ease-in forwards;
    }
    .pic {
      background: url(./logo192.png) no-repeat left top;
      height: 192px;
    }
    @keyframes scaleIn {
      0% {
        transform: scale(0);
      }
      100% {
        transform: scale(1);
      }
    }
    
  • version 4.2.2 新增 optional style tag 用法

    { this.state.optional && <style jsx>{`
      .optional {
        color: green;
        font-size: ${this.state.fontSize};
      }
    `}</style> }
    
  • 以后README只同步新特性,bug相关修复同步在CHANGELOG

已有项目如何接入

目的是在不影响现有流程的情况下无缝接入

一、配置rules

有两种方法,各取所需

  • 新增配置

    用文件名做区分 xx.scss or xx.module.scss ,可如下配置:

    {
      test: /\.module\.(scss|sass)$/,
      use: [
        {loader: 'babel-loader'},
        {loader: require('@ciiri/styled-jsx/webpack').loader},
        {loader: 'extract-loader'},
        {loader: 'css-loader'},
        {loader: 'sass-loader'}
      ]
    }
    
    {
      test: /\.(scss|sass)$/,
      use: [
        {loader: 'style-loader'},
        {loader: 'css-loader'},
        {loader: 'sass-loader'}
      ]
    }
    
  • 可编程loader

    本质还是文件名做区分 xx.scss or xx.module.scss ,编程的能力来源于 pitch-loader

    // 只是举例
    function trimPitch(args, ext) {
      const isModule = ext.filename.includes('.module.');
      const loaders = this.loaders;
      const removeList = [];
      if (isModule) {
        removeList.push('style-loader/index.js');
      } else {
        removeList.push('extract-loader/index.js', 'babel-loader/index.js', '@ciiri/styled-jsx/dist/webpack.js');
      }
      this.loaders = loaders.filter(({ path }) => !removeList.some(str => path.includes(str)));
    }
    
    {
      test: /\.s(a|c)ss$/,
      use: [
        { 
          loader: 'pitch-loader', 
          options: {
            pitch: trimPitch // 在pitch阶段执行loaders顺序调整、或者删除
          }
        },
        { loader: 'babel-loader' },
        { loader: require('@ciiri/styled-jsx/webpack').loader },
        { loader: 'extract-loader' },
        { loader: 'style-loader' },
        { loader: 'css-loader' },
        { loader: 'sass-loader' }
      ]
    }
    

二、配置babel

"babel": {
  "plugins": [
    "@ciiri/styled-jsx/babel"
  ]
},