独学者Fossa

独学していることなど

Fossa Advent Calendar 7日目

アドベントカレンダー
アドベントカレンダー

CSS Prefix

Autoprefixerの話じゃなくて、CSS Frameworkで使われるPrefixの話です。

CSS FrameworkUIkitで例えるなら、uk-のことです。


AというCSS Frameworkで制作していて、BというCSS Frameworkコンポーネント一つだけ利用したい時があります。

PrefixがないCSS Frameworkを使ったからか、コンパイルすると、きちんと表示されなかったことがありました。

原因を調べると、prefixを付けても解決できる問題では、ありませんでした。

長年、UIkitを使っていたからか、私が記述するcssには、Prefix付けたいなぁと思いました。

UIkit v3.15.14

Info
既にprefixが付いていて、別のprefixに変更するケースです。


UIkitは、uk-が標準ですが、別のprefixに変えられるようになっています。

github.com/uikit/uikitの中に、buildというフォルダがあり、prefix.jsがあります。

ルートフォルダのpackage.jsonをみると、"prefix": "node build/prefix"があります。

使い方は、node build/prefix -p=xyzを実行すると、uk-xyz-になるはずです。*1

Rollup(Vite)

Info
既にprefixが付いていて、別のprefixに変更するケースです。


Rollupや、Viteを使うと、Prefixを変更できましたが、後日、紹介します。

Tailwind CSS v3.2.4

Info
元々、prefixが、付いていないケースです。


tailwind.config.jsprefix: 'tw-',を記述すれば、簡単に付けられます。

Gulp + gulp-css-prefix

Info
元々、prefixが、付いていないケースです。


Gulpgulp-css-prefixを使うことで、Prefixを付けることが出来ました。

Gulpの開発が止まってしまって、惜しいなぁと思います。

// gulpfile.js
var gulp = require('gulp');
var cssPrefix = require('gulp-css-prefix');

function prefix() {
  return gulp
    .src('./static/assets/css/*.css')
    .pipe(cssPrefix('spectre-'))
    .pipe(gulp.dest('./static/assets/css'));
}

exports.prefix = prefix;

PostCSSのプラグインを使う

Info
元々、prefixが、付いていないケースです。


後日、紹介する予定です。

*1:まだ試していないです