bem_html 1.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +7 -0
- data/Gemfile +18 -0
- data/Rakefile +14 -0
- data/Readme.md +64 -0
- data/bem_html.gemspec +26 -0
- data/features/support/env.rb +4 -0
- data/lib/bem_html.rb +69 -0
- metadata +67 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: c3b18970639fd699f7614d5b2894e9c51007d6bf
|
4
|
+
data.tar.gz: fccca43f3f35e40f1c5c55c6adfdb0222cff6b34
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: a6ab8f5a0ef7dc586b014732876b7c84feaa8b18b2681a44b6b7296dda5a7563dbdb08ab5475d7b5e945aba661c529058c2df7be0f1be1dcde686b8747e2fa16
|
7
|
+
data.tar.gz: 517466b78e4e1a78925eb405be73624463aae2be87d7cfe5111cd327b64c2bf494cd6e4394ed33d7428902554b8f3a766ee7a1552e3e82ef0d85fdd410e07471
|
data/.gitignore
ADDED
data/Gemfile
ADDED
@@ -0,0 +1,18 @@
|
|
1
|
+
# If you do not have OpenSSL installed, update
|
2
|
+
# the following line to use "http://" instead
|
3
|
+
source 'https://rubygems.org'
|
4
|
+
|
5
|
+
# Specify your gem's dependencies in bem_html.gemspec
|
6
|
+
gemspec
|
7
|
+
|
8
|
+
group :development do
|
9
|
+
gem 'rake'
|
10
|
+
gem 'rdoc'
|
11
|
+
gem 'yard'
|
12
|
+
end
|
13
|
+
|
14
|
+
group :test do
|
15
|
+
gem 'cucumber'
|
16
|
+
gem 'aruba'
|
17
|
+
gem 'rspec'
|
18
|
+
end
|
data/Rakefile
ADDED
@@ -0,0 +1,14 @@
|
|
1
|
+
require 'bundler'
|
2
|
+
Bundler::GemHelper.install_tasks
|
3
|
+
|
4
|
+
require 'cucumber/rake/task'
|
5
|
+
|
6
|
+
Cucumber::Rake::Task.new(:cucumber, 'Run features that should pass') do |t|
|
7
|
+
t.cucumber_opts = '--color --tags ~@wip --strict'
|
8
|
+
end
|
9
|
+
|
10
|
+
require 'rake/clean'
|
11
|
+
|
12
|
+
task test: ['cucumber']
|
13
|
+
|
14
|
+
task default: :test
|
data/Readme.md
ADDED
@@ -0,0 +1,64 @@
|
|
1
|
+
# bem_html
|
2
|
+
|
3
|
+
BEM helpers for HTML.
|
4
|
+
|
5
|
+
Utility to convert HTML attributes (`bem-block`, `bem-element`, and `bem-modifiers`) to proper CSS classnames for use in BEM.
|
6
|
+
|
7
|
+
## Purpose
|
8
|
+
|
9
|
+
In large projects, BEM namespacing can get fairly complicated. In Sass and PostCSS, there exist a number of helper methods to simply the creation of nested Block, Element, Modifier classes; however, this plugin provides similar helper methods within HTML itself.
|
10
|
+
|
11
|
+
## Sample Usage
|
12
|
+
|
13
|
+
Say you had a BEM block called "widget" that had the following structure in HTML:
|
14
|
+
|
15
|
+
~~~html
|
16
|
+
|
17
|
+
<div class="widget">
|
18
|
+
<h1 class="widget__heading widget__heading--lime">Heading</h1>
|
19
|
+
<section class="widget__content">
|
20
|
+
<p class="widget__content__first-paragraph">First Paragraph</p>
|
21
|
+
</section>
|
22
|
+
</div>
|
23
|
+
~~~
|
24
|
+
|
25
|
+
With bem-html, you could define that structure instead as the following:
|
26
|
+
|
27
|
+
~~~html
|
28
|
+
<div bem-block="widget">
|
29
|
+
<h1 bem-element="heading" modifiers="[:lime]">Heading</h1>
|
30
|
+
<section bem-element="content">
|
31
|
+
<p bem-element="first-paragraph">First Paragraph</p>
|
32
|
+
</section>
|
33
|
+
</div>
|
34
|
+
~~~
|
35
|
+
|
36
|
+
And this extension would produce the desired HTML.
|
37
|
+
|
38
|
+
Originally, this extension was specifically designed for HAML, where it really shines:
|
39
|
+
|
40
|
+
~~~haml
|
41
|
+
%div{bem:{block: :widget}}
|
42
|
+
%h1{bem:{element: :heading, modifiers: [:lime]}} Heading
|
43
|
+
%section{bem:{element: :content}}
|
44
|
+
%p{bem: {element: "first-paragraph"}} First Paragraph
|
45
|
+
~~~
|
46
|
+
|
47
|
+
## Installation
|
48
|
+
|
49
|
+
Install using `gem bem_html`
|
50
|
+
|
51
|
+
## Usage
|
52
|
+
|
53
|
+
Sample Ruby code:
|
54
|
+
|
55
|
+
~~~ ruby
|
56
|
+
require "bem_html"
|
57
|
+
|
58
|
+
html = IO.read("index.html")
|
59
|
+
BemHtml.parse(html) # -> Will output index.html with bem-* tags converted to CSS names
|
60
|
+
~~~
|
61
|
+
|
62
|
+
## Todo
|
63
|
+
|
64
|
+
* Binary parser for CLI usage
|
data/bem_html.gemspec
ADDED
@@ -0,0 +1,26 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
$:.push File.expand_path("../lib", __FILE__)
|
3
|
+
|
4
|
+
Gem::Specification.new do |s|
|
5
|
+
s.name = "bem_html"
|
6
|
+
s.version = "1.0.1"
|
7
|
+
s.platform = Gem::Platform::RUBY
|
8
|
+
s.authors = ["Andrew Pilsch"]
|
9
|
+
s.email = ["apilsch@tamu.edu"]
|
10
|
+
s.homepage = "https://github.com/oncomouse/bem_html"
|
11
|
+
s.summary = %q{Build BEM class tags on HTML elements from HTML attributes (bem-block, bem-element, and bem-modifiers).}
|
12
|
+
# s.description = %q{A longer description of your extension}
|
13
|
+
|
14
|
+
s.files = `git ls-files`.split("\n")
|
15
|
+
s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
16
|
+
s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
17
|
+
s.require_paths = ["lib"]
|
18
|
+
|
19
|
+
# The version of middleman-core your extension depends on
|
20
|
+
s.add_runtime_dependency("nokogiri", ["~> 1.6"])
|
21
|
+
|
22
|
+
s.license = "ISC"
|
23
|
+
|
24
|
+
# Additional dependencies
|
25
|
+
# s.add_runtime_dependency("gem-name", "gem-version")
|
26
|
+
end
|
data/lib/bem_html.rb
ADDED
@@ -0,0 +1,69 @@
|
|
1
|
+
require 'json'
|
2
|
+
require 'nokogiri'
|
3
|
+
|
4
|
+
class BemHtml
|
5
|
+
def self.parse(content)
|
6
|
+
html_doc = Nokogiri::HTML(content)
|
7
|
+
html_doc.xpath('.//*[@bem-block]|*[@bem-block]').each do |blockNode|
|
8
|
+
currentBlock = blockNode["bem-block"]
|
9
|
+
blockNode.attributes["bem-block"].remove
|
10
|
+
if(not blockNode['class'])
|
11
|
+
blockNode['class'] = ""
|
12
|
+
end
|
13
|
+
blockNode['class'] += " #{currentBlock}"
|
14
|
+
nextBlock = [currentBlock]
|
15
|
+
if(blockNode.attributes["bem-modifiers"])
|
16
|
+
JSON.parse(blockNode.attributes["bem-modifiers"].value.gsub(/\:(\w+)/,'"\1"')).each do |modifier|
|
17
|
+
nextBlock.push("#{currentBlock}--#{modifier}")
|
18
|
+
blockNode['class'] += " #{currentBlock}--#{modifier}"
|
19
|
+
end
|
20
|
+
blockNode.attributes["bem-modifiers"].remove
|
21
|
+
end
|
22
|
+
processingQueue = [[nextBlock, blockNode.children]]
|
23
|
+
while processingQueue.length > 0
|
24
|
+
topQueue = processingQueue.shift
|
25
|
+
currentBlock = topQueue[0]
|
26
|
+
nodes = topQueue[1]
|
27
|
+
nodes.each do |node|
|
28
|
+
next if not node.attributes
|
29
|
+
next if node.attributes["bem-block"]
|
30
|
+
next if not node.attributes["bem-element"]
|
31
|
+
|
32
|
+
if(not node['class'])
|
33
|
+
node['class'] = ""
|
34
|
+
end
|
35
|
+
|
36
|
+
element = node.attributes["bem-element"]
|
37
|
+
node.attributes["bem-element"].remove
|
38
|
+
if(currentBlock.respond_to? :push)
|
39
|
+
nextBlock = currentBlock.map do |cb|
|
40
|
+
node['class'] += " #{cb}__#{element}"
|
41
|
+
"#{cb}__#{element}"
|
42
|
+
end
|
43
|
+
else
|
44
|
+
nextBlock = "#{currentBlock}__#{element}"
|
45
|
+
node['class'] += " #{nextBlock}"
|
46
|
+
end
|
47
|
+
|
48
|
+
if(node.attributes["bem-modifiers"])
|
49
|
+
JSON.parse(node.attributes["bem-modifiers"].value.gsub(/\:(\w+)/,'"\1"')).each do |modifier|
|
50
|
+
if(currentBlock.respond_to? :push)
|
51
|
+
currentBlock.each do |cb|
|
52
|
+
node['class'] += " #{cb}__#{element}--#{modifier}"
|
53
|
+
nextBlock.push("#{cb}__#{element}--#{modifier}")
|
54
|
+
end
|
55
|
+
else
|
56
|
+
node['class'] += " #{currentBlock}__#{element}--#{modifier}"
|
57
|
+
end
|
58
|
+
end
|
59
|
+
node.attributes["bem-modifiers"].remove
|
60
|
+
end
|
61
|
+
if(node.children.length > 0)
|
62
|
+
processingQueue.push([nextBlock, node.children])
|
63
|
+
end
|
64
|
+
end
|
65
|
+
end
|
66
|
+
end
|
67
|
+
html_doc.to_s
|
68
|
+
end
|
69
|
+
end
|
metadata
ADDED
@@ -0,0 +1,67 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: bem_html
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 1.0.1
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Andrew Pilsch
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2016-07-02 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: nokogiri
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - "~>"
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '1.6'
|
20
|
+
type: :runtime
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - "~>"
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '1.6'
|
27
|
+
description:
|
28
|
+
email:
|
29
|
+
- apilsch@tamu.edu
|
30
|
+
executables: []
|
31
|
+
extensions: []
|
32
|
+
extra_rdoc_files: []
|
33
|
+
files:
|
34
|
+
- ".gitignore"
|
35
|
+
- Gemfile
|
36
|
+
- Rakefile
|
37
|
+
- Readme.md
|
38
|
+
- bem_html.gemspec
|
39
|
+
- features/support/env.rb
|
40
|
+
- lib/bem_html.rb
|
41
|
+
homepage: https://github.com/oncomouse/bem_html
|
42
|
+
licenses:
|
43
|
+
- ISC
|
44
|
+
metadata: {}
|
45
|
+
post_install_message:
|
46
|
+
rdoc_options: []
|
47
|
+
require_paths:
|
48
|
+
- lib
|
49
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
50
|
+
requirements:
|
51
|
+
- - ">="
|
52
|
+
- !ruby/object:Gem::Version
|
53
|
+
version: '0'
|
54
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
55
|
+
requirements:
|
56
|
+
- - ">="
|
57
|
+
- !ruby/object:Gem::Version
|
58
|
+
version: '0'
|
59
|
+
requirements: []
|
60
|
+
rubyforge_project:
|
61
|
+
rubygems_version: 2.5.1
|
62
|
+
signing_key:
|
63
|
+
specification_version: 4
|
64
|
+
summary: Build BEM class tags on HTML elements from HTML attributes (bem-block, bem-element,
|
65
|
+
and bem-modifiers).
|
66
|
+
test_files:
|
67
|
+
- features/support/env.rb
|