-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
10 changed files
with
154 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| # Scoped CSS | ||
|
|
||
| 单篇文章的样式文件应该只应用到文章本身，而不应该影响到其它文章。 | ||
| 编写样式的时候，不应该手动限制样式为当前文章标签，这样会有较大的心智负担。 | ||
|
|
||
| 比较，文章里面可以这样写： | ||
|
|
||
| ```html | ||
| <style> | ||
| table { | ||
| min-width: 100px; | ||
| } | ||
| </style> | ||
| ``` | ||
|
|
||
| 当把多篇文章显示在同一个页面下时，会影响到所有表格，这种行为是不预期的。 | ||
| 所以应该限定一下范围（scope），比如改写成如下形式： | ||
|
|
||
| ```html | ||
| <style> | ||
| article#123 table { | ||
| min-width: 100px; | ||
| } | ||
| </style> | ||
| ``` | ||
|
|
||
| 把其范围限制到只对文章（编号为 123）有效。 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| package scoped_css | ||
|
|
||
| import "testing" | ||
|
|
||
| func TestAddScope(t *testing.T) { | ||
| testCases := []struct { | ||
| scope string | ||
| before string | ||
| after string | ||
| }{ | ||
| { | ||
| scope: `article`, | ||
| before: ` | ||
| table, tr td { | ||
| min-width: 100px; | ||
| } | ||
| `, | ||
| after: `article table,article tr td{min-width:100px;}`, | ||
| }, | ||
| } | ||
| for i, tc := range testCases { | ||
| output, err := addScope(tc.before, tc.scope) | ||
| if err != nil { | ||
| t.Errorf(`Error %d: %v`, i, err) | ||
| continue | ||
| } | ||
| if output != tc.after { | ||
| t.Errorf("Not Equal: %d:\n%s\n%s", i, output, tc.after) | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| package scoped_css | ||
|
|
||
| import ( | ||
| "io" | ||
|
|
||
| "github.com/PuerkitoBio/goquery" | ||
| "github.com/tdewolff/parse/v2" | ||
| "github.com/tdewolff/parse/v2/css" | ||
| "golang.org/x/net/html" | ||
| ) | ||
|
|
||
| func New(scope string) *ScopedCSS { | ||
| return &ScopedCSS{ | ||
| scope: scope, | ||
| } | ||
| } | ||
|
|
||
| type ScopedCSS struct { | ||
| scope string | ||
| } | ||
|
|
||
| func (p *ScopedCSS) TransformHtml(doc *goquery.Document) error { | ||
| var err error | ||
| doc.Find(`style`).Each(func(i int, s *goquery.Selection) { | ||
| if er := p.addScope(s); er != nil { | ||
| err = er | ||
| } | ||
| }) | ||
| return err | ||
| } | ||
|
|
||
| func (p *ScopedCSS) addScope(s *goquery.Selection) error { | ||
| if first := s.Nodes[0].FirstChild; first != nil && first.Type == html.TextNode { | ||
| raw := first.Data | ||
| scoped, err := addScope(raw, p.scope) | ||
| if err != nil { | ||
| return err | ||
| } | ||
| first.Data = scoped | ||
| } | ||
| return nil | ||
| } | ||
|
|
||
| // 可以参考：https://github.com/tdewolff/parse/blob/master/css/parse_test.go | ||
| func addScope(raw string, scope string) (string, error) { | ||
| p := css.NewParser(parse.NewInputString(raw), false) | ||
| output := "" | ||
| for { | ||
| grammar, _, data := p.Next() | ||
| data = parse.Copy(data) | ||
| // log.Println(grammar, string(data), p.Values()) | ||
| if grammar == css.ErrorGrammar { | ||
| if err := p.Err(); err != io.EOF { | ||
| return ``, err | ||
| } | ||
| break | ||
| } | ||
| if grammar == css.AtRuleGrammar || grammar == css.BeginAtRuleGrammar || grammar == css.QualifiedRuleGrammar || grammar == css.BeginRulesetGrammar || grammar == css.DeclarationGrammar || grammar == css.CustomPropertyGrammar { | ||
| if grammar == css.DeclarationGrammar || grammar == css.CustomPropertyGrammar { | ||
| data = append(data, ":"...) | ||
| } | ||
| if grammar == css.QualifiedRuleGrammar || grammar == css.BeginRulesetGrammar { | ||
| data = append(data, scope...) | ||
| data = append(data, ' ') | ||
| } | ||
| for _, val := range p.Values() { | ||
| data = append(data, val.Data...) | ||
| } | ||
| if grammar == css.BeginAtRuleGrammar || grammar == css.BeginRulesetGrammar { | ||
| data = append(data, "{"...) | ||
| } else if grammar == css.AtRuleGrammar || grammar == css.DeclarationGrammar || grammar == css.CustomPropertyGrammar { | ||
| data = append(data, ";"...) | ||
| } else if grammar == css.QualifiedRuleGrammar { | ||
| data = append(data, ","...) | ||
| } | ||
| } | ||
| output += string(data) | ||
| } | ||
| return output, nil | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters